@charset "utf-8";
/* CSS Document */
*{color: #373f50;}
.margin_top{
	margin-top:83px;
}
.gray_bg{
    background-color: #f5f5f5;
}
@media (min-width: 1400px){
.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1260px;
}
}

/*選單*/
header .navbar {
	padding:0.4rem 0.75rem;
}
header .navbar-brand-img {
    max-height: 3.75rem;
    width: auto;
}
header .navbar-light .navbar-nav .nav-link {
    color: #2b3243;
	padding-right: 1.25rem;
    padding-left: 1.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #4f586a;
}
header .navbar-light .navbar-nav .active>.nav-link, 
header .navbar-light .navbar-nav .nav-link.active, 
header .navbar-light .navbar-nav .nav-link.show, 
header .navbar-light .navbar-nav .show>.nav-link,
header .navbar-light .navbar-nav .nav-link:hover {
    color: #33a6e8;
}
header  .navbar-light .navbar-toggler {
	border:0;
	padding:0 0.25rem;
}
header button:focus{
	outline:0;
}
@media screen and (max-width: 992px) {
header .navbar-light .navbar-nav .nav-link{
	background-color:#f6f9fc;
	margin-bottom:0.75rem;
	border-radius:4px;
	padding:0.75rem 1.25rem;
}	
}

/*表尾*/
footer{
	background-color:#2b3445;
}
footer a{
	color:#b5b8be;
}
footer a:hover{
	color:#fff;
	text-decoration:none;
}
footer .infor_pad{
	padding-top:2.5rem;
	padding-bottom:1.5rem;
}
footer h3{
	font-size:1.4rem;
	font-weight:bold;
	color:#fff;
	margin-bottom:0.8rem;
}
footer .infor{
	overflow:hidden;
	margin:0; 
	padding:0;
	list-style:none;
	font-size:0.95rem;
	clear:both;
	color:#b5b8be;
}
footer .infor li{
	float:left;
	padding-right:2.5rem;
    padding-bottom:0.5rem;
	color:#b5b8be;
}
footer .infor li .fa{
	margin-right:0.3rem;
	color:#b5b8be;
}
footer .infor li .fa-mobile,
footer .infor li .fa-map-marker{
	font-size:1.2rem;
}
footer .bottom{
	text-align:left;
	border-top:1px solid #454d5c;
	font-size:0.85rem;
	padding:1.5rem 0 2.5rem 0;
	color:#b5b8be;
}

#goTop {
	width: 3.3rem;
	height: 3.3rem;
	line-height: 3.3rem;
	right: 2.5rem;
    bottom: 1.5rem;
	color: #FFF;
    font-size: 1rem;
	font-weight: 400;
	text-align: center;
	background-color:rgba(32,162,229,0.7) ;
	border-radius:50%;
    cursor: pointer;
    position: fixed;
	display: none;
	z-index: 999;
	font-family: "微軟正黑體", "Microsoft JhengHei";
}
#goTop i {
    position: absolute;
    width: 3.3rem;
    left: 0;
    top: 0.6rem;
    font-size: 1.75rem;
    color: #FFF;
}
#goTop:hover {
	background-color: #2780c1;
}
@media (max-width: 767px) {
footer .infor_pad{
    padding: 2.5rem 1rem 2rem 1rem;
}
footer .infor li{
	float:none;
	display:block;
	padding-right:0;
}
footer .infor li:last-child{
	padding-bottom:0;
}
footer .infor li .fa{
	width:15px;
}
footer .bottom{
	padding:1.5rem 1rem 2rem 1rem;
}
#goTop {
	width: 2.75rem;
	height: 2.75rem;
	right: 1rem;
	bottom: 1rem;
}
#goTop i {
    width: 2.75rem;
    top: 0.45rem;
    font-size: 1.5rem;
}
}


