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

/*----------------------------------------------------------------------*/
/* 卷軸區域 */
.header_popup_box #MenuScrollBar { height:75vh; }

/*----------------------------------------------------------------------*/
#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%; transform: translate(-50%, -50%); border-radius: 50%; border: 8px solid #fff; box-sizing: border-box; text-decoration:none; width: 170px; height: 170px; display: flex; justify-content: center; align-items: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
#KeyVisual .play_btn::before {
	content: ''; width: 0; height: 0; border-style: solid; border-width: 50px 0 50px 65px; border-color: transparent transparent transparent #fff; margin-left: 12%;
	-webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease;
	}
#KeyVisual .play_btn:hover { border-color: #a29179; background: #a29179; }
#KeyVisual .play_btn:hover::before { margin-left: 20%; }

#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 { position: relative; z-index: 2; }
.IndexSlider:after { content:""; clear:both; display:block; }

.IndexSlider .textBox { color:#fff; text-align:center; font-family: 'korolev-condensed','Microsoft JhengHei', '微軟正黑體', sans-serif; font-style: normal; box-sizing: border-box; }
.IndexSlider .text { font-weight:700; line-height:135%; }
.IndexSlider .name { font-weight:300; line-height:135%; margin-top:10px; }
.IndexSlider .textBox a { color:#fff; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; }
.IndexSlider .textBox a:hover { color:#333; }

.IndexSlider .imgBox { height: 0; padding-bottom: 38.296%; position: relative; overflow: hidden; }
.IndexSlider .imgBox img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.IndexBlock_st3 .imgBox { padding-bottom: 45.8336%; }
.IndexBlock_st4 .imgBox { padding-bottom: 45.8336%; }

/*----------------------------------------------------------------------*/
/* 呼吸空間 */
.breathe { background:#d9eef4; color: #a08f78; font-size: min(max(2.5rem, 5vw), 4.25rem); text-transform: uppercase; padding: 40px 6vw; overflow: hidden; font-family: 'korolev-condensed','Microsoft JhengHei', '微軟正黑體', sans-serif; font-weight:700; font-style: normal; }
.breathe.tc { text-align: center; }
.breathe.tr { text-align: right; }

/* 動畫效果 */
.breathe > div { 
	transform:translateX(-100px); opacity:0; 
	-webkit-transition:all 0.5s ease;
	-moz-transition:all 0.5s ease;
	transition:all 0.5s ease;
}
.breathe > div:nth-child(1) { transition-delay: 0.1s; }
.breathe > div:nth-child(2) { transition-delay: 0.2s; }
.breathe > div:nth-child(3) { transition-delay: 0.3s; }
.breathe.active > div { transform:translateX(0); opacity:1; }


/*----------------------------------------------------------------------*/
/* SOCIAL WALL */
.IndexSW { background:#d9eef4; overflow: hidden; padding: 20px 30px; }
.IndexSW h2 { text-align:center; font-size: 1em; font-family: 'korolev-condensed','Microsoft JhengHei', '微軟正黑體', sans-serif; font-weight:700; font-style: normal; padding: 40px 0; }
.IndexSW h2 span { font-size: 4.5em; 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: -25px; top: -25px; z-index: 9; border-radius: 50%; background: #222; 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: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: #004986; }
.IndexSW .infoBox { padding-right: 40px; border-top: 2px solid #d9eef4; padding-top: 8px; position: relative; }
.IndexSW .sw_logo { text-align: center; height: 50px; width: 50px; margin-right: 10px; float: left; border-radius: 50%; overflow: hidden; }
.IndexSW .sw_user { padding: 6px 0 3px; }
.IndexSW .sw_user a { color: #222; font-weight: bold; }
.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; color: #a08f78; font-size: 1.625em; font-family: 'korolev-condensed','Microsoft JhengHei', '微軟正黑體', sans-serif; font-weight:300; font-style: normal; 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 { color: #222; }


/*動畫*/
@-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);
  }
}