/* .testFont { font-family:"Times New Roman"; font-size:2rem; } */
/* 共用 */
.title { color:#601986; font-size:2.5rem; line-height:50px; }
.subtitle { color:#601986; font-size:0.8rem; font-weight:bold; font-family:"Times New Roman"; margin-bottom:40px; padding-left:4px; }
.detail { color:#1b1b1b; float:right; padding:0px 5px 10px 5px; border-bottom:2px solid #00b2c4; }
.detail:hover { text-decoration: none; color:#00b2c4; border-bottom:2px solid #00b2c4; }
.tmenu { text-align:left; position: relative; }
.tmenu .detail { position: absolute; right:10px; bottom:25px; }


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

.top { position: relative; }
.top .bgpic { width:100%; height:100vh; }
.topbnr { padding:60px 0; }

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

.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: #00b2c4; }
.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:#601986; 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:#ababab; }
.top .topmenu .subject .content ul .submenu .date { color:#ababab; }


.modlink .item { position:relative; }
.modlink .item a { display:block; }
.modlink .item .sub { position:absolute; top:0; left:0; right:0; bottom:0; }
.modlink .item .text { 
    text-align:center; 
    background-color:#00b2c4; color:#ffffff;  
    padding:10px; 
    min-width:60%; 
    font-size:36px;
    }

/* ashin */
.ashin { background:url("./images/img_bg1.jpg") no-repeat center center fixed; background-size:cover; padding:60px 0px; }
.ashin .cont { text-align:justify; color:#fff; }
.ashin .cont .title { color:#fff; }
.ashin .cont .subtitle { color:#fff; }
.ashin .cont .detail { color:#fff; border-bottom:2px solid #00b2c4; }
.ashin .cont .detail:hover { text-decoration: none; color:#601986; border-bottom:2px solid #601986; }
.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:#601986; 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; }
.product .prod > div { padding-top:15px; padding-bottom:15px; } 

/* 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; 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: #920783; }
.news .title { color:#fcc92c; }
.news .subtitle { color:#fcc92c; }
.news .detail { color:#fff; border-bottom:2px solid #00b2c4; }
.news .row .new {  text-align:left; }
.news .row .new .txt { padding:20px; border:2px solid #9d2090; height:100%; }
.news .row .new .txt .time { color:#fff; padding-bottom:15px; font-size:0.8rem; }
.news .row .new .txt .point { color:#fff; text-decoration: none; }
.news .row .new .txt .point:hover { color:#fcc92c; cursor: pointer; }

/* store */

.store .pic iframe { width:100%; height:100%; } 
.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 #ababab; text-align:left; white-space: nowrap; }
.store .intro .t1 { width:60px; padding-left:5px; color:#474747; }
.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 #601986; color:#601986; cursor: pointer; }
.store .intro .addr .map a { border-bottom:2px solid #00b2c4; color:#00b2c4; text-decoration: none;  }
.store .intro .phone .date { margin-left:65px; padding-top:15px; }

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

.video-container-4by3 {
	position: relative;
	padding-bottom: 75%;
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}

.video-container-4by3 iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

/* 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:768px){

    .ashin .cont { }
    .ashin .cont .ashtxt { width:40%; float:left; }
    .ashin .cont .ashimg { width:60%; float:left; }
    
    .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 (min-width:768px) and (max-width:991.98px){
    .top .bgpic { height:60vh; }

    .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; }
}

@media (min-width:992px){
    .ashin .cont .ashtxt { width:36%; }
    .ashin .cont .ashimg { width:64%; }

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

@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; }
}

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

@media (max-width: 1599.98px) {
    .modlink .item .text { font-size:30px; }    
}                           

@media (max-width: 1199.98px) {
    .modlink .item .text { font-size:26px; }    
}                           

@media (max-width: 991.98px) {
    .modlink .item .text { font-size:30px; }    
}                           

@media (max-width:767.98px){
    .topbnr { padding:30px 0; }
    .modlink .item .text { font-size:26px; }    

    .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; }

    .list { flex-direction: column; }

    .news .row .new { margin-top:30px; }

    .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; }

    .store .pic iframe { min-height:360px; }
    .store .intro .content { max-width:320px; margin:60px auto;  }
    .store .intro .t1 { padding-left:0px; }
    .store .intro .t2 { font-size:1rem; }
    /* .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: 575.98px) {
    .topbnr { padding:15px 0; }
    .modlink .item .text { font-size:18px; }    
}