@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/* IndexCenter */
/* 共用區塊 */
.IndexBlock > div{ max-width: 1280px; margin: auto; }
.indexTitle{ color: #232222; font-weight: 400; text-align: center; 
    letter-spacing: 0.1em; 
}
.indexBtn{ text-align: center; }
.indexBtn a{ display: inline-block; text-transform: uppercase; padding: 15px 30px; 
    border: 1px solid #232222; box-sizing: border-box; letter-spacing: 0.1em;
}

/*----------------------------------------------------------------------*/
/* products */
.indexProduct .proList > div { display: flex; flex-wrap: wrap; }
.indexProduct .indexTitle { margin-bottom: .75rem; }
.indexProduct .ListSearch { text-align: center; }

/*----------------------------------------------------------------------*/
/* media */
.indexMedia{ background-color: #232222; }
.indexMedia .indexTitle{ color: #fff; }
.indexMedia .mediaBox{ overflow:hidden; }
.indexMedia .mediaBox .item{ float: left; width: 50%; margin-bottom: 35px; }
.indexMedia .mediaBox .item .title{ color: #fff; }
.indexMedia .indexBtn a{ color: #f5f5f5; border: 1px solid rgba(255,255,255,0.3); }
.indexMedia .indexBtn a:hover{ background-color: #fff; color: #232222; }

/*----------------------------------------------------------------------*/
/* news */
.indexNews{ background-color: #fff; }
.indexNews .newsList{ overflow: hidden; }
.indexNews .newsList::after{ content: ""; display: block; clear: both; }
.indexNews .newsList .item .img{ margin-bottom: 5px; overflow: hidden; }
.indexNews .newsList .item .img div{ padding-bottom: 66.6666666%; 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 
}
.indexNews .newsList .item .img a{ width: 100%; height: 100%; display: block; }
.indexNews .newsList .item .title{ margin-bottom: 5px; text-transform: uppercase; }
.indexNews .newsList .item .title a{ color: #000; }
.indexNews .newsList .item .title a:hover{ color: #FFC627; }
.indexNews .newsList .item .desc{ color: #444; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.indexNews .newsList .item .info{ 
    position: relative; font-size: 0.938em; overflow: hidden;
}
.indexNews .newsList .item .more a{ color: #000; letter-spacing: 0.1em; display: inline-block;
    text-transform: uppercase; position: relative; padding-left: 15px;
}
.indexNews .newsList .item .more a:hover{ color: #FFC627; }
.indexNews .newsList .item .more a::before{ content: "+";  position: absolute; top:3px; left: 0; 
    display: block; width: 10px; height: 10px; line-height: 10px; text-align: center;
}
.indexNews .indexBtn a:hover{ background-color: #232222; color: #fff; }

/*----------------------------------------------------------------------*/
/* social wall */
.indexSW { background-color: #f2f2f2; overflow: hidden; }
.indexSW .item { box-sizing: border-box; }
.indexSW .item > div { background:#fff; position:relative; margin:0 auto 35px; max-width: 330px; }
.indexSW .tag { position:absolute; right: 5px; top: 5px; z-index: 9; background: rgba(0,0,0,.8); 
    width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; 
}
.indexSW .tag:before { font-family: 'Font Awesome 5 Brands'; font-size: 1.375rem; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
}
.indexSW .tag.fb:before { content: "\f39e"; }
.indexSW .tag.youtube:before { content: "\f167"; }
.indexSW .tag.twitter:before { content: "\f099"; }
.indexSW .tag.ig:before { content: "\f16d"; }
.indexSW .tag.google:before { content: "\f1a0"; }
.indexSW .img { overflow:hidden; max-height: 500px; position: relative; }
.indexSW .img a { display: block; }
.indexSW .img.video a:before{ content: ""; display: inline-block; background: url(../images/icon_play.png) center center no-repeat; 
    width: 60px; height: 60px; line-height: 60px; top: 50%; left: 50%; margin-left: -30px; margin-top: -30px; position: absolute;
    z-index: 10; border-radius: 50%; 
}
.indexSW .img.video a:after { content: ""; display: inline-block; width: 66px; height: 66px; line-height: 66px; 
    background: rgba(255,255,255,.8); 
    position: absolute; top: 50%; left: 50%; margin-left: -33px; margin-top: -33px; border-radius: 50%; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
}
.indexSW .img.video a:hover:after { background-color: #fff; }
.indexSW img { max-height: 100%; max-width: 100%; }
.indexSW .cont { padding: 15px; }
.indexSW .cont a { text-decoration: none; }
.indexSW .cont a:hover { text-decoration:underline; }
.indexSW .desc { padding-bottom: 20px; color: #555; line-height: 150%; word-wrap:break-word; }
.indexSW .desc a { display: inline-block; color: #232222; background-color:#ebebeb; padding: 0px 2px; margin: 2px 0; }
.indexSW .infoBox { padding-right: 40px; border-top: 3px solid #FFC627; padding-top: 10px; position: relative; }
.indexSW .sw_logo { text-align: center; height: 50px; width: 50px; margin-right: 10px; float: left; }
.indexSW .sw_user { padding: 6px 0 3px; }
.indexSW .sw_user a { color: #f0b100; }
.indexSW .sw_info { font-size: 0.8125em; line-height: 130%; color: #777; padding: 3px 0 6px; }
.indexSW .sw_info span:before { content: " • "; }
.indexSW .sw_info span:first-child:before { display: none; }
.indexSW .sw_info a { color: #777; }
.indexSW .sw_share .sw_switch { cursor:pointer; }
.indexSW .sw_share .sw_switch::before, .indexSW .sw_share .sw_switch::after { 
    content:''; display:none; position:absolute; bottom:46px; right:12px; width:14px; height:14px; background-color:#fff; 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.indexSW .sw_share .sw_switch::before { box-shadow: 1px 1px 5px rgba(0,0,0,.3); }

.indexSW .sw_switch { position:absolute; right:0; top:5px; display:block; width:35px; height:50px; background:url('../images/icon_share.png') center center no-repeat; }
.indexSW .sw_share ul { 
    display:none; background:#fff; position:absolute; right:0; bottom:50px; width:100px; padding:5px 10px; 
    border-radius: 5px; box-shadow: 1px 1px 5px rgba(0,0,0,.3); 
}
.indexSW .sw_share.show .sw_switch::before, .indexSW .sw_share.show .sw_switch::after, 
.indexSW .sw_share.show ul { 
    display:block; 
}
.indexSW .sw_share li { margin: 5px 0; line-height: 28px;  }
.indexSW .sw_share ul a { padding-right: 5px; }
.indexSW .sw_share a { display: block; color: #232222; font-size: .875em; }
.indexSW .sw_share a:hover { text-decoration: none; color: #FFC627; }
.indexSW .sw_share a:before { width: 1.5em; margin-right: 5px; display: inline-block; 
    vertical-align: middle; text-align: center; font-family: 'Font Awesome 5 Brands'; font-size: 1.125rem; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
}
.indexSW .sw_share .fb a:before { content: "\f39e"; }
.indexSW .sw_share .google a:before { content: "\f1a0"; }
.indexSW .sw_share .twitter a:before { content: "\f099"; }
.indexSW .sw_share .instagram a:before { content: "\f16d"; }
.indexSW .sw_share .weibo a:before { content: "\f18a"; }
.indexSW .indexBtn{ clear: both; }
.indexSW .indexBtn a:hover { background-color: #232222; color: #fff; }