/* 按鈕事件 */
[class*="btn-"]:link { color:#ffffff; }
[class*="btn-"]:visited { color:#ffffff; }
[class*="btn-"]:hover { /* opacity: 0.8; */ color:#ffffff; }
[class*="btn-"]:active { /* box-shadow:0 4px 9px #787878; */ color:#ffffff; }
/* [class*="btn-"]:active::after {
	opacity: 1;
	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
  	-webkit-transform: scale(1.5);
 	transform: scale(1.5);
} */

/* 基礎樣式 */
[class*="btn-"] {
	color:#ffffff;
	cursor:pointer;
	font-size:14px;
	font-size:1.4rem;
	font-weight: normal;
	padding:5px 13px;
	position:relative;
	display:inline-block;
	*display:inline;
	*zoom:1;
	text-align:center;
	line-height:20px;
	vertical-align:middle;
	overflow: hidden;
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
[class*="btn-"]::after {
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left:0%;
	top:0%;
	opacity: 0;
	border-radius: 0;
	background:rgba(255,255,255,0.3);
  	-ms-filter: none; filter: none;
  	-webkit-transform: scale(0);
  	transform: scale(0);
  	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
  	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
}
[class*="btn-"].circle::after { border-radius: 100%; }
[class*="btn-"] + [class*="btn-"] { margin-left:3px; }
[class*="btn-"] label { margin-right: 0; color: #454545; }

/* 固定好尺寸的正方形 建議裡面只放icon */
[class*="btn-"].cube { padding:0; line-height: 24px; width:24px; height:24px; }
[class*="btn-"].cube > i { line-height:26px; margin-right:0; }
[class*="btn-"].cube > img { max-width: 24px; max-height: 24px; }

.btn-large.cube { padding:0; line-height: 48px; width:48px; height:48px; font-size:24px; font-size:2.4rem; }
.btn-large.cube > i { line-height:50px; margin-right:0; }
.btn-large.cube > img { max-width: 48px; max-height: 48px; }

.btn-big.cube { padding:0; line-height: 64px; width:64px; height:64px; font-size:36px; font-size:3.6rem; }
.btn-big.cube > i { line-height:66px; margin-right:0; }
.btn-big.cube > img { max-width: 64px; max-height: 64px; }

/* 圓形 */
[class*="btn-"].circle { padding:6px; border-radius:100%; }
[class*="btn-"].cube.circle { padding:0px; }

/* 有icon */
[class*="btn-"] > i { vertical-align: initial; font-style: normal; }
[class*="btn-"] > i.fa-flip-horizontal { margin-left: 3px; } /*水平翻轉的icon會有奇怪的滑動，加margin-left處理 20150114 Gabby*/
[class*="btn-"] > i.fa-lg { vertical-align: middle; }
[class*="btn-"].right > i { margin-right:0; margin-left:3px; }
[class*="btn-"] > img { max-width: 24px; max-height: 24px; margin-right:3px; }
[class*="btn-"].right > img { margin-right:0; margin-left:3px; }
/*.btn-small > i { margin-right:1px; }*/

/* 用padding來做的 接近正方形 建議裡面只放icon */
.btn-icon { padding:6px 6px 5px 7px; }
.btn-icon > i { margin-right:0; font-size:1em; }

/* 圓角 */
[class*="btn-"].radius-1x { border-radius:5px; overflow:hidden; }
[class*="btn-"].radius-2x { border-radius:10px; overflow:hidden; }
[class*="btn-"].radius-3x { border-radius:15px; overflow:hidden; }
[class*="btn-"].radius-4x { border-radius:25px; overflow:hidden; }

[class*="btn-"].radiusL-1x { border-radius:5px 0px 0px 5px; overflow:hidden; }
[class*="btn-"].radiusL-2x { border-radius:10px 0px 0px 10px; overflow:hidden; }
[class*="btn-"].radiusL-3x { border-radius:15px 0px 0px 15px; overflow:hidden; }
[class*="btn-"].radiusL-4x { border-radius:25px 0px 0px 25px; overflow:hidden; }

[class*="btn-"].radiusR-1x { border-radius:0px 5px 5px 0px; overflow:hidden; }
[class*="btn-"].radiusR-2x { border-radius:0px 10px 10px 0px; overflow:hidden; }
[class*="btn-"].radiusR-3x { border-radius:0px 15px 15px 0px; overflow:hidden; }
[class*="btn-"].radiusR-4x { border-radius:0px 25px 25px 0px; overflow:hidden; }

.btn-xs[class*="radius-"] { padding:1px 10px; }

/* 尺寸 */
.btn-xs { font-size:12px; font-size:1.2rem; padding:1px 8px; }
.btn-small { font-size:12px; font-size:1.2rem; padding:3px 13px; }
.btn-large { font-size:16px; font-size:1.6rem; padding:10px 20px; }
.btn-big { font-size:18px; font-size:1.8rem; padding:15px 25px; }
.btn-huge { font-size:22px; font-size:2.2rem; padding:25px 40px; }
.btn-half {
	width:48%; margin-right: 2%; padding-left:0; padding-right:0; float: left;
	/* 預防天兵的 */-webkit-box-sizing:border-box; box-sizing:border-box;
}
.btn-half + .btn-half { margin-left:2%; margin-right:0; }

/* 滿版 就是容器多寬 就多寬的意思 */
.btn-block {
	display:block; width:100%; padding-left:0; padding-right:0;
	-webkit-box-sizing:border-box; box-sizing:border-box;
}
.btn-block + .btn-block { margin-left:0px; margin-top: 10px; }

/* 就是裡面的icon是正方形 有自己一個區塊 這樣 */
.btn-label { padding-left:42px; text-align:center; }
.btn-label.right { padding-left:12px; padding-right:42px; }
.btn-label > i { position:absolute; top:0; left:0; height:100%; width:30px; text-align: center; }
.btn-label > i::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.2;
	background-color: #fff;
	z-index: -1;
}
.btn-label.right > i { left:auto; right:0; margin-right:0; }
.btn-label > i::before { /*width:2em;*/ margin-top:0.6em; display:block; }

.btn-label.btn-xs > i { width:30px; }
.btn-label.btn-xs > i::before { margin-top:0.3em; }
.btn-label.btn-xs { padding-left:36px; }
.btn-label.right.btn-xs { padding-left:5px; padding-right:36px; }

.btn-label.btn-small > i { width:30px; }
.btn-label.btn-small > i::before { margin-top:0.5em; }
.btn-label.btn-small { padding-left:40px; }
.btn-label.right.btn-small { padding-left:8px; padding-right:40px; }

.btn-label.btn-large > i { width:40px; }
.btn-label.btn-large > i::before { margin-top: 0.85em; }
.btn-label.btn-large { padding-left:60px; }
.btn-label.right.btn-large { padding-left:20px; padding-right:60px; }

.btn-label.btn-big > i { width:50px; }
.btn-label.btn-big > i::before { margin-top:1.2em; }
.btn-label.btn-big { padding-left:70px; }
.btn-label.right.btn-big { padding-left:25px; padding-right:70px; }

.btn-label.btn-half > i { width:50%; }

.btn-label.btn-block > i { width:50px; }
.btn-label.btn-block > i::before { margin-top:0.75em; }

/* opacity */
[class*="btn-"].opacity { opacity: 0.7; }
[class*="btn-"].opacity:hover { opacity: 1; }

/* 滑過會展開的按鈕 裡面若要再多放按鈕 記得這層不要用<a> 要用<div> */
[class*="btn-"].animate, [class^="btn-"].animate::after, [class^="btn-"].animate:hover * {
	-webkit-transition:all .4s ease; transition:all .4s ease;
}
[class*="btn-"].animate {
	font-size:14px; font-size:1.4rem; width:14px; text-align:center; overflow:hidden;
}
[class*="btn-"].animate > span {
	display: inline-block; opacity:0; z-index:-1; top:3px; left:-100%; padding:0 5px; position:absolute;
}
[class*="btn-"].animate > span > [class^="btn-"] {
	padding-top:0; padding-bottom:0; margin-top: -2px; vertical-align: top;
}

/* 滑過樣式改變 */
[class*="btn-"].animate:hover > i {
	margin-left: 2px;
}
[class*="btn-"].animate:hover > span {
	opacity:1; left:23px; z-index:1;
}
[class*="btn-"].animate.circle:hover { border-radius:25px; }

/* 滑過時 文字在左 按鈕在右 */
[class*="btn-"].animate.textR { text-align:center !important; }
[class*="btn-"].animate.textR > span { left:auto; right:-100%; }
[class*="btn-"].animate.textR:hover { text-align:right !important; }
[class*="btn-"].animate.textR:hover > i { margin-left: auto; margin-right: 2px; }
[class*="btn-"].animate.textR:hover > span { left:auto; right:22px; }

/* 滑過改變尺寸 */
[class*="btn-"].animate:hover { width:90px; text-align:left; }
[class*="btn-"].animate.short:hover { width:60px; }
[class*="btn-"].animate.middle:hover { width:80px; }
[class*="btn-"].animate.bmiddle:hover { width:95px; }
[class*="btn-"].animate.long:hover { width:110px; }
[class*="btn-"].animate.slong:hover { width:130px;}
[class*="btn-"].animate.mlong:hover { width:150px; }
[class*="btn-"].animate.blong:hover { width:200px; }


/* 按下會展開的按鈕 裡面若要再多放按鈕 記得這層不要用<a> 要用<div> */
[class*="btn-"].showBtn {
	font-size:14px;
	font-size:1.4rem;
	min-width:14px;
	text-align:center;
	overflow:hidden;
	padding:6px 3px 6px 3px;
	border-radius:100%;
	-webkit-transition:all .6s ease;
	transition:all .6s ease;
}

/* 按鈕原始狀態 若不只icon 有文字 要把i跟文字用span包起
如果是hideDiv裡面有文字 可是原始狀態沒文字 就不需要包span */
.showBtn > span {
	padding:0 10px;
	vertical-align: baseline;
	display: inline-block;
	line-height: 1;
}
.showBtn > span > i { vertical-align: baseline; margin: 0; }

/* 放置按下要展開的東西 */
.hideDiv { 	
	position:absolute;
	top:6px;
	padding:0 5px;
	opacity: 0;
	z-index:-1;
	-webkit-transition:all .6s ease;
	transition:all .6s ease;
}
.hideDiv > [class^="btn-"] {
	padding-top:0;
	padding-bottom:0;
	vertical-align:top;
	margin-top: -4px;
}
.hideDiv.open { right:22px; opacity:1; z-index:1; }
.showBtn.active {
	border-radius:25px;
	padding:6px 8px 6px 5.5px;
	text-align:right;
}

/* 預防天兵亂放用 */
.hideDiv > .btn-label > i::before { margin-top:0.2em; }
.hideDiv > .btn-label.btn-xs > i::before { margin-top:0.3em; }
.hideDiv > .btn-label.btn-small > i::before { margin-top:0.3em; }
.hideDiv > .btn-label.btn-large > i::before { margin-top:0.1em; }
.hideDiv > .btn-label.btn-big > i::before { margin-top:0.1em; }

/* 尺寸 */
.hideDiv { width:100px; right:-100px; }
.showBtn.slong .hideDiv { width:140px; right:-140px; }
.showBtn.mlong .hideDiv { width:200px; right:-200px; }
.showBtn.llong .hideDiv { width:320px; right:-320px; }

/* button color */
.btn-default { color:#333; background-color:#f5f5f5; border:1px solid #ccc; }
.btn-default:link { color:#333; }
.btn-default:visited { color:#333; }
.btn-default:hover { color:#333; background-color:#dedede; }
.btn-default:active { color:#333; }

.btn-high-light-blue { color:#333; background-color: #e8f2f8; border: 1px solid #e8f2f8; }
.btn-high-light-blue:link { color:#333; }
.btn-high-light-blue:visited { color:#333; }
.btn-high-light-blue:hover { color:#fff; background-color:#5bc0de; border: 1px solid #5bc0de; }
.btn-high-light-blue:active { color:#fff; }

.btn-light-blue { background-color: #5bc0de; border: 1px solid #5bc0de; }
.btn-light-blue:hover { background-color: #31b0d5; border: 1px solid #31b0d5; }

.btn-blue { background-color: #3498db; border: 1px solid #3498db; }
.btn-blue:hover { background-color: #2980b9; border: 1px solid #2980b9; }

.btn-heavy-blue { background-color: #034da2; border: 1px solid #034da2; }
.btn-heavy-blue:hover { background-color: #3498db; border: 1px solid #3498db; }

.btn-purple { background-color: #9b6bcc; border: 1px solid #9b6bcc; }
.btn-purple:hover { background-color: #814fb5; border: 1px solid #814fb5; }

.btn-purple2 { background-color: #6C62A1; border: 1px solid #6C62A1; }
.btn-purple2:hover { background-color: #814fb5; border: 1px solid #814fb5; }

.btn-red {background-color: #e74c3c; border:1px solid #FF6B6B; }
.btn-red:hover { background-color: #ff0000; border:1px solid #ff0000; }

.btn-orange {background-color: #e67e22; border: 1px solid #e67e22; }
.btn-orange:hover { background-color: #d35400; border: 1px solid #d35400; }

.btn-sea { background-color: #31859d; border: 1px solid #31859d; }
.btn-sea:hover { background-color: #18647a; border: 1px solid #18647a; }

.btn-high-light-green { background-color: #79d5b3; border: 1px solid #79d5b3; }
.btn-high-light-green:hover { background-color: #59b795; border: 1px solid #59b795; }

.btn-light-green { background-color: #2ecc71; border: 1px solid #2ecc71; }
.btn-light-green:hover { background-color: #27ae60; border: 1px solid #27ae60; }

.btn-green { background-color: #77933c; border: 1px solid #77933c; }
.btn-green:hover { background-color: #596d2f; border: 1px solid #596d2f; }

.btn-grass-green { background-color: #72c02c; border: 1px solid #72c02c; }
.btn-grass-green:hover { background-color: #27ae60; border: 1px solid #27ae60; }

.btn-light-yellow { color:#f0ad4e; background-color: #FEFAEE; border: 1px solid #EDD58C; }
.btn-light-yellow:link { color:#f0ad4e; }
.btn-light-yellow:visited { color:#f0ad4e; }
.btn-light-yellow:hover { color:#ffffff; background-color: #EDD58C; border: 1px solid #FEFAEE; }
.btn-light-yellow:active { color:#ffffff; }

.btn-yellow { background-color: #ffb900; border: 1px solid #ffb900; }
.btn-yellow:hover { background-color: #F39C12; border: 1px solid #F39C12; }

.btn-heavy-gray { background-color:#444444;  border: 1px solid #444444;}
.btn-heavy-gray:hover { background-color:#666666; border: 1px solid #666666; }

.btn-gray { color: #ffffff; background-color:#999999;  border: 1px solid #999999;}
.btn-gray:link { color: #ffffff; }
.btn-gray:visited { color: #ffffff; }
.btn-gray:hover { color:#303030; background-color:#dedede; border: 1px solid #dedede; }
.btn-gray:active { color:#303030; }

.btn-gray2 { color: #666666; background-color:#dedede; border: 1px solid #dedede; }
.btn-gray2:link { color: #666666; }
.btn-gray2:visited { color: #666666; }
.btn-gray2:hover { color:#ffffff; background-color:#b4b4b4; border: 1px solid #b4b4b4; }
.btn-gray2:active { color:#ffffff; }

.btn-gray3 { color: #ffffff; background-color:#999999;  border: 1px solid #bcbcbc;}
.btn-gray3:link { color: #ffffff; }
.btn-gray3:visited { color: #ffffff; }
.btn-gray3:hover { color:#303030; background-color:#dedede; border: 1px solid #dedede; }
.btn-gray3:active { color:#303030; }

.btn-light-gray { color: #787878; background-color:#f7f7f7; border: 1px solid #f7f7f7;}
.btn-light-gray:link { color: #787878; }
.btn-light-gray:visited { color: #787878; }
.btn-light-gray:hover { color: #ffffff; background-color:#999999; border: 1px solid #999999; }
.btn-light-gray:active { color: #ffffff; }

.btn-light-gray2 { color: #303030; background-color:#dddddd; border: 1px solid #dddddd; }
.btn-light-gray2:link { color: #303030; }
.btn-light-gray2:visited { color: #303030; }
.btn-light-gray2:hover { color: #efefef; background-color:#999999; border: 1px solid #dddddd; }
.btn-light-gray2:active { color: #efefef; }

.btn-white { color: #000000; background-color:#ffffff;border: 1px solid #ffffff; }
.btn-white:link { color: #000000; }
.btn-white:visited { color: #000000; }
.btn-white:hover { color:#ffffff; background-color:#000000; border: 1px solid #000000; }
.btn-white:active { color:#ffffff; }

.btn-black { color: #ffffff; background-color:#000000 ; border: 1px solid #000000;}
.btn-black:link { color: #ffffff; }
.btn-black:visited { color: #ffffff; }
.btn-black:hover { color:#000000; background-color:#ffffff; border: 1px solid #000000; }
.btn-black:active { color:#000000; }

.btn-gold { color: #c8ad72; background-color:#ffffff ; border: 1px solid #c8ad72;}
.btn-gold:link { color: #c8ad72; }
.btn-gold:visited { color: #c8ad72; }
.btn-gold:hover { color:#ffffff; background-color:#c8ad72; border: 1px solid #c8ad72; }
.btn-gold:active { color:#ffffff; }

.btn-colorPicker { background-color: #ffffff; border: 1px solid #ffffff; }
.btn-colorPicker:hover { background-color: #ffffff; border: 1px solid #ffffff; }

/* 網站配色之淺橘色 */
.btn-color1 {background-color:#E5D2B4; border: 1px solid #E5D2B4; color: darkslategrey;}
.btn-color1:hover { background-color: #ddc6a1; border: 1px solid #ddc6a1; color: darkslategrey;}
/* 網站配色之橘色 */
.btn-color2 {background-color:#ED6A40; border: 1px solid brown; color: darkslategrey;}
.btn-color2:hover { background-color: #e05529; border: 1px solid brown; color: darkslategrey;}

.btn-more.dark {
	font-size:20px;
	font-size:2rem;
	color:#FFD801;
}
.btn-more.dark:link { color:#FFD801; }
.btn-more.dark:visited { color:#FFD801; }
.btn-more.dark:hover { color:#ffffff; }
.btn-more.dark:active { color:#ffffff; }
.btn-more::after { display: none; }

/* social button */
.footer [class*="btn-"]:link { color:#ffffff; }
.footer [class*="btn-"]:visited { color:#ffffff; }
.footer [class*="btn-"]:hover { color:#ffffff; }
.footer [class*="btn-"]:active { color:#ffffff; }

.btn-fb { background-color: #3B5998; border: 1px solid #3B5998; }
.btn-fb:hover { background-color: #3B5998; border: 1px solid #3B5998; }

.btn-twitter { background-color: #1EBEF0; border: 1px solid #1EBEF0; }
.btn-twitter:hover { background-color: #1EBEF0; border: 1px solid #1EBEF0; }

.btn-linkedin { background-color: #007BB5; border: 1px solid #007BB5; }
.btn-linkedin:hover { background-color: #007BB5; border: 1px solid #007BB5; }

.btn-google { background-color: #DD4B39; border: 1px solid #DD4B39; }
.btn-google:hover { background-color: #DD4B39; border: 1px solid #DD4B39; }

.btn-youtube { background-color: #CC181E; border: 1px solid #CC181E; }
.btn-youtube:hover { background-color: #CC181E; border: 1px solid #CC181E; }

.btn-flickr { background-color: #FF0084; border: 1px solid #FF0084; }
.btn-flickr:hover { background-color: #FF0084; border: 1px solid #FF0084; }

.footer .btn-fb:hover,  .footer .btn-twitter:hover,  .footer .btn-linkedin:hover,  
.footer .btn-google:hover,  .footer .btn-youtube:hover,  .footer .btn-flickr:hover { -webkit-transform: scale(1.2); transform: scale(1.2); }

/* line button */
.btn-line { background-color:transparent; }
.btn-line:hover { background-color:transparent; }

.btn-light-blue.btn-line { color: #5bc0de !important; }
.btn-light-blue.btn-line:hover { color: #31b0d5 !important; }

.btn-blue.btn-line { color: #3498db !important; }
.btn-blue.btn-line:hover { color: #2980b9 !important; }

.btn-purple.btn-line { color: #9b6bcc !important; }
.btn-purple.btn-line:hover { color: #814fb5 !important; }

.btn-purple2.btn-line { color: #6C62A1 !important; }
.btn-purple2.btn-line:hover { color: #814fb5 !important; }

.btn-red.btn-line { color: #FF6B6B !important; }
.btn-red.btn-line:hover { color: #ff0000 !important; }

.btn-orange.btn-line { color: #e67e22 !important; }
.btn-orange.btn-line:hover { color: #d35400 !important; }

.btn-sea.btn-line { color: #31859d !important; }
.btn-sea.btn-line:hover { color: #18647a !important; }

.btn-high-light-green.btn-line {color: #79d5b3 !important; }
.btn-high-light-green.btn-line:hover {color: #59b795 !important; }

.btn-light-green.btn-line {color: #2ecc71 !important; }
.btn-light-green.btn-line:hover {color: #27ae60 !important; }

.btn-green.btn-line {color: #77933c !important; }
.btn-green.btn-line:hover { color: #596d2f !important; }

.btn-grass-green.btn-line {color: #72c02c !important; }
.btn-grass-green.btn-line:hover { color: #27ae60 !important; }

.btn-light-yellow.btn-line { color:#f0ad4e !important; }
.btn-light-yellow.btn-line:hover { color:#EDD58C !important; }

.btn-yellow.btn-line { color: #ffb900 !important; }
.btn-yellow.btn-line:hover { color: #F39C12 !important; }

.btn-heavy-gray.btn-line { color: #444444 !important; }
.btn-heavy-gray.btn-line:hover { color:#666666 !important; }

.btn-gray.btn-line { color: #999999 !important; }
.btn-gray.btn-line:hover { color:#333333 !important; background-color: #ffffff; }

.btn-gray2.btn-line { color: #666666 !important; }
.btn-gray2.btn-line:hover { color:#b4b4b4 !important; }

.btn-gray3.btn-line { color: #999999 !important; }
.btn-gray3.btn-line:hover { color:#dedede !important; }

.btn-light-gray.btn-line { color: #787878 !important; }
.btn-light-gray.btn-line:hover { color: #999999 !important; }

.btn-light-gray2.btn-line { color: #dddddd !important; }
.btn-light-gray2.btn-line:hover { color: #999999 !important; }

.btn-white.btn-line { color: #ffffff; }
.btn-white.btn-line:link { color:#ffffff; }
.btn-white.btn-line:visited { color:#ffffff; }
.btn-white.btn-line:hover { color:#ffffff; border: 1px solid #ffffff; }
.btn-white.btn-line:active { color:#ffffff; }

.btn-black.btn-line { color:#000000 !important; }
.btn-black.btn-line:hover { color:#000000 !important; background-color: #ffffff; }

.btn-gold.btn-line { color:#c8ad72 !important; }
.btn-gold.btn-line:hover { color:#9e8143 !important; }

/* transparent */
[class*="btn-"].transparent { border:none; background-color:transparent; }
[class*="btn-"].transparent::after {
	display: none;
}
[class*="btn-"].transparent:active { box-shadow: none; }

.btn-gray.transparent { color: #b4b4b4; }
.btn-gray.transparent:hover { color:#303030; }

.btn-white.transparent { color: #000000; }
.btn-white.transparent:link { color: #000000; }
.btn-white.transparent:visited { color: #000000; }
.btn-white.transparent:hover { color:#999999; }
.btn-white.transparent:active { color:#999999; }

.btn-black.transparent { color: #ffffff; }
.btn-black.transparent:link { color: #ffffff; }
.btn-black.transparent:visited { color: #ffffff; }
.btn-black.transparent:hover { color:#999999; }
.btn-black.transparent:active { color:#999999; }

.btn-gray.transparent { color: #999999; }
.btn-gray.transparent:link { color: #999999; }
.btn-gray.transparent:visited { color: #999999; }
.btn-gray.transparent:hover { color:#000000; }
.btn-gray.transparent:active { color:#000000; }

.btn-blue.transparent { color: #3498db; }
.btn-blue.transparent:link { color: #3498db; }
.btn-blue.transparent:visited { color: #3498db; }
.btn-blue.transparent:hover { color:#0061A2; }
.btn-blue.transparent:active { color:#0061A2; }


/* unlink */
[class*="btn-"].unlink { cursor:default; color:#999999; background-color:#f5f5f5; border:1px solid #ccc; }
[class*="btn-"].unlink:link { color:#999999; }
[class*="btn-"].unlink:visited { color:#999999; }
[class*="btn-"].unlink:hover { color:#999999; background-color:#f5f5f5; }
[class*="btn-"].unlink:active { color:#999999; }

/* custom */
.btn-sort-col { cursor:move; }

/* 後台固定在右側的按鈕 */
.btn-add { overflow: visible; padding: 0; }
.btn-add.show { overflow: visible; }
.btn-add:hover { opacity: 1; }
.btn-add:active { box-shadow:none; }
.btn-add:active::after { display: none; }
/*中間要放+請用以下<i>的class*/
.btn-add > i {
	background-color: #6ed8ff;
	border: 1px solid #6ed8ff;
	padding:0;
	line-height: 24px;
	width:24px;
	height:24px;
	margin: 0;
	font-size: 24px;
	font-size: 2.4rem;
	/*border-radius: 100%;*/
	position: relative;
	z-index: 200;
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	/*opacity: .5;*/
	 box-shadow:0 2px 4px #aaaaaa; 
}
.btn-add > i::after {
	content: '';
	width: 100%;
	height: 300px;
	display: block;
	position: absolute;
	left:0%;
	top:50%;
	margin-top:-150px;
	opacity: 0;
	border-radius: 100%;
	background:rgba(255,255,255,0.3);
  	-ms-filter: none; filter: none;
  	-webkit-transform: scale(0);
  	transform: scale(0);
	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
}
.btn-add:hover > i {
	/*opacity: .8;
	background-color: #00AEEF;
	border: 1px solid #00AEEF;*/
}
.btn-add:active > i::after {
	/*opacity: 1;
	-webkit-transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
	transition: all 400ms cubic-bezier(0, 0.7, 0.5, 1);
  	-webkit-transform: scale(1.5);
  	transform: scale(1.5);*/
}
.btn-add:hover > i, .btn-add:active > i { box-shadow:0 2px 6px #666666; }
/* 強調 */
.btn-add.keyIcon > i {
	line-height: 36px;
	width:36px;
	height:36px;
	font-size: 30px;
	font-size: 3rem;
	box-shadow:0 7px 13px #787878;
}
/* 浮動形式 */
.btn-add[class*='float-']{ position: absolute; z-index: 1001;/*不可低於1001 carrie 20160307*/ }
.btn-add.float-RB { right: -10px; bottom: -20px; }
/* 固定形式 */
.btn-add[class*='fixed-']{ position: fixed; z-index: 1001;/*不可低於1001 carrie 20160307*/ }
.btn-add.fixed-bottom { right: 20px; bottom: 60px; }
.btn-add.fixed-bottom:hover > i, .btn-add.fixed-bottom:active > i { box-shadow:0 -7px 13px #787878; }


/*排序按鈕*/
.btn-sort { cursor:move; }

/**/
.btn-prev {
	width:32px;
	height:32px;
	padding: 0;
	background: rgba(0,0,0,.5) url('../images/icon/prev.png') no-repeat center center;
}
.btn-next {
	width:32px;
	height:32px;
	padding: 0;
	background: rgba(0,0,0,.5) url('../images/icon/next.png') no-repeat center center;
}
.btn-prev.fixed, .btn-next.fixed {
	position: fixed;
	top: 50%;
	margin-top: -20px;
}
.btn-prev.fixed {
	left: 0;
}
.btn-next.fixed {
	right: 0;
}