@charset "utf-8";

/*
1280含以上 電腦
1279含以下 平版 手機
*/
/*----------------------------------------------------------------------------*/
/*============================================================================*/
/*


/*============================================================================*/
/* social fixed */
.jIsTotalPageFloatSocial {  }
/*site*/
.jIsTotalPageFloatSocial-lt, .jIsTotalPageFloatSocial-lc, .jIsTotalPageFloatSocial-lb,
.jIsTotalPageFloatSocial-rt, .jIsTotalPageFloatSocial-rc, .jIsTotalPageFloatSocial-rb { z-index: 1000; display: inline-block; position: fixed; margin: 0; padding: 0; width: 180px;
	-webkit-transition: left .5s ease-in-out, right .5s ease-in-out; transition: left .5s ease-in-out, right .5s ease-in-out;
}

.jIsTotalPageFloatSocial-lt { left: -180px; top: 0; }
.jIsTotalPageFloatSocial-lc { left: -180px; top: 50%; /*margin-top: -120px;*/ }
.jIsTotalPageFloatSocial-lb { left: -180px; bottom: 0; }

.jIsTotalPageFloatSocial-rt { right: -180px; top: 0; }
.jIsTotalPageFloatSocial-rc { right: -180px; top: 50%; /*margin-top: -120px;*/ }
.jIsTotalPageFloatSocial-rb { right: -180px; bottom: 0; }

.jIsTotalPageFloatSocial-lt.opened,
.jIsTotalPageFloatSocial-lc.opened,
.jIsTotalPageFloatSocial-lb.opened { left: 0; }

.jIsTotalPageFloatSocial-rt.opened,
.jIsTotalPageFloatSocial-rc.opened,
.jIsTotalPageFloatSocial-rb.opened { right: 0; }

/*----------------------------------------------------------------------------*/
/*ctrl*/
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl { z-index: 1001; position: absolute; margin-top: -33px; width: 33px; height: 66px; }

@keyframes jellen-left-start {
	0% { transform: translateX(-180x); }
	100% { transform: translateX(180px); }
}
@keyframes jellen-right-start {
	0% { transform: translateX(180x); }
	100% { transform: translateX(-180px); }
}


.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-lt,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-lc,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-lb { border-radius: 0 33px 33px 0; left: 0; top: 50%;
	-webkit-animation: 3s 3s normal ease forwards jellen-left-start; animation: 3s 3s normal ease forwards jellen-left-start;
}

.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-rt,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-rc,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-rb { border-radius: 33px 0 0 33px; right: 0; top: 50%;
	-webkit-animation: 3s 3s normal ease forwards jellen-right-start; animation: 3s 3s normal ease forwards jellen-right-start;
}

.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl i { padding: 22px 0 0 10px; -webkit-transition: transform .3s linear; transition: transform .3s linear; }
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.opened i { padding: 22px 13px 10px 10px; transform: rotateY(180deg); }

.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-lt i,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-lc i,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.is-lb i { padding: 22px 6px 0 0; transform: rotateY(180deg); }

.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.opened.is-lt i,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.opened.is-lc i,
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialCtrl.opened.is-lb i { transform: rotateY(0deg); }

/*----------------------------------------------------------------------------*/
/*main*/
.jIsTotalPageFloatSocial .jIsTotalPageFloatSocialMain {  }

.jIsTotalPageFloatSocialMain ul {  }

.jIsTotalPageFloatSocialMain ul li { display: inline-block; margin: 5px 10px; width: 100%; height: 46px; /*border: 1px solid rgba(255, 0, 0, .95);*/ }

.jIsTotalPageFloatSocialMain ul li.social-list {  }

.jIsTotalPageFloatSocialMain ul li .psharer { padding: 3px; }

.jIsTotalPageFloatSocialMain ul li .psharer .package { display: flex; position: relative; width: 100%; /*border: 1px solid rgba(0, 0, 0, .95);*/ }

.jIsTotalPageFloatSocialMain ul li .psharer .package .btn { box-shadow: 0 1px 1px 0 rgba(255, 255, 255, .65) inset, 0px 1px 3px rgba(0, 0, 0, .15);  }

.jIsTotalPageFloatSocialMain ul li .psharer .package .ico {  }
.jIsTotalPageFloatSocialMain ul li .psharer .package .ico i {  }

.jIsTotalPageFloatSocialMain ul li .psharer .package .txt {  }

.jIsTotalPageFloatSocialMain ul li .psharer .package .vertical-line {
	position: absolute; top: 6px; left: 40px; width: 1px; height: 25px;
	
	background-color: rgba(255, 255, 255, .35);
}

.jIsTotalPageFloatSocialMain ul li .psharer .package .num.hasnum { position: absolute; top: 0; right: 0; }
.jIsTotalPageFloatSocialMain ul li .psharer .package .num.nonum { display: none; }

/*line-share*/
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(0, 185, 0, 1); }
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package.nonum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package.hasnum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package .btn .logo { display: inline-block; margin: 3px; width: 30px; height: 30px; background: transparent url(../../../../_bk_img/line/full_50x50.png) no-repeat; }
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package .txt { position: absolute; top: 12px; left: 60px; }
.jIsTotalPageFloatSocialMain ul li.line-share .psharer .package .num.hasnum { z-index: -1; top: 3px; right: 20px; }

