@import url('http://fonts.googleapis.com/css?family=Nunito:400,300,700');
.pro1-two .col-sm-image-container img { height: 250px;}
.pro6-two .col-sm-image-container img { height: 430px;}
.table-responsive { 
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;}
    .icon-text {text-align:center}
@media screen and (max-width:1200px){
	.device{left:20%;top:-36px;}
	footer li{margin-right:10%;}
	.icon-text .feature-icon {margin-right:0}
}
@media (min-width:992px) and (max-width:1080px){
	.nav > li > a {	padding-left: 9px;padding-right: 9px}
}
@media (min-width:992px){
.footer-nav li {width:100%;line-height:34px}
.pro1-two .col-sm-6 , .pro6-two .col-sm-6 {margin-top: 10px;}
.height480 {height:480px}
}
@media screen and (max-width:991px){
	.features-bg-pro6 {min-height: 420px;}
	.device{display:none;}
	.screenshots ul li{width:45%;}
	.fh5co-features-outer .col-sm-6 { margin-top: 80px;}
	.service-intro{padding:30px 0 30px 0;}
	.features-slider{height:100%}
	footer li{display:block;text-align:left;padding:20px 0;border-bottom:dashed 1px #c7cacc;margin-right:0!important;float:none;}
	.footer-menu li{border-bottom:dashed 0px #c7cacc!important;padding:20px 0 0 5px!important;}
	.footer-info {padding-top:30px!important;text-align:left}
	.hero {padding:0 0 60px 0}
	.hero h1 {font-size:36px}
	.nav-wrapper {background-color:rgba(238,238,238,0.9);padding:12px 10px;position:fixed;right:0;left:0;z-index:1032}
	.slogo {color:#fff !important}
	.slogo img {padding-top:8px!important;height:60px!important}
	.navicon p {color:#000 !important}
	.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {background:#000 !important}
	.bor-right { border-right: 0px;}
    .bor-left {	border-left: 0px;}
	.page-scroll small {display:none;}
	.bg-gray-xs {background-color: #F6F6F6;}
}
@media (min-width:768px) and (max-width:991px){
	.news-text {padding:20px 0 0 0}
	.main-h2 {text-align: center}
	.main-h2 .feature-content { margin-top:10px}
}
@media (min-width:862px) and (max-width:991px){
    .page-scroll {padding-left:20px!important;padding-right:20px!important;}
}
@media (min-width:768px) and (max-width:861px){
    .page-scroll {padding-left:14px!important;padding-right:14px!important;}
}
@media screen and (min-width:768px){
	.pro-chevron .pro-left {
     display:block;
	 font-size:30px;
	 font-weight:700;
	 color:#000;
     position:absolute;
     left:0px;
     top:45px;
    }
    .pro-chevron .pro-right {
     display:block;;
	 font-size:30px;
	 font-weight:700;
	 color:#000;
     position:absolute;
     right:0px;
     top:45px;
    }
	.pro-chevron .pro-top , .pro-chevron .pro-bottom {
     display:none;
    }
	.feature-tpt{margin-bottom:80px;}
}
@media screen and (max-width:767px){
	.feature-tpt{margin-bottom:50px;}
	.features-list {padding:90px 0 20px 0;}
	.padd-top {padding-top:30px;}
	.pro-text p {width:120px;font-size:14px!important;}
	.pro1-two .col-sm-image-container { width:320px !important;}
	.pro1-two .col-sm-image-container img { height:200px;}
	.pro6-two .col-sm-image-container { width:360px !important;}
	.pro6-two .col-sm-image-container img { height: 360px;}
	.fh5co-features-outer .col-sm-6 .span-1 { right:30px; top:190px;}
	#pro-fives .pro-icon {
     display: inline-block!important;
	 margin: 0 !important;
    }
	#pro-fives .pro-text p {
     font-size:16px!important;
    }
	#pro-fives .pro-green .pro-text p {
     font-size:14px!important;
    }
	.pro-chevron .pro-left , .pro-chevron .pro-right {
     display:none;
    }
	.pro-chevron .pro-top {
     display:block;
	 font-size: 30px;
	 font-weight:700;
	 color:#000;
     position:absolute;
	 left:0px;
     right:135px;
     top:-40px;
    }
    .pro-chevron .pro-bottom {
     display:block;
	 font-size: 30px;
	 font-weight:700;
	 color:#000;
     position:absolute;
     left:0px;
     right:135px;
     top:130px;
    }
	.screenshots ul li{width:90%;min-height:100%;float:none;}
}
@media screen and (max-width:640px){
	.use-btn{display:none;}
	nav{margin-top:40px;}
	.overlay ul li a{padding:18px 0}
	.overlay ul li .overlay-menu a{padding:16px 0}
}
@media screen and (max-width:465px){
	.hero h1{font-size:32px;margin:130px 0 45px 0}
	section.video i{font-size:30px;}
	section.video h1{font-size:15px;font-weight:400;}
	section.video{padding:40px;}
	blockquote p{width:60%;}
	.features-slider {padding: 11% 50px 10% 50px;}
	.l-height p { margin-left: 10px;}
	.breadcrumbs { margin: 0 0 24px 0;}
}
.prohere , .prohere:hover {
    color: #000!important;
    background: rgba(218,218,218,0.9)!important;
}

/* ==========================================================================
色塊
========================================================================== */
.box {
	margin-bottom: 5px;
	border-radius: 5px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.16);
}
.box--notice {
	background: #fff;
	color: #F33;
}
.box--primary {
	background: #007bff;
	color: #fff;
}
.box--success {
	background: #133670;
	color: #fff;
}
.box--warning {
	background: #ff9800;
	color: #fff;
}
.box--about {
	background: rgba(77,34,119,0.8);
	color: #fff;
	text-align: center;
	margin: 0 auto;
}
.box--about hr {
	margin-top:2rem;
    margin-bottom:2rem;
}
.helper__about strong {
	font-size: 1.6rem;
	color:rgba(255,255,255,1);
}
.helper__about h3 { color: #FFF; margin-top: 5px; margin-bottom: 10px; font-size: 1.5rem; font-weight:600; }
.helper {
	align-items: center;
	justify-content: space-between;
	position: relative;
}
.helper__content {
	padding: 25px;
}
.helper table th {
	text-align: center;
}
@media (min-width: 768px) {
	.helper__content {
		margin-right: 220px;
	}
	.box--notice .helper__content {
		margin-right: 180px;
	}
	.about_list {
	    position: relative;
    }
    .about_list span {
	    position: absolute;
	    font-size: 4.3rem;
	    left: -55px;
	    top: 0;
	    line-height:1;
    }
	.helper__about {
	    padding: 25px;
    }
}
@media (max-width: 767px) {
	.helper {
		flex-wrap: wrap;
	}
	.helper__content {
		margin-bottom: 125px;
	}
	.box--notice .helper__content {
		margin-bottom: 125px;
	}
	.about_list {
	    position: relative;
    }
    .about_list span {
	    position: absolute;
	    font-size: 4.2rem;
	    left: -50px;
	    top: 0;
	    line-height:1;
    }
	.helper__about {
	    padding: 20px;
    }
}
.helper__img img {
	width: 200px;
	max-height: 220px;
	object-fit: contain;
	position: absolute;
	right: 15px;
	bottom: 0;
}
.box--notice .helper__img img {
	right: 20px;
	bottom: 20px;
}
.box--notice a {
	background: #F33;
	color: #fff;
	padding:3px 12px;
	border-radius: 15px;
}
.box--notice p.notice-text {
	margin-left : 3em;
    text-indent : -3em ;
}

/* swiper圖片輪播 */
.swiper-button-next, .swiper-button-prev {
	color: #59ab02;
	line-height: 50px;
	width: 50px;
	height: 50px;
	text-align:center;
	font-weight:600;
	font-size:26px;
  }
  .wrapper {
	width: 100%;
	margin-bottom: 10px;
  }
  .swiper-slide {
	text-align:center;
  }
  .gallery-thumbs .swiper-slide {
	border: 1px solid #ddd ;
  }
  .wrapper img {
	width: 83%;
  }
  @media (max-width: 767px) {
    .wrapper img {
		width: 65%!important;
	}
  }
  .gallery-top , .gallery-top2 , .gallery-top3 {
	width: 100%;
	bottom: 3px;
	border: 1px solid #ddd;
  }
  .gallery-thumbs , .gallery-thumbs2 , .gallery-thumbs3 {
	width: 100%;
  }
  .gallery-thumbs .swiper-slide , .gallery-thumbs2 .swiper-slide , .gallery-thumbs3 .swiper-slide {
	opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-thumb-active , .gallery-thumbs2 .swiper-slide-thumb-active , .gallery-thumbs3 .swiper-slide-thumb-active {
	opacity: 1;
  }