:root{
    --main-color:#2c314e;
    --sub-color:#eccfad;
    --d-sub-color:#eccfad;
    --bg-color:#2c314e;
    --light-color:#d8e8ff;
    --ye-color:#ffea9a;

}
#mktContent.gold{background: url('../images/bg.png') top center repeat-y ,var(--bg-color);}
#goTop.gold{background: var(--sub-color);}
#mktContent header.header h1{position: relative;background:center top / cover no-repeat url('../images/gold-header.jpg');}
#mktContent header.header h1::before{position: absolute; content: ''; width: 35px;height: 35px; bottom: 203px; left: 50.5%; background: center top / contain no-repeat url('../images/star.png'); animation: star infinite 2s;}
nav{background: var(--sub-color);}
ul.sub-nav{width: 100%; border:none; max-width: none; justify-content:center;}
ul.sub-nav li{width: 15%; border-bottom: solid var(--sub-color) 2px;}
ul.sub-nav li.on a,
#mktContent ul.sub-nav li a:hover{color: var(--light-color);}
/*說明*/
.gold .intro{max-width:1200px; text-align: center;margin: 60px auto;}
.gold .intro p{position:relative; color: var(--main-color); font-size: 20px; line-height: 1.5; background: var(--light-color);  padding: 44px 0;}
.gold .intro p::before,
.gold .intro p::after{position: absolute; content:'';width: 62px; height: 52px;background: center top / contain no-repeat url('../images/coma.png');  }
.gold .intro p::before{top: 15px; left:100px; }
.gold .intro p::after{bottom: 15px; right: 100px; transform: rotate(180deg);}
/*內容*/
main{background: none; margin: 0 auto;}
main>section{display: block; padding: 30px 0;}
main h2{ height: 80px;}
main h2.gold-1{ background:center top / contain no-repeat url('../images/gold-h2-1.png');}
main h2.gold-2{ background:center top / contain no-repeat url('../images/gold-h2-2.png');}
section .content{ padding: 15px; margin: 0 auto; border: dotted 2px var(--light-color); background: var(--bg-color);}
/*模組樣式*/
.ph-group-content{width: 100%;text-align: left; padding: 10px; border-bottom: dotted 2px var(--sub-color);}
.ph-group-content:nth-last-of-type(1){border-bottom: none;}
.ph-group-content-photo img{display: none;}
.ph-group-content-tag{display: inline-block;font-size: 13px; line-height: 2; color: var(--main-color); background: var(--ye-color); padding: 0 8px; margin: 6px 0; }
#mktContent .ph-group-content-text-name{display:block; font-size:22px; color: var(--sub-color); line-height: 1.4; letter-spacing: 1.2px;}
.ph-group-content-text-detail{font-size: 16px; color: var(--light-color); line-height: 1.5; margin: 4px 0;}
.ph-group-content-text-sale{font-size: 16px; color:var(--ye-color); line-height: 2; font-weight: 300;}
#mktContent .ph-group-content-text-price{display: block; text-align: right; font-size: 25px; color: var(--ye-color);}
.ph-group-content-text-price span{font-size: 20px; vertical-align: baseline;}
.ph .ph-group:nth-of-type(1) .ph-group-content{position: relative; display: flex; justify-content: space-between; align-items: stretch;}
.ph .ph-group:nth-of-type(1) .ph-group-content::before{content: ''; position: absolute; width: 90px; height: 135px; left: 28px;top:5px;  background: center top / contain no-repeat url('../images/medal.png'); z-index: 5;}
.ph .ph-group:nth-of-type(1) .ph-group-content::after{position: absolute; content: ''; width: 30px;height: 30px; top:45px; left: 88px; background: center top / contain no-repeat url('../images/star.png'); animation: star infinite 2s;z-index: 6;}
.ph .ph-group:nth-of-type(1) .ph-group-content-photo{display: inline-block; width: 50%; border: solid 4px var(--sub-color);}
.ph .ph-group:nth-of-type(1) .ph-group-content-photo img{display:block;width: 100%; }
.ph .ph-group:nth-of-type(1) .ph-group-content-tag{position: absolute; left: 52%; top: 14px;}
.ph .ph-group:nth-of-type(1) .ph-group-content-text{position: relative; display: inline-block; width: 48%;}
.ph .ph-group:nth-of-type(1) .ph-group-content-text-name{font-size: 28px; font-weight: 500; border-bottom: 3px solid var(--sub-color); padding-bottom: 14px; margin: 45px 0 12px 0;}
.ph .ph-group:nth-of-type(1) .ph-group-content-text-detail{font-size: 18px; font-weight: 400;}
.ph .ph-group:nth-of-type(1) .ph-group-content-text-price{position: absolute; font-size: 32px; bottom: 0px; right: 0;}
.ph .ph-group:nth-of-type(1) .ph-group-content-text-price span{font-size: 14px; vertical-align: baseline;}

.content h3{font-size: 18px; text-align: left; color: #fff; letter-spacing: 1.2px; font-weight: 300; line-height: 1.8; border-bottom: solid 1px #fff; margin: 24px 0 16px 0;}
.content h3 span{font-size: 11px; color: #fff; vertical-align: middle; margin-right: 4px; margin-bottom: 4px;}

.hover-y .ph:hover{transform: none;}

@keyframes star{
    0%{transform: scale(1) rotate(-5deg);}
    40%{transform: scale(1.5) rotate(30deg); }
    50%{transform: scale(1.5) rotate(30deg);}
    100%{transform: scale(1) rotate(-5deg);;}
}