/* 共用 */
.title { color:#00b0e4; font-size:1.875rem; line-height:50px; }
/* .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:#fff; position: fixed; top:0; left:0; width:100%; height:100%; z-index:10000; }
.loading img { width:160px; padding-top:30vh; }

.top { position: relative; }
.top .topbnr .bnr { width:100%; height:calc(100vh - 80px); }
.top .topmask { width:100%; position: absolute; top:0px; bottom:0px; background: url("./images/topmask.png") no-repeat right top , url("./images/topmask2.png") no-repeat left bottom; }

.news { padding:30px 0px; display: flex; justify-content: space-between; align-items: center; }
.news .newtitle { color:#00b0e4; }
.news .slash { padding:0px 30px; }
.news .content a { color:#333f48; text-decoration: none; }
.news .content a:hover { color:#ffa400; }
.news .more a { color:#333f48; border:1px solid #c6c6c6; font-size:0.9rem; border-radius: 25px; padding:8px 50px; text-decoration: none; }
.news .more a:hover { background-color: #ffa400; color:#fff; border:none; margin:0px 1px; }


.chiauhau { display: flex; }
.chiauhau > div { flex:1; padding:60px; }
.chiauhau .logo { background: url("./images/img_bg.jpg") center center; background-size:cover; }
.chiauhau .logo .cont { padding:20px 0px; }
.chiauhau .logo img { max-width:300px; }
.chiauhau .more {   margin-top:40px;  }
.chiauhau .more a { display: inline-block; color:#333f48; padding:10px 45px; border:1px solid #333f48; text-decoration: none; }
.chiauhau .more a:hover { background-color: #ffa400; color:#fff; border:1px solid #ffa400; }

.chiauhau .txt { background-color: #f5f8fa; }
.chiauhau .txt .cont { padding-top:40px; text-align:left; max-width:560px; margin:0 auto;   }
.chiauhau .txt .subject { color:#333f48; font-size:1.5rem; }
.chiauhau .txt .content { color:#474747; margin-top:30px; text-align: justify; }

.product { padding:80px 0px; }
.product .title { padding:5px 0px; background: url("./images/img_titlebg.png") no-repeat center bottom; background-size:contain; }
.product .pd { margin-top:30px; }
.product .pd a { text-decoration: none; }

.product .pd .des .pdname { color:#333f48; font-size:1.75rem; }
.product .pd .des .price { white-space: nowrap; font-family:"Helvetica"; }
.product .pd .des .price1 { color:#ffa400; font-size:0.875rem; }
.product .pd .des .offer { font-size:1.125rem; font-weight: bold; }
.product .pd .des .price2 { color:#919191; font-size:0.9rem; }

.service { background: url("./images/img_bg3.jpg") no-repeat bottom center; background-color:#f5f8fa; }
.service .cont { padding:80px 0px; display: flex; }
.service .cont > div { flex:1; }
.service .cont img { width:160px; margin-bottom:20px; }
.service .cont .content { text-align:justify; max-width:320px; margin:0 auto; color:#474747; margin-bottom:40px; }
.service .cont .link a { color:#ffa400; padding-bottom:15px; font-size:1.5rem; text-decoration: none; border-bottom:1px solid #95d600; letter-spacing: 5px; }
.service .cont .link a:hover { color:#95d600; }

.intro { padding:60px 0px; background: url("./images/img_bg4.jpg") no-repeat center center; background-size:cover; }
.intro .cont { display:flex; }
.intro .cont > div { flex:1; }
.intro .kv { padding: 0px 20px; text-align: left; order:-1; }
.intro .kv .key { color:#fff; margin-bottom:6px; }
.intro .kv .key .icon { width:30px; }
.intro .kv .val { margin-bottom:30px; color:#fff; }
.intro .logo img { max-width:240px; }
.intro .contact > div { width:70%; float:right; }
.intro .contact .ctbtn { display:block; background-color: #333f48; color:#fff; border-radius: 50px; text-decoration: none; border:1px solid transparent; }
.intro .contact .ctbtn:hover { background:transparent; border:1px solid #fff; }
.intro .contact .ctone { padding:11px 0px; }
.intro .contact .ctmul { width:48px; height:48px; }
.intro .contact .ctone .icon { color:#fff; padding-right:10px; }
.intro .contact .ctbtn.env { margin:24px 0px; }
.intro .contact .date { color:#fff; padding-top:10px; }
.intro .contact .comunity { display: flex; justify-content: center; }
.intro .contact .comunity .icon { font-size:1.2rem; padding:14px 0px; }
.intro .contact .comunity .icon.line img { max-height:19px; width:auto; }
.intro .contact .comunity a:not(:last-child) { margin-right:20px; }

/* 圖片放大 */
/* @keyframes zoomin {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}


/* amination area init */
/* .cont, .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; } */
    /* .top .topbnr .bnr { height:60vh; } */
}

