@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, sans-serif, "微軟正黑體";
    font-size: 16px;
    overflow-y: scroll;    
    background:url(../images/bg.jpg) no-repeat center top;
    background-color: #000000;
    max-height: 100%;
    max-width: 100%;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#mtkContainer {
    position: relative;
    width: 100%;
}

#mtkContainer,
#mtkContainer * {
    vertical-align: top;
    box-sizing: border-box;
}

.pc {
    display: block;
}

.mobile {
    display: none;
}

.rwdImg {
    width: 100%;
    max-width: 100%;
}

/*-----------GO top-----------*/
.scroll2top:link,
.scroll2top:visited {
    background: url(../images/top.png) no-repeat 0 0;
    width: 80px;
    height: 80px;
    bottom: 5%;
    margin: 0px;
    right: 5%;
}

.scroll2top:hover {
    background: url(../images/top.png) no-repeat 0 -80px;
    -webkit-animation: icon-up 0.75s ease-out;
    -moz-animation: icon-up 0.75s ease-out;
    -o-animation: icon-up 0.75s ease-out;
    animation: icon-up 0.75s ease-out;
}

@-webkit-keyframesicon-up {
    0%,
    50%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes icon-up {
    0%,
    50%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@-moz-keyframes icon-up {
    0%,
    50%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@-o-keyframes icon-up {
    0%,
    50%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@-ms-keyframes  icon-up {
    0%,
    50%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-6px);
        -moz-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

/*----------- Header -----------*/
#topBase {
    width: 100%;
    height: 450px;
    /*background: url(../images/topPcBg.jpg) top center no-repeat;
    overflow: hidden;*/
}

#topBase #topPcContent {
    position: relative;
    margin: 0 auto;
    max-width: 1920px;
    height: 450px;
}

#topBase #topPcContent .topTitle {
    position: absolute;
    top: 50px;
    left: 50%;/*置中*/
    margin-left: -275px;
    z-index: 10;
}

#topBase #topPcContent .chineseLogo {
    position: absolute;
    top: 70px;
    left: 50%;
    margin-left: -500px;
    z-index: 11;
}

#topBase #topPcContent .award {
    position: absolute;
    bottom: 70px;
    left: 50%;
    margin-left: 250px;
    z-index: 9;
}



