/*

01. GENERAL STYLING
02. MENU
03. INDEX PAGES
04. PAGES
	0I:	TEAM
	II:	ABOUT
	III:SERVICES
	IV: TESTIMONIALS
	V:	BLOG
	VI: CONTACT
	VII:FOOTER
05: PORTFOLIO, CAROUSEL & THUMB CAROUSELS
06: 404 PAGE, PRICING TABLE, SKILLS BAR, ACCORDIAN, TABS, TOOLTIPS
07. CSS3 ANIMATIONS
08. MEDIA QUERIES
*/

/*-----------------------------------------------------------------------------------*/
/*	01: GENERAL STYLING
/*-----------------------------------------------------------------------------------*/

body {
	margin:0; padding:0;
	font:13px/22px  "微軟正黑體", "Microsoft JhengHei", "Franklin Gothic Medium", "Gill Sans MT", Calibri, sans-serif;
	color:#555;
	background:#f0f0f0; 
	-webkit-backface-visibility:hidden; 
	overflow-x:hidden; 
	text-rendering:optimizeLegibility;	
}

/**** PAGE CONTAINERS ****/
.header { 
	padding:0 0;
	background:#39455b;
	margin:0 auto; 
	min-height: 86px;
	width: 100%;
	z-index: 1000; 
}
.inner_content { padding:20px 0 0 0; }
.wrapper {  margin:0px auto; padding:0 0 60px;}
#banner { background:#e9e6e1; width: 100%;	
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 2px 10px rgba(0,0,0,0.3);}

#banner h1.title {
	font-size:40px;
	color:#31708f;
	font-weight:900;
	text-shadow: 0.05em 0.05em 0.1em #CCC0AE;
}

#banner h2.title {
	font-size:36px;
	color:#31708f;
	font-weight:900;
	text-shadow: 0.05em 0.05em 0.1em #CCC0AE;
}

#banner h2 {
	color:#664102;
}

.intro_wrapper {  margin:0 auto; padding:0 0 40px;}

