/* 共用 */
.title { color:#023241; font-size:2.5rem; line-height:50px;}
.subtitle { color:#005e95; font-size:0.8rem; margin-bottom:40px; padding-left:4px; }
.detail { color:#50d4f2; float:right; padding:0px 5px 10px 5px; border-bottom:2px solid #50d4f2; }
.detail:hover { text-decoration: none; color:#feaf73; border-bottom:2px solid #feaf73; }
.tmenu { text-align:left; position: relative; }
.tmenu .detail { position: absolute; right:10px; bottom:25px; }


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

.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:90%; }
.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: #feaf73; }
.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,94,149,0.5); }
.top .topmenu .menu .mb2 { background-color:#0088cf; }

.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:#005e95; text-align: center; }
.top .topmenu .subject .toplogo img { width: auto; height: 60px; }
.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 a:hover { color:#f2c063; font-size:1.2rem; text-decoration: none; }
.top .topmenu .subject .content ul .submenu .name { color:#d97652; padding-bottom: 4px;}
.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 .title { color:#fff; }
.ashin .subtitle { color:#50d4f2; }
.ashin .cont { text-align:justify; }
.ashin .cont .ashtxt .txtrange { margin-bottom:30px; color: #fff; }

/* product */
.product { padding:60px 0px; }
.product .pd:hover { cursor: pointer; }
.product .pd .des { padding:10px 0px; }
.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:#50d4f2; 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; height: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; z-index:1; }
.list .items .txt .linkbd { transition:all .3s ease-out; position: relative; width:48px; height:2px; background-color:#feaf73; margin:0px auto; }
.list .items .txt .linkbd.top { top:-20px; }
.list .items .txt .linkbd.bottom { bottom:-20px; }
.list .items:hover .linkbd.top { top:-60px; }
.list .items:hover .linkbd.bottom { bottom:-60px; }
.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: #fff; }
.news .row .new {  text-align:left; }
.news .row .new .txt { padding:30px; border-left:1px solid #f1f1f1; height:100%; }
.news .row .new .txt .time { color:#919191; padding-bottom:15px; font-size:0.8rem; }
.news .row .new .txt .point { color:#023241; text-decoration: none; }
.news .row .new .txt .point:hover { color:#0088cf; cursor: pointer; }

/* store */

/* .store .pic { background: url("./images/img_foot.jpg") no-repeat center center; background-size:cover; } */
.store .SquareBase { padding-top:960px; }
.store .intro { display:flex; align-items:center; }
.store .intro .content { width:100%; max-width:600px; margin:40px auto; padding-left:15px; padding-right:15px; }
.store .intro .logo { max-width: 240px; 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 #e2e2e2; text-align:left; white-space: nowrap; }
.store .intro .t1 { width:60px; padding-left:5px; color:#527586; }
.store .intro .t2 { color:#262626; font-size:1.25rem; }
.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 #feaf73; color:#d97652; cursor: pointer; }
.store .intro .addr .map a { border-bottom:2px solid #50d4f2; color: #0088cf; 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; }
 
    .store { display:flex; }
    .store .SquareBase,.intro { flex:1; }
}

@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 .SquareBase { padding-top: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 .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){
    .title { font-size:2rem; }

    .detail { padding-bottom:5px; }

    .top .topmenu .menu .mb1 { display:none; }
    .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; }

    .ashin .cont .ashtxt .detail { margin-bottom:40px; }
    
    .product .pd { margin:10px 0px; }
    .product .pd .des { margin:20px 0px; }
    .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; }

    .list { flex-direction: column; }

    .news .row .new { margin-top:30px; }
    
    .store .SquareBase { padding-top:100%; }
    .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; }
    .store .intro .content { max-width:320px; margin:60px auto;  }
    .store .intro .t2 { font-size:1rem; }

}