@charset "big5";
/* CSS Document */

/*���ʵe*/
@keyframes bgchange {from {background:darkorange;} to {background:#F60;}}

body {margin: 0;}
h1 {margin: 0; padding: 0; height: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; _display: none;}
.main {background:white;}
/* .containter {margin: 0 auto; width: 980px; background: url(../images/top.jpg) center top no-repeat #ffffff;} */

#top img{padding-top: 70px; padding-bottom: 0;}

.top-normal {height: 340px;}
.top-mobile {display: none;}
.top-mobile img {display: block; width: 100%;}

.aside {padding: 10px 0; width: 440px; float: right; position:relative;}
.article {width: 540px; background-color: #6d511f; float: left;}
.footer {clear: both;}

div.aside a.bnrice {position:fixed; right:60px; top:60px; z-index:2; }

#menu {padding: 0 5px; border-top: solid 3px #6d511f;}
#menu, #menu a {height: 30px;}
#menu a {display: block; background-color: #000000; color: #cccccc; font-size: 18px; line-height: 30px; letter-spacing: 5px; font-weight: bold; font-family:'Microsoft JhengHei'; text-align: center; float: left;}
#menu a.current, #menu a:hover {color: #ffffff; cursor: pointer;}
#menu, #menu a.current, #menu a:hover {background: linear-gradient(#6d511f, #4e3810);}
#menu a.current {cursor: default;}
.tab-2 a {width: 50%;}
.tab-3 a {width: 33.33%;}

.content {margin: 0 5px; padding: 10px 0; background-color: #ffffff;}
.content p {margin: 0 10px 20px; color: #333333; font-size: 13px; line-height: 22px; letter-spacing: 1px; text-align: justify;}
.content h2 {margin: 0px; padding: 0; background: url(../images/title.jpg) center top no-repeat; color:#855237; font-size: 18px; line-height: 30px; letter-spacing: 2px; font-family: Arial, Helvetica, sans-serif, 'Microsoft JhengHei'; text-align: center;}
.content .figure {margin: 10px 0;}
.content .figure img {display: block; margin: 0 auto; width: 100%; *width: auto; max-width: 520px;}
.content-footer {height: 5px;}

a.ticket:link, a.ticket:active, a.ticket:visited{display: block; width: 100%; background: #0066CC; color: #ffffff; text-align: center;}
a.ticket:hover {background:#33ffff; color:#000000;}

.menu-prod {margin: 0 72px; padding-left: 3% \9; width: 96%;}
.menu-prod a {display: block; margin: 0 1px; padding: 8px 0; background-color: #999999; color: #ffffff; font-size: 16px; line-height: 16px; font-weight: bold; font-family:'Microsoft JhengHei'; text-align: center; float: left; white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0 rgba(0,0,0,0.5);}
.menu-prod a.current, .menu-prod a:hover {background-color: #cc9933; background: linear-gradient(#d6ad5c, #6d511f); cursor: pointer;}
.menu-prod a.current {cursor: default;}
#menu-prod-1 {width: 20%; padding-left: 1.5%; padding-left: 0 \9; border-radius: 20px 0 0 20px;}
#menu-prod-2 {width: 20%;}
#menu-prod-3 {width: 20%;}
#menu-prod-4 {width: 20%; padding-right: 1.5%; padding-right: 0 \9; border-radius: 0 20px 20px 0;}
.content-prod {padding-top: 10px; clear: both;}

.link {padding: 10px 15px 0; text-align: right;}

.hotline {width: 94%; height: 1px; margin: 0px auto; background: url(../images/line.gif) center bottom repeat-x;}

.hdspace{margin-top: 0px;}

.product{display: flex; width: 70%; justify-content: center; align-items: center; border: 1px dotted #333333; border-radius:10px; background-color:white; margin-bottom: 1rem;}
.pict img{float: left; width: 42%; margin-right: 1em; border-radius:10px;}
.word h2{font-size: 1.5rem; text-align: left; margin:1rem; font-weight: 600;}
.word p{font-size: 1.4rem; float: right; margin-right: 1em;}
.word .price{font-size: 1.8rem; color: crimson;font-weight: 600;}

.date p{line-height: 2em;}
.date button{ background-color: rgb(255, 165, 105); border: none;}
.way p{line-height: 2em;}
.way button{ background-color: rgb(255, 165, 105); border: none;}
.who li{list-style:none;}
.place{width: 80%; text-align:left;}
.more{display: block; background-color: rgb(69, 226, 174); border-radius: 99em; color: white; width: 70px; height: 70px; font-size: 1.4rem; line-height: 1.5rem; padding: 0.2em; padding-top: 0.6rem; float: right;}
.more a{color: white;}

.stitle{color: rgb(59, 1, 73);font-size: 1.6em;}
.cont{font-size: 1.2em;padding:1em;text-align: left;}
.rowpic{width: 100%;}
.rowpic img{width: 32%;}
.rowpic2 img{width: 48%;}

.gift{width: 60%;}
.gift img{width: 100%;}

@media only screen and (max-width: 768px) {

  #top img{padding-top: 30px;}
  .product{width: 80%;}
  .pict img{width: 100%; border-radius:10px 10px 0 0; margin-bottom: 1rem;}
  .word h2{margin:1rem;}
  .word p{font-size: 1.4rem; float: right; margin-right: 1em;}
  .word .price{font-size: 1.8rem; color: crimson;font-weight: 600;}

  .date span{font-size: 0.8em;}
  .who li{font-size: 0.8em; text-align: left;}
  .place span{font-size: 0.8em; text-align: left;}

  .stitle{color: rgb(116, 0, 87);font-size: 1.2em;}
  .cont{font-size: 0.8em;padding:1em;text-align: left;}

  .gift{width: 100%;}

}