/*line-like*/
.jIsTotalPageFloatSocialMain ul li.line-like .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.line-like .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(0, 185, 0, 1); }
.jIsTotalPageFloatSocialMain ul li.line-like .psharer .package .btn .logo { display: inline-block; margin: 3px; width: 30px; height: 30px; background: transparent url(../../../../_bk_img/line/full_50x50.png) no-repeat; }
.jIsTotalPageFloatSocialMain ul li.line-like .psharer .package .txt { position: absolute; top: 10px; left: 60px; }

.jIsTotalPageFloatSocialMain ul li.line-like .psharer .package .api { position: absolute; top: 8px; left: 45px; }

/*line-friend*/
.jIsTotalPageFloatSocialMain ul li.line-friend .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.line-friend .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(0, 185, 0, 1); }
.jIsTotalPageFloatSocialMain ul li.line-friend .psharer .package .btn .logo { display: inline-block; margin: 3px; width: 30px; height: 30px; background: transparent url(../../../../_bk_img/line/full_50x50.png) no-repeat; }
.jIsTotalPageFloatSocialMain ul li.line-friend .psharer .package .txt { position: absolute; top: 12px; left: 50px; }

.jIsTotalPageFloatSocialMain ul li.line-friend .psharer .package .api { position: absolute; top: 8px; left: 10px; opacity: 0; filter: alpha(opacity=0); }

/*facebook-share*/
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(66, 130, 178, 1); }
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package.nonum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package.hasnum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package .btn .logo:after {
	content: "\f39e"; display: inline-block; margin: 8px 12px;
	font-family: 'Font Awesome 5 Brands'; font-size: 22px; color: rgba(255, 255, 255, .95);
}
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package .txt { position: absolute; top: 12px; left: 60px;}
.jIsTotalPageFloatSocialMain ul li.facebook-share .psharer .package .txt .fb-share-button a { font-size: 14px; color: rgba(255, 2555, 255, .95); }

/*facebook-like*/
.jIsTotalPageFloatSocialMain ul li.facebook-like .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.facebook-like .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(66, 130, 178, 1); }
.jIsTotalPageFloatSocialMain ul li.facebook-like .psharer .package.nonum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.facebook-like .psharer .package.hasnum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.facebook-like .psharer .package .btn .logo:after {
	content: "\f39e"; display: inline-block; margin: 8px 12px;
	font-family: 'Font Awesome 5 Brands'; font-size: 22px; color: rgba(255, 255, 255, .95);
}
.jIsTotalPageFloatSocialMain ul li.facebook-like .psharer .package .txt { position: absolute; top: 10px; left: 50px;}

/*twitter-tweet*/
.jIsTotalPageFloatSocialMain ul li.twitter-tweet .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.twitter-tweet .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(29, 161, 242, 1); }
.jIsTotalPageFloatSocialMain ul li.twitter-tweet .psharer .package.nonum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.twitter-tweet .psharer .package.hasnum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.twitter-tweet .psharer .package .btn .logo:after {
	content: "\f099"; display: inline-block; margin: 8px 12px;
	font-family: 'Font Awesome 5 Brands'; font-size: 22px; color: rgba(255, 255, 255, .95);
}
.jIsTotalPageFloatSocialMain ul li.twitter-tweet .psharer .package .txt { position: absolute; top: 12px; left: 60px;}

/*twitter-follow*/
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(29, 161, 242, 1); }
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package.nonum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package.hasnum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package .btn .logo:after {
	content: "\f099"; display: inline-block; margin: 8px 12px;
	font-family: 'Font Awesome 5 Brands'; font-size: 22px; color: rgba(255, 255, 255, .95);
}
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package .txt { position: absolute; top: 12px; left: 60px;}
.jIsTotalPageFloatSocialMain ul li.twitter-follow .psharer .package .txt a { font-size: 14px; color: rgba(255, 2555, 255, .95); }

/*linkedin-share*/
.jIsTotalPageFloatSocialMain ul li.linkedin-share .psharer .package {  }
.jIsTotalPageFloatSocialMain ul li.linkedin-share .psharer .package .btn { display: inline-block; width: 120px; height: 36px; border-radius: 5px; background-color: rgba(0, 102, 161, 1); }
.jIsTotalPageFloatSocialMain ul li.linkedin-share .psharer .package.nonum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.linkedin-share .psharer .package.hasnum .btn { width: 120px; }
.jIsTotalPageFloatSocialMain ul li.linkedin-share .psharer .package .btn .logo:after {
	content: "\f0e1"; display: inline-block; margin: 8px 12px;
	font-family: 'Font Awesome 5 Brands'; font-size: 22px; color: rgba(255, 255, 255, .95);
}
.jIsTotalPageFloatSocialMain ul li.linkedin-share .psharer .package .txt { position: absolute; top: 12px; left: 60px;}

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



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

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

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



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

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

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



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

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

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