@charset 'utf-8';
/*
style.css
*/

body {
  position: relative;
  margin:0;
  padding:0;
     margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparen;
	min-height: 100%;
    top: 0px;
}



ul { list-style:none; list-style-type:none}


/* 連結共用動畫 */
a, a.btn {
  text-decoration: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
img {border:0}
.Mainimg {
	max-width:100%;
	height:auto;
 
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

		產品內頁左側品牌介紹 
		 
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* -----------------------------
    banner+logo
    ----------------------------- */

.brand-info-header {
 content: ' ';
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  background: #fff;
  overflow: hidden;
    }
/* -----------------------------
    banner+logo+Shopnmae txt
    ----------------------------- */
.brand-info {
    position:relative;
  overflow: hidden;
  background: #FFFFFF;
   font-size: 0.9rem;
  line-height: 24px;
  word-break: break-all;
  font-size: 14px;
  line-height: 24px;
  margin:70px auto  30px auto;

}


 @media (max-width:800px) {
 .brand-info {  display:block}
   }


/* -----------------------------
     店家背景置中框
    ----------------------------- */

.brand-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
	width:100%;   
     padding-bottom:30%;
	 background-color:#F8F8F8
}
 /* -----------------------------
     店品牌bannerBg
    ----------------------------- */

.Brand-banner{  
    display:block;
    width: 100%;
    height:425px;
    overflow:hidden;
    border: 0;
	 position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0;

}

.Brand-banner:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;}