/*輪播廣告*/
#carousel_banner .carousel-caption {
	bottom:32%;
}
#carousel_banner .carousel-caption h2{
	font-size:4rem;
	color:#fff;	
}
#carousel_banner .carousel-caption h2 span{
	color:#a5cd39;
}
#carousel_banner .carousel-caption p{
	color:#fff;
	font-size:1.75rem;
	padding-top:0.5rem;
}
@media screen and (max-width: 1200px) {
#carousel_banner .carousel-caption {
	bottom:25%;
}
#carousel_banner .carousel-caption h2{
	font-size:3rem;
}
#carousel_banner .carousel-caption p{
	font-size:1.5rem;
	padding-top:0.3rem;
}
}
@media screen and (max-width: 992px) {
#carousel_banner .carousel-caption {
	bottom:20%;
}
#carousel_banner .carousel-caption h2{
	font-size:2.5rem;
}
#carousel_banner .carousel-caption p{
	font-size:1.25rem;
	padding-top:0;
}	
}
@media screen and (max-width: 767px) {
#carousel_banner .carousel-item img{
	height: 300px;
	object-fit: cover;
} 
#carousel_banner .carousel-caption {
	bottom:15%;
}
#carousel_banner .carousel-caption h2{
	font-size:2rem;
}
#carousel_banner .carousel-caption p{
	font-size:1.1rem;
}	
}

/*首頁_產品*/
.home_product {
    text-align: center;
    color: #fff;
	padding:2.5rem 1.75rem 2.75rem 1.75rem;
}
.home_product img,.home_product h3,.home_product p{
	transition: all 0.4s ease;
}
.home_product:hover img,.home_product:hover h3,.home_product:hover p{
    -webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}
.home_product_bg0{
	background-color:#419be0;
}
.home_product_bg1{
	background-color:#f2b346;
}
.home_product_bg2{
	background-color:#26c1b8;
}
.home_product_bg3{
	background-color:#ec7599;
}
.home_product .fa{
	color:#fff;
	font-size:3rem;
}
.home_product h3 {
    margin: 0;
    font-size: 1.6rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
	color:#fff;
}
.home_product p {
    padding: 0;
    line-height: 1.5rem;
    font-size: 1rem;
	color: #fff;
}
.home_product .more{
	padding-top:0.5rem;
}
.home_product a{
	font-size:0.9rem;
	color:#fff;
	border:1px solid #fff;
	background-color:transparent;
	border-radius:3px;
	padding:0.4rem 1.5rem;
	transition: all 0.3s;
}
.home_product_bg0 a:hover{
	background-color:#fff;
	color:#419be0;
	text-decoration:none;
}
.home_product_bg1 a:hover{
	background-color:#fff;
	color:#f2b346;
	text-decoration:none;
}
.home_product_bg2 a:hover{
	background-color:#fff;
	color:#26c1b8;
	text-decoration:none;
}
.home_product_bg3 a:hover{
	background-color:#fff;
	color:#ec7599;
	text-decoration:none;
}

