/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#66493d; font-size:2.5rem; line-height:50px; font-family: 'Noto Serif TC', serif; }
.subtitle { color:#bd9f77; font-size:0.8rem; font-weight:bold; font-family:"Times New Roman"; margin-bottom:40px; padding-left:4px; }
.detail { color:#8a7457; float:right; padding:0px 5px 10px 5px; border-bottom:2px solid #8a7457; }
.detail:hover { text-decoration: none; color:#bd9f77; border-bottom:2px solid #bd9f77; }
.tmenu { text-align:left; position: relative; }
.tmenu .detail { position: absolute; right:10px; bottom:25px; }


.loading { background-color:#66493d; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:auto; padding-top:30vh; }

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:100vh; }
/* 圖片放大 */
@keyframes zoomin {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.top .logo { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; }
.top .logo img { width:70%; }
.top .topmenu { position: absolute; top:0px; left:0px; width:100%; }
/* .top .topmenu .menu { float:right; } */
.top .topmenu .menu .mbtn { float:left; position: absolute; width:80px; height:80px; color:#ffffff; font-size:1.5rem; border:none; }
.top .topmenu .menu .mbtn:hover { background-color: #bd9f77; }
.top .topmenu .menu .envelope_btn { right:160px; top:0px; }
.top .topmenu .menu .search_btn { right:80px; top:0px; }
.top .topmenu .menu .menu_btn { right:0px; top:0px; z-index:10; }

.top .topmenu .menu .mb1 { background-color:rgba(0,0,0,0.2); }
.top .topmenu .menu .mb2 { background-color:#000000; }

.top .topmenu .subject { position: absolute; top:-100vh; height:100vh; width:100%; background-color:#303030; z-index:9; transition: top 0.3s; overflow:hidden; }
.top .topmenu .subject .toplogo { height:80px; padding:10px 0px; background-color:#66493d; text-align: center; }
.top .topmenu .subject .toplogo img { width:auto; }
.top .topmenu .subject .content { max-width:390px; padding:15px; margin:0 auto; }
.top .topmenu .subject .content ul { text-align: left; padding:60px 0px; }
.top .topmenu .subject .content ul .submenu { border-top: 1px solid #262626; padding:20px 0px; }
.top .topmenu .subject .content ul .submenu a { color:#ffffff; font-size:1.2rem; text-decoration: none; }
.top .topmenu .subject .content ul .submenu .name { color:#8a7457; }
.top .topmenu .subject .content ul .submenu .date { color:#ababab; }


/* ashin */
.ashin { background:url("./images/img_bg1.jpg") no-repeat center center fixed; background-size:cover; padding:60px 0px; }
.ashin .cont { text-align:justify; }
.ashin .cont .ashtxt .txtrange { margin-bottom:30px; }

/* product */
.product { padding:60px 0px; }
.product .pd:hover { cursor: pointer; }
.product .pd .des .pdname { color:#303030; font-size:1.2rem; }
.product .pd .des .price { white-space: nowrap; font-family:"Helvetica"; }
.product .pd .des .price1 { color:#8a7457; font-size:0.9rem; }
.product .pd .des .offer { font-size:1rem; font-weight: bold; }
.product .pd .des .price2 { color:#ababab; font-size:0.9rem; }
.product .pd .des .origin { text-decoration: line-through; }
.product .row .fullad { margin:30px 0px; }

/* list */
.list { display: flex; }
.list .items { flex-grow:1; width:100%; position:relative; }
.list .items:hover .mask { cursor: pointer; display: block; }
/* .list .items img { width:100%; } */
.list .items .txt { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); white-space: nowrap; color:#ffffff; font-size:2rem; padding:10px 20px; font-family: 'Noto Serif TC', serif; z-index:1; }
.list .items .mask { position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); display:none; }

/* news */
.news { padding:100px 0px; background-color: #f7f0e7; }
.news .row .new {  text-align:left; }
.news .row .new .txt { padding:20px; border:2px solid #ffffff; height:100%; }
.news .row .new .txt .time { color:#bd9f77; padding-bottom:15px; font-size:0.8rem; }
.news .row .new .txt .point { color:#000000; text-decoration: none; }
.news .row .new .txt .point:hover { color:#bd9f77; cursor: pointer; }

/* store */

.store .pic { background: url("./images/img_foot.jpg") no-repeat center center; background-size:cover; }
.store .intro { display:flex; align-items:center; }
.store .intro .content { width:100%; max-width:600px; margin:0 auto; padding-left:15px; padding-right:15px; }
.store .intro .logo { max-width: 176px; width:100%; margin-bottom:40px; }
/* icon */
.store .intro .icon div { height:32px; width:32px; display:inline-block; margin-bottom:30px; margin-left:4px; }
.store .intro .icon div:hover { cursor: pointer; }
.store .intro .icon .fb { background: url("./images/img_s1.png") no-repeat center center; background-size:cover; }
.store .intro .icon .ig { background: url("./images/img_s2.png") no-repeat center center; background-size:cover; }
.store .intro .icon .line { background: url("./images/img_s3.png") no-repeat center center; background-size:cover; }
.store .intro .icon .yt { background: url("./images/img_s4.png") no-repeat center center; background-size:cover; }
.store .intro .icon .twi { background: url("./images/img_s5.png") no-repeat center center; background-size:cover; }
.store .intro .icon .wc { background: url("./images/img_s6.png") no-repeat center center; background-size:cover; }
.store .intro .icon .wb { background: url("./images/img_s7.png") no-repeat center center; background-size:cover; }
/* intro */
.store .intro .addr,.phone,.fax,.email { padding:25px 0px; border-top:1px solid #bd9f77; text-align:left; white-space: nowrap; }
.store .intro .t1 { width:60px; padding-left:5px; color:#8a7457; }
.store .intro .t2 { color:#303030; font-size:1.2rem; }
.store .intro .phone .t2,.fax .t2,.email .t2 { font-family: "Helvetica"; }
.store .intro .addr .map { margin-left:20px; font-size:0.8rem; font-weight:bold;  }
.store .intro .addr .map a:hover { border-bottom: 2px solid #decfbb; color:#bd9f77; cursor: pointer; }
.store .intro .addr .map a { border-bottom:2px solid #c4b9ab; color: #8a7457; text-decoration: none;  }
.store .intro .phone .date { margin-left:65px; padding-top:15px; color:#777777; }


/* amination area init */
.areamove, .prod,.btmbnr, .newcont { transform:translateY(100px); opacity: 0; }
.upslideAni { animation:upslide 2s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}

@media (min-width:1200px){
    .product .pd .des { width:350px; }
    .store { height:960px; }
}

@media (max-width:1199.98px) and (min-width:992px){
    .product .pd .des { width:289.98px; }

    .store { height:840px; }
    .store .intro .content { max-width:496px; }
    .store .intro .t1 { font-size:0.9rem; }
    .store .intro .t2 { font-size:1rem; }
}

@media (min-width:992px){
    .ashin .cont .ashtxt .txtrange { margin-right:50px; }
    .ashin .cont .ashtxt .detail { margin-right:50px; }
    .ashin .cont .ashimg img { margin-left:40px; }
    
}

@media (min-width:768px) and (max-width:991.98px){
    /* .top .topbnr .bnr { height:60vh; } */
    .top .logo img { width:45%; }

    .ashin .cont .ashtxt .txtrange { margin-right:20px; }
    .ashin .cont .ashtxt .detail { margin-right:20px; }
    .ashin .cont .ashimg img { margin-left:20px; }

    .product .pd .des { width:210px; }

    .store { height:720px; }
    
    .store .intro .addr,.phone,.fax,.email { padding:20px 0px; }
    .store .intro .content { max-width:384px; }
    .store .intro .t1 { font-size:0.8rem; width:45px; }
    .store .intro .t2 { font-size:0.8rem; }
    .store .intro .addr .map { font-size:0.7rem; margin-left:10px; }
    .store .intro .phone .date { margin-left:50px; font-size:0.8rem; }
}

/* 手機橫寬991.98內 banner全版 */
/* @media (max-width:991.98px) and (orientation: landscape){
    .top .topbnr .bnr { height:100vh; }
} */

@media (min-width:768px){

    .ashin .cont { width:80%; margin:0 auto; }
    .ashin .cont .ashtxt { width:50%; float:left; height:200px; }
    .ashin .cont .ashimg { width:50%; float:left; }
    .ashin .cont .ashimg img { margin-top:20px; max-width:400px; }
    
    .product .pd { position:relative; }
    .product .pd .des { background: url("./images/img_pdbg.png") repeat-x; position: absolute; left:50%; transform:translate(-50%); bottom:0px; color:#ffffff; opacity:0; transition:all .2s ease-in-out; padding-top:40px; }
    .product .pd:hover .des { opacity:1; }
    .product .pd .des .price { margin:10px 0px; }

    /* .list .items .txt { font-size:2rem; padding:10px 20px; font-family: "標楷體"; } */

    .store { display:flex; }
    .store .pic,.intro { flex:1; }
    .store .pic img { display:none; }
    .store .intro .icon div { margin-left:10px; }
    .store .intro .addr div,.phone div:not(.date),.fax div,.email div { display:inline-block; }

}

@media (max-width:767.98px){
    .detail { padding-bottom:5px; }

    .top .topmenu .menu .mb1 { display:none; }

    .ashin .cont .ashtxt .detail { margin-bottom:40px; }
    
    .product .pd { margin:10px 0px; }
    .product .pd .des { margin:20px 0px; }

    .list { flex-direction: column; }

    .news .row .new { margin-top:30px; }
    
    .store .intro .t1 { padding-left:0px; }
    /* .store .intro .icon { display:flex; justify-content: space-between; } */
    
    .store .intro .addr .map { margin-left:0px; padding-top:0px; }
    .store .intro .phone .date { margin-left:0px; padding-top:0px; }

}

/* @media (max-width:767.98px) and (min-width:576px){
    .title { font-size:4rem; line-height:70px; }
    .subtitle { font-size:1rem; margin-bottom:60px; }
    .detail { font-size:1.6rem; font-weight: bold; }
    
    
    .top .topmenu .menu .mb2 { width:110px; height:110px; font-size:3rem; }
    .top .topmenu .subject .toplogo { height:110px; padding:25px 0px; }

    .top .topmenu .subject .content ul .submenu { padding:25px 0px; }
    .top .topmenu .subject .content ul .submenu a { font-size: 2rem; }


    .ashin,.product,.news { padding:120px 0px; }
    .ashin .cont .ashtxt .txtrange { font-size:1.7rem; line-height:45px; margin-bottom:50px; }

    .product .pd { margin:40px 0px; }
    .product .pd .des .pdname { font-size:2rem; }
    .product .pd .des .price1 { font-size:1.8rem; }
    .product .pd .des .offer { font-size:2.4rem; }
    .product .pd .des .price2 { font-size:1.5rem; }
    .product .row .fullad { margin-bottom:80px; }

    .list .items .txt { font-size:3.5rem; padding:15px 25px; }

    .news .row .new .txt { padding:35px; border:4px solid #ffffff; }
    .news .row .new .txt .time { font-size:1.5rem; }
    .news .row .new .txt .content { font-size:2rem; }

    .store .intro .logo { max-width: 350px; margin-bottom:60px; }
    .store .intro .content { max-width:560px; margin:120px auto;  }
    .store .intro .icon div { height:60px; width:60px; margin-bottom:60px; margin-left:10px; }
    .store .intro .t1 { font-size:1.5rem; }
    .store .intro .t2 { font-size:2rem; }
    .store .intro .addr .map { font-size:1.5rem; font-weight:normal; }
    .store .intro .phone .date { font-size:1.7rem; }
    .store .intro .addr,.phone,.fax,.email { padding:30px 0px; }

} */

@media (max-width:767.98px){
    .title { font-size:2rem; }
    /* .subtitle { font-size:0.4rem; } */

    .top .topmenu .menu .mb2 { width:60px; height:60px; font-size:1rem; }
    .top .topmenu .subject .toplogo { height:60px; padding:15px 0px; }
    .top .topmenu .subject .toplogo img { height:30px; }

    /* .list .items .txt { font-size:2rem; padding:5px 10px; } */

    .product .pd .des .pdname { font-size:1.2rem; }
    .product .pd .des .price1 { font-size:1rem; }
    .product .pd .des .offer { font-size:1.2rem; }
    .product .pd .des .price2 { font-size:0.9rem; }

    .store .intro .content { max-width:320px; margin:60px auto;  }
    .store .intro .t2 { font-size:1rem; }

}