@charset "utf-8";
/* CSS Document */


/*-----------------------------------------------------------Login tab*/


.loginall{
	float:left;
	width:326px;
	height:auto;	
	/* margin:auto;	 */
	}
		

.abgne_tab {
		font-size:15px;
		width:100%;
		background-color:#fff9c9;
	}
		
	
ul.tabs {
		font-size:16px;
		width:100%;
		height:50px;
		border-bottom: 1px solid #ffc770;
/* 		border-left: 1px solid #ffc770; */
		border-left: none;
	}
	
ul.tabs li {
		float: left;
		width:50%;
		background: #fff;
		text-align:center;
		height: 51px;
		line-height: 51px;
/* 		overflow: hidden; */
		position: relative;
		border: 1px solid #ffc770;
		border-left: none;
	}

			
ul.tabs li a {
		display: block;
		color:#ADADAD;	
		padding: 0 15px;			
		text-decoration: none;
	}

ul.tabs li a:hover {
		color:#fff;
		background: #ffb14c;
	}

ul.tabs li.active a  {
		color:#739614;
		font-weight:bold;
		background:url(../img/tab_select.png) 50% 43px no-repeat, #fff9c9;);
	}

ul.tabs li.active{
		border-bottom:none;
	}

	
ul.tabs li.active a:hover {
		color:#739614;
		background:url(../img/tab_select.png) 50% 43px no-repeat, #fff9c9;);
	}
	
ul.tabs li.tab1_txt.active{
        border-bottom: none;
		border-top: 5px solid #ffc770;
		border-left: 5px solid #ffc770;
		border-right: 5px solid #ffc770;
        box-shadow: 4px 0 5px -1px #cc7e04 ;
        z-index:2;
	}
	
ul.tabs li.tab1_txt{
        border-bottom: 5px solid #ffc770;
        border-top: none;
        border-left: none;
        background: #f4f9e3;        
	}
	
ul.tabs li.tab2_txt{
        border-bottom: 5px solid #ffc770;
        border-top: none;
        border-right: none;
        background: #f4f9e3;        
	}
	
ul.tabs li.tab2_txt.active{
		border-bottom: none;
		border-top: 5px solid #ffc770;
		border-left: 5px solid #ffc770;
		border-right: 5px solid #ffc770;
		box-shadow: -4px 0 5px -1px #cc7e04 ;
		z-index:2;
	}
	
div.tab_container {
		clear: left;
		width:100%;
		border:5px solid #ffc770;
		border-top:none;
		overflow:hidden;
		padding-bottom:8px;
	}
	
div.tab_container .tab_content {
		padding: 2px 13px 0 18px;
	}
	
div.tab_container .tab_content h2 {
		margin: 0 0 0 20px;
	}
	
div.tab_message {
		clear: left;
		width:100%;
		height:288px;
		text-align:center;
		line-height:28px;
		vertical-align:middle;
		border:1px solid #ffc770;
		overflow:hidden;
		padding:70px 10px 20px 10px;
		margin:0 auto;
	}
	
.logintxt{
	width:28%;
	float:left;
	color:#636363;
	line-height:26px;
	padding-top:8px;
	margin: 2px 0 0 -3px;
	}
	
.loginfrom{
	width:72%;
	float:left;	
	margin:13px 0 -10px 0;
	}
	
.loginfrom_1{
	width:20%;
	float:left;	
	margin:13px 0 -10px 0;
	}
	
	
/*--------Login tab --> tooltip */	
	
.tooltip, .idtooltip { display:inline-block; position:relative; }

.tooltip span, .idtooltip span {          
	color:#da0000;
    text-align:center;
	line-height:22px;
	width:300px;
	background:#fff;
	visibility:hidden;
	border:1px solid #bcbcbc;
    border-radius:5px;
    padding:8px 12px;    
    /* Position the tooltip */
    position:absolute;
    left:50%;
	margin-top:-77px;
	margin-left:-190px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity: 0;
	-webkit-transition: 
		opacity 0.5s ease-in-out,
		visibility 0.5s ease-in-out,
		-webkit-transform 0.5s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-moz-transition:    
        opacity 0.5s ease-in-out,
        visibility 0.5s ease-in-out,
        -moz-transform 0.5s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	transition:         
        opacity 0.5s ease-in-out,
        visibility 0.5s ease-in-out,
        transform 0.5s cubic-bezier(0.71, 1.7, 0.77, 1.24);
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	pointer-events:none;
	box-shadow:0 4px 4px rgba(0,0,0,0.37);
	z-index:9999 !important;
}

.idtooltip span{ margin:30px 0 0 -190px;}

