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

/*----------------------------------------------------------------------*/
/* Header , Menu */
#logo, .nav_follow .social_list { display: none; }
#MenuBar { height: 60px; }
.logo { margin:0 auto; }
@media screen and (max-width: 1479px) {
.logo { max-width:80px; padding:10px 0; }
.logo a { height: 40px; }
}
@media screen and (min-width: 1480px) {
.logo { max-width:95px; padding:26px 0; }
.logo a { height: 48px; }
}

@media screen and (max-width: 1023px) {
.header_popup_box .popup_body { padding:85px 25px 25px 25px; }
.header_popup_box .close { width: 100%; height:60px; left: 0; top: 0; }
.header_popup_box .close a { right: 10px; top: 10px; }
}
@media screen and (min-width: 1024px) {
.header_popup_box .popup_body { width: 21vw; min-width:250px; height: 100vh; padding:80px 25px 80px 10px; margin-left:6.25vw; }
.header_popup_box .close { width: 6.25vw; height: 100vh; left: 0; top: 0; }
.header_popup_box .close a { left: 50%; top: 50%; margin-top: -20px; margin-left: -20px; }
}

/* 卷軸區域 */
.header_popup_box #MenuScrollBar { height:75vh; }
/* menu_switch */
.menu_switch { right:5px; width: 50px; height: 50px; position: fixed; }
@media screen and (max-width: 1479px) {
.menu_switch { top:5px; }
}
@media screen and (min-width: 1480px) {
.menu_switch { top:25px; }
}


/*----------------------------------------------------------------------*/
#KeyVisual { position: relative; }
#KeyVisual.no_slider .bx-controls { display: none; }
#KeyVisual .bxSlider_list .item .img { background-position: center center; background-size: cover; padding-bottom: 56.25%; }

#KeyVisual .play_btn { position: absolute; left: 50%; top: 50%; border-radius: 50%; background: #333; text-decoration:none; }
#KeyVisual .play_btn::before {
	position:absolute; top:50%; left:50%; width:140px; height:140px; margin:-70px 0 0 -70px; border:3px solid #fff; background-color:rgba(0,0,0,0.8); 
	box-sizing:border-box; 
	content:'\f04b'; font-family:'Font Awesome 5 Solid'; line-height:134px; text-align:center; color:#fff; font-size:48px; 
	-webkit-border-radius:50%;
	-moz-border-radius:50%; 
	border-radius:50%; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
#KeyVisual .play_btn:hover::before { border-color:#a41f35; background-color:#a41f35; padding-left:8px; }
/*
#KeyVisual .play_btn:after { content: ""; display: inline-block; width: 66px; height: 66px; line-height: 66px; text-align: center; background: rgba(255,255,255,.8) url(../images/icon_play.png) center center no-repeat; position: absolute; top: 50%; left: 50%; margin-left: -33px; margin-top: -33px; border-radius: 50%; }
#KeyVisual .play_btn:hover:after { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: rubberBand; animation-name: rubberBand; }
*/

#KeyVisual .videoBox { padding-bottom: 56.25%; position: absolute; left: 0; top: 0; width: 100%; z-index: 10000; background: #000; }
#KeyVisual .videoBox iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; margin:0; }

#KeyVisual .close_btn { position: absolute; right: 22px; top: 72px; z-index: 10000; display:block; text-decoration:none; font-size: 0; width: 37px; height: 37px; opacity:0.7; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
#KeyVisual .close_btn:hover { opacity:1; }
#KeyVisual .close_btn:before, #KeyVisual .close_btn:after { display:block; content:''; position:absolute; top:0; left:50%; width:2px; height:100%; background-color:#fff; }
#KeyVisual .close_btn:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
#KeyVisual .close_btn:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }


/*----------------------------------------------------------------------*/
/* 首頁輪播 */
.IndexSlider { margin-top:-1px; position: relative; z-index: 2; }
.IndexSlider:after { content:""; clear:both; display:block; }

