@charset "utf-8";
/* CSS Document */
/* Art Tangency Creation - 天井創意 CaGe Wei @art-tangency.com */

/* ============= Setting ============= */
body {width:100%; padding:0px; background:#fff;}
h1, h2, h3 {box-sizing:border-box; padding:10px 0px; line-height:140%;}
h1 {font-size:1.8em; font-weight:700; letter-spacing:1px;}
h2 {font-size:1.4em; font-weight:400;}
h3 {font-size:1.1em; font-weight:400;}
hr {height:1px; background:#666;}
input, textarea, select, option {outline:none; padding:2px 5px;}
input[type="submit"], input[type="button"] {cursor:pointer;}
.height_F {/*Full Height @ at_cage.js*/}
.height_F2 {/*Full Height - header @ at_cage.js*/}
/* ============= Basic ============= */
.loadPad {width:100%; height:100%; text-align:center; background:#fff; position:fixed; top:0px; padding-top:20%; z-index:999999;}
.backTop {
	width:50px; height:50px; line-height:50px; position:fixed; right:25px; bottom:25px; opacity:0; background-color:rgba(0,0,0,0.60);
	-webkit-border-radius:26px; -moz-border-radius:26px; -o-border-radius:26px; border-radius:26px;}
.backTop::before {
	content:'\f106'; display:inline-block; font:normal normal normal 1.4em FontAwesome; 
	color:#999; width:inherit; height:inherit; line-height:inherit; text-align:center; vertical-align:top;}
.backTop:hover {background-color:rgba(0,0,0,1.00);}
.backTop:hover::before {color:#fff;}

/* Model */
#main {margin:0px; width:100%; background:none; position:relative; padding-bottom:50px;}

.CG_yt169 {position:relative; height:0px; overflow:initial; padding:0px 0px 56.25%; margin-top:-5%; margin-bottom:10px;}/*Youtube*/
.CG_yt169 iframe, .CG_yt169 object, .CG_yt169 embed {position:absolute; width:100%; height:100%; top:0px; left:0px;}
.CG_yt169::after {content:''; position:absolute; width:100%; height:100%;}
.CG_ytCtrl {width:100%; background:url(../images/bg_bar01.jpg) no-repeat center center; margin-top:0px; position:relative;}
.CG_ytCtrl::after {
	content:''; width:100%; height:30px; position:absolute; bottom:0px; left:0px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.CG_ytCtrl > ul {width:100%; text-align:center; padding:20px 0px 40px; background:rgba(255,255,255,0.6);}
.CG_ytCtrl > ul > li {
	display:inline-block; width:200px; height:122px; line-height:122px; text-align:center; 
	cursor:pointer; margin:0px 20px; background:#000; position:relative;
}
.CG_ytCtrl > ul > li > img {width:inherit; height:auto; opacity:0.8; vertical-align:top;}
.CG_ytCtrl > ul > li > p {width:100%; line-height:160%; position:absolute; bottom:10px; text-align:center; color:#333; z-index:9; background:#eaddc5;margin:0;}
.CG_ytCtrl > ul > li::after {
	content:'\f16a'; font:normal normal normal 14px/1 FontAwesome; font-size:2rem; color:#ececec; background:rgba(255,255,255,0.6);
	position:absolute; top:0px; line-height:inherit; width:100%; height:100%; display:block;
}
.CG_ytCtrl > ul > li:hover::after {background:rgba(255,255,255,0.2);}
.CG_ytCtrl > ul > li.action::after {content:''; background:rgba(0,0,0,0);}
.CG_ytCtrl > ul > li.action > p {color:#fff; line-height:200%; background:rgba(0,0,0,0.7); bottom:5px;}
.CG_ytCtrl > ul > li:hover > img {opacity:1;}
.CG_ytCtrl > ul > li:hover > p {background:rgba(0,0,0,0.7); bottom:5px; line-height:200%;color:#fff}

.voicePad {
	position:absolute; right:auto; bottom:10px; max-width:100px; width:10%; height:50px; left:10px;
	text-align:center; color:#ececec; background:#000; cursor:pointer; z-index:9;
}
.voicePad .CG_volume::before {content:"\f028";}
.voicePad.action .CG_volume::before {content:"\f026";}

.CG_scorll::-webkit-scrollbar {width:5px;}
.CG_scorll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
.CG_scorll::-webkit-scrollbar-thumb {background-color:#85d7d1; outline: 1px solid slategrey;}

.switchImage{} .switchImage img:first-child{display:block;} .switchImage img:last-child{display:none;}/*RWD Image*/
.CGc, .CGt * {
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
@media only screen and (max-width: 640px) {.switchImage img:first-child{display:none;} .switchImage img:last-child{display:block;}}

.searchPad {width:100%; margin:0px auto; display:table-row;}/*SearchBar*/
.searchPad > ul {border:1px solid #aaa; display:table-row;}
.searchPad > ul > li {box-sizing:border-box; padding:5px; display:table-cell;}
.searchPad > ul > li:last-child {width:50px;}
.searchPad > ul > li input {width:100%; height:40px; line-height:40px; border:none; color:#333;}
.searchPad > ul > li:last-child a {width:100%;color:#85d7d1; display:block;}
.searchPad > ul > li:last-child a:hover {width:100%; color:#FF8789;}
.searchPad > ul > li:last-child a::before {content:'\f002'; font-size:1rem; line-height:inherit;  display:block; font-family:'FontAwesome';}

.dragPad {}/*Drag items*/
.dragPad > ul.items {}
.dragPad > ul.items li {cursor:pointer;}



/* ============= RWD Setting ============= */

@media only screen and (max-width: 980px) {
	/*Basic*/
	#inner .content {}	
	.CG_yt169 {overflow:hidden; padding:0px 0px 56.25%; margin-top:0%; margin-bottom:0px;}/*Youtube*/
	.CG_yt169::after {
		content:'\f16a'; font:normal normal normal 14px/1 FontAwesome; font-size:2rem; box-sizing:border-box;
		position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.8); padding-top:25%; text-align:center; color:#fff;
	}
	.CG_yt169.action::after {content:''; background:none;}
	.CG_ytCtrl {background-size:cover;}
	.CG_ytCtrl > ul {width:100%; text-align:center; padding:20px 0px 40px; background:rgba(255,255,255,0.6);}
	.CG_ytCtrl > ul > li {
		display:inline-block; width:30%; height:auto; line-height:100%; text-align:center; 
		cursor:pointer; margin:0px 1%; background:#000; position:relative; margin-bottom:15px;
	}
	.CG_ytCtrl > ul > li > img {width:100%; height:auto; opacity:0.8; vertical-align:top;}
	.CG_ytCtrl > ul > li > p {width:100%; line-height:160%; position:absolute; bottom:0px; text-align:center; color:#333; background:#eaddc5;margin:0;}
	.CG_ytCtrl > ul > li::after {padding-top:10%; box-sizing:border-box; height:100%; color:#fff; line-height:initial;}
	.CG_ytCtrl > ul > li.action::after {content:''; background:rgba(0,0,0,0);}
	.CG_ytCtrl > ul > li.action > p {color:#FFFFFF; line-height:200%; background:rgba(255,255,255,0.8); bottom:5px;}
	.CG_ytCtrl > ul > li:hover > img {opacity:1;}
	.CG_ytCtrl > ul > li:hover > p {background:rgba(0,0,0,0.7); bottom:5px; line-height:200%;color:#FFFFFF}

	.voicePad {
		position:absolute; right:10px; bottom:10px; max-width:100px; width:10%; height:30px; padding-top:5px;
		text-align:center; color:#ececec; background:rgba(0,0,0,0.8); cursor:pointer; z-index:9;
	}
	

}