@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 (max-width:991.98px){
    .intro .contact .ctone { padding:11px 0px; }
    .intro .contact .ctmul { width:48px; height:48px; }
    .intro .contact .comunity .icon { font-size:1rem; padding:16px 0px; }
    .intro .contact .comunity .icon.line img { max-height:16px; }
}


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

    .chiauhau .txt .cont { padding-top:20px; }

    .service .cont .content { max-width:250px; }

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

    .intro .kv .val { margin-bottom:25px; padding-right:20px; }
    .intro .contact > div { width:95%; }
    .intro .contact .ctone .icon { padding-right:10px; }
    .intro .contact .comunity a:not(:last-child) { margin-right:20px; }

}

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

@media (min-width:768px){
    .product .pd .des { opacity:0; background-color: rgba(255,255,255,0.9); position: absolute; top:0; left:0px; right:0px; bottom:0; transition:all .2s ease-in-out; }
    .product .pd .des .pdname { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); }
    .product .pd .des .price { position: absolute; left:50%; transform: translate(-50%, 0); bottom:20px; }
    .product .pd { position:relative; }
    .product .pd:hover .des { opacity:1; }

    .intro .logo { display: flex; align-items: center; justify-content: center; }
}

@media (max-width:767.98px){
    .top .topbnr .bnr { height:100vh; }
    .top .topmask { background-size:40%; top:60px; }

    .news { display: block; text-align:left; padding:60px 0px; }
    .news .newtitle { font-size:1rem; display: block; }
    .news .slash { padding-left: 20px; }
    .news .content { padding-top:10px; padding-bottom: 10px; font-size:1rem; display: block; }
    .news .more { padding-top:30px; text-align:center; }
    .news .more a { font-size:1rem; border-radius: 50px; padding:10px 50px; }
    
    .chiauhau { display: block; }
    .chiauhau > div { padding:60px 0px; }
    .chiauhau .logo .cont { padding:0px; }
    .chiauhau .logo img { max-width:250px; }
    .chiauhau .txt .cont { padding-top:0px; }
    .chiauhau .txt .subject { text-align:center; font-size:1.875rem; }
    .chiauhau .txt .content { font-size:1rem; margin-top:30px;  }
    .chiauhau .more { margin-top:40px; text-align:center; }
    .chiauhau .more a { padding:10px 50px; font-size:1rem; }


    .product .pd .des .pdname { font-size:1.25rem; padding:15px 0px; }

    .service .cont { padding:60px 0px; display: block; }
    .service .cont img { margin-bottom:20px; width:100%; max-width:160px; }
    .service .cont div:first-child { margin-bottom:80px; }
    .service .cont .content { max-width:300px; font-size:1rem; margin-bottom:30px; }
    .service .cont .link a { padding-bottom:15px; font-size:1.5rem; letter-spacing: 3px; }

    .intro { padding:60px 0px 30px 0px; background: url("./images/img_bg4m.jpg") no-repeat center center; background-size:cover; }
    
    .intro .cont { display:block; }

    .intro .contact > div { width:100%; float:none; max-width:250px; margin:0 auto; }
    .intro .cont > div:not(:last-child) { margin-bottom:60px; }
    .intro .contact .ctone { padding:12px 0px; }
}