body { overflow-x: hidden; }
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: #fff; text-shadow:1px 1px 5px rgba(0,0,0,0.4)  }
.langChange li a:hover { color: #fff200 }
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: #385aa1 }
.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% 0; 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 .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 .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; }


.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%; height: auto; }
.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: #385aa1 }
.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)  }
.contentBase .content .buttonBase li a:hover { color: #fff200 }

.japanIndex04Use { margin: 0 auto; width: 100%; }

.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%;}
}




@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;
    
  }	
}