.tooltip:hover span, .idtooltip:hover span {
	visibility:visible;
	ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	opacity:1;   
}

/*--------Login tab --> tooltip END */

.loginfromimg{
	width:100%;
	height:30px;
	/*line-height:30px;*/
	background-image:url(../img/key.png);
	background-repeat:no-repeat;
	background-position:98.5% 50%;
	}
	
.loginfromimg_1{
	width:100%;
	height:30px;
	/*line-height:30px;*/
	}
	
.codes_img{ float:left; margin:9px 6px 0 -2px; vertical-align:middle;}

.codes_img img { width:200px; height:45px;}

/*==========applyForiPost:免臨櫃申請網路郵局的「驗證碼」==========*/
.codes_img .voice_icon img{ width:auto; height:44px; margin-top:3px; }

.codes_replace{ float:right; font-size:15px; color:#636363; width:60px; height:30px; line-height:29px; text-decoration:underline; background:url(../img/code_replace.png) -68px 0px no-repeat; margin:8px 0 -10px 18px; padding:0px 0 0 26px; }

.codes_replace:hover{ color:#87b745; background:url(../img/code_replace.png) no-repeat;}

.codes_replace2{ float:right; font-size:15px; color:#636363; width:120px; height:30px; line-height:29px; text-decoration:underline; background:url(../img/code_replace.png) -68px 0px no-repeat; margin:0px 0px 2px 8px; padding:0px 0 0 26px; }

.codes_replace2:hover{ color:#87b745; background:url(../img/code_replace2.png) no-repeat;background-size:259px 30px;}
	
.loginbtn a{
	float:right;
	font-size:15px;
	color:#fff;		
	width:50%;	
	text-align:center;
	background-color:#ffa32b;
	margin:8px 3px 0 0;
	height:30px;
	line-height:27px;
	border:1px solid #f48a23;
	cursor:pointer;
	}

.loginbtn a:hover{
	text-decoration:none;
	background-color:#9fc669;
	border:1px solid #7daf37;

	}
	
.signoutbtn a{
	float:left;
	font-size:15px;
	color:#fff;		
	width:46%;	
	text-align:center;
	background-color:#ffa32b;
	margin:10px 4px 0 0;
	height:36px;
	line-height:33px;
	border:1px solid #d1b346;
	margin:75px 6px 0 6px;
	cursor:pointer;
	}

.signoutbtn a:hover{
	text-decoration:none;
	background-color:#9fc669;

	}

.logindowntxt{
	display:inline-block;
	font-size:14px;
	color:#7e7e7e;
	width:100%;
	text-align:left;	
	margin-top:8px;
	}
	
.logindowntxt .question{ float:right; text-align:right; font-size:15px; padding-bottom:0; }
	
.logindowntxt .question a{
	color:#7e7e7e;
	}
	
.logindowntxt .question a:hover{
	color:#599e00;
	}
	
/*---------------------------------------------------- radio button */

.radio_but{
	display:block;
	float:left;
	color:#636363;
	width:33.333333%;
	height:32px;
	line-height:26px;
	margin:8px 8px -8px -8px;
	}

/*-----------------------------------------------------------Banner*/


#TopAD{ display:block; float:right; width:684px; height:auto; }

#TopAD .TopAdbanner{ width:100%; height:265px; }

#TopAD .link ul { float:right; list-style-type:none; padding: 0px 5px 3px 0; margin-top:1px; }

#TopAD .link ul li { display:block; float:left; font-size:14px; color:#b1b1b1; text-align: center; padding:2px 7px; background-color:#fff; border:1px solid #d2e7ec; margin-left:5px; cursor: pointer; }

#TopAD .link ul li.on {	color: #fff; background-color:#a2ca78; }


/*----------------------------------------------------- Content Divider */

.content_d{ width:100%; height:8px; background-color:#000; filter:alpha(opacity=5); -moz-opacity:0.15; opacity:0.05; -khtml-opacity: 0.05; clear:both; }
	
/*-----------------------------------------------------------Notice*/

#noticeall{
	float:left;
	width:100%;
	background-color:#fff;
	margin-top:-8px;
	}

.noticetitle{
	font-size:18px;
	color:#92b12f;
	font-weight:bold;
	width:60%;
	padding:24px 0 0 30px;
	}
	
.noticeleft{
	float:left;
	width:60%;
	height:190px;
	margin:11px 0 0 30px;
	position: relative;
	overflow:hidden;
	}
	
.noticetitleen{
	color:#bcdbe8;
	font-weight:bold;
	padding-left:5px;
	}	
	
.noticeleft ul{
	width:100%;
	position:absolute;
	}
	
.noticeleft li{
	width:100%;	
	
	padding-left:26px;
	}
	
.noticeleft li a{
	display:block;
	vertical-align:bottom;
	color:#3f3f3f;
	line-height:22px;
	text-decoration:none;  
	background:url(../img/no_line.png) -40px bottom no-repeat;
	padding:8px 0;	
	}
	
.noticeleft li a:hover{
	color:#e97300; 
	}
	
.newline{
	width:100%;
	height:auto;
	padding-bottom:1px;
	margin-top:-8px;
	}
	
.newline img{
	width:100%;
	height:1px;
	}	
	

/*-----------------------------------------------------------Notice List*/

.pagecontent .m_left{ margin-left:-90px;}

#css_table .notice_listtitle{ font-size:16px; font-weight:bolder; text-align:left; padding-left:16px; }

#css_table .notice_list{ font-size:16px; padding:0 10px;}

#css_table .notice_list ul{ list-style-type:none;}

#css_table .notice_list li{ line-height:28px; padding:14px 10px 14px 33px; border-bottom:1px solid #c9c9c9; }

#css_table .notice_list li:nth-child(even) { background-color:#fafafa; }

/*-----------------------------------------------------------content righ*/

.noticeline{
	float:left;
	width:1px;
	margin:-40px 0 0 28px;
	position:relative;		
	}
	
.noticeline img{
	width:1px;
	height:255px;
	}
	
.noticeright{	
	float:left;
	width:33%;
	margin-top:-20px;
	}	
	
.noticeitem{
	float:left;
	margin-left:28px;
	}
	
.itemphoto{
	float:left;
	width:98px;
	height:98px;	
	border-radius:50%;
	margin-bottom:15px;
	}
	
.itemphoto_02{
	float:left;
	width:80px;
	height:80px;	
	border-radius:50%;
	margin:3px 0 5px 0 ;
	}
	
.itemphoto img{ width:90%; height:auto; margin:2px 0 0 5px;}

.itemphoto_02 img{ width:87%; height:auto; margin:3px 0 0 7px;}
	
.itemphototxt{
	font-size:13px;
	color:#fff;
	position:absolute;
	text-align:center;
	line-height:14px;
	width:98px;
	margin-top:60px;
	}
	
.itemphototxt02{
	font-size:11px;
	color:#fff;
	position:absolute;
	text-align:center;
	line-height:14px;
	width:80px;
	margin-top:49px;
	}
	
.itemphototxt a{
	color:#fff;
	text-decoration:none;	
	}
	
.itemright{
	float:left;

	}

.itemright .icon04txt{
	margin-top:5px;
	}
	
.itemright .icon02txt{
	margin-top:5px;
	}
		
.itemright ul{
	margin-top:-7px;
	width:100%;
	}

.itemright li{
	background-repeat:no-repeat;	
	width:100%;
	line-height:20px;
	}
	
.itemright li a{
	font-size:14px;
	text-indent:25px;
	margin-left:25px;
	font-weight:bold;	
	}

.more {
	width:60%;
	text-align:right;
	margin:-20px 0 0 27px;;
}

.more a {
	padding:5px 18px 5px 18px;
	color:#fff;
	font-size:0.95em;
	background:#8ed055;
}
.more a:hover {
	color:#56991d;
	text-decoration:none;
	background:#ecffdb;
	border:1px solid #77bf38;
	}
	
	
.more1 {
	height:26px;
	text-align:right;
	margin-top:81px;

}

.more1 a {
	padding:3px 18px 5px 18px;
	color:#fff;
	font-size:0.95em;
	background:#8ed055;
}

.more1 a:hover {
	color:#56991d;
	text-decoration:none;
	background:#ecffdb;
	border:1px solid #77bf38;
	}
	

/*----------------------------------------------------- bottom icon */

#container{
	padding:0px 64px;
	}
	
	
#features{
	width:100%;
	overflow:hidden;
	margin-bottom:-40px;
	}
	
.slides li a{
	display:inline-block;
	font-size:15px;
	color:#2a2a2a;	
	width:100px;
	height:100px;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	}

.slides li img{ width:100%; height:auto; }

.slides li a span { display:inline-block; width:120px; text-align:center; margin:7px 0 0 -10px; }



@media only screen and (max-width: 1024px) {
	
/*-----------------------------------------------------------Notice*/

.noticeleft, .more{ width:59%; }

.noticeline img{ height:250px; }

.noticeright{ width:34%; }

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

.loginbtn a{
	width:66%;	
	}
	

.loginall{
	width:100%;	
	margin-top:20px;	
	}

.logintxt{
	width:13%;
	}

.loginfrom{
	float:left;
	width:87%;
	}
	
.logindowntxt{
	font-size:15px;
	width:40%;
	margin:23px 0 0 13%;
	position:absolute;
	}
	
div.tab_message {
	height:135px;
	padding:10px;
	margin:0 auto;
	}
	
.signoutbtn a{
	width:48%;
	line-height:33px;
	border:1px solid #d1b346;
	margin:15px 6px 0 6px;
	cursor:pointer;
	}
	
/*-----------------------------------------------------------bottom icon*/

#container{	padding:0px 5px; }

.slides li a span { width:110px; margin-left:-6px;}
	
/*-----------------------------------------------------------Banner*/

#TopAD{ display:block; float:left; width:100%; height:auto; margin-top:20px;}

#TopAD .TopAdbanner{ height:auto; }

#TopAD img{ width:100%; height:auto;}

#TopAD .link ul { padding:8px 0 10px 0;}

#TopAD .link ul li{ margin-left:6px;}


/*-----------------------------------------------------------content left*/	

.noticeline{
	margin:-35px 0 0 15px;		
	}	

#noticeall{
	float:left;
	width:100%;
	background-color:#fff;
	margin-top:-20px;
	}
	
.noticetitle{ padding:34px 0 0 15px; }

.noticeleft{ width:52%; height:235px; margin-left:15px;}

.noticeleft li a{ background:url(../img/no_line.png) -130px bottom no-repeat; padding:6px 0; }

.more {
	width:52%;
	margin:-18px 0 0 15px;;
}

/*-----------------------------------------------------------content right*/

.noticeline img{
	height:300px;		
	}
	
.noticeright{
	float:right;
	width:41%;
	margin-top:-26px;
	}
	
.noticeitem{
	margin-left:-18px;
	}
	
.itemphoto{
	margin:22px 0 18px 15px;
	}
	
.itemphoto_02{
	margin:10px 0 5px 10px;
	}
	
.itemright li a{
	margin-left:22px;
	}
	
.itemright{
	margin-top:16px;
	}
	
	
.itemright li{
	line-height:23px;
	}
		
}


@media only screen and (max-width: 767px) {
	
.logintxt{ width:14%;}

.loginfrom{ width:86%;}

.logindowntxt{ width:42%;  margin-left:9%;}

.loginbtn a{ width:65%;}
	
.noticetitle{ padding-top:40px;;}
	
.noticeleft, .more{ width:95%; }

.noticeline{ display:none;}

.noticeright{ float:left; width:95%; border-bottom:1px solid #e1e1e1; margin:25px 2.5%; padding:15px 0 35px 0; }

#container{	padding:0px 0.25%;}

.noticeitem{ float:none; width:100%; margin:0 auto;}

.index_icon01{ float:left; width:48%; position:absolute; }

.index_icon02{ float:right; width:52%; }

.itemright li{ line-height:26px;}

/*-----------------------------------------------------------bottom icon*/

#container{	padding:0px 5px; }

.slides li a{ width:98px; height:98px; }


}


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


.logintxt{ width:15%;}

.loginfrom{ width:85%;}

.logindowntxt{ font-size:14px; width:43%;  margin-left:4%;}

.loginbtn a{ width:63.5%;}

.noticeright{ padding:10px 0 30px 0; }
	
.itemphoto{
	width:88px;
	height:88px;
	margin:22px 0 15px 15px;
	}
	
.itemphototxt{
	width:100px;
	margin:55px 0 0 -7px;
	}
	
.itemright{	margin-top:10px; }

.noticeitem{ margin:0 auto 0 -8px;}


/*-----------------------------------------------------------bottom icon*/

#container{	padding:0px 4px; }

.slides li a{ width:90px; height:90px; }

.slides li a span { width:100px; margin-left:-5px;}


}


@media only screen and (max-width: 600px) {
	
.logindowntxt{ width:35%; margin:8px 0 0 6%;}

.logindowntxt .question{ float:right; text-align:right; font-size:14px; padding-top:6px; }

.loginbtn a{
	width:63%;	
	}
	
.loginall{
	width:100%;	
	margin-top:10px;	
	}
	
.abgne_tab {	
	    float:left;
		width: 100%;
		margin: 0px 0;
		font-size:14px;
	}
	
div.tab_message {
	height:140px;
	line-height:24px;
	padding:8px;
	margin:0 auto;
	}
	
.signoutbtn a{
	width:46%;
	line-height:33px;
	border:1px solid #d1b346;
	margin:10px 9px 0 6px;
	cursor:pointer;
	}

/*-----------------------------------------------------------Banner*/

#TopAD{ display:block; float:left; width:100%; height:auto; margin-top:15px;}

#TopAD img{ width:100%; height:auto;}

#TopAD .link ul { padding:5px 0 7px 0;}

#TopAD .link ul li{ margin-left:6px;}

/*-----------------------------------------------------------Notice*/


#noticeall{
	width:100%;
	}

/*-----------------------------------------------------------content righ*/

	
.itemright ul{
	margin-top:17px;
	}
			
.itemphoto{
	width:100px;
	height:100px;
	margin:10px 0 15px 15px;	
	}
	
.itemphototxt{
	font-size:13px;
	text-align:center;
	width:100px;
	margin:60px 0 0 0;
}
	
.itemright li a{ font-size:14px;}	
	
.itemright .icon04txt{
	margin-top:28px;
}


}


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