@media (max-width:800px) {
	.brand-responsive {  padding-bottom:50%}
	
}


  
     /* -----------------------------
     title
    ----------------------------- */ 
  
  
  .titleArea { position: relative;border-bottom: #ededed 1px solid; margin-bottom:20px; line-height:1.45em }
 .titleArea p.date { font-size: 16px; font-family: 'apercuregular'; font-weight: normal; letter-spacing: .1em; padding:0 15px 5px }
.titleArea h2.headline-txt { font-size: 24px; letter-spacing: .1em; line-height: 1.7; }

   /* -----------------------------
     店家主要功能按鈕
    ----------------------------- */  


 .link { text-align: center; margin-top:10px; margin-bottom:20px; display:table }
 .link ul{ padding:0; margin:0; list-style:none; left:0 }
 .link a.btn { margin:10px 5px; }
 .link a.btn-border { margin: 0 5px; }
 
 /* -----------------------------
   
   a.btn
   
   ----------------------------- */
   
.link a.btn {
	          font-family: "微軟正黑體";
              color:#fefefe;
              background:#a1abb6;
			  border:#a1abb6 2px solid; 
			  display: inline-block; 
              width: auto; 
			  line-height:40px; 
			  text-align: center;
			  font-size: 16px;
			  font-weight: 600; 
			  letter-spacing: .1em;
		      position: relative;
			  padding: 0 10px;
			   -webkit-border-radius: 5px;
			  -moz-border-radius: 5px; 
			  border-radius: 5px }

.link a.btn-border {
	           color:#333;
              background:#fefefe;
			  border:#aaa 2px solid;
			  display: inline-block;
			  width: auto;
			  line-height:40px; 
			  text-align: center; 
			  font-size: 16px;
			  font-weight: 600;
			  letter-spacing: .1em; 
			  position: relative; 
			  padding: 0 22px; 
			  -webkit-border-radius: 5px;
			  -moz-border-radius: 5px;
			  border-radius: 5px }

.link a.btn:hover {color:#fff;border:#a1abb6 2px solid;background:#a1abb6;}
.link a.btn-border:hover { color:#fff; border:#a1abb6 2px solid;background:#a1abb6;}

 @media screen and (max-width:800px){
.link {display:none}

 }
	 
   
       /* -----------------------------
     店家商家相片+名字
    ----------------------------- */



 .brand-logoBox{ 
     position: relative;
    z-index: 2;
    text-align: center;
    left: 0px;
	margin:-90px auto 0 auto;
	
}
 /* -----------------------------
     店家商家相片 連結
    ----------------------------- */
.brand-info-wrap {
width: 245px;
    height: 245px;
    overflow: hidden;
    background:#F8F8F8;
    position: relative;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    /* background-color: rgba(16, 54, 110, 0.65); */
    /* pointer-events: none; */
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    cursor: pointer;

  }
@media (max-width:800px) {
.brand-info-wrap { 
    margin-top: -120px;
	}	
}

   /* -----------------------------
     店家商家主要相片
    ----------------------------- */  
 .brand-info-wrap img {
    line-height: 0;
    vertical-align: bottom;
    display: block;
    margin: 0 auto;
    transition-property: transform;
    -webkit-transition-duration: .6s;
    transition-duration: .6s;
    box-sizing: border-box;
    border: 0;
    line-height: 0;
    vertical-align: top;
    height: 100%;
    width: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    cursor: pointer;

}


.brand-logo-cover img:hover {
  box-shadow: 0 0 0 1px #666, 0 0 8px #555555;
}


@media (max-width:800px) {
.brand-logo-cover img {
    max-width:150px;
	 max-height:150px; 
    margin:0 auto;   
    border:#ddd solid 1px;
  }
  
}


 /* -----------------------------
     店家商家名稱
    ----------------------------- */
	
.brandWrap {
	margin:15px auto 15px auto;
	max-width:100%;
	vertical-align:middle
}	
.brand-name {   
     font-family: "微軟正黑體";
    font-style:normal;    
  margin:5px auto 5px auto;
  font-size:1.8rem;
  text-align:center;
  line-height:1.75em
}
.brand-name a {    
  color: #000;
  font-weight:700;
  text-decoration: none;
  display: inline-block;
}







/* -------------------------------------------------
  
  Menu頁籤
  
------------------------------------------------- */

 .tab-navBox{width:100%; margin: auto; display:table; padding-bottom:12.8px; margin-bottom:5rem}
 .tab-navBox ul{width:100%; padding:0; margin:0; left:0;list-style: none;list-style-type: none;}

 .tab-nav {
	 font-family:"微軟正黑體";
  position: relative;
  display: table;
   border-spacing: 3px;
}
.tab-nav li {	color:#222;
   border-right:#ddd solid 1px;
   border-left:#ddd solid 1px;
   border-top:#ddd solid 1px;
   display: table-cell;
  width:140px;
}
/*後面選單*/

.tab-nav .tab-title:hover a,.tab-nav .tab-title.Firstselect a {
  color:#222;
}
.tab-nav .tab-title.Firstselect {
	 color:#222;
  border-top:#FB798C solid 5px;
  background-color: #fff;
  line-height:30px ;
  }
.tab-nav .tab-title:hover{ 
  color:#222;
  border-top:#FB798C solid 5px;
  background-color: #fff;
  line-height:30px ;
}
/*次選單*/
.tab-nav .tab-title {
  vertical-align: middle;
   border-top:#ddd solid 1px;
  border-radius: 5px 5px 0 0;
  background:#ebebeb;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  min-height:30px;
   line-height:30px ;
  text-decoration: none ;

}
.tab-nav {
  display: inline-block;
  width:95%; 
  text-align:center;
  vertical-align: middle;
  position: relative;
  top:15px;
  margin-bottom:10px;
  margin-right: 5px;
 
}

.tab-nav .tab-title a {
  color: #626262;
  text-decoration: none;
  display: block;
  height: 100%;
  padding:10px 5px;
  line-height: 20px;
 }
 
 @media only screen and (max-width:800px) {
  .tab-nav .tab-title {font-size:12px}
  .tab-nav {  display:flex;  width:100%;} 
  .tab-navBox ul {
    margin-left: -10px;
}	
.tab-nav li { float:left; margin-right:3px;margin-left:3px; width:100px}
.tab-navBox{width:100%; margin: auto; display:flex; padding-bottom:15px;}
 }
 







/*==========================================

top選單區第一區>>>ipad版後

===========================================*/

	


.bottom_nav{    display:none;}
.bottom_nav ul{margin: 0;  padding: 0;}
.bottom_nav ul li{ float:left;text-align:center; padding:0 0.25em}

.bottom_nav  ul li a{ float:left; color:#757575}
.bottom_nav ul li a:hover{color:#3bbb80}

@media only screen and (max-width: 800px){
.bottom_nav{display:inline-block;padding-top:0.9em; max-width:100%}
.bottom_nav ul{margin: 0;  padding: 0;}
.bottom_nav ul li{ float:left;text-align:center; padding:0 0.25em}

.bottom_nav  ul li a{ float:left; color:#757575}
.bottom_nav ul li a:hover{color:#3bbb80}

}

@media only screen and (max-width: 680px){
.bottom_nav{position: relative;
            display:inline-block;
            text-align: center;
			margin:auto;
			float: none;
			 padding-top:0.313em}

.bottom_nav ul{margin: 0 auto;  padding: 0;}	
}


/*==========================================


  Message 


===========================================*/


.toolbox__container {
	  z-index:15;
    position: fixed;
    bottom:60px;
    right: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
	animation-name: bounce_in_animation;
    animation-duration: 250ms;
	transition: all 0.5s ease 0s;
}



/* 功能欄位 */
.feature {
	right: 30px;
	top: 30px;
	z-index: 100;
	position: static;
	margin-bottom: 0px;
	list-style: none;
		padding: 0px;
}


.feature a {
	display: inline-block;
}

 .feature .feature-item{
	display: inline-block;
	vertical-align: top;
	margin-bottom: 0px;
}

 .feature .feature-share-list{
	display: inline-block;
	vertical-align: top;
	position: static;
	padding-top: 0px;
}

.feature-share-list > li{
	display: inline-block;
	vertical-align: top;
}

@media screen and (min-width: 1025px) {
	.feature.is-basic {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: end;
		 -ms-flex-pack: end;
		justify-content: flex-end;
		padding: 10px 20px;
		position: static;
		background-color: #f1f1f1;
	}

	.feature.is-basic .feature-item{
		margin-right: 10px;
		margin-bottom: 0px;
	}

	.feature.is-basic .feature-share-list{
		position: absolute;
		z-index: 1;
	}
}

.feature .feature-item {
	display: block;
	margin-bottom: 10px;
}

.feature .feature-item:last-child {
	margin-bottom: 0px;
}

.feature a {
	width: 40px;
	height: 40px;
	display: block;
	border-radius: 100%;
	text-indent: -9999px;
	background-position: center;
	background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0.03em 0.05em 0.1em 0 rgba(0,0,0,0.25);
}

.feature a.Media.Media-Line {
	background-image: url(../images/icon/LINE.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:70%
}

.feature a.Media.Media-Fb {
		background-image: url(../images/icon/FB.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:70%
}
.feature a.Media.Media-Youtube {
		background-image: url(../images/icon/Youtube.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:70%
}

.LineBg{ background:#00c300}
.FbBg{background:#0084ff}
.YoutubeBg{background:#CC202D}

	.feature a:hover,
	.feature a:focus {
		background-color:#ddd
	}

	/*------------------------
      
	Toop up

----------------------*/
.scrollUpbar {
    height:70px;
	display:block;
    background:#ddd;
	width:1px;
    z-index:10;
	margin-bottom:0px;
  position:relative
	}

/*---scrollUpbar:after{
    content: "scroll top";
    transform: rotate(-90deg);
    position: absolute;
    height: 20px;
    width: 113px;
    left: -80px;
    bottom: 60px;
    color: #ccc;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
----*/



.scrollUp {
   cursor: pointer;
	right: 0;
	z-index: 100;
	    float: right;
    position: relative;
	margin-top:0px
	}
.scrollUp a { 
    background-color:#283d58;
    width: 50px;
    height: 50px; 
    display: block;
    border:none;
    text-align: center;
	-webkit-border-radius: 100%;
	border-radius: 100%;
    position:relative; 
	z-index:1;
	  box-shadow: 0.03em 0.05em 0.1em 0 rgba(0,0,0,0.25);
	color:#FFF
	 }
.scrollUp a:before { 
    position:absolute;
    top:0;
    left:0;
	right:0;
	bottom:0;
	content:"TOP";
	font-size: 14px;
	line-height:48px;
	text-align:center;
	font-family: 'Noto Sans TC', Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
	
  }
.scrollUp a:hover {
	-webkit-transform: translate(0px, -10px);
	 transform: translate(0px, -10px);
     opacity:0.8;
    -moz-opacity:0.8;
    -khtml-opacity: 0.8; 
    filter:alpha(opacity=80);
	}

@media only screen and (max-width: 966px) {
.scrollUp{ bottom:15px;  }
.toolbox__container {bottom:40px;} 
}

@media only screen and (max-width: 800px) {
.scrollUp a:hover { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); }
}

 @media screen and (max-width: 768px) {
	.toolbox__container {bottom:30px;} 
.scrollUpbar { height:30px}
.scrollUp a { background-color: rgba(40,61,88, 0.8);}
	.scrollUp a:hover { background-color: rgba(40,61,88, 1);}
.scrollUp a { width: 40px; height: 40px; }
.scrollUp a:before { line-height:43px;  }

.car_block {bottom:0}

.feature a {
    width: 35px;
    height: 35px;
 }
.feature .feature-item { margin-bottom: 5px;}
.feature a.Media.Media-Line {background-size:60%}
.feature a.Media.Media-Fb {background-size:60%}
}




/*-------------------
  頁籤
-----------------*/
.site-pagination {
    clear: both;
    padding: 1em 0 1em 0;
    position: relative;
    text-align: center;
    margin: auto;
}

    .site-pagination ul, .site-pagination ul li {
        padding: 0;
        margin: 0;
    }

        .site-pagination ul li {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            margin-bottom: 0.313em;
        }

            .site-pagination ul li a {
                color: #474747;
                text-decoration: none;
                background-color: transparent;
            }

                .site-pagination ul li a:hover {
                    background:rgba(7,215,247,.1)
                }

            .site-pagination ul li a, .site-pagination ul li span {
                text-align: center;
                display: inline-block;
                width: 1.5em;
                height: 1.5em;
                line-height: 1.5em;
                font-size: 0.938em;
                border: 0.048em solid #ccc;
            }


            .site-pagination ul li.active a, .site-pagination ul li.active span {
                background:#ecf0f1;
                color: #222;
                border: 0.048em solid #ccc;
            }


            .site-pagination ul li.current {
                display: inline-block;
                color: #8a8a8a;
                width: 4.25em !important;
                height: 1.5em !important;
                border-radius: none !important;
                border: none !important;
                margin: 0 0.313em !important;
                padding: 0 !important;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
            }

                .site-pagination ul li.current a {
                    width: 4.35em !important;
                    height: 1.5em !important;
                    border-radius: none !important;
                    border: none !important;
                }



                    .site-pagination ul li.current a:hover {
                        width: 4.55em !important;
                        background-color: #a1abb6;
                        border-radius: none !important;
                        height: 1.5em !important;
                        border: none !important;
                        color: #fff !important;
                    }

/*----首頁字-----*/
a.news_link:link {
    color: #222;
    background-color: transparent;
    text-decoration: none;
}

a.news_link:visited {
    color: #222;
    background-color: transparent;
    text-decoration: none;
}

a.news_link:hover {
    color:#869fb2;
	font-weight:700;
    background-color: transparent;
    text-decoration: underline;
}

a.news_link:active {
    color:#869fb2;
	font-weight:700;
    background-color: transparent;
    text-decoration: underline;
}



/*------------------------------------
   內文return
----------------------------------*/
.paginationBox {
    text-align: center;
    margin: auto;
    padding-top: 1.5em;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 0.313em 0.938em;
    margin-left: -1px;
    line-height: 1.42857143;
    text-decoration: none;
    background-color: #fff;
    border: 0.063em solid #ddd;
}

.pagination {
    border-radius: 0;
    display: inline-block;
    padding-left: 0;
    margin: 1.250em 0;
}

    .pagination > li {
        font-size: .938em;
        display: inline;
    }

        .pagination > li > a,
        .pagination > li > span {
            color: #4d4c43;
            background-color: #fff;
            border-color: #cbc9bc;
        }

            .pagination > li > a:hover,
            .pagination > li > span:hover,
            .pagination > li > a:focus,
            .pagination > li > span:focus {
                color: #fff;
                background-color: #aaa;
                border-color: #adaba0;
            }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        color: #4d4c43;
        background-color: #d1cfc2;
        border-color: #9f9d8f;
    }
	
	
	/*==========================================


   Main-banner開始


===========================================*/
.row_banner {
    position: relative;
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom:0px;
    clear: both;
    max-width: 100%;  
	  /*display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;*/
}

.items_center {
    text-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}


.cover_banner { 
   clear: both;
   top:59px;
  left: 0;
  position: relative;
  overflow: hidden;
  background:transparent;
  z-index:-1
}


/*---------------------------

banner內容頁背景

------------------------------*/
   

.pagerBanner {
    box-sizing: border-box;
    position: relative;
    clear: both;
    padding: 0;
    background: url(../images/brand-cover.jpg) no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    max-width: 1280px;
    margin: 0 auto;
    min-height: 450px;
}


  @media screen and (max-width: 768px) {
	.cover_banner { background:#f8f8f8}
	.pagerBanner {
		 background-position:center;
		 background-size: contain;
		 max-width:100%;
		 min-height:325px;  
		 }
  }

  @media screen and (max-width:480px) {
	 .pagerBanner {max-width:100%;min-height:225px; }
	  
  }