/* 縮小失敗。正在傳回未縮小的內容。
(253,64): run-time error CSS1034: Expected closing parenthesis, found ','
(253,64): run-time error CSS1042: Expected function, found ','
(253,69): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
@charset "utf-8";

/* == 共用區 ============================================================================= */

.bodyContent{margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  }
.bodyContent html, body{-webkit-text-size-adjust: 100%; width: 100%; min-height:100%; font-family: "微軟正黑體", Arial, Helvetica,sans-serif; }
.bodyContent ul,.bodyContent li,dd{margin:0; padding:0; list-style:none;}
.bodyContent .texthidden{ display: block; height: 0; width: 0; overflow: hidden;}
.bodyContent .like-table{ display:table-cell; vertical-align:middle;}/*table 偽裝*/
.bodyContent input, select, button{ font-family: "微軟正黑體", Arial, Helvetica,sans-serif;}
.bodyContent h1,h2,h3,h4{ margin:0; padding:0;}

/*字體色彩*/
.bodyContent .fc01{ color:#00b8e6;}
.bodyContent .fc02{ color:#f00;}

/* == 桌機版 ============================================================================= */

.bodyContent .mtop{ display:none;}
.bodyContent .mhead{ display:none;}
.bodyContent .mnav{ display:none;}
.bodyContent .mfooter{ display:none;}


/* == 刊頭 == */
.bodyContent .head{ width:100%; padding:0 12px;  box-sizing: border-box;}
.bodyContent .head .wrap{ margin:0 auto; max-width:1024px;overflow: hidden;}
.bodyContent .head .left{ float:left; width:50% !important;height:90px; display: table; }
.bodyContent .head .left a{text-decoration: none;}
.bodyContent .head .left .top-logo{ float:left; width:40%;height: 100%; display: flex;align-items: center;}
.bodyContent .head .left .top-logo img{ float:left; width:36px; height:36px; }
.bodyContent .head .left h2{ float:left; font-size:2.4rem; text-indent:5px; line-height:1; color:#0664cd;  margin: 0; text-decoration: none;}
.bodyContent .head .left .top-at { float:left; width:55%;height: 100%; display: flex; flex-flow: column;justify-content: center;}
.bodyContent .head .left .top-at p{ font-size:1.05rem; line-height:1.2; font-weight:normal; color:#666;margin: 0;}
.bodyContent .head .right{ float:right; display: table; text-align:right;}/*width:50%; height:90px;*/
.bodyContent .head .right li{ display:inline-block; margin:0 0 0 5px; text-align:right;} 
.bodyContent .head .right a{ text-decoration:none; font-size:1rem; color:#00b8e6; transition:.3s;}
.bodyContent .head .right a:hover{ color:#ff0000;}

.bodyContent .head #leftN{width: 50%;margin-bottom: 5px;}
.bodyContent .head #leftN .like-table{display: flex;align-items: center;flex-wrap: wrap;}
.bodyContent .head #leftN .top-logo{margin-right:10px;width: 40%;position: relative;}
.bodyContent .head #leftN .top-logo a{display: inline-block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-indent: -999px;overflow: hidden;}
.bodyContent .head #leftN .top-logo img{ width: 100%; }
.bodyContent .head #leftN .top-at { float:left; width:auto;height: 100%; display: flex;flex-flow: column;justify-content: center;}
.bodyContent .head #leftN .top-at p{margin: 0;}


/* == 導覽列 == */
.bodyContent .nav{ clear:both; margin:0; width:100%;  height:50px; background-color:#0d48ab;}
.bodyContent .nav .wrap{ margin:0 auto; max-width:1024px; }
.bodyContent .nav ul{ list-style:none; margin: 0; padding: 0; }
.bodyContent .nav li { float:left; background-color:#0d48ab; border-right:1px solid #FFF; text-align:center; box-sizing: border-box;}
.bodyContent .nav li:last-child{ border-right:0; }
.bodyContent .nav li a{ display: block; width:251px; height:50px; font-size:1.2rem; line-height:50px; text-decoration:none; color:#FFF; transition:.3s;}
.bodyContent .nav li a:hover{ background-color:#00b8e6;}
.bodyContent .nav li a.active{ background-color:#00b8e6;}


/* == 快訊 == */
.bodyContent .search{ clear:both; padding:0 12px; width:100%; background-color:#e3e9f3; overflow:hidden;box-sizing: border-box;}
.bodyContent .search .wrap{ margin:0 auto; max-width:1024px; }
.bodyContent .search .left{ float:left; width:60%; height:70px; display: table; }
.bodyContent .search .left dt{ float:left; width:60px; height:32px; background-color:#F00; font-weight:bold; line-height:32px; text-align:center; color:#FFF;}
.bodyContent .search .left dd{ float:left; width:500px; background-color:#FFF; text-indent:10px; line-height:32px; }
.bodyContent .search .left dd a{color:#ff0000; text-decoration:none;}
.bodyContent .search .left dd a:hover{ color:#e43519; }
.bodyContent .search .right{ float:right; width:40%; height:70px; display: table; text-align:right; }
.bodyContent .search .right a{text-decoration: none;}
.bodyContent .search .right img{ margin:5px 0 0 5px; width:120px; height:32px;}


/* == 主要內容最外層(內頁)  == */
.bodyContent .wrapper{ margin:0 auto; padding:20px 0 30px; max-width:1024px; }

			   
/* == 麵包屑 == */
.bodyContent .path{ padding:0 12px; width:100%;margin: 10px 0;box-sizing: border-box;}
.bodyContent .path ol{ margin:0; padding:0;line-height: 1.3;overflow: hidden;}
.bodyContent .path li{ margin:0; padding:0 5px 0 0; float:left; color:#CCC;}
.bodyContent .path li a{ text-decoration:none; color:#4a617a; transition:.3s;}
.bodyContent .path li a:hover{ color:#0664cd;}

/* == 頁碼 == */
.bodyContent .page{ clear:both; margin:20px auto; padding:0; width:100%; text-align:center; }
.bodyContent .page ul{ margin:0 auto; padding:0; width:100%; text-align:center; }
.bodyContent .page li{ display:inline-block; font-size:14px; color:#acacac; }
.bodyContent .page li a{ text-decoration:none; padding:5px 10px; font-size:14px; color:#acacac; border:1px solid #e5e5e5; transition:.3s}
.bodyContent .page li a.active{ margin:0; padding:5px 10px; font-size:14px; color:#FFF; border:1px solid #666; background-color:#666;}
.bodyContent .page li a:hover{ color:#FFF; background-color:#00b8e6; border:1px solid #00b8e6;}
.bodyContent .page select{ padding: 5px; border: 1px solid #e5e5e5; color: #666;}


/* == 上下則 == */
.bodyContent .updown{ padding:10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.bodyContent .updown p{ margin:4px 0; font-size:1rem; font-size:1.5;}
.bodyContent .updown a{ color:#1eb113;}
.bodyContent .updown a:hover{ text-decoration:none;}


/* == 版權 == */
.bodyContent .footer{ clear:both; padding:30px 0; width:100%; background-color:#0d48ab;box-sizing: border-box;}
.bodyContent .footer .wrap{ margin:0 auto; padding:0; max-width:1024px; color:#FFF; overflow:hidden; 
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.bodyContent .footer .left { margin:0 auto; width:200px;}
.bodyContent .footer .right { width: 100%;}
.bodyContent .footer .right ul{ margin:10px 0 15px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.bodyContent .footer .right li{margin: 5px; width: 10%;}
.bodyContent .footer .right li a{
	display:block;border-radius:30px; background-color:#FFF;font-size:1rem; text-align:center;  color:#0d48ab; text-decoration:none; transition:.3s; opacity:1;
	padding:5px 10px;}
.bodyContent .footer .right li a:hover{ opacity:0.9;}
.bodyContent .footer p{ margin: 0; padding:0 0 5px; font-size:14px; text-align: center; color:#c1c1c1;}


/* == 2024.11.26 新增固定按鈕 == */
.bodyContent .f-social{ display:none;}
/* == 固定按鈕 == */
.bodyContent .f-contact { display:none;}

/*OPSP登入視窗*/
.opsp-login{ margin: 0 auto 20px ; padding: 20px; width: 100%; max-width: 500px; background-color: #f4f6fa;}
.opsp-login h2{ margin: 0; padding: 0 0 30px ; font-size: 1.6rem; text-align: center;}
.opsp-login h4{ margin: 20px 0; padding: 0; font-size: 1rem; text-align: center; color: #333;}
.opsp-login p{ margin: 0; padding: 20px 0 0; font-size: 1rem; color: #333; }
.opsp-login .sns{ width:100%; text-align: center;}
.opsp-login .sns ul{ list-style:none; margin:0; padding:0;}
.opsp-login .sns li{ display: inline-block; width: 140px; height: 40px; line-height: 40px; font-size: 1.1rem; color: #FFFFFF; }
.opsp-login .sns li:nth-child(1){ background-color: #2467b6; }
.opsp-login .sns li:nth-child(2){ background-color: #ea4335; }
.opsp-login .sns li a{ display: block; text-decoration: none; color: #FFFFFF; transition:.3s; }
.opsp-login .sns li:nth-child(1) a:hover{ background-color: #1f5aa0; }
.opsp-login .sns li:nth-child(2) a:hover{ background-color: #cc3c30; }

.opsp-login .member{ width: 100%;}
.opsp-login .member .inputstyle{ appearance:none; -webkit-appearance:none; padding:0 5px; color:#333; font-size:1em; width: 100%; height:40px; border:0px; border: 1px solid #CCC; }
.opsp-login .member .btn{ margin: 0 auto; padding: 8px 5px ; width: 100%; text-align: center; font-size: 16px; color: #FFFFFF; border-radius: 5px; background-color: #00b8e6; border-top: 1px solid #00a5ce; border-left: 1px solid #00a5ce; border-right: 2px solid #00a5ce; border-bottom: 3px solid #00a5ce; cursor: pointer; }

.opsp-login .member div{ margin: 10px 0; font-size: 1em; color: #333;}
.opsp-login .member div .forgetpass{ padding: 0 0 0 10px; text-decoration: none; color: #1eb113;}
.opsp-login .member div .forgetpass:hover{ text-decoration: underline;}

.opsp-login .other{ width: 100%; text-align: center;}
.opsp-login .other li{ display: inline-block; width: 49%; height: 40px; line-height: 40px; font-size: 1rem; border-radius: 5px; border: 1px solid #68717c; background-color: #FFFFFF;}
.opsp-login .other li a{ display: block; text-decoration: none; font-weight:bold; color: #68717c; transition:.3s; }
.opsp-login .other li a:hover{ background-color: #68717c; border-radius: 4px; color: #FFFFFF;}

@media(max-width: 1050px){
	.bodyContent .footer .left{width:160px;}
}

/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:1023px ){
	
/*按鈕樣式*/
.bodyContent .btn01 a{
	display:block; margin: 0 auto;  width: 100%; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.bodyContent .btn01 a:hover{ background-color:#e43519; }
	
	
/*行動裝置選單*/
.bodyContent .mtop{ display: block; width: 100%;	height: 35px; border-bottom: 1px solid #00b8e6;	}
.bodyContent .mtop .menu{
	float: left; width: 35px; height: 35px;	background-color:#00b8e6;	
	font-size: 1.5em; line-height: 35px; text-align: center; color: #fff;
	}
.bodyContent .mtop .user{ float: right;padding: 0 5px 0 0;	font-size: 0.95rem; line-height: 35px; color: #00b8e6; }
.bodyContent .mtop .user li{ display:inline-block; margin-right:6px;}
.bodyContent .mtop .user a{ text-decoration: none; color:#00b8e6; transition:.3s; }
.bodyContent .mtop .user a:hover{ color: #F00;}

.bodyContent .menu-main{	clear: both; display: none;	width: 100%; background-color: #e5e5e6;	position:relative; z-index: 999px; box-shadow: 0px 1px 5px rgba(0,0,0,.3);}
.bodyContent .menu-main li{z-index:5; position:relative; color: #FFF; background-color:#00b8e6; border-bottom: 1px solid #e3e9f3; transition:.3s;}
.bodyContent .menu-main li:last-child{ border-bottom: 0;}
.bodyContent .menu-main li a{ display:block;	padding:8px; font-size:1em; color: #FFF; text-decoration:none;}
.bodyContent .menu-main li:hover { background-color:#009ed9;}
.bodyContent .menu-main li ul { display:none; position:absolute; top:100%; background-color:#f7f7f7;}
.bodyContent .menu-main li:hover ul { display: block; position: relative; right: 0; left: 0; top: 100%;}
.bodyContent .menu-main li:hover ul li a{
	padding-left:10px;	background-color:#f7f7f7; 
    font-size:1em; text-decoration:none; color: #464c53; transition:.3s;
	}
.bodyContent .menu-main li:hover ul li a:hover{ color: #009ed9;}
.bodyContent .menu-main li:hover ul li:last-child a{ border-bottom: 0px;}
.bodyContent .arrow-bottom {
	width: 1px; height: 1px; position: absolute; top: 20px; right: 13px; margin-left: 5px;
    border-top: 4px solid #FFF; border-right: 4px solid transparent; border-left: 4px solid transparent;
}

	
/* == 刊頭 == */	
.bodyContent .head .left{ float:none; margin:0 auto; width:100% !important; height:100px; }
.bodyContent .head .left .top-logo{ float:none; margin:0 auto 5px; width:100%; height: auto; justify-content: center; }
.bodyContent .head .left .top-logo img{ width:30px; height:30px; }
.bodyContent .head .left .top-logo h2 { float:none; font-size:2rem; }
.bodyContent .head .left .top-at { clear:both; float:none;  width:100%;  height: auto;text-align: center;}
.bodyContent .head .left .top-at p{ float:none; padding:0 5px; font-size:0.9rem; line-height:1.2; font-weight:normal; color:#666;}	
.bodyContent .head .right{ display:none; width:0%; } 

.bodyContent .head #leftN{margin:10px auto;}
.bodyContent .head #leftN .like-table{flex-wrap: wrap;justify-content: center;}
.bodyContent .head #leftN .top-logo{width:50%;margin:10px 0 0 0;}
.bodyContent .head #leftN .top-at{width: 100%;text-align: center;}
.bodyContent .head #leftN .top-at p{line-height: 1.8;}

/* == 導覽列 == */
.bodyContent .nav{ clear:both; margin:0; width:100%; background-color:#00b8e6; height: auto;}
.bodyContent .nav ul{ list-style:none; margin: 0; padding: 0; overflow: hidden;}
.bodyContent .nav li { float:left; width:50%; border-right:0; text-align:center;  background-color:#0d48ab; border-bottom:1px solid #FFF;}
.bodyContent .nav li:nth-child(odd){ border-right:1px solid #FFF;}
.bodyContent .nav li:nth-child(2){ margin: 0;}
.bodyContent .nav li:nth-child(5){ margin: 0;}
.bodyContent .nav li:last-child{ border-right:0;}
.bodyContent .nav li a{ display: block; width:100%; height:44px; font-size:1rem; line-height:44px; text-decoration:none; color:#FFF; transition:.3s;}
.bodyContent .nav li a:hover{ background-color:#00b8e6;}
.bodyContent .nav li a:active{ background-color:#00b8e6;}


/* == 搜尋 == */
.bodyContent .search{ display:none; }
	
/* == 主要內容最外層(內頁)  == */
.bodyContent .wrapper{ margin:0 auto; padding:0 0 20px; max-width:100%; }	

/* == 麵包屑 == */
.bodyContent .path{ padding: 0 12px;box-sizing: border-box; width:100%; height:auto; line-height:20px; margin:0 0 10px; overflow:hidden;}
.bodyContent .path ol{ margin:0; padding:0;}
.bodyContent .path li{ margin:0; padding:0 5px 0 0; float:left; color:#CCC; font-size:0.9rem;}
.bodyContent .path li a{ text-decoration:none; color:#4a617a;}

/* == 上下則 == */
.bodyContent .updown{ padding:10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.bodyContent .updown p{ margin:4px 0; font-size:0.95rem; font-size:1.5;}
.bodyContent .updown a{ color:#1eb113;}
.bodyContent .updown a:hover{ text-decoration:none;}


/* == 版權 == */
.bodyContent .footer{ clear:both; margin:10px 0 55px 0; padding:10px; width:100%; height:auto; background-color:#0d48ab; }
.bodyContent .footer .wrap{ margin:0 auto; padding:0; max-width:800px; color:#FFF; overflow:hidden; text-align:center;}
.bodyContent .footer .left { display:none; float:none;  margin:0 auto; width:200px;  }
.bodyContent .footer .right { float:none; padding:10px 0; width:100%; }
.bodyContent .footer .right ul{flex-wrap: wrap; width: 100%; margin: 0 0 10px;}
.bodyContent .footer .right li{margin:5px 1%;width: 18%;}
.bodyContent .footer .right li a{width:100%;border-radius:40px;font-size:1rem; text-align:center;color:#0d48ab; text-decoration:none; transition:.3s; opacity:1;padding: 5px 0;}
.bodyContent .footer .right li a:hover{ opacity:0.9;}
.bodyContent .footer p {font-size:0.7rem; text-indent:0; color:#ddd;}
	
/* == 2024.11.26 新增固定按鈕 == */
.bodyContent .f-social{ display: block; position: fixed; left: 0; bottom: 0; padding: 10px 0; z-index: 2000;
	width: 100%; height: auto; background-color: rgb(255, 255, 255, 0.8);}
.bodyContent .f-social ul{ margin: 0; padding: 0 2px; text-align: center; display:flex;	justify-content:space-around;}
.bodyContent .f-social ul li{ width: 32%; padding: 10px 0; font-size: 1em; color: #FFFFFF; border-radius: 5px; position: relative;}
.bodyContent .f-social li:nth-child(1){ background-color: #0d48ab;}
.bodyContent .f-social li:nth-child(2){ background-color: #009590;}
.bodyContent .f-social li:nth-child(3){ background-color: #ff0000; }
.bodyContent .f-social li a{ display: block; text-decoration: none; color: #FFFFFF; }
.bodyContent .f-social li img{ position: absolute; top: -2.8em; left: calc((100% - 50px)/2); width: 50px; height: auto;}

/* == 固定按鈕 == */
.bodyContent .f-contact{ display: none;}


/*OPSP登入視窗*/
.opsp-login{ margin: 0 auto 20px auto; padding: 20px; width: 100%; background-color:#FFFFFF;}
.opsp-login h2{ margin: 0; padding: 0 0 30px 0; font-size: 1.3em; text-align: center;}
.opsp-login h4{ margin: 20px 0; padding: 0; font-size: 14px; text-align: center; color: #333;}
.opsp-login p{ margin: 0; padding: 20px 0 0 0; font-size: 14px; color: #333; }
.opsp-login .sns{ width: 100%; text-align: center;}
.opsp-login .sns li{ display: inline-block; width: 120px; height: 40px; line-height: 40px; font-size: 1.1em; color: #FFFFFF; }
.opsp-login .sns li:nth-child(1){ background-color: #2467b6; }
.opsp-login .sns li:nth-child(2){ background-color: #ea4335; }
.opsp-login .sns li a{ display: block; text-decoration: none; color: #FFFFFF; }
.opsp-login .sns li:nth-child(1) a:hover{ background-color: #1f5aa0; border-radius: 5px; }
.opsp-login .sns li:nth-child(2) a:hover{ background-color: #cc3c30; border-radius: 5px; }

.opsp-login .member{ width: 100%;}
.opsp-login .member .inputstyle{ appearance:none; -webkit-appearance:none; padding:0 5px; color:#333; font-size:1em; width: 100%; height:40px; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif; border:0px; border: 1px solid #CCC; }
.opsp-login .member .btn{ margin: 0 auto; padding: 8px 5px ; width: 100%; text-align: center; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif; font-size: 16px; color: #FFFFFF; border-radius: 5px; background-color: #00b8e6; border-top: 1px solid #00a5ce; border-left: 1px solid #00a5ce; border-right: 2px solid #00a5ce; border-bottom: 3px solid #00a5ce;  cursor: pointer; }

.opsp-login .member div{ margin: 10px 0; font-size: 14px; color: #333;}
.opsp-login .member div .forgetpass{ padding: 0 0 0 10px; text-decoration: none; color: #1eb113;}
.opsp-login .member div .forgetpass:hover{ text-decoration: underline;}

.opsp-login .other{ width: 100%; text-align: center;}
.opsp-login .other li{ display: inline-block; width: 49%; height: 40px; line-height: 40px; font-size: 1em; border-radius: 5px; border: 1px solid #68717c; background-color: #FFFFFF;}
.opsp-login .other li a{ display: block; text-decoration: none; color: #68717c; }
.opsp-login .other li a:hover{ background-color: #68717c; border-radius: 4px; color: #FFFFFF;}
}

@media(max-width:600px){
.bodyContent .head #leftN{width: 100%;margin:10px auto;}
.bodyContent .head #leftN .top-at p{line-height: 1.6;}


/* == 版權 == */	
.bodyContent .footer .right ul{flex-wrap: wrap; margin: 0 0 10px;}
.bodyContent .footer .right li{margin-bottom:10px;width: 31%;margin:5px 1%;}
}
@charset "utf-8";

/* == 桌機版 ============================================================================= */


/* ============== OPSP列表頁 ============== */
.opsp{ margin:0; padding:0 12px;}
.opsp .title h1{
	display: table; width:100%; height:40px; border-top:1px solid #0d48ab; border-bottom:1px solid #0d48ab; overflow: hidden;
	font-size:1.5rem; line-height:40px; text-align:left; color:#0d48ab;
	}
.opsp .select{ display: table; padding:15px 0; width:100%; font-size:1rem; }
.opsp .select ul{ float:right;}
.opsp .select li{ float:left; margin:0 10px 0 0;}
.opsp .select li:nth-child(odd){ width:38px; line-height:34px; }
.opsp .select li:nth-child(even){ width:100px; }
.opsp .select select{padding:0 5px; height:34px; font-size:1rem;}

/* OPSP */
.opsp .content dl{ text-align:center;display: flex;justify-content: flex-start;flex-wrap: wrap;}
.opsp .content dd{ display: inline-block; margin:0 1% 15px; padding:0; overflow:hidden;width: 31%;}
.opsp .content .box{ display: table; width:100%;  height:100%;}
.opsp .content .box ul{padding:10px; border:1px solid #CCC;  height:100%;}
.opsp .content .box li{ text-align:left; }
.opsp .content .box li img{ width:100%; height:170px; opacity:1; transition:.3s;}
.opsp .content .box li img:hover{opacity:0.7;}
.opsp .content .box li h3{padding:10px 0; font-size:1rem; font-weight:normal; line-height:1.3; }
.opsp .content .box li h3 a{ text-decoration:none; color:#1eb113; transition:.3s;}
.opsp .content .box li h3 a:hover{ color:#F00;}
.opsp .content .box li p { padding:5px 10px; background-color:#f4f6fa; font-size:0.85rem; color:#777;}
.opsp .content .box li h2 { padding:10px 0 0; font-size:0.9rem; }
.opsp .content .box li h2 a{ color:#666; }
.opsp .content .box li h2 a:hover{ text-decoration:none;}


/* 考取經驗談 */
.experience{ margin: 40px auto 0; padding:0 12px; width: 100%; overflow: hidden; }
.experience .mainbox{ padding: 0 0 20px 0; width: 100%;  }
.experience .mainbox ul.exp-tab{ width: 100%; height: auto; display: flex;}
.experience .mainbox ul.exp-tab li{ 
	float: left; display: block; padding: 12px 0; width: 25%; border-right:1px solid #FFF; background-color:#e3e9f3;
	cursor:pointer;	font-size: 1.1rem; font-weight:bold; color: #0d48ab; text-align: center; transition:.5s;
}
.experience .mainbox ul.exp-tab li:last-child{border-right:0;}
.experience .mainbox ul.exp-tab li.active{ background-color:#0d48ab; color: #fff; }
.experience .mainbox ul.exp-tab li:hover{background-color:#0d48ab; color: #fff;}
.experience .wrapper{ padding:0 0 30px; border: 1px solid #e3e9f3; overflow:hidden;}
.experience .box { margin: 0 0 10px;}
.experiencecon{ padding: 30px 0 15px; width:100%; overflow: hidden; text-align:center; }
.experiencecon ul{display: flex;}
.experiencecon li{ display: inline-block; margin: 0; padding: 0 20px;  width:31%;}
.experiencecon li .photo{ margin: 0 auto; width: 100%; text-align:center; }
.experiencecon li .photo img{ width:100%; max-width: 88px; border-radius: 50%; }
.experiencecon li .text{ margin: 0 auto; width: 100%;}
.experiencecon li .text h3{ margin: 0 0 10px 0; padding: 10px 0; font-size: 1.2rem; color: #000000; text-align: center; border-bottom: 1px dashed #D3D2D2; }
.experiencecon li .text h3 a{ text-decoration: none; color: #0d48ab; transition:.3s;}
.experiencecon li .text h3 a:hover{ color: #F00;}
.experiencecon li .text p{ margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; text-align: justify;}
.experience .btn a{
	display:block; margin: 0 auto; width: 220px; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.experience .btn a:hover{ background-color:#e43519; }


/* 自訂欄位標籤 */
.customlabel{ margin: 0 auto; padding:0 12px; width: 100%; overflow: hidden; }
.customlabel .mainbox{ padding: 0; width: 100%; }
.customlabel .mainbox ul.cust-tab{ width: 100%; height: auto; display: flex;}
.customlabel .mainbox ul.cust-tab li{ 
	float: left; display: block; padding: 12px 0; width: 100%; border-right:1px solid #FFF; background-color:#e3e9f3;
	cursor:pointer;	font-size: 1.1rem; font-weight:bold; color: #1eb113; text-align: center; transition:.5s;
	}
.customlabel .mainbox ul.cust-tab li:last-child{border-right:0;}
.customlabel .mainbox ul.cust-tab li.active{ background-color:#1eb113; color: #fff; }
.customlabel .mainbox ul.cust-tab li:hover{ background-color:#1eb113; color: #fff;}

.customlabel .wrapper{ padding:0; border: 1px solid #e3e9f3; overflow:hidden;}

.customlabelcon{ padding: 10px 1px;	width:100%; overflow: hidden;}
.customlabelcon ul{display: flex;flex-wrap:wrap;} 
.customlabelcon li{	display: block;	float: left;margin: 15px 0;	padding: 0 20px; width: 31%;box-sizing:border-box;}
.customlabelcon li .photo{ float: left;  margin: 0 auto; width: 30%; }
.customlabelcon li .photo img{ border-radius: 5px; max-width: 75px; height: auto; }
.customlabelcon li .text{ float: right; margin: 0 auto; width: 70%;}
.customlabelcon li .text h3{ margin: 0; padding: 0 0 5px 0; font-size: 1.2rem; }                
.customlabelcon li .text h3 a{ text-decoration: none; color: #1eb113; transition:.3s;}
.customlabelcon li .text h3 a:hover{ color: #F00;}
.customlabelcon li .text p{ margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; text-align: justify;}


/*============== OPSP內容 ==============*/

/* 資訊區 */
.opsp .content h1{ font-size:1.6rem; line-height:40px; }
.opsp .content .bn { margin:0 0 20px; padding: 0; overflow:hidden;}
.opsp .content .bn img{ width: 100%; max-width: 1024px; height:auto;}
.opsp .content .info{ margin:10px 0;}
.opsp .content .info li{ margin: 0; padding: 8px 0; font-size: 1rem; line-height: 1.5; color: #000000; border-top: 1px dashed #D5D5D5; }
.opsp .content .info li:nth-child(4){ border-top: 0;}
.opsp .content .info i{ padding: 0 5px; color: #00b8e6;}
.opsp .content .info li a{ color:#1eb113; text-decoration:none;}
.opsp .content .info li a:hover{ color:#16810e;}
.opsp .content .text{ margin:4px 0; padding:10px 15px; background-color:#f4f6fa;}

/*20220831隱藏活動時間*/
.opsp .content .info li:nth-child(1) {
    display: none;
}

/*20200415增加錨點按鈕*/
.opsp .adbtn{ margin: 30px 0; width: 100%; display:flex; flex-wrap: wrap; justify-content: center; box-sizing: border-box;}
.opsp .adbtn a{
	display:inline-block; margin: 0 1%; width: 14.5%; height: 40px; line-height: 40px; border-radius: 20px; background-color:#ff6600;
	font-size: 1.1rem; color:#FFFFFF; text-align: center; text-decoration: none; transition-duration: .5s;
    }
.opsp .adbtn a:hover{ background-color: #68717c;}
.opsp .fixed{position: fixed;left: 0;top: 0; width: 100%;background: #fff;box-shadow:0 1px 2px rgba(0,0,0,.2);margin: 0;padding:20px calc((100% - 1024px)/2);}


/* 可編輯區 */
.opsp .edit{ margin:30px 0;}
.opsp .edit h2{ padding:2px 0; border-bottom:1px solid #0d48ab; font-size:1.4rem; text-align:left; font-weight:700; color:#0d48ab;}
.opsp .edit p{ margin:20px 0; font-size:1rem; line-height:1.5;}

/* 按鈕 */
.opsp .btn a{
	display:block; margin: 0 auto; width: 100%; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.opsp .btn a:hover{ background-color:#e43519; }


/* OPSP導覽*/
.opsp-nav{ margin: 30px 0 0;}
.opsp-nav .content { width:100%; padding:0; text-align:center;}
.opsp-nav .content dl{display: flex;}
.opsp-nav .content dd{ display: inline-block; padding:0;margin:0 1%;width: 31%;}
.opsp-nav .content .box{ display: table; width: 100%; height: 100%;}
.opsp-nav .content .box ul{ padding:10px;  border:1px solid #CCC;  width:100%;box-sizing: border-box;height: 100%;}
.opsp-nav .content .box li{ text-align:left; }
.opsp-nav .content .box li img{ width:300px; height:170px; opacity:1; transition:.3s;}
.opsp-nav .content .box li img:hover{opacity:0.7;}
.opsp-nav .content .box li h3{  padding:10px 0; font-size:1rem; font-weight:normal; line-height:1.3;}
.opsp-nav .content .box li h3 a{ text-decoration:none; color:#1eb113; transition:.3s;}
.opsp-nav .content .box li h3 a:hover{ color:#F00;}
.opsp-nav .content .box li p { padding:5px 10px; background-color:#f4f6fa; font-size:0.85rem; color:#777;}
.opsp-nav .content .box li h2 { padding:10px 0 0; font-size:0.9rem; }
.opsp-nav .content .box li h2 a{ color:#666; }
.opsp-nav .content .box li h2 a:hover{ text-decoration:none;}


/*============== 跳出燈箱 ==============*/
.expired{ margin:0 auto; width:100%; max-width:1024px; text-align:center;}
.expired h1{ padding:30px 0; font-size:2.4rem; line-height:1; color:#0d48ab; }
.expired .content { width:100%; padding:0; text-align:center;}
.expired .content dl{display: flex;}
.expired .content dd{ display: inline-block; padding:0; overflow:hidden; width: 31%;margin: 0 1%; border:1px solid #CCC;}
.expired .content dd:nth-child(2){ margin:0 10px 0;}
.expired .content .box{ display: table; width: 100%; }
.expired .content .box ul{ width:100%; padding:10px;box-sizing: border-box;}
.expired .content .box li{ text-align:left; }
.expired .content .box li img{ width:100%; height:170px; opacity:1; transition:.3s;}
.expired .content .box li img:hover{opacity:0.7;}
.expired .content .box li h3{ height:60px; padding:10px 0; font-size:1rem; font-weight:normal; line-height:1.3; }
.expired .content .box li h3 a{ text-decoration:none; color:#1eb113; transition:.3s;}
.expired .content .box li h3 a:hover{ color:#F00;}
.expired .content .box li p { padding:5px 10px; background-color:#f4f6fa; font-size:0.85rem; color:#777;}
.expired .content .box li h2 { padding:10px 0 0; font-size:0.9rem; }
.expired .content .box li h2 a{ color:#666; }
.expired .content .box li h2 a:hover{ text-decoration:none;}

/*按鈕樣式*/
.expired .btn ul{ padding: 20px 0 0 0; }
.expired .btn li{
	display: inline-block;	width: 110px; height: 40px;	border-radius: 5px; 
    font-size: 1.2rem; line-height: 40px; color: #FFFFFF; text-align: center;
}
.expired .btn li:nth-child(1){ background-color: #00b8e6; }
.expired .btn li:nth-child(2){ margin: 0 5px; background-color: #0d48ab; }
.expired .btn li a{ display: block; text-decoration: none; color: #FFFFFF; }


/*============== 活動場次與個人資訊 ==============*/

.session { margin:30px 0 0; }
.session h2{ margin: 0 0 20px; padding:2px 0; border-bottom:1px solid #0d48ab; font-size:1.4rem; text-align:left; font-weight:700; color:#0d48ab;}
.session table{ border-collapse: collapse; font-size: 1rem; }
.session table a{ text-decoration:none; color:#1eb113; transition:.3s;}
.session table a:hover{ color:#f00;}
.session td { border:1px solid #a3e0ef; border-collapse: collapse; padding:5px 6px; line-height:1.3; }
.session td:nth-child(1){background-color:#00b8e6; color:#FFF;}
.session td input{ padding: 4px; font-size: 1rem; }
.session td select{ 
    margin:0; padding:0 5px; height:32px; border:1px solid #CCC; outline:none; font-size:1rem;}
.session p{ margin:10px 0; color:#F00;}


/*OPSP報名欄位*/
.signup{
	margin: 20px auto 30px; padding: 30px; width:100%; height: auto; box-sizing: border-box;
	border: 1px solid #00b8e6; border-radius:10px; color:#00b8e6;
    }
.signup div{ margin: 10px 0; font-size: 1rem; }
.signup .box01 span{ font-size: 1rem;}
.signup .box01 input{
	appearance:none; -webkit-appearance:none; -moz-appearance: none; width: 50%; height:32px; padding:0 5px; 
	border:0px; border: 1px solid #CCC;	font-size:1rem; color:#333;
	}
.signup .box02 input{
	appearance:none; -webkit-appearance:none; -moz-appearance: none; width: 40%; height:32px; padding:0 5px; 
	border:0px; border: 1px solid #CCC;	font-size:1rem; color:#333;
	}
.signup .box02 select{ margin:0; padding:0 5px; width: 15%; height:32px; border:1px solid #CCC; outline:none; font-size:1em; color:#333; }
.signup .btn{ margin: 10px auto 0 auto; padding: 5px ; width: 100px; text-align: center;}



/* 按鈕 */
.session .btn01 {
	display:block; margin: 25px auto; width: 180px; height: 45px; border-radius: 5px; background-color: #68717c;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.session .btn02 a{
	display:block; margin: 25px auto; width: 180px; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.session .btn02 a:hover{ background-color:#e43519; }
.session .btn03 {
	display:block; margin: 25px auto 0; margin-bottom:0; width: 180px; height: 45px; border-radius: 5px; background-color: #1eb113;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none;  
	}
	
	
/*============== 講座紀錄 ==============*/

.record{ margin:0 0 30px; padding:0 12px;}
.record .box{ margin: 30px 0 0 0; }
.record .box h3{ margin: 0; padding: 0; font-size: 1.3rem; color:#000000;}
.record .box h3 i{ color: #f3ce00; }
.record .box h4{ margin: 0; padding: 0; font-weight: normal; font-size: 1rem; color: #565656; line-height: 1.6;}
.record .box table{ margin: 10px 0; padding: 0; border:none; border-collapse:collapse; }
.record .box table tr:nth-child(1){ background-color: #00b8e6; font-weight: bold; color: #FFFFFF; }
.record .box table td{ border: 1px solid #a3e0ef; padding: 5px; font-size: 1rem; line-height: 1.3; text-align: center; }
.record .box table td a{ text-decoration: none; color:#f00;}
.record .box table td a:hover{ text-decoration:underline;}


/*OPSP瀏覽列印*/
.record-print{ margin: 20px auto; padding: 0; width: 100%; max-width:600px; }
.record-print h2{ padding: 0 0 10px 0; font-size: 1.5rem; line-height:1.2; border-bottom: 1px solid #0d48ab; text-align: center; color: #0d48ab;}
.record-print h3{ padding: 15px 0 5px 0; font-size: 1em; color: #333;}
.record-print p{ margin: 0; padding: 0; color: #666;}
.record-print table{ margin: 10px 0; padding: 0; border:none; border-collapse:collapse;}
.record-print table td{ border: 1px solid #a3e0ef; padding: 5px; font-size: 1em; line-height: 1.5; }
.record-print table td:nth-child(1){ background-color: #00b8e6; font-weight: bold; color: #FFFFFF; text-align: center;}
.record-print .print{ margin: 20px 0 0 0; width: 100%; text-align: center; }
.record-print .btnstyle{ width: 40%; padding: 5px; text-align: center; font-size: 1rem; color: #333; }


/*OPSP登入視窗*/
.opsp-login{ margin: 0 auto 20px ; padding: 20px; width: 100%; max-width: 500px; background-color: #f4f6fa;}
.opsp-login h2{ margin: 0; padding: 0 0 30px ; font-size: 1.6rem; text-align: center;}
.opsp-login h4{ margin: 20px 0; padding: 0; font-size: 1rem; text-align: center; color: #333;}
.opsp-login p{ margin: 0; padding: 20px 0 0; font-size: 1rem; color: #333; }
.opsp-login .sns{ width:100%; text-align: center;}
.opsp-login .sns ul{ list-style:none; margin:0; padding:0;}
.opsp-login .sns li{ display: inline-block; width: 140px; height: 40px; line-height: 40px; font-size: 1.1rem; color: #FFFFFF; }
.opsp-login .sns li:nth-child(1){ background-color: #2467b6; }
.opsp-login .sns li:nth-child(2){ background-color: #ea4335; }
.opsp-login .sns li a{ display: block; text-decoration: none; color: #FFFFFF; transition:.3s; }
.opsp-login .sns li:nth-child(1) a:hover{ background-color: #1f5aa0; }
.opsp-login .sns li:nth-child(2) a:hover{ background-color: #cc3c30; }

.opsp-login .member{ width: 100%;}
.opsp-login .member .inputstyle{ appearance:none; -webkit-appearance:none; padding:0 5px; color:#333; font-size:1em; width: 100%; height:40px; border:0px; border: 1px solid #CCC; }
.opsp-login .member .btn{ margin: 0 auto; padding: 8px 5px ; width: 100%; text-align: center; font-size: 16px; color: #FFFFFF; border-radius: 5px; background-color: #00b8e6; border-top: 1px solid #00a5ce; border-left: 1px solid #00a5ce; border-right: 2px solid #00a5ce; border-bottom: 3px solid #00a5ce; cursor: pointer; }

.opsp-login .member div{ margin: 10px 0; font-size: 1em; color: #333;}
.opsp-login .member div .forgetpass{ padding: 0 0 0 10px; text-decoration: none; color: #1eb113;}
.opsp-login .member div .forgetpass:hover{ text-decoration: underline;}

.opsp-login .other{ width: 100%; text-align: center;}
.opsp-login .other li{ display: inline-block; width: 49%; height: 40px; line-height: 40px; font-size: 1rem; border-radius: 5px; border: 1px solid #68717c; background-color: #FFFFFF;}
.opsp-login .other li a{ display: block; text-decoration: none; font-weight:bold; color: #68717c; transition:.3s; }
.opsp-login .other li a:hover{ background-color: #68717c; border-radius: 4px; color: #FFFFFF;}




/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:1023px ){
	
/*============== 列表頁 ==============*/
.opsp{ margin:0 0 20px; padding:0 12px;}
.opsp .title h1{
	display: table; width:100%; height:40px; border-top:1px solid #0664cd; border-bottom:1px solid #0664cd; overflow: hidden;
	font-size:1.4rem; font-weight:700; color:#0664cd; text-indent:5px;
	}
.opsp .select{ display: table; padding:5px 0; width:100%; font-size:1rem;}
.opsp .select ul{ float:none; padding:10px 0;}
.opsp .select li{ float:left; margin:5px 0; }
.opsp .select li:nth-child(odd){ width:14%; line-height:34px; }
.opsp .select li:nth-child(even){ width:86%; }
.opsp .select select{ padding: 2px; width:100%; height:34px; font-size:1rem;}

/*OPSP*/
.opsp .content dl{ text-align:center;}
.opsp .content dd{ display: inline-block; margin:0; padding:5px 0 10px; overflow:hidden; border-bottom:1px dashed #CCCCCC; width: 100%; }
.opsp .content .box{ display: table; width: 100%; }
.opsp .content .box ul{ padding:0; width:100%; height:auto; border:0;}
.opsp .content .box li{ display: table-cell; vertical-align: middle; }
.opsp .content .box li:nth-child(1){ width:45%;}
.opsp .content .box li:nth-child(2){ width:55%;}
.opsp .content .box li img{ float:left; width:100%; height:auto; opacity:1; transition:.3s;}
.opsp .content .box li img:hover{opacity:0.7;}
.opsp .content .box li h3{ height:auto; padding:0 0 0 10px; overflow:hidden; font-size:1rem; font-weight:normal; line-height:1.2; text-align:justify; }
.opsp .content .box li h3 a{ text-decoration:none; color:#1eb113; transition:.3s;}
.opsp .content .box li h3 a:hover{ color:#F00;}
.opsp .content .box li p{ display:none;}
.opsp .content .box li h2{ display:none;}
	

/*20200415增加錨點按鈕*/
.opsp .adbtn{ margin: 0; padding:2% 0.5%; width: 100%;  flex-wrap: wrap;}
.opsp .adbtn a{ display: block; margin: 2px; width: 31%; height: 36px; line-height: 36px; font-size: 0.9rem; border-radius: 10px; }
.opsp .fixed{ position: fixed; top: 0; left: 0; background-color:#FFFFFF;box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.1);}

	
/* 考取經驗談 */
.experience{ margin: 0 auto; padding:0; width: 100%; overflow: hidden; }
.experience .mainbox{ padding: 0 0 10px 0; width: 100%; }
.experience .mainbox ul.exp-tab{ width: 100%; height: auto; display: flex;justify-content: space-between;}
.experience .mainbox ul.exp-tab li{ 
	float: left; display: block; padding: 12px 0; width: 50%;  border-right:0; border-top:1px solid #FFF; background-color:#e3e9f3;
	cursor:pointer;	font-size: 1rem; color: #0d48ab; text-align: center; transition:.5s;
	}
.experience .mainbox ul.exp-tab li:nth-child(odd){ border-right:1px solid #FFF;} 
.experience .mainbox ul.exp-tab li:last-child{border-right:0;}
.experience .mainbox ul.exp-tab li.active{ background-color:#0d48ab; color: #fff; }
.experience .mainbox ul.exp-tab li:hover{ background-color:#0d48ab; color: #fff;}

.experience .wrapper{ padding:0; border: 1px solid #fff; overflow:hidden;}
.experiencecon{ padding: 20px 1px 0 1px; width:100%; overflow: hidden; text-align:center;}
.experiencecon ul{flex-wrap: wrap;}
.experiencecon li{float: left;	margin:5px 0 15px; padding: 0 10px; width: 100%; overflow:hidden;  display:flex; }
.experiencecon li .photo{ float:left; margin: 0 auto; padding: 0 10px 0 0; width: 25%; height: auto; text-align:center;}
.experiencecon li .photo img{ width:100%; max-width: 88px; border-radius: 50%; }
.experiencecon li .text{ float:right; margin: 0 auto; width: 75%; }
.experiencecon li .text h3{ margin: 0 0 5px 0; padding: 0 0 5px; font-size: 1rem; line-height:1.2; color: #000000; text-align: left; border-bottom: 1px dashed #D3D2D2; }
.experiencecon li .text h3 a{ text-decoration: none; color: #0d48ab; transition:.3s;}
.experiencecon li .text h3 a:hover{ color: #F00;}
.experiencecon li .text p{ margin: 0; padding: 0; font-size: 0.85rem; line-height: 1.3; text-align: justify;}

.experience .btn a{
	display:block; margin: 0 auto 20px; width: 220px; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.experience .btn a:hover{ background-color:#e43519; }


/* 自訂欄位標籤 */
.customlabel{ margin: 0 auto; padding:0; width: 100%; overflow: hidden; box-sizing: border-box;}
.customlabel .mainbox{ padding:0; width: 100%; }
.customlabel .mainbox ul.cust-tab{ width: 100%; height: auto; display: flex;}
.customlabel .mainbox ul.cust-tab li{ 
	float: left; display: block; padding: 12px 0; width: 100%;  border-right:0; border-top:1px solid #FFF; background-color:#e3e9f3;
	cursor:pointer;	font-size: 0.85rem; color: #1eb113; text-align: center; transition:.5s;
	}
.customlabel .mainbox ul.cust-tab li{ border-right:1px solid #FFF;} 
.customlabel .mainbox ul.cust-tab li:last-child{border-right:0;}
.customlabel .mainbox ul.cust-tab li.active{ background-color:#1eb113; color: #fff; }
.customlabel .mainbox ul.cust-tab li:hover{ background-color:#1eb113; color: #fff;}

.customlabel .wrapper{ padding:0 ; border: 1px solid #fff; overflow:hidden;}

.customlabelcon{ padding: 10px 1px;	width:100%; overflow: hidden;}
.customlabelcon li{	display: block;	float: left; width: 100%; margin: 15px 0 0; padding: 0 20px;}
.customlabelcon li .photo{ float: left; margin: 0 auto; width: 30%; text-align:center; }
.customlabelcon li .photo img{ border-radius: 5px; max-width: 75px; height: auto; }
.customlabelcon li .text{ float: right; margin: 0 auto; width: 68%;}
.customlabelcon li .text h3{ margin: 0; padding: 0 0 5px 0; font-size: 1.2rem; color: #00a2ea; }
.customlabelcon li .text h3 a{ text-decoration: none; color: #1eb113; transition:.3s;}
.customlabelcon li .text h3 a:hover{ color: #F00;}
.customlabelcon li .text p{ margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; text-align: justify;}


/*============== 內容頁 ==============*/

/* 資訊區 */
.opsp .content h1{ font-size: 1.4rem; line-height:1.1; }
.opsp .content .bn { margin:0 0 10px; padding: 0; overflow:hidden;}
.opsp .content .bn img{ width: 100%; max-width: 1024px; height:auto;}
.opsp .content .info{ margin:10px 0; }
.opsp .content .info li{ margin: 0; padding: 6px 0; font-size: 1rem; line-height: 1.4; color: #000000; border-top: 1px dashed #D5D5D5; }
.opsp .content .info li:nth-child(4){ border-top: 0;}
.opsp .content .info i{ padding: 0 5px; color: #00b8e6;}
.opsp .content .info li a{ color:#1eb113; text-decoration:none;}
.opsp .content .info li a:hover{ color:#16810e;}
.opsp .content .text{ margin:4px 0; padding:10px 15px; background-color:#f4f6fa;}
	
	
/* 可編輯區 */
.opsp .edit{ margin:20px 0;}
.opsp .edit h2{ padding:2px 0; border-bottom:1px solid #0d48ab; font-size:1.4rem; text-align:left; font-weight:700; color:#0d48ab;}
.opsp .edit p{ margin:15px 0; font-size:1rem; line-height:1.4;}
.opsp .edit table{width:100% !important;}

/* 按鈕 */
.opsp .btn a{
	display:block; margin: 0 auto; width: 100%; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.opsp .btn a:hover{ background-color:#e43519; }


/* OPSP導覽 */
.opsp-nav{ margin:0;}
.opsp-nav .content { width:100%; padding:0 10px; text-align:center;     box-sizing: border-box;}
.opsp-nav .content dl{flex-wrap: wrap;}
.opsp-nav .content dd{ display: inline-block; padding:5px 0 10px; overflow:hidden; border-bottom:1px dashed #CCCCCC; width: 100%;}
.opsp-nav .content dd:last-child{ border-bottom:0px dashed #CCCCCC;}
.opsp-nav .content .box{ display: table; width: 100%; }
.opsp-nav .content .box ul{ padding:0; width:100%; height:auto; border:0;}
.opsp-nav .content .box li{ display: table-cell; vertical-align: middle; text-align:left;}
.opsp-nav .content .box li:nth-child(1){ width:45%;}
.opsp-nav .content .box li:nth-child(2){ width:55%;}
.opsp-nav .content .box li img{ float:left; width:100%; height:auto; opacity:1; transition:.3s;}
.opsp-nav .content .box li img:hover{opacity:0.7;}
.opsp-nav .content .box li h3{ height:auto; padding:0 0 0 10px; overflow:hidden; font-size:1rem; font-weight:normal; line-height:1.2; text-align:justify; }
.opsp-nav .content .box li h3 a{ text-decoration:none; color:#1eb113; transition:.3s;}
.opsp-nav .content .box li h3 a:hover{ color:#F00;}
.opsp-nav .content .box li p{ display:none; }
.opsp-nav .content .box li h2{ display:none; }


/*============== 跳出燈箱 ==============*/
.expired{ margin:0 auto; width:100%; max-width:1024px; text-align:center;}
.expired h1{ padding:20px 10px; font-size:1.8rem; line-height:1.1; color:#0d48ab;}
.expired .content { width:100%; padding:10px; text-align:center; }
.expired .content dd{ display: inline-block; padding:5px 0 10px; overflow:hidden; border-bottom:1px dashed #CCCCCC;width: 100%; }
.expired .content dd:nth-child(2){ margin:0;}
.expired .content dd:last-child{ border-bottom:0px dashed #CCCCCC;}
.expired .content .box{ display: table; width: 100%; }
.expired .content .box ul{ padding:0; width:100%; height:auto; border:0;}
.expired .content .box li{ display: table-cell; vertical-align: middle; text-align:left;}
.expired .content .box li:nth-child(1){ width:45%;}
.expired .content .box li:nth-child(2){ width:55%;}
.expired .content .box li img{ float:left; width:100%; height:auto; opacity:1; transition:.3s;}
.expired .content .box li img:hover{opacity:0.7;}
.expired .content .box li h3{ height:auto; padding:0 0 0 10px; overflow:hidden; font-size:1rem; font-weight:normal; line-height:1.2; text-align:justify; }
.expired .content .box li h3 a{ text-decoration:none; color:#1eb113; transition:.3s;}
.expired .content .box li h3 a:hover{ color:#F00;}
.expired .content .box li p{ display:none;}
.expired .content .box li h2{ display:none;}


/*============== 活動場次與個人資訊 ==============*/

.session { margin:30px 0; }
.session h2{ padding:2px 0; border-bottom:1px solid #0d48ab; font-size:1.4rem; text-align:left; font-weight:700; color:#0d48ab;}
.session table{ margin:20px 0; border-collapse: collapse; font-size: 1rem; }
.session table a{ text-decoration:none; color:#1eb113; transition:.3s;}
.session table a:hover{ color:#f00;}
.session td {border:1px solid #a3e0ef; border-collapse: collapse; padding:5px 6px; line-height:1.3;}
.session td input{ padding: 4px; font-size: 1rem; }
.session td select{ margin:0; padding:0 5px; height:32px; border:1px solid #CCC; outline:none; font-size:1rem; color:#333;}
.session p{ margin:10px 0; color:#F00;}


/*OPSP報名欄位*/
.signup{ margin: 20px auto; padding: 15px;  width:100%;  border: 1px solid #00b8e6;}
.signup div{ margin: 10px 0; font-size: 1rem;}
.signup .box01 input{
	appearance:none; -webkit-appearance:none; -moz-appearance: none; width: 100%; height:32px; padding:0 5px; 
	border:0px; border: 1px solid #CCC; font-size:1rem; color:#333;
	}
.signup .box02 input{
	appearance:none; -webkit-appearance:none; -moz-appearance: none; width: 100%; height:32px; padding:0 5px; 
	border:0px; border: 1px solid #CCC;	font-size:14px; color:#333;
	}
.signup .box02 select{
	margin:5px 0; padding:0 5px; width: 100%; height:32px; outline:none; border:1px solid #CCC; font-size:1rem; color:#333;	}
.signup .btn{ margin: 0 auto; padding: 5px ; width: 100px; text-align: center; font-size: 1rem; }


/* 按鈕 */
.session .btn01 {
	display:block; margin: 0 auto; width: 180px; height: 45px; border-radius: 5px; background-color: #68717c;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.session .btn02 a{
	display:block; margin: 0 auto; width: 180px; height: 45px; border-radius: 5px; background-color: #F00;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
.session .btn02 a:hover{ background-color:#e43519; }
.session .btn03 {
	display:block; margin: 0 auto; width: 180px; height: 45px; border-radius: 5px; background-color: #1eb113;
	font-size: 1.1rem; line-height: 45px; color: #FFFFFF;  text-align: center; text-decoration: none; transition:.5s; 
	}
	
/*============== 講座紀錄 ==============*/

.record{ margin:0 0 30px; padding:0;}
.record .box{ margin: 20px 0 0;}
.record .box h3{ margin: 0; padding: 0; font-size: 1.1rem; color:#000000;}
.record .box h3 i{ color: #f3ce00; }
.record .box h4{ margin: 0; padding: 0; font-weight: normal; font-size: 1rem; color: #565656; line-height: 1.6;}
.record .box table{ margin: 10px 0; padding: 0; border:none; border-collapse:collapse; }
.record .box table tr:nth-child(1){ background-color: #00b8e6; font-weight: bold; color: #FFFFFF; }
.record .box table td{ border: 1px solid #a3e0ef; padding: 2px; font-size: 0.9rem; line-height: 1.2; text-align: center; }
.record .box table td a{ text-decoration: none; color:#0096ff;}
.record .box table td a:hover{ color: #ff6600;}

/*OPSP瀏覽列印*/
.record-print{ margin: 20px auto; padding:2%; width: 100%; max-width:600px; }
.record-print h2{ padding: 0 0 10px 0; font-size: 1.3rem; line-height:1.2; border-bottom: 1px solid #0d48ab; text-align: center; color: #0d48ab;}
.record-print h3{ padding: 15px 0 5px 0; font-size: 1rem;  line-height:1.2; color: #333;}
.record-print p{ margin: 0; padding: 0; color: #666;}
.record-print table{ margin: 10px 0; padding: 0; border:none; border-collapse:collapse; }
.record-print table td{ border: 1px solid #a3e0ef; padding: 5px; font-size: 1rem; line-height: 1.3; }
.record-print table td:nth-child(1){ background-color: #00b8e6; font-weight: bold; color: #FFFFFF; text-align: center; }
.record-print .print{ margin: 20px 0 0 0; width: 100%; text-align: center; }
.record-print .btnstyle{ width: 40%; padding: 5px; text-align: center; font-size: 1rem; color: #333; }


/*OPSP登入視窗*/
.opsp-login{ margin: 0 auto 20px auto; padding: 20px; width: 100%; background-color:#FFFFFF;}
.opsp-login h2{ margin: 0; padding: 0 0 30px 0; font-size: 1.3em; text-align: center;}
.opsp-login h4{ margin: 20px 0; padding: 0; font-size: 14px; text-align: center; color: #333;}
.opsp-login p{ margin: 0; padding: 20px 0 0 0; font-size: 14px; color: #333; }
.opsp-login .sns{ width: 100%; text-align: center;}
.opsp-login .sns li{ display: inline-block; width: 120px; height: 40px; line-height: 40px; font-size: 1.1em; color: #FFFFFF; }
.opsp-login .sns li:nth-child(1){ background-color: #2467b6; }
.opsp-login .sns li:nth-child(2){ background-color: #ea4335; }
.opsp-login .sns li a{ display: block; text-decoration: none; color: #FFFFFF; }
.opsp-login .sns li:nth-child(1) a:hover{ background-color: #1f5aa0; border-radius: 5px; }
.opsp-login .sns li:nth-child(2) a:hover{ background-color: #cc3c30; border-radius: 5px; }

.opsp-login .member{ width: 100%;}
.opsp-login .member .inputstyle{ appearance:none; -webkit-appearance:none; padding:0 5px; color:#333; font-size:1em; width: 100%; height:40px; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif; border:0px; border: 1px solid #CCC; }
.opsp-login .member .btn{ margin: 0 auto; padding: 8px 5px ; width: 100%; text-align: center; font-family:Arial, Helvetica,"微軟正黑體" ,sans-serif; font-size: 16px; color: #FFFFFF; border-radius: 5px; background-color: #00b8e6; border-top: 1px solid #00a5ce; border-left: 1px solid #00a5ce; border-right: 2px solid #00a5ce; border-bottom: 3px solid #00a5ce;  cursor: pointer; }

.opsp-login .member div{ margin: 10px 0; font-size: 14px; color: #333;}
.opsp-login .member div .forgetpass{ padding: 0 0 0 10px; text-decoration: none; color: #1eb113;}
.opsp-login .member div .forgetpass:hover{ text-decoration: underline;}

.opsp-login .other{ width: 100%; text-align: center;}
.opsp-login .other li{ display: inline-block; width: 49%; height: 40px; line-height: 40px; font-size: 1em; border-radius: 5px; border: 1px solid #68717c; background-color: #FFFFFF;}
.opsp-login .other li a{ display: block; text-decoration: none; color: #68717c; }
.opsp-login .other li a:hover{ background-color: #68717c; border-radius: 4px; color: #FFFFFF;}

}