.IndexSlider .textBox { color:#fff; text-align:center; }
.IndexSlider .text { font-family:'Gotham XNarrow'; font-weight: 700; line-height:135%; margin-bottom:10px; }
.IndexSlider .name { line-height:135%; }


/*----------------------------------------------------------------------*/
/* 首頁產品 */
.IndexProduct > div:after { content: ""; clear: both; display: block; }
.IndexProduct img { max-width:100%; }
.IndexProduct .item { margin-top:-1px; position:relative; overflow:hidden; }
.IndexProduct .textBox { text-align:center; box-sizing:border-box; }
.IndexProduct h3.title { margin-bottom: 15px; font-size: 1em; }
.IndexProduct h3.title span { font-family:'Gotham XNarrow'; font-weight: 700; font-size: 4.25em; line-height: 112%; display: inline-block; position: relative; }
.IndexProduct h3.title span:after { content: ""; position: absolute; left: 0; bottom: .125em; width: 100%; height: 1px; background: #000; display: block; }
.pro_list li { line-height:1.5em; padding:6px 0; }
.pro_list a { color: #333; letter-spacing: .6px; text-decoration: none; font-size: 1.5em; font-family:'Gotham XNarrow'; font-weight: 500; }
.pro_list a:hover { color: #a41f35; }

/* 動畫效果 */
.IndexProduct .item .pro_list li { 
	transform:translateX(100px); opacity:0; 
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	transition:all 0.5s ease;
	}
.IndexProduct .item:nth-child(odd) .pro_list li { transform:translateX(-100px); }
.IndexProduct .item .pro_list li:nth-child(1) { transition-delay: 0.1s; }
.IndexProduct .item .pro_list li:nth-child(2) { transition-delay: 0.2s; }
.IndexProduct .item .pro_list li:nth-child(3) { transition-delay: 0.3s; }
.IndexProduct .item .pro_list li:nth-child(4) { transition-delay: 0.4s; }
.IndexProduct .item .pro_list li:nth-child(5) { transition-delay: 0.5s; }
.IndexProduct .item .pro_list li:nth-child(6) { transition-delay: 0.6s; }

.IndexProduct .item .pro_list.active li { transform:translateX(0); opacity:1; }


/*----------------------------------------------------------------------*/
/* 標題共用樣式 */
.IndexProduct h2.title { display: none; }
.IndexSlider h2.title { display: none; }


/*----------------------------------------------------------------------*/
/* SOCIAL WALL */
.IndexSW { background:#f3f3f4; overflow: hidden; padding: 20px 30px; }
.IndexSW h2 { text-align:center; font-size: 1em; font-family:'Gotham XNarrow'; font-weight: 700; padding: 40px 0; }
.IndexSW h2 span { font-size: 4.25em; line-height: 100%; }
.IndexSW .item { box-sizing: border-box; }
.IndexSW .item > div { background:#fff; border-radius: 5px; position:relative; margin:0 auto 35px; max-width: 380px; }
.IndexSW .tag { position:absolute; right: 0; top: 0; z-index: 9; border-radius: 5px; 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 { display:block; position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; content:''; background:url(../images/x-twitter-white.svg) no-repeat center center; background-size:contain; }
.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:after { content: ""; display: inline-block; width: 66px; height: 66px; line-height: 66px; text-align: center; background: rgba(255,255,255,.8) url(../images/icon_play.png) center center no-repeat; 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: 10px; color: #555; line-height: 150%; word-wrap:break-word; }
.IndexSW .desc a { color: #ba8621; }
.IndexSW .infoBox { padding-right: 40px; border-top: 3px solid #a41f35; padding-top: 5px; 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: #a41f35; }
.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: #777; font-size: .875em; }
.IndexSW .sw_share a:hover { text-decoration: none; color: #a41f35; }
.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 .sw_more { text-align: center; padding: 10px 0 20px; clear: both; }
.IndexSW .sw_more a { display: inline-block; background: #040000; color: #fff; border-radius: 5px; font-size: 1.375em; font-family:'Gotham XNarrow'; font-weight: 300; text-decoration: none; padding: .75em 1em .75em 1.05em; letter-spacing: .05em; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.IndexSW .sw_more a:hover { background: #a41f35; }


/*動畫*/
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}