@charset "big5";
/* CSS Document */
@media only screen and (max-width: 768px) {
  .main {padding-top: 30px;}
  .nav a .a-bg, .nav a:hover .a-bg {margin-right: 230px; margin: 0 \9; width: auto; width: 20% \9; position: static;}
  .nav a:hover .a-text {background-color: transparent;}
  .imglist .section {display: block; margin: 15px 0; width: 100%;}
  .imglist .section .buy span {padding: 5px 9px;}
  	#con_rt img.speimg {width:100%; height:auto;}
	#left_img{ display:none;}
	.fullimg img {display: block; margin: 0 auto; width: 90%;}	
	.img_pd{ display:none;}
	.img_pd2{ display:block; }
	.tsb{ background-color:#939;  color:#FFFFFF; border-radius:25px; width:300px; height:35px; font-size:16px; padding-top:10px; display:block;}
	.img_pd{ width:100%;}
	.tsb1{ background-color:#939;  color:#FFFFFF; border-radius:15px; width:300px; height:175px; font-size:12px; padding-top:10px; display:block;}
	.pic_pd{
		padding:25px;
		max-width:85%;
		height:auto;
		}
	.header img{ margin-top:14px;}	
}

@media only screen and (max-width: 640px) {
  .content-frame {margin-left: 10px;}
  .nav {position: static;}
  .nav a {width: auto; height: 60px;}
  .nav a .a-text {margin-top: 5px;}
  #link {display: block;}
  .titletext{width: 55%;font-size: 1rem; color: #fff; line-height: 26px; margin-left: 30px; letter-spacing: 1px; margin-top: 10px; }
  .logo{width: 30%;}
  .content .title {font-size: 18px; line-height:24px;}
  .imglist .section .article {letter-spacing: 1px;}
  .imglist .section .article, .imglist .section .buy span {font-size: 16px;}
  #con_rt img.speimg {display:block; margin-bottom:10px;}
  	.tsb1{ background-color:#939;  color:#FFFFFF; border-radius:15px; width:220px; height:220px; font-size:12px; padding-top:10px; display:block;}
.tsb{ background-color:#939;  color:#FFFFFF; border-radius:25px; width:328px; height:35px; font-size:16px; padding-top:10px; display:block; margin-top:10px;}
	.pic_pd{
		padding:20px;
		max-width:85%;
		height:auto;
		}
}