body { overflow-x: hidden; background:#daf64c url(../images/bg.jpg) no-repeat top center;}
header { position: relative; margin: 0 auto; width: 950px; height: auto; background: rgba(0,0,0,0.2) }
header .langChange { position: absolute; top: 0; right: 0; width: 100%;text-align: right; z-index: 20; }
.langChange li { display: inline-block;margin: 0 10px; padding: 0.5% 0; text-align: center}
.langChange li a,
.langChange li a:link,
.langChange li a:visited { font:bold 14px/20px "Arial","微軟正黑體"; color: #0486a8;}
.langChange li a:hover { color: #ff6a2f; }
header img { position: relative; width: 100%; height: auto; vertical-align: top;z-index: 2 }

h2 {font:bold 20px/26px "Arial","微軟正黑體"; color: #1d1d1d;}
h2:after { content: ""; display: inline-block; width: 41px; height: 12px; background: url(../images/titleDot.jpg) }

.contentBase { margin: 0 auto; padding: 0 0 50px 0;  width: 950px; height: auto; background: #caf100}
.contentBase .content { margin: 0 auto; width: 900px; border:5px solid #24c4da; border-radius: 5px; background: #fff; }
.contentBase .content .buttonBase { width: 100%; text-align: center; background: #24c4da }
.contentBase .content .buttonBase li { display: inline-block; padding: 0.5%; width: 19%;text-align: center;
background: linear-gradient(0deg, #24C4DA 0%, #8AF1FF 100%); 
background: -moz-linear-gradient(90deg, #24C4DA 0%, #8AF1FF 100%); 
background: -webkit-linear-gradient(90deg, #24C4DA 0%, #8AF1FF 100%); 
background: -o-linear-gradient(90deg, #24C4DA 0%, #8AF1FF 100%); 
}
/* 日本客製化 */
.contentBase .content.japanNavUse .buttonBase li { width: auto; min-width: 22%; }


.contentBase .content .buttonBase li a,
.contentBase .content .buttonBase li a:link,
.contentBase .content .buttonBase li a:visited { font:bold 24px/30px "Arial","微軟正黑體"; color: #fff; text-shadow:1px 1px 5px rgba(0,0,0,0.4)  }
.contentBase .content .buttonBase li a:hover { color: #fff200 }
/* 日本客製化 */
.contentBase .content.japanNavUse .buttonBase li.w-full a { font-size: 18px; line-height: 34px; }


.contentBase .content .itemBase { padding: 28px; width: 100%; }
.contentBase .content .itemBase .item { display: inline-block;margin: 2px 0 20px 0;padding: 0 0 20px 0; width: 49.7%; height: auto;border-bottom: 1px dashed #555; min-height: 256px; }


.phone { position:absolute; z-index: 1000; width: 100%; bottom: 9%; left:48%; text-shadow:0 0 0.8em #b0e905,  0 0 0.8em #b0e905 ,0 0 0.8em #b0e905 ,0 0 0.8em #b0e905; }
.phone b {font-size:20px;}

.item a h3 {margin: 0 0 5px 0;font:bold 18px/18px "Arial","微軟正黑體"; color: #545445;}
.item a h3:before { display: inline-block; content: " "; width: 16px; height: 16px; background: url(../images/dot01.png) top center no-repeat; } 

.item .right,
.item .left { display: inline-block; text-align: left; vertical-align: top;}
.item .right { width: 55%; overflow: hidden;  }
.item .right img { width: 100%; }
.item .left { margin: 0 0 0 1%;width: 43%;}

.item .left h4,
.item .left h4 span,
.item .left h5 span,
.item .left h5 strong.price,
.item .left h5 {font:bold 14px/18px "Arial","微軟正黑體"; color: #545445;}
.item .left strong { color: #F00 }
.item .left h5 strong.price {color: #f00; font-family: bold}
.item .left h6 {margin: 15%; width: 70%;font:bold 18px/30px "Arial","微軟正黑體"; text-align: center; color: #fff; border-radius: 10px; background: #9e60db}




@media only screen and (max-width: 950px) {
header { position: relative; margin: 0 auto; width: 100%; height: auto; background: rgba(0,0,0,0.2) }
.contentBase { margin: 0 auto; padding: 0 0 50px 0;  width: 100%; height: auto; background: #caf100 }
.contentBase .content { margin: 0 auto; width: 100%; border:5px solid #24c4da; border-radius: 5px; background: #fff; }

.contentBase .content .buttonBase li a,
.contentBase .content .buttonBase li a:link,
.contentBase .content .buttonBase li a:visited { font:bold 16px/24px "Arial","微軟正黑體"; color: #fff; text-shadow:1px 1px 5px rgba(0,0,0,0.4); line-height: 34px; }
.contentBase .content .buttonBase li a:hover { color: #fff200 }
/* 日本客製化 */
.japanIndex04Use { margin: 0 auto; width: 100%; }
.contentBase .content.japanNavUse .buttonBase li { width: 48%; }
.contentBase .content.japanNavUse .buttonBase li.w-full { width: 97%; font-size: 16px; line-height: 24px; }

.contentBase .content .itemBase .item { display: inline-block;margin: 2px 0 20px 0;padding: 0 0 20px 0; width: 49%; height: auto;border-bottom: 1px dashed #555; }
.item .right { width: 54%;  }
.item .left { width: 40%;}

.phone { left:46%; }
.phone b {font-size:18px;}
}




@media only screen and (max-width: 650px) {
.contentBase .content .buttonBase li { display: inline-block; padding: 0.5% 0; width: 48%;text-align: center;}
.contentBase .content .itemBase .item { display: inline-block;margin: 2px 0 20px 0;padding: 0 0 20px 0; width: 100%; height: auto;border-bottom: 1px dashed #555; }
.item .right { width: 100%;  }
.item .left { width: 100%;}

}



/*animation*/

/*animation*/
.toSmall {
animation-name: toSmall;animation-duration: 0.5s;animation-fill-mode: both;}


@keyframes toSmall {
  
  0% {
	 
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform:scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
 
 
	
100% {
	
	 -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform:scale(1.1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    
  }	
}


.toOrg {
animation-name: toOrg;animation-duration: 0.5s;animation-fill-mode: both;
}


@keyframes toOrg {
  
  0% {
	 
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform:scale(1.1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
 
 
	
100% {
	
	 -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform:scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    
  }	
}