@charset "utf-8";
@import url("style.css");
@import url("reset.css");
@import url("loading.css");
@import url("tip-yellow/tip-yellow.css");
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

html { height:100% }
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-y:scroll }
body, td, th { font-size:12px; font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif; }

input, label, select, option, textarea, button, fieldset, legend { font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif; }

/*fix safari*/
/*
input, select, textarea{ -ms-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-box-sizing:content-box;  -webkit-appearance: none; }
*/

/*提示文字內容*/
#tip_box { position: fixed; line-height:22px; background-image:url(../../images/action_bg.png); letter-spacing:1px; color: #FFF; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:5px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-left:10px; }
/*提示圖片處理*/
.tip { cursor:pointer; cursor:hand }

.iframe_ch { display:none }
.w100{ width:100%; }
.middle{ vertical-align:middle; }
.fix-margin{ margin-top:80px; }
.pager{ width:100%; margin:50px auto; text-align:center; }

.container_bg{ background:url(../../images/container_bg.png); background-position:right; }
.container_bg2{ background:url(../../images/container_bg.png); background-position:right; }

/*共用大標題*/
.title_line{ display:inline-block; width:103px; height:4px; background:#000; margin:0 0 10px 0;}
.big_title{font-size: 24px;color:#3e3e3e;letter-spacing: 3px;line-height: 25px;margin:0 0 25px 0;}
.big_title span{ font-size:16px; color:#bdbdbd; padding:0 20px; letter-spacing:1px; }

/*共用按鈕*/

.common_btn{ background:#3e3e3e; color:#fff; font-size:14px; display:inline-block; padding:10px 40px; margin-top:10px; border:0; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor:hand; cursor:pointer; -webkit-appearance: none;}
.common_btn:hover{ background:#191818; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

.common_btn2{ background:#978d7d; color:#fff; font-size:15px; display:inline-block; height:40px; line-height:40px; padding:0 40px; margin-top:10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor:hand; cursor:pointer;-webkit-appearance: none; }
.common_btn2:hover{ background:#77674e; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

/*Google快速登入BTM*/
.common_btn3{ background:#E54026; color:#fff; font-size:14px; display:inline-block; padding:0px 40px; margin-top:10px; border:0; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor:hand; cursor:pointer;-webkit-appearance: none; }
.common_btn3:hover{ background:#191818; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }


/*表格*/
table.table_list1{ margin:0; width:90%; }
table.table_list1 td{ padding:0 5%; line-height:40px; color:#67563a; font-size:15px; letter-spacing:1px; vertical-align:top; word-break:break-all; }
table.table_list1 .td1{ max-width:150px; padding-left:5%; color:#67563a; font-weight:bold; }
table.table_list1 .td2{ max-width:150px; padding:0 0%; color:#67563a; font-weight:bold; text-align:right; }
table.table_list1  input[type="text"] , 
table.table_list1  input[type="password"],
table.table_list1  input[type="file"]
{ width:100%; height:25px; border:1px solid #dcdcdc; font-size:15px; letter-spacing:1px; padding:0 5px; color:#333; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }
table.table_list1  select { width:100%; height:25px; border:1px solid #dcdcdc; font-size:15px; letter-spacing:1px; padding:0 5px; color:#333; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }

table.table_list1  .textarea { width:100%; height:125px; border:1px solid #dcdcdc; font-size:15px; letter-spacing:1px; padding:0 5px; color:#333; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }


table.table_list2{ margin:0; width:100%; border-collapse:separate;}
table.table_list2 th:first-child{
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
table.table_list2 th:last-child{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
table.table_list2 tr:nth-child(even) {
    /*background-color: #EBEBEB;*/
}
table.table_list2 .th_frame{ background:#978D7D; }
table.table_list2 .th_frame2{ background:#fff !important; }
table.table_list2 th{ font-size:16px; letter-spacing:1px; padding:6px 0 4px 0; color:#fff; margin-bottom:10px; }
table.table_list2 th a{ color:#fff; }
table.table_list2 td{ text-align:center; font-size:15px; letter-spacing:1px; padding:8px 0; }
table.table_list2 td a{ color:#67563a; text-decoration:none; }
table.table_list2 td a:hover{ text-decoration:underline; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Common <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

/*PageLoad*/
#wrapper { position:relative; opacity:0; overflow:hidden; background:url(../../images/bg.jpg) repeat; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; }
#wrapper.load { opacity:1; }

.overlay { position:absolute; display:none; width:100%; height:100%; z-index:9999999; top:0; left:0; background-color: rgba(0, 0, 0, 0.5); transition: 0.5s; }


#header{ position:fixed; width:100%; background:#3e3e3e; z-index:999999; }
#header .header_wrap{ position:relative; max-width:1200px; height:80px; margin:0 auto; }
#header .header_wrap a{ color:#FFF; text-decoration:none; }
#header .header_logo{ position:absolute; left:0; bottom:0; }
#header ul{ position:absolute; color:#FFFFFF; margin:0; padding:0; list-style:none; left:220px; top:23px; }
#header ul li{float:left;margin: 0px 0px; padding: 0 0 20px 0; width:112px; font-size: 17px; line-height: 20px;letter-spacing:1px;text-align:center;cursor:hand;cursor:pointer;}
#header ul li span{ font-size:13px; -webkit-transform:scale(0.73); display:inline-block; }
#header ul li .arrow:hover:before{ content:url(../../images/arrow.png); }

#subnav{ position:absolute; right:1%; top:13px; color:#bdbdbd; letter-spacing:1px; font-size:14px; }
#subnav a{ color:#bdbdbd; text-decoration:none; }
#subnav a:hover{ text-decoration:underline; }
#subnav span{display:inline-block;background:#978d7d;color:#fff;letter-spacing:1px;margin: 5px 0 0 0px;opacity:0.8;padding: 3px 12px 1px 5px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }
#subnav span img{ vertical-align:middle; padding:0 5px; }
#subnav span a{ color:#fff; text-decoration:none; }
#subnav span a:hover{ text-decoration:underline; }


#footer{ width:100%; overflow:hidden; background:#3e3e3e; padding:33px 0 0 0; }
#footer .footer_wrap{ position:relative; max-width:1200px; overflow:hidden; margin:0 auto; padding:0 10px; background:url(../../images/footer_bg.jpg) bottom no-repeat; }
#footer .footer_logo{float:left;padding: 0 15% 0 0;}
#footer .footer_logo img{ max-width:209px; width:100%; }
#footer .footer_menu{float:left;overflow:hidden;width: 770px;padding:0 0 10px 0;}
#footer .footer_menu_item{float:left;width: 150px;min-height:100px;padding: 0 54px 0 0;}
#footer .footer_menu_title{background:url(../../images/footer_icon.png) no-repeat;position:relative;color:#91ceeb;font-size:16px;letter-spacing:1px;padding: 7px 0px 10px 5px;color:#c6b498;font-weight:bold;}
#footer .footer_menu_item a{ display:block; padding:5px 5px; color:#e8e8e8; text-decoration:none; font-size:13px; letter-spacing:1px; }
#footer .footer_menu_item a:hover{ color:#fff; text-decoration:underline; }
#footer .footer_info{ float:left; width:220px; color:#e8e8e8; letter-spacing:1px; line-height:24px; font-size:13px }
#footer .footer_info span{ display:block; padding:0 0 8px 0; color:#c6b498; font-size:13px; line-height:16px; }
#footer .footer_link{ width:100%; text-align:center; clear:both;  }

#copyright{color:#ADADAD;width:100%;text-align:left;padding:20px 0;letter-spacing:1px;line-height: 33px;}
#copyright a{ color:#ADADAD; }
#copyright span{display:inline-block;width:70px;height: 30px;/* padding-top: 8px; */border-right:1px solid #7E7E7E;margin-right:10px;float:left;}

.styled-select { width: 135px; height: 40px; overflow: hidden; color:#9E8A71; background: url(../../images/arrow.jpg) no-repeat right #fff; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; letter-spacing:1px; font:12px/18px 'Rosarivo', '微軟正黑體', sans-serif; font-size:14px; padding:0 0 0 5px; }
.styled-input { width: 200px; height: 40px; overflow: hidden; color:#9E8A71; border:1px solid #A9A9A9; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; letter-spacing:1px; font:12px/18px 'Rosarivo', '微軟正黑體', sans-serif; font-size:14px; padding:0 0 0 5px; }

.music_search_tips{ margin:10px 0 10px 0; border:1px solid #EBEBEB; text-align:left; padding:0 20px; /*background-color: rgb(0,0,0); background-color: rgba(154, 136, 94, 0.95);*/ width:100%; box-sizing:border-box; min-height:200px; overflow:hidden; }

#hideMenu{position:fixed;top:0;right:0;width:260px; background: #fff;display:none;z-index:999999999;overflow-y:auto; height:100%;}
#hideMenu .bTitle{width:100%;padding: 3px 0;text-align:center;font-size:30px;background:#3E3E3E;color:#FFF;letter-spacing:5px;cursor:pointer;border-bottom:1px solid #EBEBEB;}
#hideMenu ul{ list-style:none; margin:0; padding:0; }
#hideMenu ul li{ position:relative; display:inline-block; width:100%; background:#fff; border-bottom:1px solid #EBEBEB; color:#000; font-weight:bold; padding:15px 10px 15px 10px; box-sizing:border-box; font-size:16px; letter-spacing:1px; border-bottom:2px solid #FFF; cursor:hand; cursor:pointer; }
#hideMenu ul li:hover{ background:#F5F5F3; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#hideMenu ul li span{ position:absolute; right:5px;  font-size:15px; color:#BCAF8C; }
#hideMenu ul li a{ color:#000; text-decoration:none; }

/*子選單*/
#hideMenu ul div a::before { content: "☛ ";}
#hideMenu ul div{ display:none; font-size:16px; font-weight:normal; letter-spacing:1px; padding:0; line-height:25px; }
#hideMenu ul div a{ display:inherit; padding:8px 10px; text-decoration:none; color:#000;  border-bottom:1px solid #EBEBEB; background:#fff; }
#hideMenu ul div a:hover{ color:#D53B31;}

/*站內音樂子選單*/
#submenu{ display:none; position:fixed; top:80px; left:0; width:100%; margin:0 auto; max-height:90%; overflow:hidden; background:url(../../images/menu_bg.png); background-size:cover; z-index:999999; }
#submenu .subtitle{ border-bottom:1px solid #6c645e; margin-bottom:12px; font-size:17px; padding-bottom:10px; letter-spacing:1px; color:#f4dcb6; }
#submenu .submenu_wrap{ max-width:1200px; overflow:hidden; margin:0 auto; color:#fff; font-size:15px; letter-spacing:1px; padding:50px 20px;  }
#submenu .submenu_item{ width:180px; margin:0 50px 30px 0; overflow:hidden; float:left; text-align:left; }
#submenu .submenu_item a{ display:block; padding:5px 0; color:#9e9e9e; text-decoration:none; letter-spacing:1px; }
#submenu .submenu_item a:hover{ color:#ffffff; text-decoration:underline; }

#submenu span{display:inline-block;margin:5px 0;color:#fff;color: #f4dcb6;letter-spacing:2px;font-size: 22px !important;padding: 10px 200px;border:2px solid #978d7d;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;cursor:hand;cursor:pointer;}
#submenu span:hover{ color:#edd6b2; background:#5d5959; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

#top{position:fixed; bottom:100px; right:15px;}

/*首頁Banner*/
#banner_box{
  width:100%;
  overflow:hidden;
}
#banner{ position:relative; width:100%; overflow:hidden;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}

#banner.banner_load {
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.15, M12=0, M21=0, M22=1.15, SizingMethod='auto expand')"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.15, M12=0, M21=0, M22=1.15, SizingMethod='auto expand'); /* IE6 and 7 */ 
} 

#banner .banner_wrap{ position:relative; max-width:1200px; height:203px; overflow:hidden; margin:0 auto; }
#banner span{display:none; position:absolute;width: 95%; bottom: 10%;right: 2px;color:#f4dcb6;/* font-weight:bold; */font-size:40px;}
#banner span u{ text-decoration:none; color:#FFF; font-size:30px; padding:0 30px; }
#banner .banner_line{ display:none; border-top:3px solid #f4dcb6; width:90px; left:5%; bottom:30%; right:0; }

#container{ width:100%; background:#fff; }
#container .container_wrap{ max-width:1200px; margin:0 auto; padding:50px 0; }

#container .contain_full{ width:100%; float:left; margin:0 0 30px 3%; }
#container .contain_left{ max-width:250px; width:20%; float:left; box-sizing:border-box; padding:0 1%; }
#container .contain_right{ position:relative; max-width:950px; width:75%; float:left; margin:0 0 30px 3%; }
#container .contain_bg{ max-width:950px; width:100%; overflow:hidden; background:#f5f3ef;  }

/*左選單*/
.menu_btn{ display:block; position:relative;max-width:205px;color:#FFF;padding: 10px 8px;font-size: 16px;letter-spacing: 1px;background:#978d7d;margin:0 0 20px 0;cursor:hand;cursor:pointer;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
.menu_btn a{ color:#FFF; text-decoration:none; }
.menu_btn:hover{ background:#6a6459; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.menu_btn span{position:absolute;right:5px;padding: 0 0 0 10px;}

/*左選單 - 音樂分類*/
.menu_btn2{ position:relative;max-width:205px;color:#FFF;padding: 10px 8px;font-size: 16px;letter-spacing: 1px;background:#978d7d;margin:0 0 10px 0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;}
.menu_btn2 a{ color:#FFF; text-decoration:none; }
.menu_btn2 .jq-left-submenu{display: inline-block;padding: 10px 15px;position:absolute;top: 0px;right: 0px;}
.menu_btn2_search{ position:relative;max-width:205px;color:#FFF;padding: 10px 8px;font-size: 16px; text-align:center; letter-spacing: 5px;background:#3E3E3E;margin:0 0 10px 0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px; cursor:pointer; }
.menu_btn2_search:hover{ opacity:0.9; }
.menu_btn2_tips{ position:relative;max-width:205px;color:#3E3E3E;padding: 10px 8px;font-size: 12px; line-height:18px; text-align:left; letter-spacing: 5px;background:#ebebeb;margin:0 0 10px 0;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px; }


.submenu_btn{width:100%;overflow:hidden;background:#f1f1f1;margin: 0 0 10px 0;}
.submenu_btn span{ display:block; padding:10px 5px; color:#3e3e3e; margin:0 5px; font-size:15px; border-bottom:1px solid #d7cfc2; }
.submenu_btn span a{ color:#3e3e3e; text-decoration:none; }
.submenu_btn span a.on{ color:#cb8311; }
.submenu_btn span a:hover{ color:#cb8311; }

/*右內容*/
.editor{width:100%; overflow:hidden; line-height:30px; /*min-height:100px;*/ font-size:14px; letter-spacing:1px; right:0; padding:0 40px 30px 40px; box-sizing:border-box;}
.editor_bg{ background:url(../../images/contain_bg.png) repeat-y right;background-position: 100.5% 4px; padding:30px 40px 30px 40px; }


/*Overlay Menu*/

#tag_music{display:none;position:fixed; top:100px; left:-50px; width:110px; background:#000000; color:#FFF; padding:10px 15px 10px 15px; box-sizing:border-box; letter-spacing:1px; font-size:15px; opacity:0.8; cursor:hand; cursor:pointer;
-webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;transition: 0.3s;
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl; 
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
#tag_music:hover{ opacity:1;/* left:0px;*/ }

.overlay1 { /*margin-top:80px;*/ height: 100%; width: 0%; position: fixed; overflow:auto; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(154, 136, 94, 0.95); overflow:auto; transition: 0.5s; z-index: 9999999; }
.overlay1-content { position: relative; top: 0%; width: 100%; text-align: center; }
.overlay1 a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
.overlay1 a:hover, .overlay1 a:focus { color: #f1f1f1; }
.overlay1 .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; }
.overlay1-close{ position:absolute; right:15px; top:15px; }
.overlay1-title{ width:100%; height:50px; margin-top:50px; }
.overlay1-title span{ color:#FFF; border-bottom:2px solid #FFF; font-size:20px; letter-spacing:1px; }
.overlay1_options{ width:80%; margin:0 auto;}
.overlay1_item_search{position:relative;text-align:left;padding:15px 5px;color:#EAEAE8;border-bottom:1px solid #d2d2d2;font-size:15px;letter-spacing:1px;cursor:hand;cursor:pointer;text-align: center;background: #3E3E3E;}
.overlay1_item_search:hover{ opacity:0.9; }
.overlay1_item_tips{position:relative;text-align:left;padding:15px 5px;color:#EAEAE8;background: darkgrey;border-bottom:1px solid #d2d2d2;font-size:15px;letter-spacing:1px;}

.overlay1_item{ position:relative; text-align:left; padding:15px 5px; color:#EAEAE8; border-bottom:1px solid #d2d2d2; font-size:15px; letter-spacing:1px; cursor:hand; cursor:pointer; }
.overlay1_item a{ font-size:15px; color:#fff; }
.overlay1_item span{ position:absolute; right:0; top:25px; padding:0 5px; font-size:25px; }
.overlay1_item:hover{ background:#90805A; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.overlay1_event{ width:100%; display:none; background:#E3DAC7; font-size:15px; text-align:left; padding:20px; box-sizing:border-box; }
.overlay1_event span{ display:inline-block; }
.overlay1_event a{ display:inline-block; font-size:15px; }
.overlay1_event a:hover{ color:#818181; text-decoration:underline; }

	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   		color:#9E8A71;
	}
	::-moz-placeholder { /* Firefox 19+ */
   		color:#9E8A71;
	}
	:-ms-input-placeholder { /* IE 10+ */
   		color:#9E8A71;
	}
	:-moz-placeholder { /* Firefox 18- */
   		color:#9E8A71;
	}	

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

	#footer .footer_menu{ display:none; }
	#footer .footer_logo{ float:none; text-align:left; padding:0 30px 10px 0; }
	#footer .footer_info{ float:left; text-align:left; width:100%; margin:20px 0;}	

	.subnav_normal{ display:none; }
}

@media screen and (min-width: 1200px) {

	.subnav_mobile{ display:none; }
}

@media screen and (max-width: 1024px) {
	
	#subnav{ right:70px;}
	#container .contain_left{ display:none; }
	#container .contain_right{ width:95%; margin:0 0 30px 2.5%; }
	
}

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

	table.table_list1 .td1{ width:90px;}
	#footer .footer_logo{ padding:0 0 10px 0; }	
	.editor{ padding:0 0 20px 0; }
	table.table_list1{ width:100%;}		
	.none768{ display:none; }	
	.show768{ display:;}
	#copyright{ line-height:15px; }			
}
@media screen and (min-width: 768px) {
	.show768{ display:none;}
}

@media screen and (max-width: 480px) {
	#banner span{ font-size:20px;}
	#banner span u{ font-size:16px; }
	#banner .banner_wrap{ height:130px;}
	table.table_list1 .td1{ display:none; }
	table.table_list1{ width:100%;}
	.none480{ display:none; }

}

@media screen and (min-width: 480px) {
	
	::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   		/*color: transparent;*/
	}
	::-moz-placeholder { /* Firefox 19+ */
   		/*color: transparent;*/
	}
	:-ms-input-placeholder { /* IE 10+ */
   		/*color: transparent;*/
	}
	:-moz-placeholder { /* Firefox 18- */
   		/*color: transparent;*/
	}		
	
}




/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Index <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

#search{ width:100%; background:url(../../images/search.jpg); }
#search .search_wrap{ max-width:1200px; height:105px; margin:0 auto; box-sizing:border-box; padding:35px 0; color:#FFF; font-size:24px; letter-spacing:1px; }
#search span{ vertical-align:middle; vertical-align:-webkit-baseline-middle; margin:0; padding:0 10px; }
#search .search_btn{ background:#3E3E3E; color:#DBD3C6; font-size:14px; display:inline-block; padding:10px 20px; margin-top:-10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor:hand; cursor:pointer; }
#search .search_btn:hover{ background:#232222; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
#search .search_btn img{ padding:0 5px;}

#index_news{ width:100%; background:#FFFCF7; }
#index_news .index_news_wrap{ max-width:1200px; margin:0 auto; padding:50px 5px; }
.index_news_area{ width:100%; overflow:hidden; }
.news_list_left{ float:left; width:20%; box-sizing:border-box; padding:0 2%; }
.news_list_right{ float:left; width:80%; }
.news_list{ border-bottom:1px solid #d9cebd; color:#3e3e3e; font-size:16px; letter-spacing:1px; padding:6px 0; }
.news_list a{ color:#3e3e3e; text-decoration:none; width:80%; display:inline-block; padding:3px 0; }
.news_list a:hover{ color:#978d7d; }
.news_list span{color:#828181; box-sizing:border-box; padding:10px 40px 10px 0; margin:10px 0;}
.news_list_more{ width:100%; overflow:hidden; }
.news_list_more span{ float:right; margin:25px 0; color:#978d7d; letter-spacing:1px; font-size:16px; padding:15px 10px; border:1px solid #978d7d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor:hand; cursor:pointer; }
.news_list_more span:hover{ color:#fff; background:#978d7d; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

#index_case{ width:100%; background:#efdec4; }
#index_case .index_case_wrap{ max-width:1200px; margin:0 auto; padding:50px 0; }
.index_case_area{ width:100%; overflow:hidden; margin:0 auto; }
.case_item{ float:left; width:45%; overflow:hidden; margin:2%; }
.case_title{ margin:9px 0 5px 0; font-size:18px; letter-spacing:1px; }
.case_title img{ padding-right:10px; }
.case_title a{ color:#000; text-decoration:none; }
.case_title a:hover{ text-decoration:underline; }
.video_area{ width:45%; margin:30px 2%; float:left; }
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
}

#index_about{ width:100%; min-height:657px; background:url(../../images/about_bg.jpg) no-repeat; background-position:center; background-size:cover; }
#index_about .index_about_wrap{ max-width:1200px; margin:0 auto; padding:50px 10px; }
.index_about_area{ width:50%; color:#fff; letter-spacing:1px; line-height:30px; font-size:15px;}
.index_about_area span{ display:inline-block; margin:30px 0; color:#fff; letter-spacing:1px; font-size:16px; padding:10px 10px; border:1px solid #978d7d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor:hand; cursor:pointer; }
.index_about_area span:hover{ color:#978d7d; background:#fff; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }

#index_client{ width:100%; background:#fff; }
#index_client .index_client_wrap{ max-width:1200px; margin:0 auto; padding:50px 0; width:100%; overflow:hidden; }
#index_client .client_container{ text-align:center; }
#index_client .client_square{ margin:10px; text-align:center; display:inline-block; }
#index_client .client_square img{ max-width:220px; width:100%; }

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

	#search{ display:none;}
	.index_about_area{ width:80%; }
}

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

	.title_line{ display:none; }
	.big_title{ margin:20px 0 20px 0; text-align:center; font-weight:bold; }
	
	.news_list_left{ display:none; }
	.news_list_right{ width:100%; }
	.news_list a{ width:100%; padding:6px 0 0 0; }
	
	.index_about_area{ margin:0 auto; }	
	#index_client .client_square{ width:40%; margin:5px; }
	
	.video_area{ float:none; width:95%;}	
			
}

@media screen and (max-width: 480px) {
	#index_news .index_news_wrap{ padding:50px 5px 20px 5px;}
	.case_item{ width:95%; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Contact <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contact_title{ background:#978d7d; padding:5px 10px; color:#fff; letter-spacing:1px; font-size:14px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#contact_table{ width:100%; }
#contact_table td{ font-size:15px; letter-spacing:1px; padding:8px 5px;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Music Type <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.curreny_area{ position:absolute; top:0; right:0; color:#978d7d; font-size:15px; letter-spacing:1px; }
.music_map{ width:100%; color:#FFF; background:#978d7d; font-size:15px; letter-spacing:1px; border:1px solid #978d7d; padding:8px 10px; box-sizing:border-box; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.music_map a{ color:#fff; text-decoration:none; }
.music_arrow{padding: 1px 7px 0px 9px;background:#fff;border:1px solid #978d7d;font-size: 21px;color:#978d7d;cursor:hand;cursor:pointer;-webkit-border-radius: 17px;-moz-border-radius: 17px;border-radius: 17px; -webkit-appearance: none;}
.music_arrow:hover{ background:#978d7d; color:#fff; }

/*表單select*/
.form_Select { margin-left:5px;margin-right:5px;letter-spacing:1px; height:32px; font-size:12px; font:14px/18px 'Rosarivo', '微軟正黑體', sans-serif;}


@media screen and (max-width: 768px) {
	.curreny_area{ position:inherit; text-align:right; margin-bottom:30px; overflow:hidden; }
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Music View <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.music_view_left{ float:left; width:40%; text-align:center; }
.music_view_right{ float:left; width:55%; }

#music_table{ width:100%; }
#music_table th{ text-align:left; color:#978d7d; font-size:15px; letter-spacing:1px; height:35px; }
#music_table td{ font-size:15px; letter-spacing:1px; }
#music_table select{ width:90%; max-width:333px; background:#f1f1f1; font-size:15px; letter-spacing:1px; border:0; padding:5px; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius:5px; }

@media screen and (max-width: 768px) {
	.music_view_left{ float:none; width:100%; text-align:left; }
	.music_view_right{ width:100%; }
}
@media screen and (max-width: 480px) {
	.music_view_left{ text-align:center; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Music Cart <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cart_pay_type{ padding:5px 0; }


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> News <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/


#news_list{ width:100%; padding: 5px 0 5px 0; overflow:hidden; border-bottom:1px dashed #b2b2b2; }

.news_list_type{ float:left; /*max-width:30px;*/ padding:0 10px 0 10px; color:#50839a;  font-size:15px; }
.news_list_date{ float:left; max-width:100px; padding:0 10px 0 10px; letter-spacing:2px; font-size:15px; }
.news_list_type span{ border:1px solid #50839a; padding:3px 5px; -webkit-border-radius:7px; -moz-border-radius:7px; border-radius:7px; }
.news_list_title{ float:left; width:60%; padding:0 10px 0 10px; line-height:32px; letter-spacing:1px; }
.news_list_title a{ color:#444444; text-decoration:none; }
.news_list_title a:hover{ color:#025074; }


@media screen and (max-width : 768px) {
	.news_list_date{ display:none;}
	.news_list_title{ float:none; width:90%;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Search <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.search_btn1{ background:#3E3E3E; color:#DBD3C6; font-size:14px; display:inline-block; padding:8.5px 20px; box-sizing:border-box; margin-top:-10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor:hand; cursor:pointer; }
.search_btn1:hover{ background:#232222; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s; }
.search_btn1 img{ padding:0 5px;}

.search_input{border:1px solid #978d7d;width:70%;height:45px;padding: 0px 5px;font-size:15px;margin: 15px 0;letter-spacing:1px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.search_select { width: 100%; height: 40px; overflow: hidden; color:#9E8A71; background: url(../../images/arrow.jpg) no-repeat right #fff; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; letter-spacing:1px; font:12px/18px 'Rosarivo', '微軟正黑體', sans-serif; font-size:16px; padding:0 0 0 5px; }

.search_number{ width:40px; height:40px; line-height:40px; color:#FFF; text-align:center; font-size:30px; background:#978d7d; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }

table.table_search{ width:70%; }
.search_select{ font-size:16px; color:#9E8A71; padding:0 0 0 5px; cursor:pointer; cursor:hand; }
.search_frame{ font-size:15px !important; border:1px solid #CCC; padding:10px; }

table.table_search td{ height:70px; font-size:24px; color:#a59c8e; }
.search_frame span{padding:5px 0;}

.keyword-list{
    display: flex;
}
.keyword-list .left{
    display: flex;
    align-items:center;
    justify-content: center;
}
.keyword-list .right{}
.keyword-list .right a{display: inline-block;border: 1px solid #978D7D;color: #ffffff;background: #978D7D;margin: 5px 0px;text-decoration: none;cursor: pointer;padding: 3px 20px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;}
.keyword-list .right a:hover{ background:#827C74; transition: all 0.5s ease; }


@media screen and (max-width: 768px) {
	.search_input{ width:90%; }
	.search_btn1{ text-align:center; width:92%; }
	table.table_search{ width:100%; }
			
}

@media screen and (max-width: 480px) {
	.search_btn1{ text-align:center; width:94%; }
	table.table_search td{ font-size:14px;}
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Member <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.contact_text_c{ max-width:100px; }

/*music_menu*/
.course_menu_left_a { list-style:none; margin:0px; padding-left:15px; letter-spacing:1px; }
.course_menu_left_b { padding-left:3px; font-size: 12px; ; padding-top:2px; letter-spacing:1px; }
.course_menu_left_c { list-style:none; margin:0px; padding-left:15px; }

/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Mobile Menu <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.mobile_menu { z-index:9; display:none; width:80px; text-align:center; height:auto; cursor:hand; cursor:pointer; position:absolute; right:0; top:12px;}
.bar1, .bar2, .bar3 { display: block; height: 5px; width: 40px; background: #ffffff; margin: 10px auto; }
.mobile_con { width: auto; margin: 0 auto;  -webkit-transition: all .7s ease;
 -moz-transition: all .7s ease;
 -ms-transition: all .7s ease;
 -o-transition: all .7s ease;
 transition: all .7s ease;
}
.middle { margin: 0 auto; }
.bar1, .bar2, .bar3 {  -webkit-transition: all .7s ease;
 -moz-transition: all .7s ease;
 -ms-transition: all .7s ease;
 -o-transition: all .7s ease;
 transition: all .7s ease;
}
.mobile_con .top { -webkit-transform: translateY(15px) rotateZ(45deg); -moz-transform: translateY(15px) rotateZ(45deg); -ms-transform: translateY(15px) rotateZ(45deg); -o-transform: translateY(15px) rotateZ(45deg); transform: translateY(15px) rotateZ(45deg); }
.mobile_con .bot { -webkit-transform: translateY(-15px) rotateZ(-45deg); -moz-transform: translateY(-15px) rotateZ(-45deg); -ms-transform: translateY(-15px) rotateZ(-45deg); -o-transform: translateY(-15px) rotateZ(-45deg); transform: translateY(-15px) rotateZ(-45deg); }
.mobile_con .middle { width: 0; }


@media screen and (max-width : 1024px) {
	.mobile_menu {display: block; }
	#header ul{ display:none; }
	#tag_music {display: block; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Bxslider <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

ul.bxslider { margin:0; padding:0; }
#home_banner { 
  margin-top:80px;
  /*  display: inline-block;  會多一個空白*/
   width: 100%; /*max-height: 750px;*/
  overflow: hidden; position: relative; }
#home_banner li { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center;   /*height: 1000px;*/
	-webkit-transition:transform .5s ease;
 -moz-transition:transform .5s ease;
 -o-transition:transform .5s ease;
 -ms-transition:transform .5s ease;
 transition:transform .5s ease;
}
#home_banner img { display: block; }
#home_banner .bxslider { opacity: 0; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a:hover, #home_banner .bx-wrapper .bx-pager.bx-default-pager a.active { background: white; border:2px solid transparent; }
#home_banner .bx-wrapper .bx-pager.bx-default-pager a { background-color: transparent; border:2px solid white; width: 12px; height: 12px; margin: 0 8px; border-radius: 50%;  -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
 -o-transition: all .5s ease;
 -ms-transition: all .5s ease;
 transition: all .5s ease;
}
#home_banner .bx-wrapper .bx-pager { bottom: 32px; opacity: 0; }
#home_banner .word { cursor:hand; cursor:pointer; font-size: 20px; text-align:center; position: absolute; left: 15%; right: 15%; top: 23%; color: #fff; letter-spacing: 2px; line-height:25px; opacity: 0.2; }
#home_banner .word span{ font-size: 36px; line-height:45px; margin-bottom:20px; display:inline-block; }
#home_banner .word b { font-weight: bold; }
#home_banner .down { position: absolute; right: 30px; bottom: 32px; width: 34px; height: 28px; z-index: 99; cursor: pointer; opacity: 0; }
#home_banner .down img { display: block; }

#container{ max-width:1200px; margin:0 auto 0 auto; }

@media screen and (max-width : 1024px) {
 #home_banner .bx-wrapper .bx-pager.bx-default-pager a {
 width: 15px;
 height: 15px;
}
#home_banner .down {
 display: none;
}
 #home_banner, #home_banner li {
	/*max-height: 575px;*/
	/*height: 575px;*/ 
	 /*margin-top: 75px;*/
	 
}
}
 @media screen and (max-width : 720px)
 {
	 #home_banner, #home_banner li {
	 max-height: 350px;
	 height: 350px;
	}
	 #home_banner img {
	 display: none;
	}
	 #home_banner .word {

	}

	#home_banner .word { font-size: 18px; }
	#home_banner .word span{ font-size: 24px; line-height:28px; }
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.Loadaction_Box { position: fixed; left: 0px; top:0px; background-image:url(../../images/action_bg.png); z-index:100000000 }
.Loadaction { position: fixed; padding-top:5px; width: 220px; height: 60px; left: 42%; top: 42%; background-image:url(../../images/action_bg.png); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.Actionupload_Text { font-size:13px; color:#FFFFFF; height:40px; line-height:40px; }

@media screen and (max-width : 1024px) {
	.Loadaction{ left:38%;}
}
@media screen and (max-width : 720px) {
	.Loadaction{ left:33%;}
}
@media screen and (max-width : 600px) {
	.Loadaction{ left:30%;}
}
@media screen and (max-width : 480px) {
	.Loadaction{ left:26%;}
}
@media screen and (max-width : 300px) {
	.Loadaction{ left:20%;}
}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/

.cssa { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:10px; padding-left:10px }
.cssb { font-family:Verdana; letter-spacing:1px; font-size:12px; padding-right:5px; padding-left:5px }
.cssc { padding-bottom:3px; letter-spacing:1px; font-size:12px; padding-left:10px; padding-right:10px; height:40px }
.cssd { font-family:Verdana; font-size:12px; letter-spacing:2px; height:10px; border:1px solid #FFFFFF }
a.pagelink_no:link { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink_no:visited { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:active { color: #003399; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_no:hover { color: #003399; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:link { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; }
a.pagelink:visited { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:active { color: #333333; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink:hover { color: #333333; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px }
a.pagelink_ch:link { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:visited { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:active { color: #cc3300; text-decoration: none; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }
a.pagelink_ch:hover { color: #cc3300; text-decoration: underline; font-family:Verdana; font-size:12px; letter-spacing:1px; font-weight:bold }