@media screen and (max-width: 767px) {
.home_product {
	padding:1.25rem 0rem 2.25rem 0rem;
}
.home_product h3 {
    font-size: 1.35rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.home_product p {
    line-height: 1.4rem;
    font-size: 0.9rem;
}
}



/*首頁_6大優勢*/
.advantage{
	padding-top:7rem;
	padding-bottom:8rem;
}
.advantage h2{
	text-align:center;
	margin:0;
	font-size:2.5rem;
	font-weight:bold;
}
.advantage h2:after{
    z-index: 2;
    content: " ";
    display: block;
    padding-top: 0.5rem;
    border-bottom: 1px solid #373f50;
    width: 270px;
    margin: 0 auto;
}
.advantage p{
	text-align:center;
	font-size:1.25rem;
	margin-top:1rem;
}
.advantage .advantage_item{
	padding-top:4rem;
}
.advantage .advantage_item .icon{
	background-color:#33a6e8;
	border-radius: 50%;
	width:5rem;
	height:5rem;
	line-height:5.5rem;
	text-align:center;
	color:#fff;
	flex-shrink:0;/*空間不被壓縮*/
}
.advantage .advantage_item .icon .fa{
	transition:all 0.4s ease;
	color:#fff;
	font-size:2rem;
}
.advantage .advantage_item:hover .icon .fa{
	transform:rotate(360deg);
}
.advantage .advantage_item .content{
	/*width:calc(100% - 5rem);*/
	padding-left: 1rem;
}
.advantage .advantage_item .content h4{
	margin:0;
	font-size:1.2rem;
	font-weight:bold;	
}
.advantage .advantage_item .content p{
	margin:0;
	padding:0;
	padding-top:0.5rem;
	text-align:left;
	font-size:1rem;
	color:#596173;
	line-height:1.6rem;
}

@media screen and (max-width: 767px) {
.advantage{
	padding-top:4rem;
	padding-bottom:4.5rem;
}
.advantage h2{
	font-size:2rem;
}
.advantage h2:after{
    width: 220px;
}
.advantage p{
	font-size:1rem;
	margin-top:1rem;
}
.advantage .advantage_item{
	padding-top:1.75rem;
}
.advantage .advantage_item .icon{
	width:4.5rem;
	height:4.5rem;
	line-height:5rem;
}
.advantage .advantage_item .content{
	width:calc(100% - 5rem);
	padding-left: 1rem;
	padding-top:0.5rem;
}	
}


/*首頁_產品優勢*/
.advantage_product{
    background-color: #3ba3df;
    background: -webkit-linear-gradient(-30deg, #3396db 0%, #5ddbda 100%);
    background: -moz-linear-gradient(-30deg, #3396db 0%, #5ddbda 100%);
    background: -ms-linear-gradient(-30deg, #3396db 0%, #5ddbda 100%);
	text-align:center;
    padding: 8rem 6rem;
    position: relative;
}
.advantage_product:before {
    content: '';
    position: absolute;
    z-index: 0;
    background: url(../images_ittms/advantage_homebg.png) no-repeat;
	background-size:cover;
	background-position:center;
    opacity: 0.6;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.advantage_product h2{
    position: relative;
    z-index: 999;
	text-align:center;
	margin:0;
	font-size:2.5rem;
	font-weight:bold;
    color: #fff;
    padding-bottom: 3.5rem;
}
.advantage_product .d-inline-flex{
    width: 25%;
    padding-left: 15px;
    padding-right: 15px;
}
.advantage_product .pro_box{
    background-color: rgba(255,255,255,1);
    border-radius: 10px;
    width: 100%;
}
.advantage_product .pro_box .top{
    font-size: 1.6rem;
    color: #2cc3cf;
    font-weight: 600;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #33a6e8;
}
.advantage_product .pro_box .top span{
    color: #33a6e8;
}
.advantage_product .pro_box .con{
    padding: 1.5rem 2rem;
}
.advantage_product .pro_box .con .con_item{
    padding: 0.4rem 0;
}
.advantage_product .pro_box .con .con_item .num{
    width: 30px;
    height: 28px;
    line-height: 28px;
/*    background-color: #5dbcf2;*/
    color: #fff;
    font-size: 1rem;
    border-radius: 50%;
    text-align: center;
    letter-spacing: 0.2px;
}
.advantage_product .pro_box .con .con_item .fa{
    color: #33a6e8;
    font-size: 1.5rem;
}
.advantage_product .pro_box .con .con_item .desc{
    width: calc(100% - 35px);
    padding: 0rem 0.5rem;
    color: #444;
    letter-spacing: 0.5px;
    text-align: left;
    font-size: 1rem;
}
@media screen and (max-width: 1200px) {
.advantage_product{
    padding: 7rem 6rem 6rem 6rem;
}
.advantage_product .d-inline-flex{
    width: 50%;
}
.advantage_product .pro_box {
    margin-bottom: 2rem;
}
}
@media screen and (max-width: 767px) {
.advantage_product{
	padding:4rem 0 3.5rem 0;
}
.advantage_product .container-fluid {
    max-width: 540px;   
}
.advantage_product h2 {
    font-size: 2rem;
    padding-bottom: 2.5rem;
}
.advantage_product .d-inline-flex{
    width: 100%;
}
}    

/*首頁_最新案例*/
.case{
	background: url(../images_ittms/starsky.jpg) no-repeat;
	background-size:cover;
	background-position:center;
	text-align:center;
	padding-top:6rem;
	padding-bottom:6rem;
	height:310px;
}
.case h2{
	text-align:center;
	margin:0;
	font-size:2.5rem;
	font-weight:bold;
	color: #fff;
}
.case h2:after{
   z-index: 2;
    content: " ";
    display: block;
	padding-top: 0.5rem;
    border-bottom: 1px solid #fff;
    width: 160px;
    margin: 0 auto;
}
.case p{
	color:#fff;
	font-size:1.25rem;
	margin-top:1rem;
}
.case_bg{
	background-color:#f4f5f7;
	padding-top:4.5rem;
	padding-bottom:5rem;
}
.case_item {
   width: 100%;
   height: 100%;
   position: relative;
   text-align: center;
   cursor: default;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.case_item img {
    -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.case_caption {   
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;    
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);    
    -webkit-transition: -webkit-transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
	border-radius: 0.25rem;
}
.case_item:hover .case_caption {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    background-color: rgba(40, 171, 227, 0.9);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.case_caption h4 {
   margin:0;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 1.35rem;
   font-weight:bold;
   top: 30%;
}
.case_caption a i {
    padding: 0.9rem;
    font-size: 1.5rem;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border:2px solid #fff;
	color:#fff;
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translateX(-50%);
}
.case_caption a:hover i {
	background-color:#fff;
	color:#33a6e8;
}
.case_btn{
	text-align:center;
	margin-top:3.5rem;
}
.case_btn a{
	border-radius: 30px;
	border:2px solid #33a6e8;
	color:#33a6e8;
	padding:12px 32px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.case_btn a:hover{
	background-color:#33a6e8;
	color:#fff;
	text-decoration:none;
}
@media screen and (max-width: 767px) {
.case{
	padding-top:4rem;
	padding-bottom:4rem;
	height:240px;
}
.case h2{
	font-size:2rem;
}
.case h2:after{
    width: 130px;
}
.case p{
	font-size:1rem;
	margin-top:1rem;
}
.case_bg{
	padding-top:2rem;
	padding-bottom:3.5rem;
}
.case_box{
    padding-bottom: 1.5rem;
}
.case_btn{
	margin-top:1.5rem;
}
}


.title_box:before {
    content: '';
    position: absolute;
    z-index: 99;
    background: rgba(7, 12, 34, 0.7);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.title_box {	
	background-size:cover;
	background-position:right;
	min-height:250px;
	position:relative;
	overflow:hidden;
}
.title_box h2 {
	position: relative;
	z-index: 999;
	text-align:center;
	font-size:2.5rem;
	font-weight:bold;
	color: #fff;
	padding-top:6rem;
}
@media screen and (max-width: 767px) {
.title_box {
    min-height:200px;
}
.title_box h2 {
    padding-top:5rem;
    font-size:2rem;
}
}

/*關於我們*/
.about_pic {	
    background:url(../images_ittms/bg_about.jpg) no-repeat center;
}
.about_con{
	padding-top:4.5rem;
	padding-bottom:10rem;
    font-size: 1.05rem;
    line-height:2rem;
}
.about_con h3{
    font-size: 1.4rem;
    line-height: 2rem;
    margin-bottom:0.75rem;
    color: #33a6e8;
    font-weight: 600;
}
.about_con p{
    color: #666;
    margin-bottom: 2.5rem;
}
.about_con h2.history{
    text-align: center;
    font-weight:bold;
	padding-top:3rem;
	padding-bottom:2rem;
    font-size: 2.5rem;
}
.timeline{
	width:100%;
	position:relative;
}
.timeline:before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 43px;
    width: 2px;
	height: 100%;
	background-color:#dadada;
}
.timeline ul{
	margin:0;
	padding:0;
}
.timeline li{
	list-style:none;
	display:block;
	padding-bottom:7rem;
}
.timeline li:last-child{
	padding-bottom:0px;
}
.timeline .year{
	background-color:#33a6e8;
	position: absolute;
    left: 0px;
	border-radius: 50%;
    width: 4.8rem;
    height: 4.8rem;
	line-height:4.8rem;
	text-align:center;
    color: #fff;
	font-size:1.5rem;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;   
}
.timeline .history_left{
	width:100%;
	float:left;
	padding-left:6.5rem;
	padding-right:0px;
    padding-top:1.5rem;
	text-align:left;
    font-size:1.05rem;
	line-height:1.5rem;
}
.timeline .history_right{
	width:50%;
	float:right;
	padding-left:4rem;
}
@media screen and (max-width: 767px) {
.about_con{
	padding-top:2.5rem;
	padding-bottom:8rem;
    font-size: 1rem;
    line-height:1.75rem;
}
.about_con h3{
    font-size: 1.3rem;
}
.about_con h2.history{
	padding-top:2rem;
	padding-bottom:1.5rem;
    font-size: 2rem;
}
.timeline:before {
    left: 32px;
}
.timeline li {
    padding-bottom: 6rem;
}
.timeline .year{
    width: 4rem;
    height: 4rem;
	line-height:4rem;
	font-size:1.2rem;  
}
.timeline .history_left {
    padding-left: 5rem;
    padding-top: 0.5rem;
    font-size:1rem;
	line-height:1.4rem;
}
}


/*客戶案例*/
.work_pic {	
    background:url(../images_ittms/bg_work.jpg) no-repeat center;
}
.work_con{
	padding-top:4.5rem;
	padding-bottom:3rem;
}
.work_con h3{
    background-color: #fff;
	margin:0;
    padding: 1.2rem 1.2rem 1.5rem 1.2rem;
	font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
	color:#373f50;
}
.work_con a:hover,.work_con a:focus{
	text-decoration:none;
}
.work_con a:hover h3,.work_con a:focus h3{
	color:#33a6e8;
}
.work_pad{
	padding-bottom:2rem;
}
.work_item {
   width: 100%;
   /*height: 100%;*/
   position: relative;
   text-align: center;
   cursor: default;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}
.work_item img {
	border:0px solid #e4e4e4;
    -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.work_caption {   
   width: 100%;
   height: 100%;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;    
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);    
    -webkit-transition: -webkit-transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
}
.work_con a:hover .work_caption {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    background-color: rgba(40, 171, 227, 0.9);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
	cursor:pointer;
}
.work_con a .work_caption i {
    padding: 15px;
    font-size: 22px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border:2px solid #fff;
	color:#fff;
    position: absolute;
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor:pointer;
}
.work_con a .work_caption i:hover {
	background-color:#fff;
	color:#33a6e8;
}
@media screen and (max-width: 767px) {
.work_con{
	padding-top:2.5rem;
	padding-bottom:0.5rem;
}    
}


/*服務項目*/
.service_pic {	
    background:url(../images_ittms/bg_service.jpg) no-repeat center;
}
.service_con{
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    text-align: center;
}
.service_con h3{
    margin: 0;
	padding:0 0 2rem 0;
	font-size: 2.1rem;
    font-weight: 600;
    text-align: center;
}
.service_con .content{
    text-align: center;
    font-size: 1.2rem;
    line-height: 2rem;
}
.service_con .service_row{
    padding: 1.5rem 0;
}
.service_item{
    padding:2rem 1.5rem;
}
.service_item.bg_white{
    background-color: #fff;
    border-radius: 15px;
    margin: 1rem 0;
}
.service_item .circle{
    margin: auto;
    border-radius: 50%;
    width: 5.8rem;
    height: 5.8rem;
    line-height: 5.8rem;
    text-align: center;
    color: #fff;
}
.service_item .circle_bg1{
    background-color: #65bdf0;
}
.service_item .circle_bg2{
    background-color: #8bd27a;
}
.service_item .circle_bg3{
    background-color: #f3bc5b;
}
.service_item h4{
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
    padding-top: 1.3rem;
    padding-bottom: 0.95rem;
}
.service_item p{
    margin: 0;
    font-size: 1rem;
    color: #888;
    line-height: 1.75rem;
}
.service_adv_bg{
    background-color: #33a6e8;
}
.service_adv {
    background: url(../images_ittms/bg_advantage.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-size: cover;
}
.service_adv h3 {
    margin: 0;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 2px;
    line-height: 500px;
}
.service_adv_con {
    color: #fff;
    padding: 4rem 5rem 0px 5rem;
    min-height: 500px;
}
.service_adv_con li {
    list-style-type: none;
    line-height: 32px;
    padding-top: 8px;
    padding-left: 25px;
    padding-bottom: 40px;
    color: #fff;
}
.service_adv_con .fa_circle {
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 43px;
    height: 43px;
    line-height: 43px;
}
@media screen and (max-width: 992px) {
.service_adv h3 {
    font-size: 2.3rem;
    line-height: 250px;
}
.service_con .service_row{
    padding-bottom: 0;
}
.service_item{
    padding:2rem 1rem;
}   
}
@media screen and (max-width: 767px) {
.service_con {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.service_con .service_row {
    padding-top: 0;
    padding-bottom: 1.5rem;
}
.service_con h3 {
    font-size: 1.75rem;
    padding-bottom: 1.5rem;
}
.service_con .content {
    font-size: 1.05rem;
    padding-bottom: 1rem;
}
.service_item{
    padding: 1.75rem 1rem;
}
.service_item h4 {
    font-size: 1.2rem;
}
}
@media screen and (max-width: 640px) {
.service_adv h3 {
    font-size: 2.1rem;
}
.service_adv_con {
    padding: 2rem 2rem 0px 2rem;
}
}


/*方案價格*/
.project_pic {	
    background:url(../images_ittms/bg_project.jpg) no-repeat center;
}
.project_con .project_box{
    padding-top: 4rem;
    padding-bottom: 5rem;
}
.project_con .project_box:first-child{
    padding-bottom: 1rem;
}
.project_con h3{
    margin: 0;
	padding:0 0 2rem 0;
	font-size: 2rem;
    font-weight: 600;
    text-align: center;
}
.project_con .plan .title{
    margin: 0;
    background-color: #3ba3df;
    padding: 0.8rem;
    text-align: center;
    font-size: 1.4rem;
    color: #fff;
}
.project_con .plan .plan_con{
    background-color: #fff;
    padding: 1.5rem;
    text-align: center;
    font-size: 1.75rem;
    color: #e84185;
    font-family: Arial;
}
.project_con .plan .plan_con .price{
    padding: 0 0.5rem;
    font-size: 3.2rem;
    font-weight: 600;
    color: #e84185;
}
.project_con .plan .desc{
    padding-top: 0.75rem;
    font-size: 0.95rem;
    color: #888;
}
.project_con .plan .desc_box{
    margin-top: 1rem;
    background-color: #fff9ef;
    padding: 1.5rem 2rem;
    font-size: 0.95rem;
    color: #ee7c02;
    line-height: 1.5rem;
}

.project_feature{
    background-color: #3ba3df;
    background: -webkit-linear-gradient(-30deg, #3396db 0%, #5ddbda 100%);
    background: -moz-linear-gradient(-30deg, #3396db 0%, #5ddbda 100%);
    background: -ms-linear-gradient(-30deg, #3396db 0%, #5ddbda 100%);
    padding-top: 6rem;
    padding-bottom: 4rem;
}
.project_feature h3{
    margin: 0;
	padding:0 0 3rem 0;
	font-size: 2rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
}
.project_feature .feature_item{
	padding: 1.5rem;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom: 2.5rem;
}
.project_feature .feature_item .icon{
	text-align:center;
	color:#e84185;
    /*flex-shrink:0;空間不被壓縮*/
}
.project_feature .feature_item .icon .fa{
	transition:all 0.4s ease;
	color:#e84185;
	font-size:2rem;
}
.project_feature .feature_item .content{
	/*width:calc(100% - 5rem);*/
	padding-left: 1rem;
}
.project_feature .feature_item .content h4{
	margin:0;
	font-size:1.3rem;
	font-weight:bold;	
}
.project_feature .feature_item .content p{
	margin:0;
	padding:0;
	padding-top:0.5rem;
	text-align:left;
	font-size:1rem;
	color:#686d79;
	line-height:1.6rem;
}

.project_con .call{
    padding-top: 5rem;
    text-align: center;
    color: #e84185;
    font-size: 2rem;
}
.project_con .call i{
    color: #e84185;
}
.project_con .call .btn_contact{
    padding-top: 2rem;
}
.project_con .call .btn_contact a{
    border-radius: 1.8rem;
    color: #fff;
    background-color:#e84185;
    padding: 0.9rem 3.2rem;
    font-size: 1.2rem;
    font-weight: 600;
}
.project_con .call .btn_contact a:hover{
    border: 2px solid #e84185;
    background-color: #fff;
    color: #e84185;
    text-decoration: none;
}
.project_con .plan_list {
    background-color: #fff;
    width: 100%;
    font-size: 1.05rem;
}
.project_con .plan_list tr {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
}
.project_con .plan_list tbody tr:last-child {
    border-bottom: 0;
}
.project_con .plan_list th,
.project_con .plan_list td{ 
    display: flex;
    -webkit-box-align: center;
    justify-content: center;
    text-align: center;
    align-items:center;
    line-height: 20px;
    padding: 1rem 0.5rem;
    border-right: 1px solid #e5e5e5;
    width: 21%;
}
.project_con .plan_list th{
    background-color: #3ba3df;
    color: #fff;
}
.project_con .plan_list th:nth-child(1), 
.project_con .plan_list td:nth-child(1) {
    width: 16%;
}
@media screen and (max-width: 767px) {
.project_con .project_box {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}
.project_con h3{
    font-size: 1.75rem;
    padding-bottom:1.5rem;
}
.project_con .plan_pad {
    padding-top: 4rem;
}
.project_con .plan .title {
    padding: 0.75rem;
    font-size: 1.2rem;
}
.project_con .plan .plan_con .price {
    font-size: 2.5rem;
}
.project_feature {
    padding-top: 4.5rem;
    padding-bottom: 3.5rem;
}
.project_feature h3{
    padding-bottom:2.5rem;
}
.project_feature .feature_item {
    margin-bottom: 1.5rem;
}
.project_con .call{
    padding-top: 3rem;
    font-size: 1.6rem;
}
.project_con .call .btn_contact {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.project_con .call .btn_contact a {
    padding: 0.8rem 2.5rem;
    font-size: 1rem;
}
}

/*網頁圖片設計費用*/
.design_pic {	
    background:url(../images_ittms/bg_project.jpg) no-repeat center;
}
.design_con .design_box{
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.design_con h3{
    margin: 0;
	padding:0 0 2rem 0;
	font-size: 2rem;
    font-weight: 600;
    text-align: center;
}
.design_con .red{
    text-align: center;
    color: #E75B5D;
    font-size: 1.2rem;
    padding: 0.5rem;
    margin:0 0.75rem 2rem 0.75rem;
    background-color: #fcf3d0;
}
.design_con .design_feature .feature_item{
    text-align: center;
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
    padding: 2rem 1rem;
}
.design_con .design_feature .feature_item h4{
	margin:0;
    padding-top: 1.5rem;
	font-size: 1.3rem;
    font-weight: bold;
    color: #555;
}
.design_con .design_fee .d-inline-flex {
    padding-left: 25px;
    padding-right: 25px;
}
.design_con .design_fee .fee_box{
    width: 100%;
    box-shadow: 0 0 15px #dfdfdf;
    background-color: #fff;
    margin-bottom: 3.5rem;
}
.design_con .design_fee .fee_box h4{
    margin:0;
    padding: 1.2rem 2rem;
	color:#fff;
	font-size:1.6rem;
	font-weight:500;
    text-align: left;
    background-color: #44AFEC;
}
.design_con .design_fee .fee_box .fee{
    float: right;
    display: inline-block;
    font-size: 2rem;
    color: #fff;
    font-family: sans-serif;
}
.design_con .design_fee .fee_box .small{
    font-size: 1.2rem;
    color: #fff;
}
.design_con .design_fee .fee_box .pic_box{
    background-color: #fff;
    padding: 1.5rem;
    text-align: center;
}
.design_con .design_fee .fee_box .pic_box img{
    margin: auto;
    width: 48%;
    padding: 5px;
}
.design_con .design_fee .fee_box .pic_box.pic_box4 img{
    margin: auto;
    width: 100%;
}
@media screen and (max-width: 992px) {
.design_con .red {
    font-size: 1.2rem;
}
.design_con .design_fee .d-inline-flex {
    padding-left: 15px;
    padding-right: 15px;
}
.design_con .design_fee .fee_box {
    margin-bottom: 2.5rem;
}
}
@media screen and (max-width: 767px) {
.design_con .design_box{
    padding-top: 3rem;
    padding-bottom: 1rem;
}
.design_con .design_box:first-child{
    padding-bottom:0;
}
.design_con h3 {
    font-size: 1.75rem;
    padding-bottom: 1.5rem;
}
.design_con .red {
    font-size: 1rem;
    padding: 0.6rem;
}
.design_con .design_feature{
    padding: 0 15px;    
}
.design_con .design_feature .d-inline-flex {
    padding-left: 10px;
    padding-right: 10px;
}
.design_con .design_feature .feature_item h4{
	font-size: 1.2rem;
}
.design_con .design_feature .feature_item {
    margin-bottom: 2rem;
}
.design_con .design_feature .d-inline-flex {
    flex: 0 0 50%;
    max-width: 50%;
}
.design_con .design_fee .d-inline-flex {
    padding-left: 25px;
    padding-right: 25px;
}
.design_con .design_fee .fee_box h4 {
    padding: 1rem 1.5rem;
    font-size: 1.4rem;
}
.design_con .design_fee .fee_box .fee{
    font-size: 1.6rem;
}
.design_con .design_fee .fee_box .pic_box {
    padding: 0.75rem;
    padding: 0.75rem;
}
}


/*製作流程*/
.process_pic {	
    background:url(../images_ittms/bg_process.jpg) no-repeat center;
}
.process_con{
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.process_con h4{
	margin:0;
	color:#33a6e8;
	font-size:19px;
	font-weight:bold;
	padding-bottom:15px;
}
.process_con ol{
	margin:0;
	padding:0;
	padding-left:15px;
	line-height:26px;
}
.process_con li{
	padding-bottom:10px;
}
.process_con .process_pad{
	padding-left:0;
	padding-right:0;
}
.process_con .process_item{
    position: relative;
    text-align: center;
    height: 370px;	
}
.process_con .process_item:before{
	content: '';
    position: absolute;
    top: 140px;
    left: 0;
    width: 100%;
    height: 36px;  
    color: #fff;
}
.process_con .process_bg1:before{
	background-color: #33a6e8;
}
.process_con .process_bg2:before{
	background-color: #26c1b8;
}
.process_con .process_bg3:before{
	background-color: #f0b349;
}
.process_con .process_bg4:before{
	background-color: #ec7599;
}
.process_con .process_item span {
    position: absolute;
    top: 145px;
    left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    font-size: 22px;
	font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    font-weight: 600;
}
.process_con .process_item .text_con {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 180px;
}
.process_con .process_item h4 {
    margin:0;
	font-size: 24px;    
	font-weight:normal;
	padding-bottom:10px;
}
.process_con .process_item .title1 {
	color: #33a6e8;
}
.process_con .process_item .title2 {
	color: #26c1b8;
}
.process_con .process_item .title3 {
	color: #f0b349;
}
.process_con .process_item .title4 {
	color: #ec7599;
}
.process_con .process_item p {
	font-size:15px;
	line-height:26px;
	padding-left:22px;
	padding-right:22px;
	text-align:left;
}
.process_con .process_item .icon_line{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.process_con .process_item .icon_line:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 6px;
	height: 150px;
    transform: translate(-50%, 0 );
    -webkit-transform: translate(-50%, 0 );
}
.process_con .process_item .icon_img{
	position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    width: 95px;
    height: 95px;
	padding-top:17px;
    color: #fff;
    border-radius: 50%;    
}
.process_con .process_item .icon_bg1,.process_con .process_item .icon_bg1:before{
	background-color: #33a6e8;
}
.process_con .process_item .icon_bg2,.process_con .process_item .icon_bg2:before{
	background-color: #26c1b8;
}
.process_con .process_item .icon_bg3,.process_con .process_item .icon_bg3:before{
	background-color: #f0b349;
}
.process_con .process_item .icon_bg4,.process_con .process_item .icon_bg4:before{
	background-color: #ec7599;
}
@media screen and (max-width: 1200px) {
.process_con .process_item {
    height: 400px;
}
.process_con .process_item .text_con {
    height: 210px;
}
}
@media screen and (max-width: 992px) {
.process_con .process_item {
    height: 490px;
}
.process_con .process_item .text_con {
    height: 300px;
}
}
@media screen and (max-width: 767px) {
.process_con{
	padding-top:2.5rem;
	padding-bottom:2.5rem;
}
.process_con .process_item {
    height: 370px;
}
.process_con .process_item .text_con {
    height: 180px;
}
}


/*聯絡我們*/
.contact_overlay {
   width: 100%;
   height: 100%;
   background: rgba(7, 12, 34, 0.7);
}
#contact{
	background:url(../images_ittms/bg_contact.jpg) no-repeat fixed;
	background-size:cover;
	background-position:center;
	background-size: cover;
    color: #fff;
}
#contact .contact_pad{
   padding-top: 6rem;
   padding-bottom: 5rem;
} 
#contact h2{
	position: relative;
    z-index: 999;
	margin:0;
	font-size:2.5rem;
	font-weight:bold;
	color: #fff;
	padding-bottom:1.2rem;
}
#contact p{
    color: #fff;
	line-height:1.5rem;
}
#contact address{
    padding-top: 2rem;
    font-size: 1.2rem;
}
#contact address a{
	color:#fff;
}
#contact address .fa {
	font-size:1rem;
	background: #33a6e8;
    color: #fff;
	border-radius: 50%;
	width: 2.3rem;
	height: 2.3rem;
	line-height: 2.3rem;
	text-align: center;
	margin-top: 2px;
	margin-right: 10px;
}
#contact address .fa-mobile{
	font-size:1.3rem;
}
#contact address .fa-envelope{
	font-size:0.75rem;
}
#contact .contact-form{
    padding-top: 4rem;
}
#contact .form-control{
	border: none;
	border-radius: 0px;
	box-shadow: none;
	margin-bottom: 20px;
	font-size:0.95rem;
	padding: 0.95rem;
}
#contact input{
	height: 50px;
}
#contact .submit{
	background: #33a6e8;
	color: #fff;
	font-size:1.1rem;
	height:3.3rem;
	transition: all 0.3s ease;
}
#contact .submit:hover {
    background: #2780C1;
}
@media screen and (max-width: 767px) {
#contact .contact_pad{
   padding-top: 3rem;
   padding-bottom: 2rem;
}
#contact h2{
    font-size: 2rem;
}
#contact address {
    padding-top: 1rem;
}
#contact .contact-form {
    padding-top: 2rem;
}
}