/* 按鈕事件 */
[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 { margin-right:3px; 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-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: #3A589B; border: 1px solid #3A589B; }
.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: #1abc9c; border: 1px solid #1abc9c; }
.btn-sea:hover { background-color: #16a085; border: 1px solid #16a085; }

.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: #3DA222; border: 1px solid #3DA222; }
.btn-green:hover { background-color: #388224; border: 1px solid #388224; }

.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-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: #1abc9c !important; }
.btn-sea.btn-line:hover { color: #16a085 !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: #3DA222 !important; }
.btn-green.btn-line:hover { color: #388224 !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:#dedede !important; }

.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; }

.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 {/*改為針對全部的i 如果有別的地方用這個class 代表那個地方用錯 要去改那個地方 不能改這邊 carrie 20160529*/
	background-color: #00B0F0;
	border: 1px solid #00B0F0;
	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;
}
.btn-add > i::after {/*改為針對全部的i 如果有別的地方用這個class 代表那個地方用錯 要去改那個地方 不能改這邊 carrie 20160529*/
	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 {/*改為針對全部的i 如果有別的地方用這個class 代表那個地方用錯 要去改那個地方 不能改這邊 carrie 20160529*/
	opacity: .8;
	background-color: #00AEEF;
	border: 1px solid #00AEEF;
}
.btn-add:active > i::after {/*改為針對全部的i 如果有別的地方用這個class 代表那個地方用錯 要去改那個地方 不能改這邊 carrie 20160529*/
	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 4px 9px #787878; }/*改為針對全部的i 如果有別的地方用這個class 代表那個地方用錯 要去改那個地方 不能改這邊 carrie 20160529*/
/* 強調 */
.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; }

/*============================
		展開內容 dropdownBox
=============================*/
.dropdownBox {
	min-width: 260px;
	position: absolute;
	background-color: #ffffff;
	padding: 15px 25px 15px 20px;
	right: -7px;
	top: -8px;
	box-shadow: 0 0 10px #999999;
	color: #454545;/* 給字一個顏色，不然會變白字　20160226 Gabby*/
	font-family:Century Gothic,PingFang,Verdana,Helvetica,Arial,"蘋方","PingFang TC","儷黑 Pro","LiHei Pro Medium","黑體-繁","Heiti TC","Microsoft JhengHei","標楷體","DFKai-SB",sans-serif;
	z-index: 151;
	display: none;
	cursor: default;

	-webkit-box-sizing:border-box; box-sizing:border-box;
}
.dropdownContent {
	margin: 10px 0; 
	padding: 20px 0 10px 0; 
	overflow:auto; 
	min-height: 300px;
}
.dropdownContent .inlineColumn { margin-right: 1% !important; }

/*position*/
.dropdownBox.right { right: auto; left: 100%; }
.dropdownBox.right-over { right: -100%; left: auto;}
.dropdownBox.left { right: 100%; left: auto; }
.dropdownBox.left-over { right: 0; left: auto; }
.dropdownBox.LB { right: inherit; top: inherit; bottom: 0; }
.dropdownBox.RB { right: 0; left: inherit;} 
.dropdownBox.Vleft { left: 0; }
.dropdownBox.Vright { right: 0; }

/*width*/
.dropdownBox.w-120 { min-width: 120px; }
.dropdownBox.w-160 { min-width: 160px; }
.dropdownBox.w-200 { min-width: 200px; }
.dropdownBox.w-360 { min-width: 360px; }
.dropdownBox.w-500 { min-width: 500px; }
.dropdownBox.w-600 { min-width: 600px; }

.dropdownBox.w-per-100 { width: 100%;}

/*spacing*/
.dropdownBox.paddingH-un { padding: 15px 0; }

/*btnBox & closeBtn*/
.dropdownBox .btnBox { margin-top: 10px; text-align: right; }
.dropdownBox .closeBtn { position: absolute;right: 5px; top: 5px; }

/*dropdownNum*/
.dropdownNum { text-align: center; float: right; }
.dropdownCircle {
	border-radius: 100%;
	border:1px solid #0f81e5;
	padding:25px 20px;
	font-size: 20px;
	font-size: 2rem;
	display: inline-block;
	vertical-align: middle;
	box-sizing:border-box;
}
.dropdownCircle > div { color: #0f81e5;}
.dropdownText { 
	font-size: 12px;
	font-size: 1.2rem;
	color:#497DAB;
	margin-top: -15px;
	position: relative;
	background-color: #ffffff;
}

/* dropdownBox fixedBox*/
.dropdownBox.fixedBox { 
	position: fixed; 
	overflow: hidden; 
}
.dropdownBox.fixedBox .dropdownContent { min-height: 400px; } 
/*others*/
.btn-add.fixed-bottom .dropdownBox { top: auto; bottom: 0; min-width: 320px; }


/* 刪除按鈕 */
.btn-del:link { color:#ffffff; }
.btn-del:visited { color:#ffffff; }
.btn-del:hover { color:#ffffff !important; }
.btn-del:active { color:#ffffff !important; }
.btn-del {
	width: 20px;
	font-size:14px;
	font-size:1.4rem;
	min-width:14px;
	text-align:center;
	overflow:hidden;
	padding:6px 3px 6px 3px;
	border: none !important;
	border-radius:100%;
	-webkit-transition:all .6s ease;
	transition:all .6s ease;
}
.btn-del > span {
	padding:0 10px;
	vertical-align:baseline;
	display: inline-block;
	line-height: 1;
}
.btn-del > span > i { vertical-align: baseline; margin: 0; }
.btn-del.active { border-radius:25px; padding:6px 8px 6px 5.5px; text-align:right; }
.btn-del:hover, .btn-del.active {
	opacity: 1;
	border: none !important;
	background-color:#00a0e9;
	background-image:-moz-linear-gradient(right,#00a0e9,#7c81ff);
	background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0e9),to(#7c81ff));
	background-image:-webkit-linear-gradient(right,#00a0e9,#7c81ff);
	background-image:-o-linear-gradient(right,#00a0e9,#7c81ff);
	background-image:linear-gradient(to right,#00a0e9,#7c81ff);
	background-repeat:repeat-x;
}
.hideDiv.open { right:25px; opacity:1; z-index:1; }
.btn-del .btn-red { background-color: #f70057; border:1px solid #f70057; }
.btn-del .btn-red:hover { background-color: #f70057; border:1px solid #f70057; }

/*排序按鈕*/
.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;
}

/* 付款模式 */
.payMode [class^="btn-"].active { background-color:#e8f2f8; color:#3498db; }
.payMode [class^="btn-"].active:hover { border-color:#e8f2f8; }
.payMode [class^="btn-"].active::before {
	display:block;
	font-family: 'FontAwesome';
	font-size:30px;
	content:'\f058';
	color:#3498db;
	position:absolute;
	right:10px;
	top:15px;
}
.payMode .btn-white:hover { color:#000000; background-color:transparent; border:transparent;}
.payMode .btn-white:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); }
.payMode .btn-white img { -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; }


@media screen and (max-width : 512px) {

	/*=====================展開內容 dropdownBox ↓=====================*/

	/*position*/
	.dropdownBox.right,
	.dropdownBox.right-over,
	.dropdownBox.left,
	.dropdownBox.left-over,
	.dropdownBox.LB,
	.dropdownBox.RB,
	.dropdownBox.Vleft,
	.dropdownBox.Vright { right: inherit; left: inherit;} 

	/*width*/
	.dropdownBox.w-120,
	.dropdownBox.w-160,
	.dropdownBox.w-200,
	.dropdownBox.w-360,
	.dropdownBox.w-500,
	.dropdownBox.w-600 { min-width: inherit; width: 100%; }

	.dropdownBox.fixedBox { }
	/*=====================展開內容 dropdownBox ↑=====================*/

}