.logintxt{ width:17%;}

.loginfrom{ width:83%;}

.logindowntxt{  width:37%; margin:8px 0 0 2%;}

.loginbtn a{ width:61%;}

.noticeright{ float:left; width:95%; margin:20px 2.5%; }

.noticeitem{ margin:0 auto;}

.index_icon01{ width:auto; }

.index_icon02{ width:51%; }

.itemphoto{
	width:80px;
	height:80px;
	margin:18px 0;
	}
	
.itemphototxt{
	font-size:12px;
	width:100px;
	margin:50px 0 0 -11px;
	}
	
.itemright{	margin-top:-18px; }

.itemright li a{ font-size:13px;}

/*-----------------------------------------------------------bottom icon*/

#container{	padding:0px 4px; }


}


@media only screen and (max-width: 480px) {
	
	
.logintxt{ width:25%;}

.loginfrom{ width:75%;}

.logindowntxt{ font-size:15px; width:100%; margin:8px 0 4px 0; position:relative;}

.logindowntxt .question{ padding:0 9px 0 0;}

.loginbtn a{ width:52%;}
	

/*-----------------------------------------------------------Notice*/


#noticeall{
	width:100%;
	}

.noticetitle{
	width:100%;
	}
	
.noticeleft{
	float:left;
	width:100%;
	margin-left:22px;
	}

