@charset "utf-8";
/* CUBE Interactive : 2017-8-24 */

 
	/* 關於冠品 */
		  
		  .about-kuanpin-bg {
		    display: inline-block;
		    font-size: 0px;
		    background-image: url(../images/about-kuanpin-bg.jpg);
		    background-repeat: no-repeat;
		    background-position: center top;
		    -moz-background-size:100%;
		    -webkit-background-size:100%;
		    -o-background-size:100%;
		    background-size:100%;
		  }	  
		  .about-kuanpin-img {
		  width:100%;
		  display:inline-block;
		  text-align:center;
		  }		  
		  .about-kuanpin-text {
			display: inline-block;
			text-align: left;
			line-height: 35px;
			margin-top:10px;
			margin-bottom:60px;
		  }
		  	  
		@media only screen and (min-width: 990px) {					  
		  .about-kuanpin-bg {
			 width: 100%;
			 height: 270px;
		  }  				  
	     .about-kuanpin-img {
	      margin-top:-100px;
		  }
		  .about-kuanpin-text {
		  	width: 80%;
			margin-left:10%;
			margin-right:10%;
		  }
        }

        @media only screen and (min-width: 681px) and (max-width: 990px) {					  
		  .about-kuanpin-bg {
			 width: 100%;
			 height: 160px;
		  }			  
		  .about-kuanpin-img {
		  margin-top:-80px;
		  }
		  .about-kuanpin-img img {
		  width:100%;
		  }	
		  .about-kuanpin-text {
		  	width: 90%;
			margin-left:5%;
			margin-right:5%;
		  }	
        }

        @media only screen and (min-width: 0px) and (max-width: 680px){	
		  .about-kuanpin-bg {
			 width: 100%;
			 height: 70px;
		  }				  
		  .about-kuanpin-img {
		  margin-top:-50px;
		  }
		  .about-kuanpin-img img {
		  width:100%;
		  }	
  		  .about-kuanpin-text {
		  	width: 96%;
			margin-left:2%;
			margin-right:2%;
		  }		
         } 
		
		
	/* history 企業沿革 */
		
	.history-head{
	background-image: url(../images/about-history-head.jpg);
	background-repeat: no-repeat;
	background-position: center top;	
	-moz-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	-o-background-size:auto 100%;
	background-size:auto 100%;	
	}

		
	/**/	

	.history-content .text-row .title{
	float: left;
	font-size: 130%;
	line-height: 50px;
	font-weight: normal;
	text-decoration: none;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	margin-bottom:20px;
	}

	.history-content .text-row .text ul {
	width: 100%;
	float: left;
	}	
	.history-content .text-row .text li {
	float: left;
	margin-bottom: 5px;
	position: relative;
	}

	
		@media only screen and (min-width: 990px) {					  		 	
	    .history-content .text-row .text li {
  	     width: 90%;
	     padding-left: 10%;
   	     }	
        }

        @media only screen and (min-width: 681px) and (max-width: 990px) {					  
		.history-content .text-row .text li {
  	     width: 82%;
	     padding-left: 18%;
   	     }
        }

        @media only screen and (min-width: 0px) and (max-width: 680px){	
		 .history-content .text-row .text li {
  	     width: 80%;
	     padding-left: 20%;
   	     }
         } 
	
	
	.history-content .text-row .text li strong{
	float: left;
	font-size: 100%;
	line-height: 25px;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	background-color: #317bd2;
	position: absolute;
	left: 0px;
	top: 0px;
	padding-left: 8px;
	padding-right: 8px;
	-moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    -khtml-border-radius: 5px; /* Konqueror */
    border-radius: 5px; /* Opera 10.50 and later (CSS3 standard) */
    behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
	}
	/**/		

	.history-content .row-01 .title{
	border-bottom-color: #e4372e;
	color: #e4372e;
	}
	.history-content .row-02 .title{
	border-bottom-color: #e84d32;
	color: #e84d32;
	}
	.history-content .row-03 .title{
	border-bottom-color: #e4372e;
	color: #e4372e;
	}
	.history-content .row-04 .title{
	border-bottom-color: #e84d32;
	color: #e84d32;
	}
	.history-content .row-05 .title{
	border-bottom-color: #ee6b37;
	color: #ee6b37;
	}
	.history-content .row-06 .title{
	border-bottom-color: #f48c3d;
	color: #f48c3d;
	}
	.history-content .row-07 .title{
	border-bottom-color: #f8a141;
	color: #f8a141;
	}
	.history-content .row-08 .title{
	border-bottom-color: #fdba45;
	color: #fdba45;
	}
	
    @media only screen and (min-width: 0px) and (max-width: 680px){	
	
	.history-content .row-01 .year{
	background-color: #e4372e;
	}
	.history-content .row-02 .year{
	background-color: #e84d32;
	}
	.history-content .row-03 .year{
	background-color: #e4372e;
	}
	.history-content .row-04 .year{
	background-color: #e84d32;
	}
	.history-content .row-05 .year{
	background-color: #ee6b37;
	}
	.history-content .row-06 .year{
	background-color: #f48c3d;
	}
	.history-content .row-07 .year{
	background-color: #f8a141;
	}
	.history-content .row-08 .year{
	background-color: #fdba45;
	}			
	} 
	
	/**/
	@media only screen and (min-width: 990px) {		
		
	.history-head{
	 width: 100%;
	 height:360px;
	}
	
	.history-content{
	background-image: url(../images/about-history-line.png);
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
 	}
		 
	.history-content .text-row{
	position: absolute;
	text-align:left;
	}
			
	.history-content{
	width: 100%;
	height: 1000px;
	margin-top: -80px;
	margin-bottom:60px;
 	}
		 
	.history-content .text-row{
	width: 512px;
	position: absolute;
	text-align:left;
	}
	
	.history-content .text-row .year{
	width: 64px;
	float: left;
	font-size: 120%;
	line-height: 40px;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	text-shadow:0 1px 0 #333;
	position: absolute;
	top: 0px;
	}
		
	.history-content .text-row .title{
	width: 425px;
	}
	.history-content .text-row .text{
	width: 430px;
	float: left;
	}
	
	/**/
	.history-content .row-r{
	right: 0px;
	}
	.history-content .row-r .year{	
	left: 0px;
	}
	.history-content .row-r .title{
	margin-left: 100px;
	}
	.history-content .row-r .text{
	margin-left: 100px;
	}
	
	.history-content .row-l{
	left:0px;
	}
	.history-content .row-l .year{	
	right: 0px;
	}	
	.history-content .row-l .title{
	margin-left: 0px;
	}
	.history-content .row-l .text{
	margin-left: 0px;
	}
					  
	.history-content .row-01{
	top:80px;
	}		
	.history-content .row-02{
	top:200px;
	}	
	.history-content .row-03{
	top:300px;
	}	
	.history-content .row-04{
	top:400px;
	}	
	.history-content .row-05{
	top:520px;
	}
	.history-content .row-06{
	top:600px;
	}	
	.history-content .row-07{
	top:700px;
	}	
	.history-content .row-08{
	top:800px;
	}

    }

    @media only screen and (min-width: 681px) and (max-width: 990px) {					  

    .history-head{
	 width: 100%;
	 height:250px;
	}
	
	 
	.history-content{
	background-image: url(../images/about-history-line.png);
	background-repeat: no-repeat;
	background-position: center top;
	position: relative;
 	}
		 
	.history-content .text-row{
	position: absolute;
	text-align:left;
	}
			
	.history-content{
	width: 100%;
	height: 1000px;
	margin-top: -60px;
	margin-bottom:60px;
 	}
		 
	.history-content .text-row{
	width: 55%;
	position: absolute;
	text-align:left;
	}
	
	.history-content .text-row .year{
	width: 18%;
	float: left;
	font-size: 120%;
	line-height: 40px;
	font-weight: normal;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	text-shadow:0 1px 0 #333;
	position: absolute;
	top: 0px;
	}
		
	.history-content .text-row .title{
	width: 75%;
	}
	.history-content .text-row .text{
	width: 75%;
	float: left;
	}
	
	/**/
	.history-content .row-r{
	right: 0px;
	}
	.history-content .row-r .year{	
	left: 0px;
	}
	.history-content .row-r .title{
	margin-left: 25%;
	}
	.history-content .row-r .text{
	margin-left: 25%;
	}
	
	.history-content .row-l{
	left:0px;
	}
	.history-content .row-l .year{	
	right: 0px;
	}	
	.history-content .row-l .title{
	margin-left: 0px;
	}
	.history-content .row-l .text{
	margin-left: 0px;
	}
					  
	.history-content .row-01{
	top:60px;
	}		
	.history-content .row-02{
	top:160px;
	}	
	.history-content .row-03{
	top:330px;
	}	
	.history-content .row-04{
	top:390px;
	}	
	.history-content .row-05{
	top:570px;
	}
	.history-content .row-06{
	top:620px;
	}	
	.history-content .row-07{
	top:720px;
	}	
	.history-content .row-08{
	top:790px;
	}
	
	}

    @media only screen and (min-width: 0px) and (max-width: 680px){	
	
    .history-head{
	 display:none;
	}		
	.history-content .text-row{
	text-align:left;
	}			
	.history-content{
	width: 100%;
	margin-top:20px;
	margin-bottom:60px;
 	}		 
	.history-content .text-row{
	width: 100%;
	}	
	.history-content .text-row .year{
	width: 100%;
	float: left;
	font-size: 120%;
	line-height: 40px;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	text-align: center;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px; /* Konqueror */
	border-radius: 5px; /* Opera 10.50 and later (CSS3 standard) */
	behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
	}		
	.history-content .text-row .title{
	width: 100%;
	}
	.history-content .text-row .text{
	width: 100%;
	float: left;
	margin-bottom:40px;
	}
		
	} 
	
	/* 服務團隊 */
	
	.team-row{
	width: 100%;
	float: left;
	text-align:center;
	margin-bottom:40px;
	}

	
	@media only screen and (min-width: 990px) {	
	
	.team-row-m{ display:none; }

    }
	
    @media only screen and (min-width: 681px) and (max-width: 990px) {	
	 .team-row{margin-top:25px;}
	 .team-row img{
	 width: 100%;
	 float: left;
	 }
	 .team-row-m{ display:none; }
	}
    @media only screen and (min-width: 0px) and (max-width: 680px){	

     .team-row{ display:none; }
	 
	 .team-row-m{
	   width: 100%;
  	   float: left;
	   text-align:center;
	   margin-top:20px;
	   margin-bottom:20px;
	  }
	  .team-row-m img{
 	   width: 100%;
	   float: left;
	   }	
	 	
	} 
	
	/* idea */
	
	.about-idea-row {
	width: 90%;
	display: inline-block;
	text-align: center;
	position: relative;
	margin-left:5%;
	margin-right:5%;
	margin-top:50px;
	margin-bottom:60px;
	}
	
	.about-idea-row .img{
	margin-left:auto;
	margin-right:auto;
	display: inline-block;
	}
	
	.about-idea-row .img img{
	width: 100%;
	display: inline-block;
	}	

	
    @media only screen and (min-width: 990px) {	
	
	.about-idea-row .img{
	width: 45%;
	}
	.about-idea-row .text {
	width: 25%;
	display: inline-block;
	position: absolute;
	text-align:left;	
	font-size: 100%;
	line-height: 25px;
	font-weight: normal;
	text-decoration: none;
	}
	.about-idea-row .text strong {
	width: 100%;
	float: left;
	display: inline-block;
	font-size: 120%;
	line-height: 30px;
	font-weight: normal;
	color: #317bd2;
	text-decoration: none;
	}
	
	.about-idea-row .text01 {
	left: 0px;
	top: 30px;
	}
	.about-idea-row .text02 {
	right:0px;
	top: 30px;
	}
	.about-idea-row .text03 {
	left: 0px;
	top: 280px;
	}
	.about-idea-row .text04 {
	right:0px;
	top: 280px;
	}
    }
	
    @media only screen and (min-width: 681px) and (max-width: 990px) {	
	
	.about-idea-row .img{
	width: 45%;
	}
	.about-idea-row .text {
	width: 25%;
	display: inline-block;
	position: absolute;
	text-align:left;	
	font-size: 100%;
	line-height: 25px;
	font-weight: normal;
	text-decoration: none;
	}
	.about-idea-row .text strong {
	width: 100%;
	float: left;
	display: inline-block;
	font-size: 120%;
	line-height: 30px;
	font-weight: normal;
	color: #317bd2;
	text-decoration: none;
	}
	
	.about-idea-row .text01 {
	left: 0px;
	top: 10px;
	}
	.about-idea-row .text02 {
	right:0px;
	top: 10px;
	}
	.about-idea-row .text03 {
	left: 0px;
	bottom: 10px;
	}
	.about-idea-row .text04 {
	right: 0px;
	bottom: 10px;
	}
	}
	
    @media only screen and (min-width: 0px) and (max-width: 680px){	

	.about-idea-row .img{
	width: 90%;
	margin-bottom:20px;
	}
	.about-idea-row .text {
	width: 100%;
	display: inline-block;
	text-align:left;	
	font-size: 100%;
	line-height: 25px;
	font-weight: normal;
	text-decoration: none;
	float:left;
	margin-bottom:20px;
	text-align:center;
	}
	.about-idea-row .text strong {
	width: 100%;
	float: left;
	display: inline-block;
	font-size: 120%;
	line-height: 40px;
	font-weight: normal;
	color: #317bd2;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ccc;
	margin-bottom:10px;
	}
	
	.about-idea-row .text01 {
	left: 0px;
	top: 10px;
	}
	.about-idea-row .text02 {
	right:0px;
	top: 10px;
	}
	.about-idea-row .text03 {
	left: 0px;
	bottom: 10px;
	}
	.about-idea-row .text04 {
	right: 0px;
	bottom: 10px;
	}
	 	
	}
	
	
	/*  */
	
	
	.product-service-img{
	 display:inline-block;
 	 text-align:center;
	}
	.product-service-img img{
	 width:100%;
	 display:inline-block;
 	 text-align:center;
	}
	
	.product-service-text {
	 width:90%;
	 margin-left:5%;
	 margin-right:5%;
	 display:inline-block;
 	 text-align:center;
	 margin-bottom:40px;
	}
	
	.product-service-text li {
	display: inline-block;
	text-align: left;
	float: left;
	line-height: 30px;
	}
	
	.product-service-text li strong {
	width: 100%;
	display: inline-block;
	text-align: left;
	float: left;
	font-size: 130%;
	line-height: 45px;
	font-weight: normal;
	text-decoration: none;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #317bd2;
	margin-bottom:15px;
	}
	
	/**/	
	.product-service-ti {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	display: inline-block;
	text-align: left;
	margin-bottom: 20px;
	font-size: 130%;
	line-height: 45px;
	font-weight: normal;
	text-decoration: none;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #317bd2;
	}
	.product-service-data {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	display: inline-block;
	text-align: left;
	margin-bottom: 40px;
	font-size: 130%;
	line-height: 45px;
	font-weight: normal;
	text-decoration: none;
	}
	
	.product-service-data li {
	float: left;
	margin-bottom: 10px;
	display: inline-block;
	text-align: left;
	font-size: 90%;
	line-height: 28px;
	font-weight: normal;
	text-decoration: none;
	background-color: #ededed;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari, Chrome */
	-khtml-border-radius: 5px; /* Konqueror */
	border-radius: 5px; /* Opera 10.50 and later (CSS3 standard) */
	behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
	}
			
    @media only screen and (min-width: 990px) {	
	 .product-service-img{
	 width:80%;
	 margin-left:10%;
	 margin-right:10%;
	 }
	 .product-service-text li {
 	 width: 28.33%;
	 margin-left: 2.5%;
	 margin-right: 2.5%;
	 }	 	
 	 .product-service-data li {
	 width: 24%;
	 height: 100px;
	 margin-left: 0.5%;
	 margin-right: 0.5%;	
	 padding-top: 10px;
	 padding-right: 4%;
	 padding-left: 4%;
	 }
    }
	
    @media only screen and (min-width: 681px) and (max-width: 990px) {	
	 .product-service-img{
	 width:90%;
	 margin-left:5%;
	 margin-right:5%;
	 }
	 .product-service-text li {
 	  width: 28.33%;
	  margin-left: 2.5%;
	  margin-right: 2.5%;
	  }
     .product-service-data li {
	 width: 38%;
	 height: 100px;
	 margin-left: 1%;
	 margin-right: 1%;	
	 padding-top: 10px;
	 padding-right: 5%;
	 padding-left: 5%;
	 }
	}
	
    @media only screen and (min-width: 0px) and (max-width: 680px){	
	 .product-service-img{
	 width:100%;
	 }	
	  .product-service-text li {
 	  width: 90%;
	  margin-left: 5%;
	  margin-right: 5%;
	  margin-bottom:20px;
	  }
	 .product-service-data li {
	 width: 88%;
	 padding-top: 12px;
	 padding-bottom:12px;
	 padding-right: 6%;
	 padding-left: 6%;
	 } 
	}

  /**/
  
     .about-advantage-head{
	 display:inline-block;
 	 text-align:center;
	 margin-top:20px;
	 margin-bottom:30px;
	 }
	.about-advantage-head img{
	 width:100%;
	 display:inline-block;
 	 text-align:center;
	}
	
	.about-advantage-img {
	width: 80%;
	display: inline-block;
	text-align: center;
	background-color: #ededed;
	padding-top: 60px;
	padding-bottom: 45px;
	padding-right: 10%;
	padding-left: 10%;
	background-image: url(../images/about-advantage-bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	-moz-background-size:auto 100%;
	-webkit-background-size:auto 100%;
	-o-background-size:auto 100%;
	background-size:auto 100%;
	 }
	 
	 .about-advantage-img li {
	float: left;
	display: inline-block;
	text-align: left;
	background-color:rgba(255, 255, 255, 0.8);
	font-size: 120%;
	line-height: 30px;
	font-weight: normal;
	color: #333;
	text-decoration: none;
	 -moz-border-radius: 5px; /* Firefox */
     -webkit-border-radius: 5px; /* Safari, Chrome */
     -khtml-border-radius: 5px; /* Konqueror */
     border-radius: 5px; /* Opera 10.50 and later (CSS3 standard) */
     behavior: url(border-radius.htc); /* IE6, IE7, IE8 */
	 -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
	 }
	 
    .about-advantage-img li strong {
	width: 100%;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #2183da;
	margin-bottom: 10px;
	text-align: left;
	display: inline-block;
	font-size: 105%;
	line-height: 50px;
	font-weight: normal;
	color: #2183da;
	text-decoration: none;
	}
	
	/**/
	.about-advantage-features {	
	 display:inline-block;
 	 text-align:center;
	 margin-top:50px;
	}
	
	.about-advantage-features li {
	display: inline-block;
	text-align: left;
	float: left;
	line-height: 30px;
	}
		
	.about-advantage-features li samp {		
	 width:100%;
	 display:inline-block;
	 float:left;
	}
	.about-advantage-features li samp img {	
	 display:inline-block;
 	 text-align:center;
	 float:left;
	}
	
	.about-advantage-features li strong {
	width: 100%;
	display: inline-block;
	text-align: center;
	float: left;
	font-size: 100%;
	line-height: 45px;
	font-weight: normal;
	color: #333;
	text-decoration: none;
	margin-bottom: 20px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #2183da;
	}
	
		
	   
   @media only screen and (min-width: 990px) {	
	 .about-advantage-head {
	 width:60%;
	 margin-left:20%;
	 margin-right:20%;
	 }	 	 
     .about-advantage-img li {
	width: 38%;
	height: 170px;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 15px;
	padding-top: 12px;
	padding-right: 5%;
	padding-bottom: 10px;
	padding-left: 5%;
	 }
	.about-advantage-features {		
	 width:80%;
	 margin-left:10%;
	 margin-right:10%;
	 margin-bottom:50px;
	}	
	.about-advantage-features li {
	width: 25.33%;
	margin-left: 4%;
	margin-right: 4%;
	}	
	.about-advantage-features li samp img {		
	 width:100%;
	}
    }
	
    @media only screen and (min-width: 681px) and (max-width: 990px) {	
	 .about-advantage-head {
	 width:90%;
	 margin-left:5%;
	 margin-right:5%;
	 }		 
    .about-advantage-img li {
	width: 38%;
	height: 220px;
	margin-right: 1%;
	margin-left: 1%;
	margin-bottom: 15px;
	padding-top: 12px;
	padding-right: 5%;
	padding-bottom: 10px;
	padding-left: 5%;
	 }	
	 .about-advantage-features {		
	 width:100%;
	 margin-bottom:50px;
	}	
	.about-advantage-features li {
	width: 25.33%;
	margin-left: 4%;
	margin-right: 4%;
	}	
	.about-advantage-features li samp img {		
	 width:100%;
	}
	}
	
    @media only screen and (min-width: 0px) and (max-width: 680px){	
	 .about-advantage-head {
	 width:100%;
	 }	
	.about-advantage-img li {
	width: 80%;
	height: 250px;
	margin-bottom: 15px;
	padding-top: 12px;
	padding-bottom: 10px;
	padding-right: 10%;
	padding-left: 10%;
	 }
	 .about-advantage-features {		
	 width:80%;
	 margin-left:10%;
	 margin-right:10%;
	}	
	.about-advantage-features li {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom:60px;
	}	
	.about-advantage-features li samp img {		
	 width:60%;
	 margin-left:20%;
	 margin-right:20%;
	}
	}