.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
/**** GENERAL ****/
a, input, select, textarea {outline:none; text-decoration:none; }
a, li { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a, a:visited { text-decoration: none!important; }
:focus {outline: 0!important;}
ul {list-style-type:none; }
a:hover, a:active, a:focus { outline: 0!important;}
::-moz-selection{ color:#fff; background:#19C1C3; }
::selection { color:#fff; background:#19C1C3; }
p {margin-bottom:15px; }
span { font-weight:700; }
small { letter-spacing:0.2em; font-size:11px; }
.clear { height:0; clear: both; font-size:0; }
.normal { font-weight: normal; }
.pull-right { margin-left:12px; }
.pull-left { margin-right:12px; }
.center { text-align:center; margin: 0 auto; }
.right {text-align:right; margin: 0 auto;}
.left {text-align:left; margin: 0 auto;}
.row-left { text-align:left; margin: 0 20px;}
hr { border-top:1px solid #ccc;border-bottom:0; }
blockquote { border-left:3px solid #2BA6CB; }
.popover{ text-align:left; }
.zocial:hover, .zocial:focus{ background: #19C1C3; }
.zocial{ border-radius:4px; padding:2px;}
.media img { margin-top:5px; }
.media-body a { color:#888; }
.media-body a:hover { color:#777; }
.big {font-size:100px; }
.myslider{ display:none; }
.cursor-mouse { cursor:pointer;}
.ka {word-break:keep-all;} /*斷行設定 */
.ws { white-space:pre;} /*完整呈現空白字元個數 */
.kaws {word-break:keep-all; white-space:pre;}/*斷行設定並完整呈現空白字元個數 */	
fiqure { width:100%; height:auto;}
.onbuttom { vertical-align:bottom;}
.well-news{
	background-color:#e3e1e1;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;
	padding:5px;
	margin:5px;	
}

.well-tvout{
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;
	padding:19px;
	margin-bottom:5px;
	background:url(../img/otherpic/bg01.png) repeat;}

.well-tvin{
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;	
	margin-bottom:5px;
	background:#f0f0f0;
}

.well-menu{
	background-color:#A4B7AE;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;
	padding:19px;
	color:#fff;
	margin-bottom:5px;
	
}
.well-result{
	background-color:#D8D8D8;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;
	padding:19px;
	color:#fff;
	margin-bottom:5px;
	
}
.well-sm{
	padding:9px;
	border-radius:0
}

.well-lg{
	padding:24px;
	border-radius:0
}
.videoBg {
	background-image:url(../img/bg.png);
	background-repeat:repeat;}

/* Icons List */
.fa-li { margin-left:-8px; padding-top:2px; }

/* Colours */
.hue {color:#19C1C3; }/*藍綠*/
.white { color:#fff; }
.white1 {color:#E9E6E1;}/*米白*/
.white2 {color:#FDF5E6;}/*黃白*/
.white3 {color:#FFE4E1;}/*紅白*/
.green {color:#61863E;}/*中古橄欖亮綠*/
.green1 {color:#303730;}/*中古墨綠*/
.green2 {color:#0C0;}/*亮綠*/
.green3 {color:#060;}/*基本綠*/
.green4 {color:#467139;} /*中古橄欖綠*/
.green5 {color:#3d8200; }/*基本亮綠*/
.green6 {color:#19C1C3;}/*水鴨綠*/
.grey { color:#999; }/*灰*/
.grey1 {color:#696969;} /*鐵灰*/
.grey2 { color:#69767F; }/*深灰*/
.sky {color:#00BFFF; }/*亮天空藍*/
.sky1 {color:#2BA6CB; }/*偏暗天空藍*/
.sky2 { color:#87CEEB;}/*水藍*/
.sky3 {color:#00A0E9; }/*深天空藍*/
.red {color:#a61f29;}/*中古紅*/
.red1 {color:#9b0004;}/*飽和紅*/
.red2 {color:#F00;}/*正紅*/
.red3 {color:#B22222;}/*基本紅*/
.red4 {color:#993f32;}/*臭紅*/
.orange { color:#bd5b25;}/*中古暗橘*/
.orange1 {color:#e2844a;} /*淺橘*/
.orange2 {color:#E36006;}/*流行橘*/
.orange3 {color:#FF7300;}/*陽澄橘*/
.orange4 {color:#EA5514;}/*橘*/
.purple {color:#5000B8;}/*印象藍紫*/
.purple1 {color:#7B68EE;}/*淺藍紫*/
.purple2 {color:#27013F;}/*深藍紫*/
.purple3 {color:#800080;}/*紅紫*/
.purple4 {color:#9932CC;} /*淺紅紫*/
.yellow {color:#ffb400;}/*飽和黃*/
.yellow1 {color:#FFD700;}/*金黃*/
.yellow2 {color:#ca9638;}/*暗黃*/
.yellow3 {color:#FFFF99; }/*淺黃*/
.yellow-green {color:#8FC31F; } /*黃綠*/
.white_orange {color:#e0cfc0;}/*米白淺橘*/
.pink {color:#FC0697;}/*粉紅*/
.pink1 {color:#FFB3E6;}/*淡粉紅*/
.blue {color:#006080;}/*中古藍*/
.blue1 {color:#0000CD;}/*亮藍*/
.blue2 {color:#003d82;}/*中世紀飽和藍*/
.blue3 {color:#34495E;}/*灰藍*/
.blue4 {color:#000047;}/*深藍*/
.brown {color:#75583f;}/*文藝棕*/
.brown1 {color:#8B4513;}/*棕色(褐)*/
.brown2 {color:#491B02;} /*深褐*/
.brown3 {color:#A16B47;}/*駝色(淺棕)*/
.black {color:#000000;}/*黑色*/
.black1 {color:#1C1B1B;}/*淺黑色*/
.black2 {color:#2B2B2B;}/*淡黑色*/
.black-blue {color:#01182C;}/*黑藍*/
.black-green {color:#122610;} /*黑綠*/
.black-red {color:#310207;}/*黑紅*/
.black-gray {color:#2F3030;}/*黑灰*/
.nocolor {color:transparent;}/*透明*/

/*反白字體-滑鼠碰觸改變底色*/
.hue_block { background-color:#2BA6CB; color: #092EA4; padding:5px 4px 2px; font-weight:800;}
.hue_block:hover { background-color:#1B840A; color: #fff; }

.green_block { background-color:#6AC577; color: #000;font-weight:800;}
.green_block:hover { background-color:#060; color: #fff;}

.red_block { background-color:#F9C7D2; color:#a61f29;font-weight:800;}
.red_block:hover { background-color:#a61f29; color: #fff;}

.yellow_block { background-color:#FFFF99; color:#625B57;font-weight:800;}
.yellow_block:hover { background-color:#ffb400; color: #2F3030;}

/* Padding */
.pad150 { padding-top:150px; }
.pad120 { padding-top:120px; }
.pad90 { padding-top:90px; }
.pad65 { padding-top:65px; }
.pad60 { padding-top:60px; }
.pad55 { padding-top:55px; }
.pad50 { padding-top:50px; }
.pad45 { padding-top:45px; }
.pad40 { padding-top:40px; }
.pad35 { padding-top:35px; }
.pad30 { padding-top:30px; }
.pad25 { padding-top:25px; }
.pad20 { padding-top:20px; }
.pad15 { padding-top:15px; }
.pad10 { padding-top:10px; }
.pad5 { padding-top:5px; }

/* Margins */
.marg-bottom5 { margin-bottom:5px; }
.marg-left5 { margin-left:5px; }
.marg-right5 { margin-right:5px; }
.but_marg { margin-left:3px; }

/* Video */
.vendor{ 
	position:relative;
	padding-bottom:56.25%;
    padding-top:0px; 
	height:0;
	margin:0 0;
}
.vendor video { 
	position: absolute; 
	top:0; 
	left:0;
    width:100%;
	height:100%;
} 
.vendor iframe { border:0; width:100%; height:360px; }
video { width:100%; height:auto; }
.soundcloud{ width:100%; height:166px; }
.videobox{background:#e1f1f9;border:solid 5px #cccccc;width:100%;margin:10px auto 10px auto;}
.video-img{width:100%;height:360px;overflow:hidden;
	}
.video-list{height:120px;padding:15px 0 0 0;}
.video-list li{ width:120px; height:69px; overflow:hidden; position:relative;float:left;border:solid 8px #fff; margin:0; cursor:pointer; display:flex;}
.video-list li .icon-video{ position:absolute; left:5px; top:25px; width:20px; height:20px; z-index:99;}
.video-list li.now .icon-video{display:none;}

.videofull-img{width:100%;height:100%;overflow:hidden;}
.videofull-list{height:120px;padding:15px 0 0 0;}
.videofull-list li{width:120px;height:69px;overflow:hidden;position:relative;float:left;border:solid 8px #fff;margin:0 5px;cursor:pointer;}
.videofull-list li .icon-video{position:absolute;left:5px;top:25px;width:20px;height:20px;z-index:99;}
.videofull-list li.now .icon-video{display:none;}
.video_slider {
	text-align:center;	
	}
#video-wrap {
	width: 500px;
	position: relative;
}
/*video {
	width: 100%;
	height: auto;
}*/
#buttonbar {
	position: absolute;
	bottom: 20px;
	right: 20px;
	}
button {
	margin: 5px 0 0;
	border: 0;
	color: #fff;
	background: #f5246d;
	font: .8em FontAwesome;
	cursor: pointer;
	width: 26px;
	text-align: center;
	line-height: 22px;
	border-radius: 100%;
}
button .turn {
	margin: 5px 0 0;
	border: 0;
	font: .8em FontAwesome;
	cursor: pointer;
	width: auto;
	text-align: center;
	border-radius: 100%;
}
#play::before {
	content: "\f04b";
	font-size: .8em;
}
#pause::before {
	content: "\f04c";
	font-size: .8em;
}
#volumeUp::before {
	content: "\f028";
}
#volumeDown::before {
	content: "\f027";
}
#volumeOff::before {
	content: "\f026";
}


/**** LINKS ****/
a {
	color:#19C1C3; 
	text-decoration:none;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	outline:none;
}
a:hover {
	color: #555;
	text-decoration: none;
	-moz-box-shadow: none;
}


/**** IMAGES ****/


.change01 {background:#C0392B url(../img/otherpic/zoom.png) no-repeat 50% 50%;}
.change02 { text-align:center; background:transparent url(../img/Dun_Bau_B02.png) no-repeat;
	background-position:center center;}
.change03 {background:transparent url(../img/scean02.png) no-repeat; background-size:contain;}

img { vertical-align:bottom; ms-interpolation-mode:bicubic; opacity:1.0;}
/* Image Hover Colour */
.hover_img:hover, .hover_colour {  
	position:relative;
	background:#E9DFCB url(../img/otherpic/zoom.png) no-repeat 50% 50% ;
	-webkit-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
	-moz-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
	 
}
.hover_img:hover, .hoverin {  
	position:relative;	
	-webkit-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
	-moz-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
	 
}
.hover_img2 {
	margin:10px;
	text-align:center;
	vertical-align:top;}
.hover_img2:hover {
	position:relative;
	-webkit-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
	-moz-box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
    box-shadow: inset 0 0 0 7px rgba(255,255,255,0.15);
}

.hover_mark:hover { 
	opacity: 0.7
}

.full-img{
	width: 100%;
	text-align:center;
	
}

/* Image Rotate */
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
}  
.rotate:hover  {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

/**** BUTTONS ****/
.btn{ 
	border:0;
	-webkit-transition:background-color .4s ease-in;
    -moz-transition:background-color .4s ease-in;
    -o-transition:background-color .4s ease-in;
    transition:background-color .4s ease-in;
}
.btn-custom{ font-size:14px; padding:12px 15px 14px; margin-top:10px; }
.btn-rounded{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn-primary { background-color:#2BA6CB; border:0;}
.btn-primary:hover { background-color:#39455b;}
.btn-purple { background-color:#7B68EE; border:0; color: #ffffff;border-color: #5000B8 #5000B8 #000000;
  border-color: rgba(80,0,184,0.1) rgba(80,0,184,0.1) rgba(0, 0, 0, 0.25);  
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);}
.btn-purple:hover { background-color:#BAB0F9; border:0; color: #ffffff;}
.btn-inverse { background-color:#AF1F28;}
.btn-inverse:hover { background-color:#3e4957;}
.btn-slider_up_red { background-color:#8B0000; color:#f0f0f0;}
.btn-slider_up_red:hover { background-color:#006837;}
.btn-slider_up_sky { background-color:#00BFFF; color:#f0f0f0;}
.btn-slider_up_sky:hover { background-color:#EA5514;}
.btn-slider_up_yellow { background-color:#ffb400; color:#8B0000;}
.btn-slider_up_yellow:hover { background-color:#00BFFF; color:#f0f0f0}
.btn-slider_up_green { background-color:#03D915; color:#8B0000;}
.btn-slider_up_green:hover { background-color:#ffb400; color:#006837}
.btn-slider-video { font-size:14px; padding:12px 15px 14px; margin-top:10px; }
/*.btn:visited, .btn:focus { color:#fff; }*/
.label, .badge {text-shadow: none; }
.portfolio-links i {
	background-color:#3E4957;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}
.btn-download-red { background-color:#F84E59; }
.btn-download-red:hover { background-color:#519AF9; color:#f0f0f0;}

.btn-download-green { background-color:#68F14D;}
.btn-download-green:hover { background-color:#519AF9; color:#f0f0f0;}

.portfolio-links  a { margin-right:5px!important; }
.portfolio-links a:hover i { background-color:#39455b;}

.btn:hover {
	border:1px solid #0337FD;	
	-moz-box-shadow:0 0 30px #02C8FB inset;
	-webkit-box-shadow:0 0 30px #03CEF8 inset;
	box-shadow:0 0 30px #0273F9 inset;
	}

.btn_border_color {	
	width:100px;
	color:rgb(255,255,255);
	border:rgb(255,255,255) solid;
	border-radius:15px;
	padding:15px;
	text-decoration:none;
}

.btn_border_color:hover{
	background-color:rgb(255,255,255);
	color:rgb(51,51,51);
	transition:ease-in-out .5s;
}


/**** TYPOGRAPHY ****/
h1,h2,h3,h4,h5,h6 { font-weight:300; letter-spacing:-0.25px; }
h1.title {  font-size:40px; line-height:35px; font-weight:700; margin-bottom:35px; text-align:left;}
h2.title {  font-size:32px; line-height:35px; font-weight:700; margin-bottom:35px; text-align:left;}
h3.title {  font-size:24px; line-height:30px; font-weight:700; margin-bottom:30px; text-align:left;}
h4.title {  font-size:20px; line-height:25px; font-weight:700; margin-bottom:25px; text-align:left;}
h1 { font-size: 24px; line-height:40px; }
h2 { font-size: 21px;  line-height:28px; }
h3 { font-size: 18px; line-height:25px; }
h4 { font-size: 16px; line-height:25px; margin-bottom:10px; }
h5 { font-size: 15px; line-height:22px; margin-bottom:10px; }
h6 { font-size: 14px; line-height:22px; margin-bottom:10px; }
.intro {  line-height:30px; font-weight:400;}
.lead { font-size:18px; line-height:24px; }
.indent {text-indent:2em;}/*第一行文字縮二格 */
.ls {letter-spacing:0.05em; line-height:1.4em;}

.introduction {          /*行上一橫線 */
	border-top: groove 2px #0483a5;
	padding:0.5em 0 0.3em 0em;
	margin-top: 0.5em;
	line-height:30px; 
	font-weight:500;		
}

.text-border-top {
	border-top:0.5px outset #C6C6C7;
	margin-top: 0.2em;
	line-height:1.2em;
}

	
	
.textform {color:#fff;font-size:40px;font-weight:800;text-align:center;letter-spacing:0.3em;text-shadow:0 0 15px rgba(240,240,240,0.80),0 0 15px rgba(240,240,240,0.80),0 0 15px rgba(240,240,240,0.80),0 0 15px rgba(240,240,240,0.80),0 0 15px rgba(240,240,240,0.80);}

/* Home Welcome Text */
.home_welcome {
	font-size: 24px;
	line-height:35px;
	padding:0px 0 10px;
	font-weight:400; 
	margin:0 auto;
	color:#69767F;
}

/*第一行首字變大(暗紅色) */
 .FW-big-red p::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 color:#87393A;
	 font-style:italic;} 

/*第一行首字變大(不指定顏色) */
 .FW-big p::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 font-style:oblique;} 

/*第一行首字變大(暗綠色) */
 .FW-big-green p::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 color:#006934;
	 font-style:italic;
} 

/*第一行首字變大(天空藍) */
 .FW-big-blue p::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 color:#00a0e9;
	 font-style:italic;
}
/*第一行首字變大(天空藍) */
 .FW-big-blue h5::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 color:#1B9CD7;
	 font-style:italic;
} 

/*h5第一行首字變大(暗紅色) */
 .FW-big-red h5::first-letter {
	 font-weight:800;
	 font-size:2em;
	 vertical-align: 5%;
	 color:#87393A;
	 font-style:italic;} 

/*h2第一行首字變大(不指定顏色) */
 .FW-big h2::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 font-style:oblique;} 

/*h3第一行首字變大(暗綠色) */
 .FW-big-green h3::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 10%;
	 color:#006934;
} 

/*h4第一行首字變大(天空藍) */
 .FW-big-blue h4::first-letter {
	 font-weight:800;
	 font-size:200%;
	 vertical-align: 5%;
	 color:#00a0e9;
	 font-style:italic;
} 


/* Welcome Text */
.welcome_index {
	font: 32px/50px 'Lato', sans-serif;
	padding:0px 0 10px;
	font-weight:300; 
	margin:0 auto;
	color:#69767F;
}

/**** DROP CAPS ****/
.dropcap, .dropcap2 {
    font-weight: 700;
    display: block;
    float: left;
    font-size: 45px;
    padding: 0;
	margin: 10px 8px 0 0;
    text-transform: uppercase;
}
.dropcap2 { color:#2BA6CB; }

/**** DRIBBBLE ****/
.shotList img {width: 32.08%; padding: 0 0.4% 15px 0; margin-left: 10px; }
.shotList img:hover {
  opacity: 0.9;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
@media screen and (min-width: 769px) and (max-width: 1024px){
.shotList img {width: 49%!important; padding: 0 6px 6px 0; margin: 0 auto!important;  }
}
@media screen and (min-width: 481px) and (max-width: 768px){
.shotList img {width: 48%!important; padding: 0 3% 5px 0; margin: 0 auto!important; margin-left: -10px!important; }
}
@media only screen and (max-width: 480px) { 
.shotList img {width: 100%!important; padding: 0 0 20px 0; margin: 0 auto!important; margin-left: -10px!important; }
}

/*-----------------------------------------------------------------------------------*/
/*	02: MENU
/*-----------------------------------------------------------------------------------*/
/**** LOGO****/
.logo a{
 	float:left; 
	margin:24px 0px 0 0;
	webkit-transition:all 0.3s ease-in;  
    -moz-transition:all 0.3s ease-in;  
    -o-transition:all 0.3s ease-in;  
    transition:all 0.3s ease-in;
}
.logo a:hover{ opacity: .80; }

#main_menu {float:right; margin:22px 0 0 0;}
.nav{ padding:0; margin:0; }

.nav-pills > li{
	list-style: none;
	float: left;
	margin: 0;
	position: relative;
	padding: 0 0; 
	display: inline-block;
}
.nav-pills > li > a {
	font-weight: 400;
	color: #bbb;
	letter-spacing: 2px;
	font-size: 13px;
	display: block;
	padding:24px 22px 22px 25px;
	text-align: center!important;
	text-transform: uppercase;
}

.nav-pills > li.active{
	background: #2980B9; 
	color:#fff;
	webkit-border-radius: 4px 4px 0px 0px;
    -moz-border-radius: 4px 4px 0px 0px;
    border-radius: 4px 4px 0px 0px;
}
.nav-pills > .active > a, .nav-pills > .active > a:hover, .nav-pills > .active > a:focus { background: transparent; }
.nav-pills > li > a:hover { background: transparent; color:#FFF; }

.dropdown-menu {
	background: #fff;
	display: none;
	left:-25px;
	padding:0;
	position:absolute;
	top:80px;
	width:170px;
	z-index:300;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	background:#39455b;
    box-shadow:none !important;
	border:none;
}
.dropdown-menu > li > a {
	border: 0;
	color: #bbb; 
	display: block;
	font-size: 13px;
	padding: 8px 20px !important;
	text-align: left;
	text-transform: none;
	z-index:301;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a {
text-decoration:none;  color: #fff; background:transparent!important; }
.dropdown-menu > li:first-child { margin-top:4px;}
.dropdown-menu > li:last-child { margin-bottom:6px;}
.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus{ background-color:transparent; border:0px; }

.dropdown-menu > li:nth-child(1) .sub-menu { visibility: hidden; left:170px; top:0px; z-index:302; }
.dropdown-menu > li:nth-child(2) .sub-menu { visibility: hidden; left:170px; top:35px; z-index:302; }
.dropdown-menu > li:nth-child(3) .sub-menu { visibility: hidden; left:170px; top:70px; z-index:302; }
.dropdown-menu > li:nth-child(4) .sub-menu { visibility: hidden; left:170px; top:105px; z-index:302; }
.dropdown-menu > li:nth-child(5) .sub-menu { visibility: hidden; left:170px; top:105px; z-index:302; }
.dropdown-menu li:hover .sub-menu  { visibility: visible; }
.dropdown-menu .sub-menu a { 
 -o-transition-property: none !important;
 -moz-transition-property: none !important;
 -ms-transition-property: none !important;
 -webkit-transition-property: none !important;
 transition-property: none !important;
 z-index:303;
}

.btn-navbar {
	display:none;
	position:absolute;
	top:23px;
	right:18px;
	color: #2980B9;
	font-size:20px;
	border:0px;
	background-color: #252525;
	background-image:none !important;
	width:40px;
	height:40px;
	border-radius:5px;
}

.btn-navbar i { font-size:20px; }
.btn-navbar > .btn {
	display:inherit;
	padding: inherit;
	margin-bottom: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	text-shadow: none;
	vertical-align: left;
	cursor: pointer;
	background-color: transparent;
	background-image: none;
	border: 0px solid #cccccc;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius:0px;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}
.btn-navbar > .btn:hover, .btn-navbar > .btn:focus { color: white; text-decoration: none; background-image:none !important; }
.btn-navbar:hover { color: #252525; background-color: #2980B9; }
.nav-collapse .nav>li>a:hover, .nav-collapse .nav>li>a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus{
background-color: transparent;  }

/*-----------------------------------------------------------------------------------*/
/*	03: INDEX PAGES
/*-----------------------------------------------------------------------------------*/
/***************************************************
	SLIDER REVOLUTION - index
***************************************************/
.fullwidthbanner-container {
	width: 100%!important;
	max-height: 550px!important;
	position: relative;
	padding: 0;
	overflow: hidden!important;
	margin:0px 0 0px;
}
	
.fullscreenvideo iframe{ max-height: 550px!important; }
.fullscreenvideo video{ max-height: 550px!important; }
.fullwidthbanner p{ line-height:24px; font-size:14px; }
.fullwidthbanner a{  color:#fff!important; }
.fullwidthbanner ul { visibility: hidden; margin: 0; list-style: none; }
.rev-text { color: #fff; margin: 40px; }
.rev-title { margin: 0px; color: #fff; }
.rev-left { margin-left: 20px; }
.rev-right { margin-right: 20px; }
.rev-title.big{ font-size: 30px; line-height: 30px; color:#0FF; }
.rev-title.shiau{ font-size: 20px; line-height: 30px; color:#B0FFFF; font-weight:500; }
.rev-title-sub{ font-size: 30px; color: #fff; letter-spacing: 3px; font-weight: 400;}
.rev-title.bold{
	font-size: 60px!important;
    line-height: 1;
    font-weight: 700!important;
    text-transform: uppercase;
    color: #5283A0;
	letter-spacing: 6px;
	padding: 8px 15px!important;
}
.rev-title2.bold{
	font-size: 60px!important;
    line-height: 1;
    font-weight: 700!important;
    text-transform: none;
    color: #eee;
	letter-spacing: 2px;
}
.tp-caption.bg { background: #39455b; padding: 18px 22px 22px; }
.big_white{
	color:#eee;
	font-size: 18px!important;
	background:#39455b;
	padding:20px!important;
}

.tp-leftarrow.default, .tp-rightarrow.default {
	height: 48px!important;
	width: auto!important;
	line-height: 45px;
	top: 50% !important;
	padding: 0px 10px;
	font-size: 30px;
	color: #bbb;
}
.tparrows:before {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
}
.tp-leftarrow.default:before { content: '\f060'; }
.tp-rightarrow.default:before { content: '\f061'; }
.tparrows:hover { opacity: 0.7; }
.tp-bannertimer.tp-bottom	 {
    width: 100%;
    height: 10px;
    background: url(../img/otherpic/timer.png);
    position: absolute;
    z-index: 200;
}
.tp-loader 	{
	 width: 50px;
	height: 50px;
	margin-left: 0px;
	margin-top: -50px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 10px;
	background: url(../img/gifs/preload_img.gif) center no-repeat!important;
	z-index:10000;
}


/***************************************************
	NIVO SLIDER
***************************************************/
/* Index Nivo SLider */
 .nivo { margin-top:0px; padding-top:0px; }

/* Nivo SLider */
 .nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img { position: absolute; top:0px; left:0px; max-width:none; }
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-html-caption {  display:none; }
.nivo-controlNav {display: none; }
.nivo-box {width: 10px; }

.slider-wrapper {
	position:relative;
	margin:0 auto 20px auto;
}
.nivoSlider {
	position:relative;
	background:transparent url(../img/ajax-loader.gif) no-repeat 50% 50%;
    margin: 0 auto 0 auto;
}
.nivoSlider img { position:absolute; top:0px; left:0; display:none; }
.nivoSlider a { border:0; display:block; }
.nivo-controlNav a {display:none; }

.nivo-directionNav a {
	 display:block;
    position: absolute !important;
    z-index:10;
    cursor:pointer;
    top: auto; left:auto;
    bottom:0px; right:0px;
    width: 33px !important;
    height: 33px !important;
    text-indent: -9999px;
    background: url("../img/slider_nav.png") no-repeat 0 0;
    opacity: 0.6;
}
 a.nivo-nextNav:hover,  .nivo-prevNav:hover  { opacity: 1; }
 a.nivo-nextNav { background-position: -33px 0px; right:0px; }
 a.nivo-prevNav { right:33px; }

.nivo-caption {
    display:block;
    position:absolute;
    z-index:8;
    top:auto;
    left:auto;
    bottom:0px;
    right:66px;
    line-height:23px;
    padding:5px 15px;
    font-size:13px;
	width:auto !important;
    max-width:500px;
    background-color:rgba(11,11,11,0.6);
	color:#FFF;
}

.piclist {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: #39455b;
	line-height: 150%;
	margin-top: 20px;
	margin-bottom: 20px;	
}

ul.piclist {
		margin-top: 20px;
		padding: 0;
		list-style: none;
		width: 100%;	
		margin-bottom:20px;
		display:block;
	}
ul.piclist li {
	    width: 24%;
		margin: 8px 3px 0 0;	
		display:inline-flex;
		
		
	}
ul.piclist li a img {
		border: 0;
		vertical-align: middle;
		padding-bottom: 8px;
	}
p.piclistbg {		
		font-size: 14px;
		color: #f0f0f0;
		background-color:#E38183;
		width:100%;
		height:auto;
	}
/***************************************************
	INDEX INTRO BOXES
 ***************************************************/
/* Index Boxes */
.tile {	
	background-color:  #c6bdbd;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	padding: 14px;
	position: relative;
	text-align: center;
	margin-bottom:25px;
}
.tile.tile-showtitle  {
	background-color:#e3e1e1;}
.tile.tile-showwordleft  {
	text-align:left;}
.tile.tile-hot:before {
    background: url("../img/ribbon.png") 0 0 no-repeat;
    background-size: 82px 82px;
    content: "";
    height: 82px;
    position: absolute;
    right: -4px;
    top: -4px;
    width: 82px;
}
.tile p { margin: 10px 0 22px 0; }
.tile-image {
  height: 100px;
  margin: 25px 0 15px;
  vertical-align: bottom;
}
.tile-image.big-illustration {
    height: 111px;
    margin-top: 10px;
    width: 112px;
}
.tile-title {  font-size: 18px; margin: 0; }

/* Index Box Icons */

.intro-icon {
	text-align:center;
	margin:0 auto;	
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.intro-icon-disc.cont-large {
	padding:15px;
	text-align:center;
	width:40px; height:40px;
	margin:0 auto;	
}
.intro-icon-large:before{ 
	font-size:38px;
	padding-left:0px;
	margin-left:3px; 	
	color: #2980B9;
}
.intro-icon-disc {
	webkit-transition: border .5s;
	-moz-transition: border .5s;
	-o-transition: border .5s;
	-ms-transition: border .5s;
	transition: border .5s;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius:50%;
	-webkit-box-shadow:none;
	-moz-box-shadow: 0 0 0 30px transparent;
	box-shadow: 0 0 0 30px transparent;
	background: rgba(255,255,255,0.4);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}
.intro-icon-disc:hover {
	box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}

/*-----------------------------------------------------------------------------------*/
/*	04: PAGES
/*-----------------------------------------------------------------------------------*/

/***************************************************
	0I: TEAM
 ***************************************************/
.th{
	border:2px solid transparent;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	margin:0 0 10px 0;
	position:relative; 
	padding:10px;
	background:#19C1C3;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.th:hover{
	border:2px solid transparent;
	transform: scale(1.03);
	background:#2BA6CB;  
}

.team_ic a{ margin:0 2px; font-size:12px; }
.team_ic:hover{
     transform: translate(0,-4px);
    -webkit-transform: translate(0,-4px);
    -o-transform: translate(0,-4px);
    -moz-transform: translate(0,-4px);
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out; 
}
.team_sections { display: block; padding: 15px 5px; text-align: center; }
.team_bio{ width:80%; text-align:center; margin:0 auto; }
hr.team-line {  
	border: 0;
	background: url(../img/lines.png) repeat; 
    height:10px;
	width:160px;
	margin:25px auto 25px;
} 

/*************************************************************
	II: ABOUT PAGE
 *************************************************************/
/* Progress Bars */
.progress {
	background: #E9E6E1;
	-webkit-border-radius: 32px;
    -moz-border-radius: 32px;
    border-radius: 32px;
	height: 23px;
	margin:8px 0 0 0; 
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
	
.progress .bar {
    background: #19C1C3;
	text-align:center;
	text-indent:20px;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

/* About Info Bottom Strip */
.strip { 
	background-color:#e9e6e1;
	padding: 45px 0 40px;
	text-align:center;
}
.strip h1 { 
	letter-spacing:0.25em;
	color: #555;
	text-transform:uppercase;
	font-size:20px;
	margin-bottom: 0.5em;
}
.about_strip { width:80%; text-align:center; margin:0 auto; line-height:30px; }
.strip2 { background-color:#e9e6e1; padding: 45px 0 0px; text-align:center; }

/* big button */
.big_button {
	display:block;
	float:none;
	clear:both;
	background:#e04a40;
	margin:0 auto;
	width:250px;
	height:65px;
	font-size:21px;
	line-height:65px;
	color:#fff;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	-webkit-box-shadow:0 5px 0px #b1453e;
    -moz-box-shadow: 0 5px 0px #b1453e;
    box-shadow:0 5px 0px #b1453e;
	position:relative;
	text-align:center; 
}
.big_button a{ color:#fff; opacity:1.0;}
.big_button:hover{
	color:#fff; background:#ee574d; 
	-webkit-box-shadow:0 5px 0px #9e3e37;
	-moz-box-shadow:0 5px 0px #9e3e37;
	box-shadow:0 5px 0px #9e3e37;
}
.big_button:active{
	color:#fff;
	background:#c23c33;
	-webkit-box-shadow:0 3px 0px #652824;
	-moz-box-shadow:0 3px 0px #652824;
	box-shadow:0 3px 0px #652824;
}
.big_button:visited, .big_button:focus { color:#fff;}


/***************************************************
	III: SERVICES - CLIENTS
 ***************************************************/
.client{
	background-color:#e9e6e1;
	background-position:center center;
	background-repeat:no-repeat;
	height:101px;
	text-indent:-9999999px;
	margin-bottom:20px;
	color:transparent;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
}
.client:hover{background-color:#d3cdc4;}
.client a{display:block;height:100%; width:100%; overflow:auto;}
.client_intro{ width:70%; text-align:center; margin:10px auto 35px; line-height:30px;}

/* ADD YOUR CLIENT IMAGES HERE */
.client1 {background-image:url(../img/clients/client1.png)!important;}
.client2 {background-image:url(../img/clients/client2.png)!important;}
.client3 {background-image:url(../img/clients/client3.png)!important;}
.client4 {background-image:url(../img/clients/client4.png)!important;}
.client5 {background-image:url(../img/clients/client5.png)!important;}
.client6 {background-image:url(../img/clients/client6.png)!important;}

/***************************************************
	IV: TESTIMONIALS
 ***************************************************/
.testimonial1, .testimonial2, .testimonial3 {
	position:relative;
	padding:20px 20px 15px;
	margin-bottom:15px;
    background-color:#34495E;
	font-size:13px;
	color:#bbb;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.testimonial1:after, .testimonial2:after, .testimonial3:after {
	top:100%;
	border:solid transparent;
	content: " ";
	height:0; width: 0;
	position: absolute;
	pointer-events: none;
}
.testimonial1:after, .testimonial2:after, .testimonial3:after {
	border-top-color:#34495E;
	border-width:6px;
	left:48%;
}

.testimonial2 { background-color:#E9E6E1; color:#999; }
.testimonial2:after { border-top-color:#E9E6E1; }

.testimonial3 { background-color:#2BA6CB; color:#fff; }
.testimonial3:after { border-top-color:#2BA6CB; }

.quote_sections, .quote_sections_hue, .quote_sections_dark, .quote_sections_light {
	display:block;
	padding:15px 15px 5px;
	text-align:center;
	background:#E3E1E1;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.quote_sections-left, .quote_sections_hue-left, .quote_sections_dark-left, .quote_sections_light-left {
	display: block;
	padding: 15px 15px 5px ;
	text-align: left;
	background: #E3E1E1;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.quote_sections_hue { background:#2BA6CB; }
.quote_sections_dark { background:#2C3E50; }
.quote_sections_light { background: #E9E6E1; }

.quote_sections_hue-left { background:#2BA6CB; }
.quote_sections_dark-left { background:#2C3E50; }
.quote_sections_light-left { background: #E9E6E1; }

/* Testimonial Icons */
.testimonial-icon-disc, .testimonial-icon-disc2, .testimonial-icon-disc3 {
	background-color: #19C1C3; 
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	text-align:center;
	vertical-align:middle;
}
.testimonial-icon-disc.cont-large,
.testimonial-icon-disc2.cont-large,
.testimonial-icon-disc3.cont-large,
.testimonial-icon-disc4.cont-large {
	padding:10px 0 0 0;
	text-align:center;
	vertical-align: middle;
	width:50px; height:38px;
	margin:0px auto 10px auto;
}

.testimonial-icon-disc-left, .testimonial-icon-disc2-left, .testimonial-icon-disc3-left {
	background-color: #19C1C3; 
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
	text-align:left;
	vertical-align:top;
}
.testimonial-icon-disc-left.cont-large,
.testimonial-icon-disc2-left.cont-large,
.testimonial-icon-disc3-left.cont-large,
.testimonial-icon-disc4-left.cont-large {
	float:left;
	padding: 10px 0 0 10px;
	text-align: left;
	vertical-align: top;
	width: 40px;
	height: 38px;
	margin: 0px auto 10px 0px;
}

.testimonial-icon-large:before{ font-size:30px; margin-left:1px; margin-top:-2px; }
.testimonial-icon-disc2 { background-color:#2C3E50; }
.testimonial-icon-disc3,.testimonial-icon-disc3-left { background-color:#E9E6E1; }


/***************************************************
	V: BLOG
 ***************************************************/
/* Date */
.btn-blog {margin:14px 0 10px; background:#2980B9; color:#fff;  padding-bottom:8px; font-weight:400; }
.btn-blog1 {margin:0px 0 10px; background:#2980B9; color:#fff;  padding-bottom:8px; font-weight:400;}
.btn-blog:hover, .btn-blog1:hover { background:#2980B9; color:#fff;}
a.com_no { color:#fff;}
.com_no:hover { color:#19C1C3;}
a.com2_no { color:#fff;}
.com2_no:hover {color:#19C1C3; }

h1.post_intro {  font-size:25px;
line-height:35px; font-weight:400;}
.blog_slide { margin-bottom:-20px;}
.blog_slide1 { margin-bottom:-10px;}
.post_link { font-weight:400; line-height:26px; }
.post_link a:hover, .read_more a:hover  { color:#19C1C3; }
.post_link a {color: #555; }

/* Meta */
.post-meta ul {
	margin:-5px 0 15px 0;
	padding: 0 0;
	list-style:none;
	text-transform:uppercase;
	font-size:11px; clear:both;
}
.post-meta li { margin:0; display:inline; }
.post-meta a{ color: #555; }
.post-meta a:hover { color:#747474; }

.read_more  {  font-weight:400; letter-spacing:1.5px; }
.read_more a:hover { color:#555; }
.sidebar p, .sidebar .media-body p { font-size:13px; }

/* Search */
input[type="text"], input[type="search"] {
	 border: 2px solid #d8d3cb;
	color: #888;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.avatar { float: left; margin:0 10px 0 0; }
.pad_author { margin:5px 20px 10px 0px; }
.media-body{ margin-bottom:5px;  }

/* Flickr */	
.flickrs2 {	margin: 0 0 0 -24px;  padding-right: 0; }
.FlickrImagesBlog li { float: left; margin: 0 5px 12px 0; width:30.3%; }
.FlickrImagesBlog img {
	border-radius: 3px;
	-webkit-transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	-ms-transition: opacity .2s linear;
	transition: opacity .2s linear;
}

/* Pager */
.pager li > a,
.pager li > span {
	display: inline-block;
	padding:5px 10px;
	border:0;
	color: #fff;
	background:#19C1C3; 
}
.pager li > a:hover,
.pager li > a:focus,
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span  { text-decoration:none; color:#fff; background:#555; }

/* Pagination */
.pagination { margin: 50px 0 20px; }
.pagination ul {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.pagination ul > li {display: inline; }
.pagination ul > li > a,
.pagination ul > li > span {
    float: left;
    padding: 4px 10px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    background-color: transparent;
    border: 2px solid #19C1C3; 
    margin-right: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
	background-color: #19C1C3; 
    color: #fff;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
    background-color: #19C1C3; 
    color: #fff;
    cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
	color: #bbb;
	cursor: default;
    background-color: transparent;
}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 2px; }

/***************************************************
	VI: CONTACT
 ***************************************************/
.google-maps { height: 400px; margin:0px 0 30px; }

.validation {
	color:#CF2F32;
	display:none;
	margin: 0 0 20px;
	font-weight:400;
	font-size:13px;
}

#sendmessage {
	border:1px solid #801315;
	display:none;
	text-align:center;
	padding:8px 12px 8px;
	margin:10px 0;
	font-weight:600;
	margin-bottom:10px;
}

#sendmessage.show,.show  {
	display:block;
}

#contact-form {
	position: relative;
	z-index: 999;
}

#contact-form input[type=text],#contact-form input[type=email], .contactForm textarea {
	width: 100%;
	background: rgba(227, 231, 228, 1);
	color:#70A7B3;
	border: 0;
	font-size:14px;
	text-align: left;
	vertical-align: middle;
	padding:0 10px;
}
#contact-form input[type=text]:focus,#contact-form input[type=email]:focus, .contactForm textarea:focus {
	background: rgba(101, 106, 100, 1);
	color: #eff1ef;	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	transition: background 0.25 ease-in;
	-moz-transition: background 0.25 ease-in;
	-webkit-transition: background 0.25 ease-in;
}
#contact-form input[type=text],#contact-form input[type=email] {
	height: 30px;
	margin-bottom:10px;
}
#contact-form button {
	border: 0 none;
    color: #fff;
	width:auto;
	}

#contact-form input[type=submit] {
	color: #fff;
	width: 185px;
	height: 60px;
	text-shadow: none;
	font-size: 14px;
	padding:0.5em;
	letter-spacing: 0.05em;
	margin: 0 0 20px 0;
	display: block;
	border: 0;
	text-transform: none;	
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}
#contact-form input[type=submit]:hover, #contact-form input[type=submit]:active {
	background: #43413e !important;
}
#contact-form textarea {
	padding-top: 1em;
}

textarea.form-control {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}

div.cform-response-output {
	max-width: 60%;
	text-align: center;
	margin-left: 40% !important;
	margin-top: 0.5em !important;
	padding: 0.5em !important;	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.cform-not-valid-tip {
	color: #888;
	border: 1px dotted #ad3729 !important;
	width: 100% !important;
	left: 0 !important;
	padding: 0.5em !important;
	-moz-box-sizing: border-box;	
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/***************************************************
	VII: FOOTER
 ***************************************************/
/*Social Icons */
.follow_us {
	/* [disabled]text-align:center; */
}

#shareAll {
	background:#2980B9; 
	margin:0; 
	text-align:center;
	padding:20px 0 20px 0;
	color:#f18d00;
	font-size:18px;
	font-weight:600;
	letter-spacing:0.2em;
}

.follow_us a.zocial { 
	font-size:36px;
	width:77px;
	margin:0 10px 0 0;
	text-align: center;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	background:transparent;
	opacity:0.2;
}
.follow_us a.zocial:hover {opacity:1.0; background:transparent; }

.sharelink a {
	font-size:18px;
	width:62px;
	height:62px;
	margin:0 10px 0 0;
	text-align: center;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	background:transparent;
	opacity:0.2;
}

.sharelink a:hover {opacity:1.0; background:transparent; }


#footer h1 { 
	/*letter-spacing:0.25em;*/
	font-size:0.9em;
	color: #FFFFD2;
	text-transform:uppercase;
	/*argin-bottom: 0.5em!important;*/
	display:inline;
}

#footer h2 { 
	letter-spacing:0.25em;
	font-size:16px;
	color: #eee;
	text-transform:uppercase;
	margin-bottom: 0.5em!important;
}

#footer h3 { 
	/*letter-spacing:0.25em;*/
	font-size:1.1em;
	font-weight:bolder;
	color: #060;
	text-transform:uppercase;
	/*margin-bottom: 0.5em!important;*/
	display:inline;
}

h3.follow {
	color: #eee;
	width: 50%;
	margin: 0 auto 40px;
	line-height:30px;
}


#footer { background-color:#92AAB7; padding:15px 0 20px 0; margin:0 ; text-align:center; }

#unit { width:auto; padding:0; }

#footer2 {
	position:relative;
	text-align:center;
	width: 100%;
	padding:15px 0 16px 0; 
	background:#39455b;
	color:#999;
	margin:0 0; 
	font-size:13px;
	font-weight:400;
}

.copyright a {color:#888; }
.copyright a:hover {color:#777; }

/* Back To Top */
.go-top {
	position:fixed;
	bottom:0.5em; right: 0.5em;
	text-decoration: none;
	color:white;
	background-color: rgba(0, 0, 0, 0.3);
	font-size:30px;
	padding:0.1em 0.3em 0.1em;
	display:none;
	border-radius:3px; z-index:500;
}
.go-top:hover { background-color:rgba(0, 0, 0, 0.6);}



/*-----------------------------------------------------------------------------------*/
/*	05: PORTFOLIO, CAROUSEL & THUMB CAROUSELS
/*-----------------------------------------------------------------------------------*/
/**** PORTFOLIO ****/
.item_description {
    position:relative;
	color:#767676;
	padding:10px 15px;
	margin-top:-1px;
	background-color:#e9e6e1;
	font-size:14px;
	text-align:center;
	font-weight:400;
	margin-bottom:2px;
	border-bottom:2px solid #d3cdc4;
}
.item_description:hover{ border-bottom:2px solid #bbb; }
.item_description a {  color:#555; text-transform:uppercase; font-size:18px; letter-spacing: 1.5px;}
.item_description a:hover{ color:#003D82; }

/* Isotope Filtering */
.isotope-item { z-index:2; }
.isotope-hidden.isotope-item { pointer-events:none; z-index:1; }
/* Isotope CSS3 transition */
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}
/* disabling Isotope CSS3 transitions */
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}
.element { overflow: hidden; position: relative; margin-bottom:20px; }
.element img {max-width: 100%;}
#options {padding: 0 0 0px;}
#filters2 { text-align: center; margin:45px 0; }
#filters { text-align: left; margin:45px 0; }
#filters li, #filters2 li{ margin: 0; background:none; overflow:hidden; display:inline-block;}
#filters li a, #filters2 li a {
	font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
	cursor:pointer;
	line-height:50px;
	color:#555;
	-webkit-border-radius: 6px;
	-moz-border-radius:6px;
	border-radius:6px;
	margin:0 auto;
	padding:10px 14px;
	background:transparent;
	border:2px solid #767676;
	text-transform:uppercase;
	margin-right:10px; 
}
#filters li a.selected, #filters2 li a.selected { background:#19C1C3; color:#fff;  border:2px solid #19C1C3;}
#filters li a:hover, #filters2 li  a:hover{  color:#fff; border:2px solid #34495E; background:#34495E;  }

/**** GALLERY ****/
.holder { margin:50px 0 54px;text-align:left; }
.holder a { 
	font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
	cursor:pointer;
	color:#555;
	display:inline-block;
	border-radius:6px;
	padding:8px 14px;
	background:transparent;
	border:2px solid #767676;
	text-transform:uppercase;
	margin-right:10px; 
}
.holder a:hover {color:#fff; border:2px solid #34495E; background:#34495E; }
.holder a.jp-previous, .holder a.jp-next, .holder a.jp-disabled, .holder a.jp-disabled, focus:a.jp-disabled {
	border:2px solid #767676;
	font-size: 12px;
	color:#767676;
}
.holder a.jp-current { background:#19C1C3; color:#fff; border:2px solid #19C1C3; }
a.jp-disabled:hover, .holder a.jp-next:hover { color:#fff; border:2px solid #34495E; background:#34495E; }
.holder a.jp-current, a.jp-current:hover, .holder a.jp-disabled, a.jp-disabled:hover { cursor:default;  }
.holder span { display:none;  }
ul#itemContainer { list-style: none; padding:0 0; margin:0 0; width:100%; }

/**** CAROUSEL ****/
#carousel {margin-bottom:20px; }
#carousel .carousel-control {
	position: absolute;
	top:50%;
	left:15px;
	width:33px;
	height:33px;
	margin-top:-17px;
	background-image:url(../img/main_carousel_nav.png)!important;
	background-position:0 -33px;
	background-repeat:no-repeat; 
	outline:none; 
	webkit-transition:none;  
    -moz-transition:none;  
    -o-transition:none;
	transition:none;
	 border: 0px none;
	-webkit-border-radius: 0px;
	-moz-border-radius:0px;
	border-radius: 0px;
	opacity:1.0;
	filter: alpha(opacity=100);
}
#carousel .carousel-control.right { background-position: -102px -33px;  left:auto; right:15px; }
#carousel .carousel-control.right:hover {background-position: -102px 0; }
#carousel .carousel-control:hover {background-position:0 0; }

/**** THUMBNAIL CAROUSELS ****/
.col_full{
	width:100%;
	display:block;
	position:relative;
	margin-bottom:30px;
	float:left;
}
.col_full2{ position:relative; float:left; display:block;}
.slider_home,.slider_home2, #slider_clients, #slider_about, #slider_related, #slider_small { position:relative; }

/* CAROUSELS */	
.slider-item {
    position: relative;
    float:left;
    margin:0 5px 0 5px;
	height:auto; 
	min-height:80px;
}
.slider-item .slider-image,
.slider-item .slider-image a,
.slider-item .slider-image img { display:block; position:relative; width:100%; }
.slider-item .slider-image:hover,
.slider-item .slider-image a:hover,
.slider-item .slider-image img:hover { display:block; position:relative; width:100%;  }

.slider-title {
    position:relative;
	padding:1px 15px 10px;
	margin-top:-1px;
    background-color:#34495E;
	font-size:13px;text-align:center;
	color:#bbb;
	-webkit-border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0px 0px 4px 4px;
   border-radius: 0px 0px 4px 4px;
}
.slider-title:after {
	top:100%;
	border:solid transparent;
	content: " ";
	height:0; width: 0;
	position: absolute;
	pointer-events: none;
}
.slider-title:after {
	border-top-color:#34495E;
	border-width:6px;
	left:47%;
}
.slider-title h3 { color:#eee; font-size:13px; letter-spacing:0.1em; font-weight:700; text-transform:uppercase; margin-bottom:2px;}
.slider-title h3 a { color:#eee;}
.slider-title h3 a:hover { color:#fff;}
.slider-title p {color:#EDEDA8; font-size:13px; font-weight:500;}

/* Carousel Arrows*/	
.widget-scroll-prev, .widget-scroll-next, .widget-scroll-prev2, .widget-scroll-next2, .widget-scroll-prev3, .widget-scroll-next3 {
    display: block;
    position: absolute;
    cursor: pointer;
	top:-20px;
    left:auto; right:30px;
	text-align:center;
	width:25px; height:25px;
	line-height:25px;
	padding: 0 0px;
	opacity:1.0;
	font-size:14px;
	font-weight:normal;
	background: #d8d3cb;
	-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
	border-radius: 50px;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	outline:none;
}
.widget-scroll-next { right:3px; top:-20px; }
.widget-scroll-prev:hover, .widget-scroll-next:hover, .widget-scroll-prev2:hover, .widget-scroll-next2:hover, .widget-scroll-prev3:hover, .widget-scroll-next3:hover{  background:#2BA6CB;}

/* Related Carousel */
#slider_related .slider-item {
    position:relative;
    float: left;
    margin:0 5px 0 0;
	height:auto; 
	min-height:30px;
}
/* Single Portfolio Page Arrows */	
.widget-scroll-prev2,
.widget-scroll-next2 {top:-12px; right:30px;}
.widget-scroll-next2 { right: 3px;  }

/* Small Carousel */
#slider_small .slider-item {
    position: relative;
    float:left;
    margin:0 3px 0px 0;
	min-height:100px;
}
/* Small Slider Arrows */	
.widget-scroll-prev3, .widget-scroll-next3 { top: -30px; left:0px; }
.widget-scroll-next3 { left:30px;}

.related_link {
	letter-spacing:1px;
	color:#767676;
	font-size:12px;
	text-align:center;
	margin: 15px auto 0;
	text-transform:uppercase;
}

/*-----------------------------------------------------------------------------------*/
/*	06: 404 PAGE, PRICING TABLE, SKILLS BAR, ACCORDIAN, TABS
/*-----------------------------------------------------------------------------------*/
/**** 404 PAGE ****/
.screen-bg {
	background-color:#19C1C3;
	padding:50px 0px 30px;
	margin-bottom:30px;
}

/**** PRICING TABLE ****/
.pricing-table { text-align: center;  margin-bottom:20px;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.pricing-table h4 { color:#fff; margin-bottom:0px; }
.pricing-header-row-1 small { color:#111; }
.pricing-table ul { margin:0; padding:0; list-style:none; }
.price {
	font: 30px/14px 'Lato', sans serif; font-weight:700;
	margin-top:13px;
	text-align:center;
	color: #555;
}
.pricing-table h3 { color:#2BA6CB; }
.pricing-header-row-1 {
	text-align:center;
	height:50px;
	padding:3px 0 12px;
	background-color:#2BA6CB;  
	-webkit-border-radius:6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
   border-radius:6px 6px 0px 0px;
}
.pricing-header-row-2 {
	text-align:center;
	height:60px;
	margin-top:0px;
	padding:10px 0 ;
	border-top:none;
	background-color:#E7E7E7;
}
.pricing-content-row-odd {
	font-size:12px;
	background-color:#eee;
	padding:8px 0;
	color:#555;
}
.pricing-content-row-even {
	font-size:12px;
	background-color:#E7E7E7;
	padding:8px 0;
	color:#555;
}
.pricing-footer {
	text-align:center;
	height:50px;
	background-color:#2BA6CB;  
	padding:20px 0 0;
	-webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
	border-radius: 0px 0px 6px 6px;
}
.but-price { margin-top:-8px; }

/*************************************************************
	ACCORDIAN 手風琴 直式
 *************************************************************/
 /****手風琴title標題字*****/
 .accordion_title_box {
	font-family:"王漢宗特黑體繁", "王漢宗粗明體繁", Calibri, "Arial Black";
	text-align:center;
	padding:20px auto;
	text-shadow:1px 1px 2px #212020 ;
	opacity:1;}
	
.accordion_title_box2 {
	font-family:"王漢宗特黑體繁", "王漢宗粗明體繁", Calibri, "Arial Black";
	text-align:center;
	padding:20px auto;
	text-shadow:1px 1px 2px #212020 ;
	opacity:1;
	position:relative;}
	

 /****手風琴 匣 背景底色*****/
 .well-accordion_black{
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;
	padding:19px;
	margin-bottom:5px;
	background:url(../img/otherpic/bg01.png) repeat;}

.well-accordion_brown{
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	min-height:20px;
	padding:19px;
	margin-bottom:5px;
	background:url(../img/otherpic/bg02.jpg) repeat;}
 
.accordion-group,.accordion-inner { border: none; border-radius: 0; }

/****手風琴 匣 顏色 accordion-group 全部 accordion-heading 外部 accordion-body 內部*****/
.accordion-group.c_red, .accordion-heading.c_red, .accordion-body.c_red { 
	background-color: #993f32;   /*...朱紅...*/
    background-image: -moz-linear-gradient(center bottom, #993f32 50%, #F76265 100%);
    background-image: -o-linear-gradient(center bottom, #993f32 50%, #F76265 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #993f32), color-stop(1, #F76265));
    background-image: -ms-linear-gradient(top, #993f32 50%, #F76265 100%);
    background-image: linear-gradient(top, #993f32 50%, #F76265 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 300%; 
    background-position: 0 95%; 
    transition: background-position 2s;
}
.accordion-group.c_green, .accordion-heading.c_green, .accordion-body.c_green {  
	background-color: #2c4718;    /*...中古綠...*/
    background-image: -moz-linear-gradient(center bottom, #467139 50%, #628B56 100%);
    background-image: -o-linear-gradient(center bottom, #467139 50%, #628B56 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #467139), color-stop(1, #628B56));
    background-image: -ms-linear-gradient(top, #467139 50%, #628B56 100%);
    background-image: linear-gradient(top, #467139 50%, #628B56 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;
}
.accordion-group.c_yellow, .accordion-heading.c_yellow, .accordion-body.c_yellow  { 
	background-color: #ffb400;    /*...飽和亮黃...*/
    background-image: -moz-linear-gradient(center bottom, #ffb400 50%, #F0DC6E 100%);
    background-image: -o-linear-gradient(center bottom, #ffb400 50%, #F0DC6E 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #ffb400), color-stop(1, #F0DC6E));
    background-image: -ms-linear-gradient(top, #ffb400 50%, #F0DC6E 100%);
    background-image: linear-gradient(top, #ffb400 50%, #F0DC6E 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s; 
}
.accordion-group.c_blue, .accordion-heading.c_blue, .accordion-body.c_blue { 
	background-color: #007197;/*...中古藍...*/
    background-image: -moz-linear-gradient(center bottom, #005d7c 50%, #438FB5 100%);
    background-image: -o-linear-gradient(center bottom, #005d7c 50%, #438FB5 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #005d7c), color-stop(1, #438FB5));
    background-image: -ms-linear-gradient(top, #005d7c 50%, #438FB5 100%);
    background-image: linear-gradient(top, #005d7c 50%, #438FB5 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;     
}
    

.accordion-group.c_orange, .accordion-heading.c_orange, .accordion-body.c_orange { 
	background-color:#FF7300;   /*...楊橙橘...*/
    background-image: -moz-linear-gradient(center bottom, #FF7300 50%, #C0957E 100%);
    background-image: -o-linear-gradient(center bottom, #FF7300 50%, #C0957E 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #FF7300), color-stop(1, #C0957E));
    background-image: -ms-linear-gradient(top, #FF7300 50%, #C0957E 100%);
    background-image: linear-gradient(top, #FF7300 50%, #C0957E 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;  
}

.accordion-group.c_purple, .accordion-heading.c_purple, .accordion-body.c_purple { 
	background-color:#665172;   /*...紅藍紫...*/
    background-image: -moz-linear-gradient(center bottom, #665172 50%, #404a91 100%);
    background-image: -o-linear-gradient(center bottom, #665172b 50%, #404a91 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #665172), color-stop(1, #404a91));
    background-image: -ms-linear-gradient(top, #665172 50%, #404a91 100%);
    background-image: linear-gradient(top, #665172 50%, #404a91 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;
}

.accordion-group.c_grey, .accordion-heading.c_grey, .accordion-body.c_grey { 
	background-color: #71787f;   /*...鋼鐵灰...*/
    background-image: -moz-linear-gradient(center bottom, #71787f 50%, #939393 100%);
    background-image: -o-linear-gradient(center bottom, #71787f 50%, #939393 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #71787f), color-stop(1, #939393));
    background-image: -ms-linear-gradient(top, #71787f 50%, #939393 100%);
    background-image: linear-gradient(top, #71787f 50%, #939393 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;
}

.accordion-group.c_sky, .accordion-heading.c_sky, .accordion-body.c_sky { 
	background-color:#0084b4;   /*...深天藍...*/
    background-image: -moz-linear-gradient(center bottom, #0084b4 50%, #1fb8de 100%);
    background-image: -o-linear-gradient(center bottom, #0084b4 50%, #1fb8de 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #0084b4), color-stop(1, #1fb8de));
    background-image: -ms-linear-gradient(top, #0084b4 50%, #1fb8de 100%);
    background-image: linear-gradient(top, #0084b4 50%, #1fb8de 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;
}

.accordion-group.c_light-blue, .accordion-heading.c_light-blue, .accordion-body.light-blue { 
	background-color:#d5e9f7;   /*...淡藍...*/
    background-image: -moz-linear-gradient(center bottom, #bad0d8 50%, #edf7fd 100%);
    background-image: -o-linear-gradient(center bottom, #bad0d8 50%, #edf7fd 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #bad0d8), color-stop(1, #edf7fd));
    background-image: -ms-linear-gradient(top, #bad0d8 50%, #edf7fd 100%);
    background-image: linear-gradient(top, #bad0d8 50%, #edf7fd 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;
}

.accordion-group.c_yellow-green, .accordion-heading.c_yellow-green, .accordion-body.c_yellow-green { 
	background-color:#65942e;   /*...黃綠色...*/
    background-image: -moz-linear-gradient(center bottom, #4a6d1d 50%, #65942e 100%);
    background-image: -o-linear-gradient(center bottom, #4a6d1d 50%, #65942e 100%);
    background-image: -webkit-linear-gradient(left bottom, left top, color-stop(0.5, #4a6d1d), color-stop(1, #65942e));
    background-image: -ms-linear-gradient(top, #4a6d1d 50%, #65942e 100%);
    background-image: linear-gradient(top, #4a6d1d 50%, #65942e 100%);
    border: 1px solid #625B57;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
	background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s;
}

.accordion-group.c_light-red, .accordion-heading.light-red, .accordion-body.c_light-red { 
	padding:8px 0;
	margin-bottom:0px;
	background:#FFE4E1;   /*...淡玫瑰紅...*/
	border-bottom:2px solid #88898A;
}

.accordion-group.c_orange-yellow, .accordion-heading.c_orange-yellow:first-child, .accordion-body.c_orange-yellow:first-child { 
	padding:8px 0;
	margin-bottom:0px;
	background:#FFF8DC;   /*...淡玉米黃...*/
	border-bottom:2px solid #88898A;
}
.accordion-group.c_red:first-child, .accordion-heading.c_red:first-child, .accordion-body.c_red:first-child { 
	 -webkit-border-radius:6px 6px 0px 0px ;
	-moz-border-radius:6px 6px 0px 0px;
	border-radius:6px 6px 0px 0px;
}
.accordion-group.c_green:first-child, .accordion-heading.c_green:first-child, .accordion-body.c_green:first-child { 
	 -webkit-border-radius:6px 6px 0px 0px ;
	-moz-border-radius:6px 6px 0px 0px;
	border-radius:6px 6px 0px 0px;
}
.accordion-group.c_yellow:first-child, .accordion-heading.c_yellow:first-child, .accordion-body.c_yellow:first-child { 
	 -webkit-border-radius:6px 6px 0px 0px ;
	-moz-border-radius:6px 6px 0px 0px;
	border-radius:6px 6px 0px 0px;
}
.accordion-group.c_blue:first-child, .accordion-heading.c_blue:first-child, .accordion-body.c_blue:first-child { 
	 -webkit-border-radius:6px 6px 0px 0px ;
	-moz-border-radius:6px 6px 0px 0px;
	border-radius:6px 6px 0px 0px;
}
.accordion-group.c_red:last-child, .accordion-heading.c_red:last-child, .accordion-body.c_red:last-child { 
	border: none;
	-webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
	border-radius:  0px 0px 6px 6px;
}
.accordion-group.c_green:last-child, .accordion-heading.c_green:last-child, .accordion-body.c_green:last-child { 
	border: none;
	-webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
	border-radius:  0px 0px 6px 6px;
}
.accordion-group.c_yellow:last-child, .accordion-heading.c_yellow:last-child, .accordion-body.c_yellow:last-child { 
	border: none;
	-webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
	border-radius:  0px 0px 6px 6px;
}
.accordion-group.c_blue:last-child, .accordion-heading.c_blue:last-child, .accordion-body.c_blue:last-child { 
	border: none;
	-webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
	border-radius:  0px 0px 6px 6px;
}

.accordion-group:hover, .accordion-heading:hover, .accordion-body:hover {
  	background-position: 0 0; 
}

/****手風琴 外部(鍵) 切換 性質*
-------------------------------****/
.accordion-heading .accordion-toggle {
	padding: 5px;
	height:auto;
	margin: 0 1%;
	font-size: 13px;
	line-height: 15px;
	 font-weight: 700;
	color: #f0f0f0;	
	outline: none;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-shadow: 0.5px 0.5px 0 #616262;
    text-decoration: none;
}
.accordion-heading.team_bg {
background: -moz-linear-gradient(right,  rgba(248,228,219,1.00) 0%, rgba(248,228,219,0.62) 38%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right top,  left bottom, color-stop(0%,rgba(248,228,219,1.00)), color-stop(38%,rgba(248,228,219,0.62)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(right,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(right,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(right,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to left,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8E4DB', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background-size: auto 800%; 
background-position:0% 0%; 
transition: background-position 2s; 
}     

.accordion-heading.team_bg:hover {
	background-size: 82% auto; 
    background-position: 100% 100%; 
} 

.accordion-heading.team_bg-blue,.accordion-heading.team_bg-red,.accordion-heading.team_bg-green,.accordion-heading.team_bg-yellow {
	background-size: auto 1000%; 
	background-position:0% 0%; 
	transition: background-position 4s; 
	}
.accordion-heading.team_bg-blue:hover {
	background: -moz-linear-gradient(bottom,  rgba(182,238,247,0.8) 0%, rgba(182,238,247,0.40) 40%, rgba(255,255,255,0) 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(182,238,247,0.8)), color-stop(40%,rgba(182,238,247,0.40)), color-stop(80%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(bottom,  rgba(182,238,247,0.8) 0%,rgba(182,238,247,0.40) 40%,rgba(255,255,255,0) 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(bottom,  rgba(182,238,247,0.8) 0%,rgba(182,238,247,0.40) 40%,rgba(255,255,255,0) 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(bottom,  rgba(182,238,247,0.8) 0%,rgba(182,238,247,0.40) 40%,rgba(255,255,255,0) 80%); /* IE10+ */
	background: linear-gradient(to top,  rgba(182,238,247,0.8) 0%,rgba(182,238,247,0.40) 40%,rgba(255,255,255,0) 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6EEF7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background-size: 80% 200%; 
    background-position: 100% 100%;  
}
	
	
.accordion-toggle i{ padding:0px 15px 0 10px; }
.accordion-heading .collapsed {  color:#7a1b09;}
.accordion-heading .accordion-toggle:hover {  text-decoration:none; color:#fff;}

/**導聆人欄***/

.music-leader {
	text-align:center;
	text-shadow:0.2px 0.2px 0.4px #049AC8 ;
	opacity:1;
	position:relative;
	font-size:24px;
	line-height:30px;
	font-weight:800;
	color:#FEF6F0;
	width:100%;
}
.music-leader:hover {
	color:#625B57;
}
	

/**團隊介紹欄***/
.introduction-title {
	text-align:center;
	text-shadow:0.2px 0.2px 0.4px #45382E ;
	opacity:1;
	position:relative;
	font-size:20px;
	line-height:26px;
	font-weight:800;
	color:#FFE4C4;
	width:100%;	
}

/**.introduction-title span {
	border:1px solid #19C1C3;	
}**/

.introduction-title span:hover {
	color:#FF7300;
	border:hidden;
}
	
.team_mark {
	background-image:url(../img/show/show_word.png);
	background-repeat:no-repeat;
	background-position:left center;
	background-color:transparent;
	background-size: auto auto;
	transition: background-position 4s;
}
.team_mark:hover {
	background-position:40% center;
}


 /**節目名稱欄***/
.program-title {    
	width:100%;
	font-size:20px;
	line-height:30px;
	font-weight:700;
	color:#530103;
}

.program-title:hover {
	color:#F5FFFA;}

/**演出者(單位)***/		
.actor {
	text-align:right;
	color:#2F2500;}

.actor:hover {
	color:#E9D7F4;}

/**單位表演人數欄***/		
.teem_people {
	text-align:center;
	color:#bd8f0c;}

.teem_people:hover {
	color:#e2844a;}


/****手風琴內部 *.................
-------------------------------****/
.accordion-inner { padding:20px; font-size:13px; line-height:22px; color:#15314B;}
.accordion-inner>bg {background-color:#F0F0F0;}
.cover_frame_green {
	overflow: hidden;
	position: relative;
	height: 0;
	background-color:#F0FFF0;
	background-image:url(../img/otherpic/coverbg04.png);
	background-repeat:no-repeat;
	background-size:cover;}
.cover_frame_blue {
	overflow: hidden;
	position: relative;
	height: 0;
	background-color:#F5F7FC;
	background-image:url(../img/otherpic/coverbg03.png);
	background-repeat:no-repeat;
	background-size:cover;}	
.cover_frame_red {
	overflow: hidden;
	position: relative;
	height: 0;
	background-color:#F9F4F6;
	background-image:url(../img/otherpic/coverbg01.png);
	background-repeat:no-repeat;
	background-size:cover;}	
.cover_frame_yellow {
	overflow: hidden;
	position: relative;
	height: 0;
	background-color:#FFFFF0;
	background-image:url(../img/otherpic/coverbg02.png);
	background-repeat:no-repeat;
	background-size:cover;}
.bg_green {overflow: hidden;
	position: relative;
	height: 0;
	background-color:#F0FFF0;}
.bg_red {overflow: hidden;
	position: relative;
	height: 0;
	background-color:#F9F4F6;}
.bg_yellow {overflow: hidden;
	position: relative;
	height: 0;
	background-color:#FFFFF0;}
.bg_blue {overflow: hidden;
	position: relative;
	height: 0;
	background-color:#F5F7FC;}	
	
.collapse.in,.cover_frame_yellow.in,.cover_frame_red.in,.cover_frame_blue.in,.cover_frame_green.in { height:auto; }



/*************************************************************
	TABS
 *************************************************************/
ul.nav-tabs { margin: 0 !important; }
.nav-tabs > li > a {
border:0px solid #34495E;	
	border-radius:0;
	margin-right:2px;
	font-size:12px;
	padding:6px 10px 5px;
	outline:none;
	background:#34495E; 
	color:#fff;
}
.nav-tabs > li.active > a { border:0px none; background:#2BA6CB; color:#fff; }
.nav-tabs > li > a:hover, .nav-tabs > li.active > a:hover,.nav-tabs > .active > a:focus  {
	border:0px solid #34495E;
	background:#2BA6CB;
	color:#fff; 
}
.tab-content { padding:18px 0 0;}
.tabs-top .nav-tabs > li.active > a:hover, .tabs-top .nav-tabs > li.active > a { color:#fff; }

/**** TABS LEFT ****/
.tabs-left > .nav-tabs { border: none; }
.tabbable.tabs-left .nav-tabs li { border-radius:0; margin:10px 0 -2px 0; }
.tabbable.tabs-left .nav-tabs a {
	border:0 none;
	font-size:12px;
	padding:6px 0 6px 10px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius:0;
	border-left:#2980B9 3px solid;
	color:#eee;
	background:#34495E;
}
.tabbable.tabs-left .nav-tabs .active a, .tabbable.tabs-left .nav-tabs a:hover {
	border:0 none;
	border-left:3px solid #2980B9;  
	color:#fff;
	background: #2BA6CB;  
}
.tabbable.tabs-left .tab-content { padding: 0 0 20px 15px; }

 /*************************************************************
	TOOLTIPS
 *************************************************************/
.tooltip { font-size: 13px; }
.tooltip.in {opacity: 1;  filter: alpha(opacity=100);zoom: 1; }
.tooltip.top {padding-bottom: 9px;margin-top:-13px; }
.tooltip.top .tooltip-arrow {
	border-top-color: #34495e;
	border-width: 9px 9px 0;
	bottom: 0;
	margin-left: -9px; 
}
.tooltip.right .tooltip-arrow {
    border-right-color: #34495e;
    border-width: 9px 9px 9px 0;
    margin-top: -9px;
    left: -3px; 
}
.tooltip.bottom { padding-top: 8px; }
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #34495e;
	border-width: 0 9px 9px;
	margin-left: -9px;
	top: -1px; 
}
.tooltip.left .tooltip-arrow {
    border-left-color: #34495e;
    border-width: 9px 0px 9px 9px;
    margin-top: 14px;
    top: -1px;right:-4px;
}
.tooltip.left  { margin-left:-15px; }

.tooltip-inner {
  background-color: #34495e;
  line-height: 18px;
  padding: 12px 12px;
  text-align: center;
  width: 183px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

/*-----------------------------------------------------------------------------------*/
/*	07: CSS3 ANIMATIONS
/*-----------------------------------------------------------------------------------*/

.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn { 0% {opacity: 0;}	100% {opacity: 1;}
}

@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes fadeIn { 0% {opacity: 0;}	 100% {opacity: 1;} }
@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
	0% { opacity: 0; -webkit-transform: translateY(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@-moz-keyframes fadeInUp {
	0% { opacity: 0; -moz-transform: translateY(20px); }
	100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInUp {
	0% { opacity: 0;	-o-transform: translateY(20px); }
	100% { opacity: 1; -o-transform: translateY(0); }
}

@keyframes fadeInUp {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInDown {
	0% { opacity: 0; -moz-transform: translateY(-20px); }
	100% { opacity: 1; -moz-transform: translateY(0); }
}
@-o-keyframes fadeInDown {
	0% { opacity: 0; -o-transform: translateY(-20px);}
	100% { opacity: 1; -o-transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
@-webkit-keyframes bounceInDown {
	0% { opacity: 0; -webkit-transform: translateY(-2000px); }
	60% { opacity: 1; -webkit-transform: translateY(30px); }
	80% { -webkit-transform: translateY(-10px); }
	100% { -webkit-transform: translateY(0); }
}
@-moz-keyframes bounceInDown {
	0% { opacity: 0; -moz-transform: translateY(-2000px); }
	60% { opacity: 1; -moz-transform: translateY(30px); }
	80% { -moz-transform: translateY(-10px); }
	100% { -moz-transform: translateY(0); }
}
@-o-keyframes bounceInDown {
	0% { opacity: 0; -o-transform: translateY(-2000px); }
	60% { opacity: 1; -o-transform: translateY(30px); }
	80% { -o-transform: translateY(-10px); }
	100% { -o-transform: translateY(0); }
}
@keyframes bounceInDown {
	0% { opacity: 0; transform: translateY(-2000px); }
	60% { opacity: 1; transform: translateY(30px); }
	80% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

.bounceInDown {
	-webkit-animation-name: bounceInDown;
	-moz-animation-name: bounceInDown;
	-o-animation-name: bounceInDown;
	animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
	0% { opacity: 0; -webkit-transform: translateX(-2000px); }
	60% { opacity: 1; -webkit-transform: translateX(30px); }
	80% { -webkit-transform: translateX(-10px); }
	100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes bounceInLeft {
	0% { opacity: 0; -moz-transform: translateX(-2000px); }
	60% { opacity: 1; -moz-transform: translateX(30px); }
	80% { -moz-transform: translateX(-10px); }
	100% { -moz-transform: translateX(0); }
}
@-o-keyframes bounceInLeft {
	0% { opacity: 0; -o-transform: translateX(-2000px); }
	60% { opacity: 1; -o-transform: translateX(30px); }
	80% { -o-transform: translateX(-10px);}
	100% { -o-transform: translateX(0); }
}

@keyframes bounceInLeft {
	0% { opacity: 0; transform: translateX(-2000px); }
	60% { opacity: 1; transform: translateX(30px); }
	80% { transform: translateX(-10px); }
	100% {transform: translateX(0); }
}

.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
	0% { opacity: 0; -webkit-transform: translateX(2000px); }
	60% { opacity: 1; -webkit-transform: translateX(-30px); }
	80% { -webkit-transform: translateX(10px); }
	100% { -webkit-transform: translateX(0); }
}

@-moz-keyframes bounceInRight {
	0% { opacity: 0; -moz-transform: translateX(2000px); }
	60% { opacity: 1; -moz-transform: translateX(-30px); }
	80% { -moz-transform: translateX(10px); }
	100% { -moz-transform: translateX(0); }
}
@-o-keyframes bounceInRight {
	0% {opacity: 0; -o-transform: translateX(2000px); }
	60% { opacity: 1; -o-transform: translateX(-30px); }
	80% { -o-transform: translateX(10px); }
	100% { -o-transform: translateX(0); }
}
@keyframes bounceInRight {
	0% { opacity: 0; transform: translateX(2000px);}
	60% {opacity: 1; transform: translateX(-30px);}
	80% {transform: translateX(10px);}
	100% {transform: translateX(0);}
}

.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
@-webkit-keyframes shake {
	0%, 100% {-webkit-transform: translateX(0);}	10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
	0%, 100% {-moz-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
	0%, 100% {-o-transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
	20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
	0%, 100% {transform: translateX(0);}
	10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
	20%, 40%, 60%, 80% {transform: translateX(10px);}
}

.shake {
	-webkit-animation-name: shake;
	-moz-animation-name: shake;
	-o-animation-name: shake;
	animation-name: shake;
}



/*-----------------------------------------------------------------------------------*/
/*	09: 自定義動畫
/*-----------------------------------------------------------------------------------*/


.video1stD {
	background-image:url(../img/mark/1Dvideo_01.png);}
.video2ndA {
	background-image:url(../img/mark/2Avideo_01.png);}
.video2ndB {
	background-image:url(../img/mark/2Bvideo_01.png);}
.video2ndC {
	background-image:url(../img/mark/2Cvideo_01.png);}
.video3rdA {
	background-image:url(../img/mark/3Avideo_01.png);}
.video3rdB {
	background-image:url(../img/mark/3Bvideo_01.png);}
.video3rdC {
	background-image:url(../img/mark/3Cvideo_01.png);}	
.video4thA {
	background-image:url(../img/mark/4Avideo_01.png);}
.video4thB {
	background-image:url(../img/mark/4Bvideo_01.png);}
	
.hoverImgBg {
	text-align:center;
	}
.hoverImgBg img.up {
	position:relative;}
.hoverImgBg img.down {
	position:absolute;}
/*-----------------------------------------------------------------------------------*/
/*  10: 影片字幕
/*-----------------------------------------------------------------------------------*/
#display
    {       
      position:absolute;    
      display:block;   
      text-align :left;
      color:#fff000;
      font-size:16px;
	  font-weight:300;
      font-family:Comic Sans MS;
      text-shadow: 0.1em 0.1em 0.15em #F60;
      z-index:100; /* set z-index to be sure div is on top */
    }    
	
/* alert */
.alert {
    border-radius: 0;
}
.alert-default {
    color: #b5b4b4;
}
.alert-primary {
    color: #4ea8f5;
}
.alert-success {
    color: #15f574;
}
.alert-info {
    color: #72d9f7;
}
.alert-warning {
    color: #f9bd06;
}
.alert-danger {
    color: #f53b36;
}



/* ------------------------------------------------------------------ */
/* h. Contact Section
/* ------------------------------------------------------------------ */

#contact {
   background: #191919;
   padding-top: 96px;
   padding-bottom: 102px;
   color: #636363;
}
#contact .section-head { margin-bottom: 42px; }

#contact a, #contact a:visited  { color: #11ABB0; }
#contact a:hover, #contact a:focus { color: #fff; }

#contact h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#contact h1 span { display: none; }
#contact h1:before {
   font-family: 'FontAwesome';
   content: "\f0e0";
	padding-right: 10px;
	font-size: 72px;
   line-height: 72px;
   text-align: left;
   float: left;
   color: #ebeeee;
}

#contact h4 {
   font: 16px/24px 'opensans-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#contact p.lead {
   font: 18px/36px 'opensans-light', sans-serif;
   padding-right: 3%;
}
#contact .header-col { padding-top: 6px; }


/* contact form */
#contact form { margin-bottom: 30px; }
#contact label {
   font: 15px/24px 'opensans-bold', sans-serif;
   margin: 12px 0;
   color: #EBEEEE;
	display: inline-block;
	float: left;
   width: 26%;
}
#contact input,
#contact textarea,
#contact select {
   padding: 18px 20px;
	color: #eee;
	background: #373233;
	margin-bottom: 42px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 65%;
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	color: #fff;
	background-color: #11ABB0;
}
#contact button.submit {
	text-transform: uppercase;
	letter-spacing: 3px;
	color:#fff;
   background: #0D0D0D;
	border: none;
   cursor: pointer;
   height: auto;
   display: inline-block;
	border-radius: 3px;
   margin-left: 26%;
}
#contact button.submit:hover {
	color: #0D0D0D;
	background: #fff;
}
#contact span.required {
	color: #11ABB0;
	font-size: 13px;
}
#message-warning, #message-success {
   display: none;
	background: #0F0F0F;
	padding: 24px 24px;
	margin-bottom: 36px;
   width: 65%;
   margin-left: 26%;
}
#message-warning { color: #D72828; }
#message-success { color: #11ABB0; }

#message-warning i,
#message-success i {
   margin-right: 10px;
}
#image-loader {
   display: none;
   position: relative;
   left: 18px;
   top: 17px;
}



.ticket1 {
	background-image:url(../img/topic/img-ticket-a1.png);
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	padding: 10px;
	position: relative;
	text-align: center;
	margin-bottom:15px;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100% 100%;
	}

.ticket2 {
	background-image:url(../img/topic/img-ticket-b1.png);
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	padding: 10px;
	position: relative;
	text-align: center;
	margin-bottom:15px;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:100% 100%;
}

/*.ticket1:hover {
	background-image:url(../img/topic/img-ticket-a1x.png);
	}
.ticket2:hover {
	background-image:url(../img/topic/img-ticket-b1x.png);
	}*/

/*................文本中的照片............*/

.figure-l {float:left; text-align:center;}
.figure-r {float:right; text-align:center;}
.figure-c {text-align:center;}

figcaption {color:#352D1D; text-align:center; margin-top:5px;}
p.headertitle {font-family:"微軟正黑體";}

/*................QRCode固定框............*/

.QRCode_Box {bottom: 30px; left:30px; width:180px; height:230px; background-image:url(../img/topic/img-qrcodephone.png); background-repeat:no-repeat; background-size:auto; background-position:left bottom; position:fixed; z-index:50000;}

.QRCode_Box:hover {background-image:url(../img/topic/img-qrcode-http.jpg); background-repeat:no-repeat; background-size:contain; z-index:50001;}


/* ------------------------------------------------------------------ */
/* 漸層背景stepbg(白底透明底)
/* ------------------------------------------------------------------ */
.bg-step-white{
	padding:3em 0 5em;
background: -moz-linear-gradient(top,  rgba(239,239,239,1) 0%, rgba(255,255,255,0.62) 38%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,239,1)), color-stop(38%,rgba(255,255,255,0.62)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(255,255,255,0.62) 38%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(255,255,255,0.62) 38%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(239,239,239,1) 0%,rgba(255,255,255,0.62) 38%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(239,239,239,1) 0%,rgba(255,255,255,0.62) 38%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
/* ------------------------------------------------------------------ */
/* 漸層背景stepbg(粉橘透明底)
/* ------------------------------------------------------------------ */
.bg-step-orange{
padding:3em 0 5em;
background: -moz-linear-gradient(top,  rgba(248,228,219,1.00) 0%, rgba(248,228,219,0.62) 38%, rgba(248,228,219,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top,  right bottom, color-stop(0%,rgba(248,228,219,1.00)), color-stop(38%,rgba(248,228,219,0.62)), color-stop(100%,rgba(248,228,219,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(248,228,219,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(248,228,219,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(248,228,219,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(248,228,219,1.00) 0%,rgba(248,228,219,0.62) 38%,rgba(248,228,219,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8E4DB', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
/* ------------------------------------------------------------------ */
/* 漸層背景stepbg(粉紅透明底)
/* ------------------------------------------------------------------ */
.bg-step-red{
padding:3em 0 5em;
background: -moz-linear-gradient(top left,  rgba(252,239,244,1.00) 0%, rgba(252,239,244,0.62) 50%, rgba(252,239,244,0.42) 80%, rgba(252,239,244,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top,  right bottom, color-stop(0%,rgba(252,239,244,1.00)), color-stop(50%,rgba(252,239,244,0.62)),  color-stop(80%,rgba(252,239,244,0.42)), color-stop(100%,rgba(252,239,244,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top left,  rgba(252,239,244,1.00) 0%,rgba(252,239,244,0.62) 50%,rgba(252,239,244,0.42) 80%,rgba(252,239,244,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top left,  rgba(252,239,244,1.00) 0%,rgba(252,239,244,0.62) 50%,rgba(252,239,244,0.42) 80%,rgba(252,239,244,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top left,  rgba(252,239,244,1.00) 0%,rgba(252,239,244,0.62) 50%,rgba(252,239,244,0.42) 80%,rgba(252,239,244,0) 100%); /* IE10+ */
background: linear-gradient(to bottom right,  rgba(252,239,244,1.00) 0%,rgba(252,239,244,0.62) 50%,rgba(252,239,244,0.42) 80%,rgba(252,239,244,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCEFF4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
/* ------------------------------------------------------------------ */
/* 漸層背景stepbg(粉綠透明底)
/* ------------------------------------------------------------------ */
.bg-step-green{
padding:3em 0 5em;
background: -moz-radial-gradient(right,  rgba(223,228,202,1.00) 0%, rgba(223,228,202,0.62) 38%, rgba(223,228,202,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, right bottom,  left top, color-stop(0%,rgba(223,228,202,1.00)), color-stop(38%,rgba(223,228,202,0.62)), color-stop(100%,rgba(223,228,202,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(right,  rgba(223,228,202,1.00) 0%,rgba(223,228,202,0.62) 38%,rgba(223,228,202,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(right,  rgba(223,228,202,1.00) 0%,rgba(223,228,202,0.62) 38%,rgba(223,228,202,0) 100%); /* Opera 11.10+ */
background: -ms-radial-gradient(rirgt,  rgba(223,228,202,1.00) 0%,rgba(223,228,202,0.62) 38%,rgba(223,228,202,0) 100%); /* IE10+ */
background: radial-gradient(to left,  rgba(223,228,202,1.00) 0%,rgba(223,228,202,0.62) 38%,rgba(223,228,202,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfe4ca', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
/* ------------------------------------------------------------------ */
/* 漸層背景stepbg(大紅右-白左)
/* ------------------------------------------------------------------ */
.grad1 {
     height: 400px;
     background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
 }
/* ------------------------------------------------------------------ */
/* 漸層透明背景stepbg(大紅右-白左)
/* ------------------------------------------------------------------ */
.grad2 {width:200px;
     height: 200px;
     background: -webkit-linear-gradient( rgba(171,206,200,0), rgba(171,206,200,1)); /* For Safari 5.1 to 6.0 */
     background: -o-linear-gradient( rgba(171,206,200,0), rgba(171,206,200,1)); /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient( rgba(171,206,200,0), rgba(171,206,200,1)); /* For Firefox 3.6 to 15 */
     background: linear-gradient(rgba(171,206,200,0), rgba(171,206,200,1)); /* Standard syntax (must be last) */
 }
 
/*音樂彩色背景陰影效果*/
.bg-music {
	background-color:#FFFFFF;
	background-image:url(../img/otherpic/showbg.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	box-shadow: 1px 1px 6px #C1BAC1;
	text-align:center;
}




/*滑鼠移過背景動(影子)bg-moveshadow*/
.bg-moveshadow-down {
	background:#f0f0f0;
	padding: 8px;
	border-radius:0;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow-down:hover {
	background:#e9e6e1;
	box-shadow: 1px 1px 6px #99AA9B;
}

.bg-moveshadow1 {
	background:#EFEAF0;
	padding: 8px;
	border-radius:0;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow1:hover {
	background:#EEF1E2;
	box-shadow: 1px 1px 6px #BAB1BA;
}

.bg-moveshadow2 {
	background:#EFEAF0;
	padding: 0px;
	border-radius:0;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow2:hover {
	background:#f6e9e3;
	box-shadow: 1px 1px 6px #BAB1BA;
}

.bg-moveshadow3 {
	background:#E3E4E4;
	padding: 0px;
	border-radius:0;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow3:hover {
	background:#EDF5F9;
	box-shadow: 1px 1px 6px #BAB1BA;
}

.bg-moveshadow4 {
	background:transparent;
	padding: 0px;
	border-radius:0;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow4 h3 {
	line-height:30px;	
	}
.bg-moveshadow4:hover {
	background:#F1F0E9;
	box-shadow: 1px 1px 6px #BAB1BA;
}

.bg-moveshadow5 {
	background:transparent;
	padding: 15px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow5:hover {
	background:#EBF4F7;
	box-shadow: 1px 1px 6px #BAB1BA;
}

.bg-moveshadow6 {
	background:#AD1426;
	color:#FFFFFF;
	padding: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow6:hover {
	background-color:#13457F; 
	box-shadow: 1px 1px 6px #BAB1BA;
	color:#F4B328;
}

.bg-moveshadow7 {
	background:#EEF1E2;
	padding: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow7:hover {
	background-color:#F8E8E9; 
	box-shadow: 1px 1px 6px #BAB1BA;
}

.bg-moveshadow-red {
	background:#ab535f;
	padding: 8px;
	border-radius:0;
	margin:0 auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bg-moveshadow-red:hover {
	background:#af3141;
	box-shadow: 1px 1px 6px #777474;
}

.bg-moveshadow-blue {
	background:#1F5078;
	padding: 8px;
	border-radius:0;
	margin:5px auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	color:#F5F6FF;}
	
.bg-moveshadow-blue:hover {
	background:#4682B4;
	box-shadow: 1px 1px 6px #777474;
	color:#FFD700;}

/*漸變背景動畫效果*/
.bg-change-Animation { 
    padding: 15px; 
    background: #F9EBE5; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left top, #FCDFD2, #c9d1cd); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom right, #FCDFD2, #c9d1cd); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(bottom right, #FCDFD2, #c9d1cd); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom right, #FCDFD2, #c9d1cd); /* Standard syntax (must be last) */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCDFD2', endColorstr='#c9d1cd',GradientType=0 ); /* IE6-9 */
    background-size: auto 200%; 
    background-position: 0 100%; 
    transition: background-position 2s; 
}     


.bg-change-Animation:hover { 
    background-position: 0 0; 
} 

/*淡背景陰影效果*/
.bg-lightA {
background:#e3e3e3;
	box-shadow: 1px 1px 6px #C1BAC1;
}


/*淡背景完整*/
.bg-lightB  {
  padding: 0.5em;
  background-color: #F4F4F4;
  text-align: center;
  font-size: 2em;
  color: #5bb2fc;
  font-family: 'Fugaz One', cursive;
  margin:2em 0;
}

/*淡背景完整*/
.bg-lightC {
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
/*一般背景白底*/
.bg-style-W {
	min-height:20px;
	padding:19px;
	background-color:#F5F5F6;		
	border-radius:0;
	color:#777;
	margin-bottom: 5px;
}


/*一般背景黑底*/
.bg-style-B {
	min-height:20px;
	padding:19px;
	background-color:#777;		
	border-radius:0;
	color:#F5F5F6;
	margin-bottom: 5px;
}

/*加在一般背景底上方變成二層(自己換缺顏色)*/
.bg-in{
	min-height:20px;
	padding:19px;
	border-radius:0;
	background-color:#FFF;	
}

.bg-in-15{
	min-height:20px;
	padding:19px;
	border-radius:0;
	background-color:#d9cfb7;	
}

/*基本背景箱子*/
.bg-box {
	background-color:#D5DEEB;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
	padding: 14px;
	position: relative;
	text-align: center;
	margin-bottom:25px;
	}
.title_big { 	 
	font-size: 24px;
	letter-spacing:0.1em;
	line-height:30px;
	font-weight:500;
	margin:0;
	padding:50px auto;}


.bgcolor01 { background-color:#f4e9df;}/*淺米白橘*/
.bgcolor02 { background-color:#a71a03;}/*暗紅*/
.bgcolor03 { background-color:#ffd6e9;}/*淺粉紅*/
.bgcolor04 { background-color:#f9bd06;}/*洋黃*/
.bgcolor05 { background-color:#b5b4b4;}/*灰*/
.bgcolor06 { background-color:#4ea8f5;}/*天空藍*/
.bgcolor07 { background-color:#72d9f7;}/*淺天空藍*/
.bgcolor08 { background-color:#15f574;}/*亮綠*/
.bgcolor09 { background-color:#f53b36;}/*亮桃紅*/
.bgcolor10 { background-color:#fffbe9;}/*淺米黃*/
.bgcolor11 { background-color:#fef6f9;}/*淺紅*/
.bgcolor12 { background-color:#e5e4ef;}/*淺紫*/
.bgcolor13 { background-color:#e8f5fa;}/*淺水藍*/
.bgcolor14 { background-color:#edf9ea;}/*淺水綠*/
.bgcolor15 { background-color:#c6d6de;}/*淺湛綠*/
.bgcolor15 { background-color:#d1e8d0;}/*淺綠*/
.bgcolor15 { background-color:#e1e3df;}/*淺鐵灰*/
.bgcolor15 { background-color:#d9cfb7;}/*淺土棕*/


.breadcrumb {
  background: #c6b39e;
  border-bottom: 5px solid #a88865;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  padding: 18px 15px;
  color: #4a4c4a;
  font-size:20px;
  line-height:22px;
  }

.breadcrumb a {
  color: #FFFFFF;
}

/*......曲目背景........*/
.tracks { 
	color:#353953;
	text-align:left;
	font-size:15px;
	font-weight:400;
}

p.tracks { margin-bottom:0px;}
.showman {
	color:#685C72;
	text-align:right;
	font-size:13px;
	font-weight:400;
}
p.showman {margin-bottom:0px;}

/*......文章區塊地引用樣式blockquote........*/
blockquote1 {
	margin: 1em 2em;
	border-left: 1px dashed #999;
	padding-left: 1em; }
blockquote1 p:first-letter {  /*首字變大*/
	float: left;
	margin: .2em .3em .1em 0;
	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
	font-size: 220%;
	font-weight: bold; }
blockquote1 p:first-line {
	font-variant: small-caps; }
	
blockquote2 {
	color: #66a;
	font-weight: bold;
	font-style: italic;
	margin: 1em 3em; }
blockquote2 p:before {
	content: '"'; }
blockquote2 p:after {
	content: '"'; }


/*......標題圖字樣式........*/

.underline1 {
	background-image:url(../img/topic/img-underline1.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;}
	
.underline2 {
	background-image:url(../img/topic/img-underline2.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	}

.underline3 {
	background-image:url(../img/topic/img-underline3.png);
	background-repeat:no-repeat;
	background-position:bottom center;
	background-size:contain;}
	
.underline4 {
	background-image:url(../img/topic/img-underline4.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	}

.underline5 {
	background-image:url(../img/topic/img-underline5.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;}
	
.underline6 {
	background-image:url(../img/topic/img-underline6.png);
	background-repeat:no-repeat;
	background-position:bottom center;
	background-size:contain;
	}

.underline7 {
	background-image:url(../img/topic/img-underline7.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;}
	
.underline8 {}
	/*background-image:url(../img/topic/img-underline8.png);
	background-repeat:no-repeat;
	background-position:bottom center;
	background-size:contain;}*/
	


/*........圖片翻轉變換.......*/

  #cf4 {
	float:left;	
	position:relative;
	margin:0 auto;
	text-align:right;
}
  
  #cf4 img {
    position:absolute;
    text-align:center;
	vertical-align:top;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #cf4 img.top {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;

  }

  #cf4:hover img.top, #cf4.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
  }

  #cf4:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
  }
  
  
  
  /*.......照片變換箱phonebox...*/
  
  .phonebox01 {
		background-image:url(../img/photo/s-B-1big.jpg);
		-webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    border-radius: 6px;
		padding: 10px;
		text-align: center;
		margin-bottom:15px;
		background-repeat:no-repeat;
		background-position:center center;
		background-size:contain;
}
  
.phonebox01:hover {
	background-image:url(../img/photo/s-B-2big.jpg);
  }

.phonebox02 {
		background-image:url(../img/show/show1.png);
		-webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    border-radius: 6px;
		padding: 10px;
		text-align: center;
		margin-bottom:15px;
		background-repeat:no-repeat;
		background-position:center center;
		box-shadow: 4px 4px 15px #555555;
		background-size:contain;
  }
  
.phonebox02:hover {
	background-image:url(../img/show/show2.png);
  }
 
 .phonebox03 {
		background-image:url(../img/photo/thanksA03.jpg);
		-webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    border-radius: 6px;
		padding: 0px;
		text-align: center;
		margin-bottom:20px;
		background-repeat:no-repeat;
		background-position:center center;
		box-shadow: 4px 4px 15px #555555;
		background-size:contain;
}
  
.phonebox03:hover {
	background-image:url(../img/photo/thanksA02.jpg);
  }
  
.phonebox04 {
	  background-image:url(../img/photo/thanksC03.jpg);
	  -webkit-border-radius: 6px;
	  -moz-border-radius: 6px;
	  border-radius: 6px;
	  padding: 0px;
	  text-align: center;
	  margin-bottom:20px;
	  background-repeat:no-repeat;
	  background-position:center center;
	  box-shadow: 4px 4px 15px #555555;
	  background-size:contain;
}

.phonebox04:hover {
  background-image:url(../img/photo/thanksC02.jpg);
}

.phonebox05 {
	  background-image:url(../img/photo/thanksC04.jpg);
	  -webkit-border-radius: 6px;
	  -moz-border-radius: 6px;
	  border-radius: 6px;
	  padding: 0px;
	  text-align: center;
	  margin-bottom:20px;
	  background-repeat:no-repeat;
	  background-position:center center;
	  box-shadow: 4px 4px 15px #555555;
	  background-size:contain;
}

.phonebox05:hover {
  background-image:url(../img/photo/thanksC05.jpg);
}
  
  .topicbg {
    height: 406px;   
    box-shadow: 0px 5px 16px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
}


.shadow-Box {
	text-align:center;
	box-shadow: 4px 4px 15px #555555;	
  }
	
.shadow-Box2 {
	text-align:center;
	box-shadow: 1px 1px 5px #555555;	
}

.shadow-Box3 {
	background-color: #E7E2DF;
	height:100%;
	margin: 0px auto;
	text-align:center;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 5px #555555;	
}

.shadow-Box4 {
	background-color: #E7E2DF;
	margin: 0px auto;
	text-align:center;
	vertical-align:middle;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 5px #555555;
}
.shadow-Box5 {
	box-shadow: 1px 1px 5px #555555;	
}

.photo-img-box {
	text-align:center;
}



.windmill {width:900px; position:absolute; right:50%; margin-right:50px;; height:800px;}
#fengche {height:330px; width:214px; background:url("../img/fengche.png") -32px top no-repeat; right:-68px; top:170px; position:absolute; }


/*.......圖片陰影效果shadowimgbox...*/
  
.shadowimgbox {
	list-style-type: none;
	margin:20px 10px;
	padding: 0;
	
	border: 2px solid #efefef;
	position: relative;
	float: left;
	background: #ffffff; /* old browsers */
	line-height:220px;
	font-size:32px;
	text-align:center;
	width:100%;
	height:100%;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset; 
	-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;}

	
.shadowimgbox:before {
	z-index: -2; 
	position: absolute; 
	background: transparent; 
	width: 90%; 
	height: 80%; 
	content: ''; 
	left: 20px; 
	bottom:8px; 
	
	-webkit-transform: skew(-12deg) rotate(-4deg); 
	-moz-transform:skew(-12deg) rotate(-4deg); 
	-o-transform: skew(-12deg) rotate(-4deg); 
	-ms-transform: skew(-12deg) rotate(-4deg); 
	
	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 
	}
	
.shadowimgbox:after {
	z-index: -1; 
	position: absolute; 
	background: transparent; 
	width: 90%; 
	height: 80%; 
	content: ''; 
	right:20px;  
	bottom:8px; 
	
	-webkit-transform: skew(12deg) rotate(4deg); 
	-moz-transform:skew(12deg) rotate(4deg); 
	-o-transform: skew(12deg) rotate(4deg); 
	-ms-transform: skew(12deg) rotate(4deg); 
	
	-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); 
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); 
	}

.shadowimgbox img {
	padding:5px;
	
	}

/*........文章區文字格式..paper_text...........*/

.main-title {
	font-size: 22px;
	line-height: 1.6em;
	font-weight: 600;
	padding-bottom: 5px;
	color: #2A3372;	
}

.paper_text {
	font-size:20px;
	line-height:1.4em;
	font-weight:300;
	letter-spacing:0.05em;
	text-align:left;
	vertical-align:bottom;	
	text-align: justify;
	text-justify:inter-ideograph;
	padding:30px  15px 20px 15px;
	margin-right:0;
	color:#69767F;
}

.paper_text h1 {
	font-weight:900;
	letter-spacing:0.1em;
}

.paper_text h2 {
	line-height:1.25em;
}

.paper_text h4 {
	line-height:1.3em;
}

.paper_text p {
	margin-bottom:5px;
	line-height:40px;
}

.paper_text .block  {
	line-height:1.45em;
	font-weight:400;
	color:#41637F;
	border-top: groove 2px #62D2F9;
	border-bottom: groove 2px #62D2F9;
	padding:0.5em 0 0.3em 0em;
	margin-top: 0.5em;
}
.paper_text .block a  {
	font-size:18px;
	line-height:1.45em;
	font-weight:700;
	color:#0E477F;	
}

h2.titlename {
	line-height: 1.5em;
	font-weight: 800;
	letter-spacing:0.1em;
	color: #0E477F;	
}

.paper_text_small {
	font-size:20px;
	line-height:1.6em;
	font-weight:700;
	letter-spacing:0.06em;
	text-align:left;
	vertical-align:bottom;	
	padding:40px  30px 30px 30px;
	margin-right:0;
	color:#4E4C4B;
}

.paper_text_small h1 {
	font-size:40px;
	font-weight:900;
	letter-spacing:0.1em;
	line-height:35px;
	margin-bottom:20px;
	text-align:center;
	text-shadow: 0.08em 0.05em 0.1em #043D0E;
}

.paper_text_small h2 {
	font-size:30px;
	font-weight:700;
	line-height:1.25em;
	margin-bottom:15px;
	text-shadow: 0.08em 0.05em 0.08em #7E93C8;
}

.paper_text_small p {
	margin-bottom:8px;
	line-height:35px;
}

.paper_text_small h3 {
	font-size:18px;
	line-height:1.4em;
	font-weight:500;
	letter-spacing:0.05em;
}

.paper_text_small h3 p {
	margin-bottom:8px;
	line-height:30px;
}

/*........文章區圖片格式..paper_photo...........*/

.paper_photo {
	font-size:15px;
	line-height:1.3em;
	font-weight:400;	
	text-align:center;
	vertical-align:bottom;
	padding-right:0;
	margin:30px  0 20px 0;
	color:#69767F;
	position:relative;
}

.paper_photo h1 {
	line-height:1.4em;
	font-weight:900;
	letter-spacing:0.1em;
	text-align:center;
	color:#941D1F;
}

.paper_photo img {
	text-align:center;
	vertical-align:top;
	box-shadow: 1px 1px 5px #555555;
	opacity:0.9;
}

.paper_photo img.full90 {
	width:90%;
}

.paper_photo img.full100 {
	width:100%;
}
	
.change-box {
	margin:30px 30px 20px;
	position:relative;
}

.paper_photo img.change-up {	
	width:100%;
	padding: 0px;
	opacity:1;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
	box-shadow: 4px 4px 15px #555555;		
	-webkit-transition: opacity 0.5s ease-in-out;
  	-moz-transition: opacity 0.5s ease-in-out;
  	-o-transition: opacity 0.5s ease-in-out;
  	transition: opacity 0.5s ease-in-out;
	position:relative;
}

.paper_photo img.change-down {
	width:100%;
	padding: 0px;
	opacity:1;	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
	box-shadow: 4px 4px 15px #683352;		
	position:absolute;
	}	
	
.paper_photo img.change-zoom-up {
	width:100%;
	padding: 0px;
	position:absolute;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
	-webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;
}

.paper_photo img.change-zoom-down {
	width:100%;
	padding: 0px;
	opacity:1;
	position:absolute;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.paper_photo img.change-turn-up {
	width:100%;
	padding: 0px;
	position:absolute;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
	-webkit-transform:scale(1,0);
    -moz-transform:scale(1,0);
    -o-transform:scale(1,0);
    transform:scale(1,0);
    filter: alpha(opacity=0);
    opacity:0;
}

.paper_photo img.change-turn-down {
	width:100%;
	padding: 0px;
	position:absolute;
	-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.paper_photo p, .paper_video p {	
	padding-top:5px;
	color:#464B4C;
	position:relative;
	margin-bottom:10px;
}

.paper_photo img:hover {
	opacity:1;
	box-shadow: 2px 2px 15px #61AA43;	
}

.paper_photo img.change-up:hover {
	opacity:0;	
}

.paper_photo:hover img.change-zoom-up, .paper_photo.hover_effect img.change-zoom-up {
	 opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
}

.paper_photo:hover img.change-zoom-down, .paper_photo.hover_effect img.change-zoom-down {
	-webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
}

.paper_photo:hover img.change-turn-up, .paper_photo.hover_effect img.change-turn-up {
	opacity:1;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
    transform:scale(1,1);
}

.paper_photo:hover img.change-turn-down, .paper_photo.hover_effect img.change-turn-down {
	filter: alpha(opacity=0);
    -webkit-transform:rotate(360deg) scale(0,0);
    -moz-transform:rotate(360deg) scale(0,0);
    -o-transform:rotate(360deg) scale(0,0);
    transform:rotate(360deg) scale(0,0);
}

/*........文章區影像..paper_video...........*/
.paper_video { 
	background:#F3F3F3;
	text-align:center;
	border:double 10px #BBBCB9;
	width:80%;
	margin:30px 30px 20px;}	
	
	
/*背景色 上淡下深(直s) */

.bgcolor_step_s_red {
background: -moz-linear-gradient(bottom,  rgba(251,213,213,1.00) 0%, rgba(251,213,213,0.40) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(251,213,213,1)), color-stop(60%,rgba(251,213,213,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(251,213,213,1.00) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(251,213,213,1) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(251,213,213,1) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(251,213,213,1) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBD5D5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.bgcolor_step_s_hue {
background: -moz-linear-gradient(bottom,  rgba(182,238,247,1.00) 0%, rgba(182,238,247,0.40) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(182,238,247,1)), color-stop(60%,rgba(182,238,247,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6EEF7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.bgcolor_step_s_green {
background: -moz-linear-gradient(bottom,  rgba(82,155,47,1.00) 0%, rgba(82,155,47,0.40) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(82,155,47,1.00)), color-stop(60%,rgba(82,155,47,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(82,155,47,1.00) 0%,rgba(82,155,47,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(82,155,47,1.00) 0%,rgba(82,155,47,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(82,155,47,1.00) 0%,rgba(82,155,47,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(82,155,47,1.00) 0%,rgba(82,155,47,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#529B2F', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.bgcolor_step_s_yellow {
background: -moz-linear-gradient(bottom,  rgba(228,220,2,1.00) 0%, rgba(228,220,2,0.40) 60%, rgba(255,255,255,0) 100%) ; /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(228,220,2,1.0)), color-stop(60%,rgba(228,220,2,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(228,220,2,1.0) 0%,rgba(228,220,2,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(228,220,2,1.0) 0%,rgba(228,220,2,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(228,220,2,1.0) 0%,rgba(228,220,2,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(228,220,2,1.0) 0%,rgba(228,220,2,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E4DC02', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.bgcolor_step_s_white {
background: -moz-linear-gradient(bottom,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.40) 60%, rgba(255,255,255,0) 100%) ; /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(60%,rgba(255,255,255,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(bottom,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to top,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/*背景色 右淡左深(橫h) */

.bgcolor_step_h_red {
background: -moz-linear-gradient(left,  rgba(251,213,213,1.00) 0%, rgba(251,213,213,0.40) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(251,213,213,1)), color-stop(60%,rgba(251,213,213,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(251,213,213,1.00) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(251,213,213,1) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(251,213,213,1) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(251,213,213,1) 0%,rgba(251,213,213,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBD5D5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.bgcolor_step_h_hue {
background: -moz-linear-gradient(left,  rgba(182,238,247,1.00) 0%, rgba(182,238,247,0.40) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(182,238,247,1)), color-stop(60%,rgba(182,238,247,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(182,238,247,1) 0%,rgba(182,238,247,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B6EEF7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.bgcolor_step_h_green {
background: -moz-linear-gradient(left,  rgba(210,250,207,1.00) 0%, rgba(210,250,207,0.40) 60%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(210,250,207,1)), color-stop(60%,rgba(210,250,207,0.40)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(210,250,207,1) 0%,rgba(210,250,207,0.40) 60%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(210,250,207,1) 0%,rgba(210,250,207,0.40) 60%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(210,250,207,1) 0%,rgba(210,250,207,0.40) 60%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(210,250,207,1) 0%,rgba(210,250,207,0.40) 60%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2FACF', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

/*背景色 放射狀 中淡(in) 外淡(out)(放射) 
•radial-gradient：表示要使用的是圓形漸層
•形狀：circle(正圓) | ellipse(橢圓) ，可省略，預設值是ellipse
1.closest-side：漸變的半徑長度為從圓心到離圓心最近的邊。
2.closest-corner：漸變的半徑長度為從圓心到離圓心最近的角。
3.farthest-side：漸變的半徑長度為從圓心到離圓心最遠的邊。
4.farthest-corner：漸變的半徑長度為從圓心到離圓心最遠的角。
5.contain：包含，漸變的半徑長度為從圓心到離圓心最近的點。類似於closest-side。
6.cover：覆蓋，漸變的半徑長度為從圓心到離圓心最遠的點。類似於farthest-corner。(預設值)
*/
.bgcolor_step_out_dark {
background: -ms-radial-gradient(center, circle cover, rgba(51,51,51,0.8) 0%, rgba(255,255,255,0) 100%); /* IE10 */
background: -moz-radial-gradient(center, circle cover, rgba(51,51,51,0.8) 0%, rgba(255,255,255,0) 100%);/* Mozilla Firefox */   
background: -o-radial-gradient(center, circle cover, rgba(51,51,51,0.8) 0%, rgba(255,255,255,0) 100%); /* Opera */
background: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, rgba(51,51,51,0.8)), color-stop(1, rgba(255,255,255,0))); /* Webkit (Safari/Chrome 10) */ 
background: -webkit-radial-gradient(center, circle cover, rgba(51,51,51,0.8) 0%, rgba(255,255,255,0) 100%); /* Webkit (Chrome 11+) */ 
background: radial-gradient(center, circle cover, rgba(51,51,51,0.8) 0%, rgba(255,255,255,0) 100%);/* Proposed W3C Markup */  
}


.bgcolor_step_in_yellow {
background: -webkit-radial-gradient(circle,white,orange);
background: -o-radial-gradient(circle,white,orange);
background: -moz-radial-gradient(circle,white,orange);
background: radial-gradient(circle,white,orange);
}

.bgcolor_step_in_sky {
background: -webkit-radial-gradient(circle,white,#00BFFF);
background: -o-radial-gradient(circle,white,#00BFFF);
background: -moz-radial-gradient(circle,white,#00BFFF);
background: radial-gradient(circle,white,#00BFFF);
}

.bgcolor_step_in_pink {
background: -webkit-radial-gradient(circle,white,#FFB3E6);
background: -o-radial-gradient(circle,white,#FFB3E6);
background: -moz-radial-gradient(circle,white,#FFB3E6);
background: radial-gradient(circle,white,#FFB3E6);
}

.bgcolor_step_in_yellow-green {
background: -webkit-radial-gradient(circle,white,#ADFF2F);
background: -o-radial-gradient(circle,white,#ADFF2F);
background: -moz-radial-gradient(circle,white,#ADFF2F);
background: radial-gradient(circle,white,#ADFF2F);
}

/*.........影像大小...img_size......*/

img.size_3-4 {
	width:auto;
	height:40px;
}

img.size_1-2 {
	width:auto;
	height:30px;
}

img.size_1-3 {
	width:auto;
	height:20px;
}

img.size_1-4 {
	width:auto;
	height:15px;
}

img.size_1-5 {
	width:auto;
	height:10px;
}

/*........透明度..opacity...........*/


.oy-90 {opacity:0.9;}
.oy-80 {opacity:0.8;}
.oy-60 {opacity:0.6;}
.oy-50 {opacity:0.5;}
.oy-40 {opacity:0.4;}
.oy-25 {opacity:0.25;}
.oy-10 {opacity:0.1;}
.oy-00 {opacity:0;}
	
/*........空間遮罩 彈出層..popup...........*/	
.popup{	
	background:rgba(23,35,49,0.8);
	bottom:0; 
	top:0;
	left:0;
	right:0;
	z-index:50003;
	position:fixed;
	display: block;
	text-align:center;
	vertical-align:middle; /*to　firefox*/
}	
.popupbox {		
	text-align:center;
	margin:0 auto;}

.popupbox img.height100 {
	width:auto;
	height:100%;
}

.popupbox img.width100 {
	width:100%;
	height:auto;
	margin-top:20%;
}

.popupbox img:hover {
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,113,188,0.5) 10%, rgba(255,255,255,0) 100%); /* IE10 */
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,113,188,0.5) 10%, rgba(255,255,255,0) 100%);/* Mozilla Firefox */   
	background: -o-radial-gradient(center, ellipse cover, rgba(0,113,188,0.5) 10%, rgba(255,255,255,0) 100%); /* Opera */
	background: -webkit-gradient(radial, center center, 0, center center, 143, color-stop(0, rgba(0,113,188,0.5)), color-stop(1, rgba(255,255,255,0))); /* Webkit (Safari/Chrome 10) */ 
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,113,188,0.5) 10%, rgba(255,255,255,0) 100%); /* Webkit (Chrome 11+) */ 
	background: radial-gradient(center, ellipse cover, rgba(0,113,188,0.5) 10%, rgba(255,255,255,0) 100%);/* Proposed W3C Markup */  	
}

.popupbox span{
	width:30px;
	height:30px;
	text-align:center;
	font:15px/30px Microsoft Yahei;
	cursor:pointer;
	color:#333;
	background:#f0f0f0;
	position:inherit;}

.popupbox span:hover {
	color:#f0f0f0;
	background:#BB2628;
}

.popupbox p {
	font-size:16px;
	line-height:25px;
	font-weight:700;
	color:#f0f0f0;	
	margin:0 auto;
}

/*........video空間遮罩 彈出層..popup-video...........*/	

.popup-video {	
	background:rgba(209,227,248,0.90);
	bottom:0; 
	top:0;
	left:0;
	right:0;
	z-index:50003;
	position:fixed;
	display: block;
	text-align:center;
	vertical-align:middle; /*to　firefox*/
}	

.popup-video h1{
	color:#0373CF;
	font-size:36px;
	font-weight:900;
	text-align:center;
	letter-spacing:0.08em;
	text-shadow:0 0 15px rgba(249,122,73,0.80) 0 15px rgba(249,122,73,0.80),0 0 15px rgba(249,122,73,0.80),0 0 15px rgba(249,122,73,0.80),0 0 15px rgba(249,122,73,0.80);
}

.popup-video p{
	color:#32476C;
	font-size:18px;
	font-weight:500;
	text-align:center;
}

.popupbox-video {		
	text-align:center;
	margin:0 auto;	
}

.popupbox-video video.height100 {
	width:auto;
	height:100%;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;	
	box-shadow: 4px 4px 15px #555555;		
	-webkit-transition: opacity 0.5s ease-in-out;
  	-moz-transition: opacity 0.5s ease-in-out;
  	-o-transition: opacity 0.5s ease-in-out;
  	transition: opacity 0.5s ease-in-out;
}

.popupbox-video video.width100 {
	width:100%;
	height:auto;
	margin-top:12%;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
	box-shadow: 2px 2px 8px #555555;		
	-webkit-transition: opacity 0.5s ease-in-out;
  	-moz-transition: opacity 0.5s ease-in-out;
  	-o-transition: opacity 0.5s ease-in-out;
  	transition: opacity 0.5s ease-in-out;
}
		
.popupbox-video span{
	width:30px;
	height:30px;
	text-align:center;
	font:15px/30px Microsoft Yahei;
	cursor:pointer;
	color:#f0f0f0;
	background:#8B0000;
	position:inherit;}

.popupbox-video span:hover {
	color:#f0f0f0;
	background:#2948AD;
}

.popupbox-video p {
	font-size:16px;
	line-height:25px;
	font-weight:700;
	color:#f0f0f0;	
	margin:0 auto;
}
/*.........背景(圖)...bgimg......*/

.bgimg_A_up {
	background-image:url(../img/teambgAup.png);
	background-repeat:no-repeat;
	background-position:10% 0;
}

.bgimg_under-key01 {
	background-image:url(../img/otherpic/bg_under-A.png);
	background-repeat:no-repeat;
	background-position:center bottom;
}
.bgimg_under-color01 {
	background-image:url(../img/otherpic/line03.png);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-color02 {
	background-image:url(../img/otherpic/line02.png);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-color03 {
	background-image:url(../img/otherpic/line01.png);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-key_gif01 {
	background-image:url(../img/gifs/gif-music02.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-key_gif02 {
	background-image:url(../img/gifs/gif-music05.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-key_gif03 {
	background-image:url(../img/gifs/gif-music09.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-key_gif04 {
	background-image:url(../img/gifs/gif-music31.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-key_gif05 {
	background-image:url(../img/gifs/gif-music23.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-note_gif01 {
	background-image:url(../img/gifs/gif-music01.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-note_gif02 {
	background-image:url(../img/gifs/gif-music19.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-note_gif03 {
	background-image:url(../img/gifs/gif-music22.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}
.bgimg_under-note_gif04 {
	background-image:url(../img/gifs/gif-music12.gif);
	background-repeat:repeat-x;
	background-position:center bottom;
}

/*....box 中的字....*/

.team_title_box {
	font-family:"王漢宗特黑體繁", "王漢宗粗明體繁", Calibri, "Arial Black";
	text-align:center;
	padding:20px auto;
}
/*........字體大小............*/	

.w60 { font-size:60px; line-height:72px;}
.w48 { font-size:48px; line-height:60px;}
.w40 { font-size:40px; line-height:45px;}
.w36 { font-size:36px; line-height:40px;}
.w30 { font-size:30px; line-height:35px;}
.w24 { font-size:24px; line-height:30px;}
.w21 { font-size:21px; line-height:25px;}
.w18 { font-size:18px; line-height:23px;}
.w16 { font-size:16px; line-height:20px;}
.w14 { font-size:14px; line-height:18px;}
.w12 { font-size:12px; line-height:16px;}
.w10 { font-size:10px; line-height:14px;}

/*........旋轉角度 transform............*/

.turn5 {-webkit-transform: rotate(5deg);-moz-transform: rotate(5deg);-o-transform: rotate(5deg);-ms-transform:rotate(5deg);}
.turn10 {-webkit-transform: rotate(10deg);-moz-transform: rotate(10deg);-o-transform: rotate(10deg);-ms-transform:rotate(10deg);}
.turn20 {-webkit-transform: rotate(20deg);-moz-transform: rotate(20deg);-o-transform: rotate(20deg);-ms-transform:rotate(20deg);}
.turn30 {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-o-transform: rotate(30deg);-ms-transform:rotate(30deg);}
.turn-5 {-webkit-transform: rotate(-5deg);-moz-transform: rotate(-5deg);-o-transform: rotate(-5deg);-ms-transform:rotate(-5deg);}
.turn-10 {-webkit-transform: rotate(-10deg);-moz-transform: rotate(-10deg);-o-transform: rotate(-10deg);-ms-transform:rotate(-10deg);}
.turn-20 {-webkit-transform: rotate(-20deg);-moz-transform: rotate(-20deg);-o-transform: rotate(-20deg);-ms-transform:rotate(-20deg);}
.turn-30 {-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);-o-transform: rotate(-30deg);-ms-transform:rotate(-30deg);}


/*.............分隔線..............*/

.line-colorline {
	background: url(../img/otherpic/line03.png) repeat-x center transparent;
	margin:20px auto;}
		
.line-dot01 {
	background: url(../img/otherpic/line-dot_grey3.png) repeat-x center transparent;
	margin:20px auto;}

.line-dot02 {
	background: url(../img/otherpic/line-dot_grey2.png) repeat-x center transparent;
margin:20px auto;}

.line-dot03 {
	background: url(../img/otherpic/line-dot_grey1.png) repeat-x center transparent;
margin:20px auto;}

.line-dot04 {
	background: url(../img/otherpic/line-dot_sky3.png) repeat-x center transparent;
	margin:20px auto;}

.line-dot05 {
	background: url(../img/otherpic/line-dot_sky2.png) repeat-x center transparent;
	margin:20px auto;}

.line-dot06 {
	background: url(../img/otherpic/line-dot_sky1.png) repeat-x center transparent;
	margin:20px auto;}
	
.line-dot_blue {
	background: url(../img/otherpic/line-dot_blue.png) repeat-x center transparent;
	margin:20px auto;}

.line-dot_sky {
	background: url(../img/otherpic/line-dot_sky.png) repeat-x center transparent;
	margin:20px auto;}

.line-dot_orange {
	background: url(../img/otherpic/line-dot_orange.png) repeat-x center transparent;
	margin:20px auto;}

.line-dot_light {
	background: url(../img/otherpic/line-dot_light.png) repeat-x center transparent;
	margin:20px auto;}

.line-square_blue {
	background: url(../img/otherpic/line-square_blue.png) repeat-x center transparent;
	margin:20px auto;}
	
.line-square_color_light {
	background: url(../img/otherpic/line-square_color_light.png) repeat-x center transparent;
	margin:20px auto;}

.line-square_color {
	background: url(../img/otherpic/line-square_color.png) repeat-x center transparent;
	margin:20px auto;}

.line-square_green {
	background: url(../img/otherpic/line-square_green.png) repeat-x center transparent;
	margin:20px auto;}
	
.line-square_red {
	background: url(../img/otherpic/line-square_red.png) repeat-x center transparent;
	margin:20px auto;}
	
.line-music01 {
	background:url(../img/gifs/gif-music01.gif) repeat-x center  transparent;
	margin:10px auto; }
	
.line-music02 {
	background:url(../img/gifs/gif-music02.gif) repeat-x center  transparent;
	margin:10px auto; }

.line-music03 {
	background:url(../img/gifs/gif-music05.gif) repeat-x center  transparent;
	margin:10px auto; }
	
.line-music04 {
	background:url(../img/gifs/gif-music09.gif) no-repeat center  transparent;
	margin:10px auto; }
	


/*.............本文分成多列.............*/

.count2 { 
    -moz-column-count:2; /* Firefox */ 
    -webkit-column-count:2; /* Safari and Chrome */ 
    column-count:2; 
} 

.count3 { 
    -moz-column-count:3; /* Firefox */ 
    -webkit-column-count:3; /* Safari and Chrome */ 
    column-count:3; 
} 

.count4 { 
    -moz-column-count:4; /* Firefox */ 
    -webkit-column-count:4; /* Safari and Chrome */ 
    column-count:4; 
} 

/*.............本文之內距.............*/

.magin_lr10 { margin-left:10px; margin-right:10px;}
.magin_lr20 { margin-left:20px; margin-right:20px;}
.magin_lr30 { margin-left:30px; margin-right:30px;}
.magin_lr40 { margin-left:40px; margin-right:40px;}

/*........文字陰影............*/	

.w-shadow-1 {
	text-shadow:1px 1px 2px #212020 ;
	opacity:1;}
	
/*........區塊陰影............*/	

.box-shadow {
	box-shadow:2px 2px 0.5px #031E00;
    opacity:1;}
/*........imagehover 影像碰觸後之遮罩............*/	
.info-icons {margin-top:20%;}
.info-icons2 {margin-top:60%;}
.info-text,.info-text2 {margin: 0;	padding: 0;	text-align: center;}
.acdn-text {margin-top: 30%;	padding: 0;	text-align: center;}
.info-text p,.info-text2 p,.acdn-text p {
	position: relative;
	font-family: 'Maven Pro',sans-serif;
	padding: 0;
	margin: 0;
	text-shadow: 
		0 0 1px #F42428 
		0 1px 2px rgba(235,22,25,0.30);	
	}

.info-text p.title,.info-text2 p.title,.acdn-text p.title {
	font-size:18px;
	color:#F4EFCE;
	font-weight:600;
	margin-bottom:5px;
	letter-spacing:0.1em;
}

.info-text p.subtitle,.info-text2 p.subtitle,.acdn-text p.subtitle { font-size: 15px;letter-spacing:0.05em; }


/*..........water-box水波紋分隔線..........*/

.water-box {
    background-color:transparent;
    display: none !important;
    height: 100%;
    position: relative;
    width: 100%;
    border-radius: 4px;
	text-align:center;
	z-index:50;
}
.water10 {
    display: block !important;
	height:10px;}
.water15 {
    display: block !important;
	height:15px;}
.water20 {
    display: block !important;
	height:20px;}
.water5 {
    display: block !important;
	height:5px;}
.water25 {
    display: block !important;
	height:25px;}
.water30 {
	display: block !important;
	height:30px;}
	
	/*.....手風琴用.....*/
.water_titleboxA {
	display: block !important;
	height:20px;}
.water_titleboxB {
	display: block !important;
	height:20px;
	margin-top:-20PX;}
.water_titleboxC {
	display: block !important;
	height:10px;
	margin-top:-10PX;}

.water_up { position:absolute; text-align:center; vertical-align:bottom;}
.water_down { position:relative; text-align:center; vertical-align:bottom;}
/*........photo-list 照片列表............*/

.photo-list {height:70px;padding:0 0 0 0;}
.photo-list li { height:55px; overflow:hidden; position:relative;float:left;border:solid 2px #F5F5F5; margin:5px; cursor:pointer; display:flex;}
.photo-list li:hover {box-shadow: 2px 2px 15px #FC3453;border:solid 2px #03F317;}

/*........圖文編排 手風琴內............*/

ul.teamlist {
	margin-top: 5px;
	padding: 0;
	list-style: none;
	width: 100%;
	margin-bottom:5px;
	display:block;
}
ul.teamlist li {
	margin: 5px 5px 0 0;
	display:inline-flex;		
}
ul.teamlist li a img {
	border: 0;
	vertical-align: middle;
}
	
.paper-box {
	padding:8px 10px 10px 10px;
	text-align:left;}

.paper-box h4{
	font-size:18px;
	color:#F7E3E3;
	margin:0 0 1em;	
}
.paper-box h4 span{
	color:#000;
	font-size:0.7em;
}

.paper-box-left{
	float:left;
	width:30%;
	text-align:center;
	color:#F8EBF4;
	text-shadow:0.1px 0.1px 0.5px #8A037C;
}
.paper-box-left img{
	width:100%;
	border: 5px solid #f2f2f2;
}
.paper-box-left p{
	font-size:16px;
}

.paper-box-right{
	float:right;
	width:65%;
	text-align:left;
	vertical-align:top;
	color:#EDF9ED;
	text-shadow:0.1px 0.1px 0.2px #034D07;
}
.paper-box-right-down {	
	margin-bottom:2%;
	text-align:right;
}
	
.paper-box-right h5{
	font-size: 18px;	
	margin-top:10px;
	line-height:1.2em;
	color:#C3494B;
	font-weight:800;
}
	

.paper-box-right h6{
	font-size: 14px;	
	line-height:1.2em;
}

.paper-box-right p{
	font-size: 13px;	
	margin:0;
	line-height:1.1em;
}
.paper-right p a{
	color: #30D2EC;
}
.paper-right p a:hover{
	color: #8C8B8B;
}
.paper-right p span{
	display:block;
}
/*-----------------------------------------------------------------------------------*/
/*	08: MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/
@media (max-width: 979px) {
nav{ background:#39455b;}
.btn-navbar{display:block;}
.header{ float:none !important; text-align:center; margin:0px auto 0px auto; padding-bottom:10px!important;}
.header .container{min-width:100% !important;margin:0 !important;padding:0 !important;}
#main_menu{width:100%; display:block; margin:22px 0px 0 0;}
.logo  { margin-left: 20px;}
.nav-collapse .nav>li{width:auto;display:block;text-align:center;}
.nav-collapse .nav>li>a, .nav-collapse .dropdown-menu a {text-align:center;margin-bottom:2px !important;}
.nav-pills > li{border-top:1px solid #2C2C2C; z-index:2000;}
.nav-pills > li > a { margin: 10px 0px 0px 0px;}
.dropdown-menu{width:100%; margin:0px !important;}
.dropdown-menu > li > a{
	border: 0;
	width:auto;
	color: #bbb;
	display: block;
	padding:6px 0px !important;
	background-color: rgba(0,0,0,0.2);
}
.nav-pills > li.active{
	background: transparent; 
	color:#fff;
	webkit-border-radius: 0px 0px 0px 0px;
    -moz-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;
}
.dropdown-menu .sub-menu{width:100%!important; visibility: visible!important; }
.dropdown-menu li:hover .sub-menu { left:0px; }
.dropdown-menu .sub-menu li:first-child  {margin-top:0px;}
.dropdown-menu .sub-menu li:last-child{margin-bottom:0px;}
.dropdown-menu  li:last-child{margin-bottom:0px;}

.container {  padding: 0 15px !important;}
.nivo {margin-top:0px!important;}
#banner { padding-bottom:25px!important; }
}

@media (min-width: 768px) and (max-width: 979px) {
.info-icons {margin-top:13%;}
.info-icons2 {margin-top:36%;}
.info-text p.title {font-size:15px;	margin-bottom:2px;letter-spacing:0.05em;}
.info-text2 p.title {font-size:12px;	margin-bottom:2px;letter-spacing:0.05em;}
.info-text p.subtitle { font-size: 11px;letter-spacing:0.02em; }
.info-text2 p.subtitle { font-size: 9px;letter-spacing:0.02em; }
.introduction-title {font-size:16px; line-height:20px;}
.music-leader{font-size:18px; line-height:20px;}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
/* prettyPhoto styling for small screens */
.pp_pic_holder.pp_default { width: 100%!important; left: 0!important; overflow: hidden; }
div.pp_default .pp_content_container .pp_left { padding-left: 0!important; }
div.pp_default .pp_content_container .pp_right { padding-right: 0!important; }
.pp_content { width: 100%!important; height: auto!important; }
.pp_fade { width: 100%!important; height: 100%!important; }
a.pp_expand, a.pp_contract, .pp_hoverContainer, .pp_gallery, .pp_top, .pp_bottom { display: none!important; }
#pp_full_res img { width: 100%!important; height: auto!important;	border-radius:0px;  }
.pp_details { width: 94%!important; padding-left: 3%; padding-right: 4%; padding-top: 10px; padding-bottom: 35px; background-color: #fff; margin-top: -2px!important; }
a.pp_close { right: 10px!important; top: 12px!important; }
.theme-default .nivo-html-caption {display:none;}
#banner h1.title { font-size:36px;}
#banner h2.title { font-size:30px;}
#banner h2 { font-size:18px; line-height:26px}
.count2,.count3,.count4 { -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ column-count:1;} 
.holder { margin:20px 0 24px;text-align:left; }
.holder a { 
	font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
	cursor:pointer;
	color:#555;
	display:inline-block;
	border-radius:4px;
	padding:4px 10px;
	background:transparent;
	border:2px solid #767676;
	text-transform:uppercase;
	margin-right:6px; 
}
}

@media only screen and (max-width: 480px) { 
.nivo_height { padding-top:0px!important; }
#banner { padding-bottom:25px!important; }
.home_welcome {	font-size: 20px;}
.program-title {font-size:15px; line-height:18px;}
.introduction-title {font-size:15px; line-height:18px;}
.music-leader{font-size:16px; line-height:18px;}
.popup-video h1 {font-size:20px;letter-spacing:0.03em;}
.popup-video p {font-size:14px;}
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width : 320px ){
h1.title { line-height:40px!important; }
#banner h1.title { font-size:32px;}
#banner h2.title { font-size:22px;}
#banner h1 { font-size:20px;}
#banner h2 { font-size:16px; line-height:20px}
.home_welcome {	font-size: 18px;}
.accordion-group h3 { font-size:15px; line-height:18px}
.accordion-group h4 { font-size:13px; line-height:16px}
.accordion-group h5 { font-size:13px; line-height:16px}
.accordion-group h6 { font-size:11px; line-height:13px}
.btn-slider-video { font-size:11px; padding:2px 2px 2px; margin-top:5px; }
.popup-video h1 {font-size:20px;letter-spacing:0.03em;}
.popup-video p {font-size:14px;}
}

@media screen and (min-width: 480px) and (max-width: 768px){
.rev-title { font-size: 16px; line-height: 22px; } 
.rev-title.big { font-size: 24px; line-height: 28px;}
.rev-title.bold { font-size: 50px!important; padding:12px 10px!important; letter-spacing: 4px; }
.rev-title2.bold { font-size: 50px!important;}
}

@media screen and (max-width: 479px){
.rev-title { font-size: 10px; line-height: 14px; }
.rev-title.big { font-size: 16px; line-height: 20px; }

}

@media screen and (max-width: 31.5em) {
.grid { padding: 0px 0px 10px; }
.grid li { width: 80%; min-width: 280px; margin-left: -3px; }
.dzsportfolio.skin-clean { width: 100%!important; }
.rev-title.bold { font-size: 20px!important; letter-spacing: 4px; padding: 8px 8px!important; }
.rev-title2.bold { font-size: 20px!important; margin-top:-10px; }
.rev-title-sub { margin:10px 0 0!important; }
.mobile{ margin-top:-20px; }

}