.noticeleft{
	font-size:1em;
	margin-left:10px;
	}
	
.index_icon01, .index_icon02{ width:100%; position:relative;}

.noticeleft li{
	padding-right:25px;   
	}


/*-----------------------------------------------------------content righ*/


.noticeright{
	float:left;
	width:90%;
	margin:0 0 20px 20px;
	padding:15px 0 20px 0;
	}	
	
.noticeline{
	display:none;
	}

	
.noticeitem{
	width:100%;	
	margin:10px 0 0px 15px;
	}

	
.itemright{
	margin:-22px 0 0 8px;
	}

	
.itemright ul{
	margin-top:17px;
	}

.index_icon01, .index_icon02{ float:none; width:100%;}
			
.itemphoto{
	width:100px;
	height:100px;
	margin:13px 0 30px 10px;	
	}
	
.itemphototxt{
	font-size:13px;
	text-align:center;
	width:100px;
	margin:60px 0 0 0;
}
	
.itemright li a{ font-size:15px;}	
	
.itemright .icon04txt{ margin-top:28px; }
	
.more {
	float:right;
	margin-right:20px;
}
	
/*-----------------------------------------------------------bottom icon*/


#container{ padding:0px 30px; }

.slides li a{ width:100px; height:100px; }

.slides li a span { width:120px; margin-left:-10px; }
	
}


@media only screen and (max-width: 400px) {
	
.logintxt{ width:27%;}

.loginfrom{ width:73%;}

.loginbtn a{ width:51%;}
	
.noticeright{ padding:20px 0 15px 0; }

.noticeitem{ margin:10px 0 0 0px;}

#container{ padding:0px 20px; }

}


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


.logintxt{ width:30%;}

.loginfrom{ width:70%;}

.logindowntxt{ font-size:14px; margin-left:-2px;}

.logindowntxt .question{ padding:0; margin-right:-2px;}

.loginbtn a{ width:48%;}

.codes_replace{ width:56px; margin-left:10px;}
	
.noticeitem{ margin:0px 10px 10px -10px; }

.itemphoto{ width:88px;	height:88px; margin:20px 0 15px 15px; }
	
.itemphototxt{ width:100px; margin:55px 0 0 -7px; }

.itemright{ margin:-18px 0 0 0px;}

.itemright li{ line-height:24px;}
	
.itemright li a{ font-size:13px;}

/*-----------------------------------------------------------bottom icon*/

#container{ padding:0px 15px; }

.slides li a{ width:95px; height:95px; }

	
}