/*------animated.css 設定------*/
.animated {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.a-1s {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.a-2s {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.a-3s {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.delay-05 {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

.delay-1 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.delay-2 {
    -animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

.delay-3 {
    animation-delay: 3s;
    -webkit-animation-delay: 3s;
}

/*----------- 框架設定 -----------*/
.wrapper {
    padding-top: 2%;
    padding-bottom: 2%;
    position: relative;
    z-index: 1;
}

.wrapper::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;  
    opacity: 0; 
    z-index: -1;
    background: url(../images/contentBg.png) top center repeat-y fixed;/*內容背景fixed,搭配滾動視差parallax.js*/
  
    -webkit-animation: bling 5s linear 1s infinite alternate;
    -moz-animation: bling 5s linear 1s infinite alternate;
    -o-animation: bling 5s linear 1s infinite alternate;
    animation: bling 5s linear 1s infinite alternate;
}

@keyframes bling {/*閃爍*/
    0%   { opacity: 0; }
    50%  { opacity: 1;
           -webkit-filter: drop-shadow(3px 3px 20px rgba(256, 256, 256, 0.9));  /*閃光模糊*/
           filter: drop-shadow(3px 3px 20px rgba(256, 256, 256, 0.9));
         }
    100% { opacity: 0; }
}

/*----------- 產品內容 -----------*/
.layout {
    max-width: 1200px;
    margin: 40px auto;
    width: 100%;
    padding: 30px 50px 50px 50px;
    overflow: hidden;
    background-color: rgba(68,57,31,0.7);
}

.sub-title {
    margin-bottom: 10px; 
}

.sub-title h2 {
    display: table;
    /*沒有父層的水平置中*/
    margin: 0 auto;
    font-size:2em;
    line-height: 98px;
    height: 98px;
    width: 440px;
    text-align: center;
    color: #ffffff;
    background: url(../images/listTitle-award.png) no-repeat center center;
    background-size: auto 98px;/*寬 高*/
    text-indent:-9999px;
    -webkit-filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.9));/*陰影做法*/
    filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.9));
}

.layout:nth-child(2) .sub-title h2{
    background: url(../images/listTitle-more.png) no-repeat center center;
}/*第2個title換圖*/



/*----------- 商品區 -----------*/

/* c26模組 */
.group-type-ph{
    margin: 0 auto;
    width: 100%;
    text-align: center;/*產品整個區排列置中-有父層的水平置中(內層inline-block)*/
}
.group-type-ph .ph{
    width:31%;/*33.06%-----3等分-因有產品間距問題*/
    position:relative; 
    display:inline-block; 
    overflow:hidden; 
    margin: 25px 7px 0 7px;/*單格產品間距*/
    -webkit-transition:all .3s ease-out; 
    transition:all .3s ease-out; 
    cursor: pointer;
    -webkit-transition: translateY(0px);
    transform: translateY(0px);
}
.group-type-ph .ph:hover{
    transform: translateY(-5px);/*hover向上滑動*/
    box-shadow:0px 5px 6px rgba(0,0,0,0.4); 
}
.ph a{
    display:block;
    padding:10px;
    overflow:hidden;
    border:1px solid #6f592d;
    text-decoration: none;
    min-height: 420px;/*使產品高度一樣高*/
    -webkit-transition: all 2s ease-in; 
    transition: all 2s ease-in;
    position: relative;
}
.ph a:hover{     
    background: #4c3d17; /* Old browsers */
    background: -moz-linear-gradient(top,  #4c3d17 0%, #937646 8%, #59481c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #4c3d17 0%,#937646 8%,#59481c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #4c3d17 0%,#937646 8%,#59481c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c3d17', endColorstr='#59481c',GradientType=0 ); /* IE6-9 */ 
}
.ph-img{ margin:0 auto; display:block; width:100%; }

/*hover閃光*/
.ph-img::before {
    position: absolute;/*相較於.ph a*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(204,173,132,0.15);/*閃光顏色設定*/
    content: '';
    z-index:9999;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform: scale3d(3,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);/*閃光打斜*/
    transform: scale3d(3,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
.ph a:hover .ph-img::before {
     -webkit-transform: scale3d(3,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
     transform: scale3d(3,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}
.ph-img img{ width:100%; display:block; border:0; }
.ph-title{
    display:block; 
    font-size:1.2rem;
    line-height:1.2; 
    padding:0 10px; 
    margin:10px auto 1px; 
    color:#ffffff; 
    font-family:"微軟正黑體";
    font-weight:lighter;
    text-align: left;
 }
.ph-detail{
    font-size:1rem; 
    border-top: 1px dotted #8b713e;
    padding: 5px 10px; 
    color:#bda946; 
    font-family:"微軟正黑體"; 
    line-height:1.2; 
    overflow:hidden; 
    text-overflow: ellipsis;/*溢出文字點點點*/
    margin:15px 10px 1px; 
    text-align: left;
    -webkit-transition:all .3s ease-out; 
    transition:all .3s ease-out; 
}
.ph-feature{
    display:block; 
    color:#ff7200;
    font-size:0.9rem; 
    line-height:1.2; 
    padding:4px 0px 5px 0px; 
    overflow:hidden;
    font-family:"微軟正黑體";
    overflow:hidden;
    text-align:justify;
    margin:0 10px;
}
.ph .price{
    font-size:1.3rem; 
    font-family:"微軟正黑體"; 
    font-style: italic;
    color:#ff7200;
    letter-spacing:-1px;  
    padding: 10px 10px 10px 0px; 
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
    position: absolute;
    right: 10px;
    bottom: 0px; 
}

.ph .price span{ font-size:2.3rem;}
.ph .price i{ display:none;}

.ph:hover .ph-detail{ color: #ecd490;}
.ph:hover .price{ text-shadow:rgba(0,0,0,0.8); }
.ph .price span:after{
    content:"起"; 
    display:inline; 
    font-size:0.3rem; 
    position:relative; 
    top:-1px; 
    font-weight: 700; 
    font-family:"微軟正黑體"; 
    margin-left:-9px;
}

/*******-----------------1200px------------------*******/
@media screen and (max-width: 1200px){
    #topBase #topPcContent .award {

        margin-left: 200px;

    }

}


/*******-----------------992px------------------*******/
@media screen and (max-width: 992px){
    body{ background-size: 100% auto;}
    .pc { display: none; }
    .mobile { display: block; }
    .layout{
        margin: 0px auto 20px;
        padding: 15px 10px 15px 10px;
    }

}
/*******-----------------768px------------------*******/
@media screen and (max-width: 768px){
    .sub-title h2 {
        width: 100%;
    }
    .sub-title h2, .layout:nth-child(2) .sub-title h2{
        line-height: 80px;
        height: 80px;
        background-size: auto 80px;
    }
    .group-type-ph .ph{
        width:100%; /*產品取消浮動*/
        margin: 25px 0 0 0;
    }
    .ph .price{
        position:initial;
        float: right;
    }/*在手機版時，取消absolute改成預設自成高度，才不會有最小高重疊問題*/

}

/*******-----------------640px------------------*******/
@media screen and (max-width: 640px){
    body{
        font-size: 15px;
        background:none;
        background-color: #000000;    
    }
    .sub-title {
        margin-bottom: 0px;
    }
    .sub-title h2, .layout:nth-child(2) .sub-title h2{
        line-height: 70px;
        height: 70px;
        background-size: auto 70px;
    }
    .group-type-ph .ph{
        margin: 10px 0 0 0 ;
    }
}