@charset "utf-8";
/*
00405C
F5CB22
*/
/*	Global	*/
	body{ font-family:"Microsoft JhengHei"; background:url(../images/index/banner.png) top center no-repeat;  }
	.container { width:1030px; }
	a { color:#198AA2;}
	a:hover { text-decoration:none; }
	.bg-purple { background:#CE2853;}
	.rwd-img { max-width:100%;}
	.rwd-img.max-img { width:calc( 100%); max-width:none;}
	.loadingbox { position:fixed; height:100%; width:100%; background:rgba(0,0,0,0.5); left:0; top:0; display:none; }
	.privacy h2 { font-size:13pt; font-weight:bolder;}
/*	Menu	*/
	.header-box { color:#198AA2; margin-top:26%; }
	.header-box:after { content:""; clear:both; display:block;}
	.header-box .logo { width:calc(34% - 10px); float:left;}
	.header-box .slogan { width:calc( 66% - 15px ); float:right;}
	
	.slogan h1 { font-size:4em;  font-weight:normal; text-align:justify; margin-top:10%;
								text-justify: inter-ideograph;
								-ms-text-justify: inter-ideograph; /*IE9*/
								-moz-text-align-last:justify; /*Firefox*/
								-webkit-text-align-last:justify; /*Chrome*/
	}
	
	.slogan h1:after { content:''; display: inline-block; width: 100%; }
	.slogan p{ font-size:2.5em; font-weight:bolder;	text-align:right; margin-top:-72px; }
	
	.menu { list-style:none; font-size:13pt; font-weight:bolder; text-align:right; margin-top:30px; padding:0;}
	.menu li:first-child { font-size:18pt;}
	.menu li { display:inline-block; margin-right:20px; }
	.menu li:last-child { margin-right:0; }
	.indexpage .menu { display:none;}
	.mini-button { width:30px; height:25px; display:none; }
	.insidepage .mini-button { display:inline-block;}
	.icon-bar {background:#CE2853; display:block; height:5px; margin-bottom:5px;}
	.icon-bar:last-child { margin-bottom:0;}
	
	.mini-button.ani .icon-bar:nth-child(1) { transform-origin:left top; transform:rotate(45deg);}
	.mini-button.ani .icon-bar:nth-child(2) { transform-origin:center; opacity:0;}
	.mini-button.ani .icon-bar:nth-child(3) { transform-origin:left bottom; transform:rotate(-45deg);}
/*	Footer	*/
	.footer-menu p { margin:0;}
	.footer-menu { list-style:none; margin:0; padding:0; text-align:center;  }
	.footer-menu li { display:inline-block; text-align:center; width:calc( 100% / 4 - 30px ); margin:5px; }
	.footer-menu li a { color:#FFF; display:block; margin-bottom:15px; font-size:14pt;}
	.footer-link { padding:30px 0;}
	
	.sponsorship { margin:15px auto; list-style:none; padding:0; text-align:center; }
	.sponsorship li { display:inline-block; width:calc(100% / 3 - 30px );}
	.sponsorship .sponsorship-txt { display:inline-block; margin-right:15px; font-weight:bolder; font-size:12pt; border-bottom:1px dotted #999;}
/*	att	*/
	.page-subject { color:#CE2853; font-size:16pt; text-align:center; font-weight:bold; margin-bottom:30px; }
	.page-subject.uni { color:#198AA2;  }
	.attbox { padding:30px 0;}
	.attgroup {}
	.attgroup:after { content:""; clear:both; display:block; }
	.att-list {
		overflow:hidden;
		float:left;
		min-height:247px; 
		width:calc( 100% / 3 - 30px);
		margin:15px;
		display:inline-block; margin-bottom:30px; padding:10px;
		border:1px solid #DDD;
		background:#FFF;
		position:relative;
	}
	.att-list .seal { position:absolute; font-size:60pt; color:#FFF; font-weight:bolder; bottom:0; right:0; width:100%; height:100%; display:inline-block; text-align:center;   vertical-align:middle; color:#CE2853; background:rgba(0,0,0,0.2)}
	.att-list .seal span { display:inline-block; border-radius:50%; border:0 solid #F00; width:120px; height:120px; transform:rotate(0); position:absolute; right:0; bottom:0;}
	.att-list .seal:before { display:inline-block; height:100%; content:"";  vertical-align:middle; }
	.att-list.noshadow {
		margin-right:15px; 
		-webkit-box-shadow:none;
			 -moz-box-shadow:none;
						box-shadow:none;
	}
	.att-list.ani:nth-child(odd):hover {
		-webkit-box-shadow:none;
			 -moz-box-shadow:none;
						box-shadow:none;
		-webkit-box-shadow: 6px 6px 21px 3px rgba(0,0,0,0.35);
			 -moz-box-shadow: 6px 6px 21px 3px rgba(0,0,0,0.35);
						box-shadow: 6px 6px 21px 3px rgba(0,0,0,0.35);
						
						transform:scale(1.2) rotate(5deg);
		-webkit-transform:scale(1.2) rotate(5deg);
			 -moz-transform:scale(1.2) rotate(5deg);
			 z-index:999;
	}
	.att-list.ani:nth-child(even):hover {
		-webkit-box-shadow:none;
			 -moz-box-shadow:none;
						box-shadow:none;
		-webkit-box-shadow: 6px 6px 21px 3px rgba(0,0,0,0.35);
			 -moz-box-shadow: 6px 6px 21px 3px rgba(0,0,0,0.35);
						box-shadow: 6px 6px 21px 3px rgba(0,0,0,0.35);
						
						transform:scale(1.2) rotate(-5deg);
		-webkit-transform:scale(1.2) rotate(-5deg);
			 -moz-transform:scale(1.2) rotate(-5deg);
			 z-index:999;
	}
	.att-list .imgbox { overflow:hidden;}
	.att-list.ani:hover .imgbox img {
						transform:scale(1.2) rotate(5deg);
		-webkit-transform:scale(1.2) rotate(5deg);
			 -moz-transform:scale(1.2) rotate(5deg);
	}
	.noborder { border:0;}
	/*
	.att-list:nth-child(3),
	.att-list:nth-child(6),
	.att-list:nth-child(9),
	.att-list:nth-child(12),
	.att-list:nth-child(15) { margin-right:0;}*/
	
	.att-list a { color:#000;}
	.att-list h3 { font-size:13pt;margin:3px auto; }
	.att-list p,.att-list address { margin:3px auto; }
	.att-list .txtbox {}
	.attgroup h2 { font-size:18pt; font-weight:bolder;  color:#CE2853; margin:30px auto; text-align:center;}
	.dottedline { border-bottom:1px dotted #AAA; margin:0 auto 30px auto;clear:both; width:90%;  padding-top:30px; }
	
	.content { position:relative; }
	.content:after { content:""; clear:both; display:block; margin:15px auto;}
	.infomation { float:left;  width:calc( 40% - 15px ); padding:5px; }
	.introduction { float:right; width:calc(60% - 15px); margin:15px auto; padding:5px; text-align:justify;}
	.introduction h4 { margin:0 0 15px 0; font-size:16pt;font-weight:bolder;}
	.infomation ul { list-style:none;  padding:0; margin:15px 0; font-size:14pt;}
	.infomation ul li { margin-bottom:10px; }
	.infomation ul li img { display:inline-block; margin-right:10px; }
	/*.infomation ul li:nth-child(1),
	.infomation ul li:nth-child(2),
	.infomation ul li:nth-child(3),
	.infomation ul li:nth-child(4),
	.infomation ul li:nth-child(5) {
		opacity:0;
						transform:translateX(-100px);
		-webkit-transform:translateX(-100px);
			 -moz-transform:translateX(-100px); }
	.infomation ul li.ani {
		opacity:1;
						transform:translateX(0);
		-webkit-transform:translateX(0);
			 -moz-transform:translateX(0);
	}*/ 
	.introduction p { font-size:13pt; line-height:1.5; letter-spacing:2px; margin-bottom:25px; }
	.introduction p:nth-child(2):first-letter { color:#CE2853; font-size:18pt; font-weight:bolder;}
	.goback { margin:30px auto; }
	.editorbox { padding:15px; width:95%; margin:0 auto; font-size:12pt; letter-spacing:2px; text-align:justify; line-height:1.8;}
	.editorbox h4 { margin:15px 0; color:#CE2853; font-weight:bolder; }
	.editorbox p:first-child { margin-bottom:60px; }
	.editorbox ol{ margin-bottom:60px; }
	.hightline { color:#198AA2; font-size:14pt; font-weight:bold;}
	.hightlinetxt { color:#CE2853;}
	.infomation ul li { padding-left:25px; text-indent:-35px;}
	.imgbanner { opacity:0;}
	.imgbanner.ani { opacity:1;}
	
	/*	member	*/
	.registform,.loginform { width:calc(100% / 2 - 30px); float:left; min-height:347px; padding:10px;  }
	.loginform {float:right;}
	.loginform .form-group { display:block;}
	.loginform .form-group label { width:calc(100% / 5 - 15px); text-align:center;}
	.loginform .form-group input { width:calc(100% / 2 - 15px); text-align:center;}
	.loginform .form-group button { width:calc(100% / 3 - 15px); text-align:center; margin-left:15px;}
	
	.registform .form-group label { color:#CE2853;}
	.loginform .form-group label { color:#198AA2;}
	.registform { background:rgba(206,40,83,0.2); margin-left:15px;}
	.loginform  { background:rgba(25,138,162,0.2); margin-right:15px;}
	
	.nowpoint { font-size:14pt; text-align:center; }
	.spec-text {font-size:20pt; color:#CE2853; }
	
	.query .setgray .imgbox{
		/*
		
		opacity:0.5;
		-webkit-filter: grayscale(100%);
			 -moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				 -o-filter: grayscale(100%);
						filter: grayscale(100%);
		*/
	}
	
	.query .setgray.iscollect .imgbox {
		opacity:1;
		-webkit-filter: grayscale(0);
			 -moz-filter: grayscale(0);
				-ms-filter: grayscale(0);
				 -o-filter: grayscale(0);
						filter: grayscale(0);
	 }
	 
	 .pointslink-box { position:fixed; bottom:0; height:40px; line-height:40px;  width:100%; background:rgba(25,138,162,0.8); z-index:997; }
	 .pointslink { margin:0; padding:0; list-style:none; display:block; width:100%; }
	 .pointslink li { width:calc(100% / 3 - 2px); float:left; text-align:center; border-left:1px solid rgba(255,255,255,0.5);}
	 .pointslink li a { color:#FFF; display:block; }
	 .pointslink:after { content:""; }
	 .gotop { position:fixed; bottom:60px; right:0; text-align:center; font-size:10pt;   border-radius:2px 0 0 2px; width:40px; height:40px; background:#DDD; }
	 
	 .counters { padding:15px 0 60px 0;}
	 .counters span { color:#F00; font-weight:bold;}
	 
	 .getbox { position:absolute; z-index:990;top:0; left:0; width:100%; text-align:center; display:none;}
	 
	 .iscollect .getbox { display:block; }
	 .query .setgray.iscollect .imgbox {
	 	opacity:0.5; 
		-webkit-filter: grayscale(100%);
			 -moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				 -o-filter: grayscale(100%);
						filter: grayscale(100%); }
	.tbbox { width:680px; margin:0 auto; border:1px solid #198AA2; border-width:0 0 0; }
	.tbbox tr:hover td{
		font-weight:bold;
		-webkit-transform:skewX(-20deg);
			 -moz-transform:skewX(-20deg);
				-ms-transform:skewX(-20deg);
				 -o-transform:skewX(-20deg);
						transform:skewX(-20deg);
	}
	.tbbox th,.tbbox td { border:1px dotted #198AA2; border-width:0 0 1px 0; padding:8px; }
	.tbbox th { text-align:center; background:#198AA2; color:#FFF; border-right:1px solid #FFF;}
	.tbbox td { color:#198AA2; border-right:1px solid #FFF; text-align:center;}
	.tbbox tbody tr:nth-child(1) td:nth-child(1) { color:#CE2853; font-size:15pt ; font-weight:bolder;}
	.tbbox tbody td:nth-child(1),
	.tbbox tbody td:nth-child(3) { text-align:center;}
	.tbboxul { list-style:none; padding:0; margin:15px 0 30px 0; color:#198AA2;  border-bottom:1px dotted #198AA2; }
	.tbboxul:after{content:""; display:block; clear:both; }
	.tbboxul:first-child li:nth-child(1) { font-size:15pt; font-weight:bolder; color:#CE2853; float:left; width:100%;}
	.tbboxul li:first-child{ text-align:left; clear:both; }
	.tbboxul li:nth-child(2):before { content:"◆";  display:inline-block;margin-right:5px;}
	.tbboxul li:nth-child(2),
	.tbboxul li:nth-child(3) { display:inline-block;}
	.tbboxul li:nth-child(2) { float:left; }
	.tbboxul li:nth-child(3) { float:right;}
	
@media (min-width:1024px){
	body{background-size:contain;}
	.infomation { letter-spacing:2px;}
}

@media (min-width:768px) and (max-width:1024px){
	body{background-size:contain;}
	.container{width:100%;}
}

@media (min-width:425px) and (max-width:768px){
	body{background-size:contain;}
	.container{width:100%;}
	.content { padding:15px;}
	.header-box { margin-top:14%; }
	.header-box .logo { text-align:center; }
	.header-box .logo,
	.header-box .slogan{ width:100%; clear:both; display:block;}
	.slogan h1 { margin-top:3%;}
	.menu-box { text-align:center; }
	.indexpage .menu { text-align:center; display:none;  }
	.att-list { width:calc( 100% / 2 - 30px); }
	.att-list:nth-child(odd){ margin-right:0;}
	.infomation { float:left;  width:calc( 100% ); }
	.introduction { float:right; width:calc(100%);}
	.editorbox { padding:0;}
	.editorbox ol { padding-left:25px;}
	.registform,.loginform { width:calc(100% - 30px ); margin-bottom:30px; }
	.loginform .form-group label,
	.loginform .form-group input,
	.loginform .form-group button { width:calc(100% - 30px); text-align:center; margin:15px auto; display:block;}
}
@media (min-width:320px) and (max-width:425px){
	body{background-size:contain;}
	.container{width:100%;}
	.content { padding:15px;}
	.header-box { margin-top:14%; }
	.header-box .logo { text-align:center; }
	.header-box .logo,
	.header-box .slogan{ width:100%; clear:both; display:block; font-size:1em;}
	.slogan h1 { margin-top:3%; font-size:2.5em;}
	.slogan p { font-size:1.5em; margin-top:-45px;}
	.menu-box { text-align:center; }
	.indexpage .menu { text-align:center; display:none;  }
	.footer-menu li { display:inline-block; text-align:center; width:calc( 100% / 4 - 15px ); vertical-align:top;}
	.sponsorship li { width:100%; text-align:center;}
	.att-list { width:calc( 100% - 30px ); }
	.att-list:nth-child(odd){ margin-right:0;}
	.infomation { float:left;  width:calc( 100% ); }
	.introduction { float:right; width:calc(100%);}
	.editorbox { padding:0;}
	.editorbox ol { padding-left:25px;}
	.registform,.loginform { width:calc(100% - 30px ); margin-bottom:30px; }
	.loginform .form-group label,
	.loginform .form-group input,
	.loginform .form-group button { width:calc(100% - 30px); text-align:center; margin:15px auto; display:block;}
	
	.menu-box .menu { display:none; }
	.menu-box .menu li { display:block; text-align:center; margin:5px auto; background:#CE2853; padding:5px 0; }
	.menu-box .menu li a { color:#FFF; }
	.nowpoint { text-align:center;}
}

@media (max-width:320px){
	body{background-size:contain;}
	.container{width:100%;}
	.content { padding:15px;}
	.header-box { margin-top:14%; }
	.header-box .logo { text-align:center; }
	.header-box .logo,
	.header-box .slogan{ width:100%; clear:both; display:block; font-size:1em;}
	.slogan h1 { margin-top:3%; font-size:2.2em;}
	.slogan p { font-size:1.5em; margin-top:-45px;}
	.menu-box { text-align:center; }
	.indexpage .menu { text-align:center; display:none;  }
	.footer-menu li { display:inline-block; text-align:center; width:calc( 100% / 2 - 30px ); vertical-align:top;}
	.sponsorship li { width:100%; text-align:center;}
	.infomation { float:left;  width:calc( 100% ); }
	.introduction { float:right; width:calc(100%);}
	.editorbox { padding:0;}
	.editorbox ol { padding-left:25px;}
	.registform,.loginform { width:calc(100% - 30px ); margin-bottom:30px; }
	.loginform .form-group label,
	.loginform .form-group input,
	.loginform .form-group button { width:calc(100% - 30px); text-align:center; margin:15px auto; display:block;}
	.menu-box .menu { display:none; }
	.menu-box .menu li { display:block; text-align:center; margin:5px auto; background:#CE2853; padding:5px 0; }
	.menu-box .menu li a { color:#FFF; }
	.nowpoint { text-align:center;}
}

/*
	.insidepage .menu { display:none;}
*/
/*
ani
*/

	.att-list,
	.att-list:hover,
	.att-list:hover .imgbox img,
	.att-list .imgbox img,
	.tbbox tr:hover td,.tbbox tr td {
							-webkit-transition: all 0.35s ease;
							 	 -moz-transition: all 0.35s ease;
							 		-ms-transition: all 0.35s ease;
							 	 	 -o-transition: all 0.35s ease;
											transition: all 0.35s ease;
	}
	.imgbanner,
	.imgbanner.ani,
	.infomation ul li,
	.infomation ul li.ani,
	.icon-bar:nth-child(1),
	.icon-bar:nth-child(2),
	.icon-bar:nth-child(3),
	.mini-button.ani .icon-bar:nth-child(1),
	.mini-button.ani .icon-bar:nth-child(2),
	.mini-button.ani .icon-bar:nth-child(3)

	 {
							-webkit-transition: all 0.65s ease;
							 	 -moz-transition: all 0.65s ease;
							 		-ms-transition: all 0.65s ease;
							 	 	 -o-transition: all 0.65s ease;
											transition: all 0.65s ease;
	}
	
	
	/*	hack	*/
	.btn { border-radius:2px;  border:0; }
	.btn.btn-danger { background:#CE2853;}
	.btn.btn-primary { background:#198AA2;}