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

@media print {
.navbar{ display: block; background-color: transparent; border-color: transparent; }
}

html, body {
    font-family: Arial, Helvetica, sans-serif, "微軟正黑體", "新細明體", "Times New Roman";
    font-size: 16px;
	background-color: #fff;
	margin: 0px auto;
	position: relative;
	/*overflow-x: hidden;*/
	width: 100%;
	height: 100%;
}

/* 錯誤訊息頁面 */
#err400, #err404, #err500 { margin: 0; width: 100%; height: 390px; }
    #err400 { background: url(/images/400.png) no-repeat center; }
    #err404 { background: url(/images/404.png) no-repeat center; }
    #err500 { background: url(/images/500.png) no-repeat center; }
	
/* 網站整體版面 */
.navbar { border: 0px solid transparent; margin-bottom: 0px; }
.navbar-inverse { background-color: transparent; border-color: transparent;	min-height: 100%; }
    /* 網頁抬頭區塊 index_menu */
    .navbar-default { background-color: #204264; border-color: transparent; }
	    .navbar-fixed-top>.container { width: auto; height: 70px; }
		    .navbar-inverse .navbar-collapse { display: none!important; }
		    .navbar-fixed-top .navbar-header { margin-right: 15px; margin-left: 15px; float: none; }
			    /* menu button for mobile */
			    .navbar-fixed-top .navbar-toggle { display: none; }
			    .navbar-inverse .navbar-fixed-top .navbar-toggle {
					margin-top: 10px;
					margin-left: 15px;
		            margin-right: 15px;
		            border-width: 0;
	                background-color: transparent;
		            float: left;
                }
			        .navbar-inverse .navbar-fixed-top .navbar-toggle .icon-bar { background-color: #fff; width: 33px; height: 4px; }
			    .navbar-inverse .navbar-fixed-top .navbar-toggle:hover, .navbar-inverse .navbar-fixed-top .navbar-toggle:focus { background-color: transparent; }
				/* logo 區塊 */ 
				.navbar-fixed-top .navbar-brand {
					height: auto;
	                padding: 5px 0 0 0;
					display: inline-block;
		            float: none;
				}
				    .navbar-fixed-top .navbar-brand>img { max-height: 65px;	}
					
	/* 網頁內容區塊 */
    #container-con { margin-top: 70px; padding-bottom: 150px; }
	
#gotop {
    position: fixed;
    z-index: 9999;
    right: 30px;
    bottom: 31px;
    display: none;
    width: 40px;
    height: 40px;
	/*padding-top: 8px;*/
	padding-left: 3px;
    color: #fff;
    font-size: 20px;
    background: #424243;
	opacity: 0.5;
    line-height: 40px;
    border-radius: 20%;
    transition: all 0.5s;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
#gotop :hover{ background: #424243; }
#gotop > span.fa { padding: 0px; }

/* 嵌入之影片有作響應式（RWD）設計 */
/* https://lis.mcut.edu.tw/p/406-1013-41640,r1136.php?Lang=zh-tw */
.fr-view .fr-video.fr-dvb { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
   .fr-view .fr-video > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	
/* 頁面標題 (首頁用) */
.fun-title-1 {
    padding: 0px;
	font-size: 22px;
	font-weight: 600;
	color: #05446d;
}
    .fun-title-1>blockquote {
	    display: inline-block;
	    padding: 5px 20px 0px;
		margin: 0 0 15px;
		font-size: inherit;
		border-left: 8px solid #ccc;
	}
	
/* 頁面標題 (內頁用) */
.fun-title-2 {
    margin-top: 15px;
	margin-bottom: 15px;
	/*padding: 0px;*/
    padding-bottom: 5px;
	border-bottom: 1px solid #05446d;
	font-size: 20px;
	font-weight: 600;
	color: #05446d;
}
.fun-title-3 { margin-bottom: 25px; }

/* 頁面路徑 */
.position-path { margin-top: 70px; margin-bottom: -70px; }
    .position-path>.breadcrumb { padding: 8px 60px; border-radius: 0; }

/* more banner */
a.more-link:hover { text-decoration: none; }
    /* 圓標 */
    span.glyphicon-circle-arrow-right {
	    top: 0;
		margin-left: 30px;
		font-weight: normal;
		font-size: 14px;
	}
	/* 字樣 */
	span.more { margin-left: 3px; font-weight: normal; font-size: 16px;	}
	
/* 頁次 */
.page-div nav { text-align: center; }
    .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #333; border-color: #333; }
	.pagination>li>a, .pagination>li>span { font-family: Arial, Helvetica, sans-serif; color: #333;	}
	.page-div nav .pagination .fst-page>a, .page-div nav .pagination .lst-page>a, .page-div-criticism nav .pagination .fst-page>a, .page-div-criticism nav .pagination .lst-page>a { font-family: "微軟正黑體", "新細明體", "Times New Roman", Times, serif; }
	.page-div nav .pagination .pageFast {
	    font-family: "微軟正黑體", "新細明體", "Times New Roman";
		font-size: 15px;
		height: 24px;
		margin-top: -1px;
	}
	
/* 認證資料區塊, 技術小白科, 系列商品 */
.certi-area-index, .article-area-index, .prod-area-index { margin: 50px auto 0; }
    /* 認證 (首頁) */
    .certi-area-index>.certi-border>.thumbnail:hover { border: 1px solid #939191; text-decoration: none; box-shadow: 3px 3px 12px #e2dddd; }
    .certi-area-index>.certi-border .caption { padding: 3px 8px; height: 60px; text-align: center; }
	    .certi-area-index>.certi-border .caption>h5 { line-height: 23px; font-size: 17px; }
    /* 技術小百科 (首頁) */
	div.article-area-index>div.list-group>a.list-group-item {
	    margin-bottom: 0;
		padding: 12px 15px;
		border-radius: 0;
		border: 0;
		border-bottom: 1px dotted #ddd;
		cursor: pointer;
	}
	    div.article-area-index>div.list-group>a.list-group-item .dl-horizontal dt {
		    padding-bottom: 10px;
			width: 100%;
			float: none;
			clear: both;
			text-overflow: initial;
			white-space: normal;
			font-size: 17px;
			text-align: left;
			line-height: 1.5;
		}
		div.article-area-index>div.list-group>a.list-group-item .dl-horizontal dd { margin-left: 0;	color: #777; line-height: 1.7;
	    }
    /* 技術小百科 (內頁) */
	div.article-border .panel-title { line-height: 1.5; }
		div.article-border .panel-body { line-height: 1.7; }
		    div.article-border .panel-body>a.more { text-decoration: underline;	color: #f57e04; }
	
    /* 系列商品 (首頁, 內頁) */
    .prod-area-index>.prod-border .thumbnail, .prod-area>.prod-border .thumbnail { height: 280px; }
        .prod-area-index>.prod-border .thumbnail>img, .prod-area>.prod-border .thumbnail>img { max-width: 100%; max-height: 200px; }
	    .prod-area-index>.prod-border .thumbnail>.caption, .prod-area>.prod-border .thumbnail>.caption { padding: 8px; }
	        .prod-area-index>.prod-border .thumbnail>.caption>p, .prod-area>.prod-border .thumbnail>.caption>p {
		        overflow: hidden;
			    text-overflow: ellipsis;
			    height: 45px;
			    text-align: left;
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
		    }
	
/* 關於我們 */
#about-us {
    margin: -100px auto 0;
    padding: 60px;
	padding-bottom: 200px;
	width: auto;
	background-color: #dddcdc;
}
    #about-us>p { line-height: 1.7; }
		  
/* 版權宣告 index_bottom */
div.main-footer { position: absolute; width: 100%; bottom: 0; }
    .copyright-info { background-color: #204264; color: #fff; font-size: 15px; }
	    .copyright-info>.cp-copyright { padding: 20px 30px; }
		    .copyright-info>.cp-copyright a, .copyright-info>.cp-copyright a:hover { color: #fff; text-decoration: none; }
		.copyright-info>.online-num { padding: 30px; font-size: 14px; }
		
/* 科目別 */
.sub-border { margin-top: 30px;	margin-bottom: 30px; }
    /*.sub-border .share-fb { margin-right: -50px; }*/
    .sub-border blockquote { margin-top: 20px; }
	.cost-data>ul>li { line-height: 2; }
	    .cost-data>ul>li span.glyphicon { margin-right: 5px; font-size: 8px; color: #888; }
	.btn-area a { font-weight: 600;	letter-spacing: 2px; }
	    .btn-area span.glyphicon { margin-right: 5px; }
	.panel-disc>.panel-heading>span, .panel-tech>.panel-heading>span { font-size: 22px;	font-weight: 600; letter-spacing: 20px;	}
	.panel-disc>.panel-heading>em, .panel-tech>.panel-heading>em { font-weight: 600; color: #999; }
	.panel-disc>.panel-body .have-line, .panel-tech>.panel-body .have-line { display: table; width: 100%; }
	    .panel-disc>.panel-body label, .panel-tech>.panel-body label { white-space: nowrap; font-size: 18px; text-align: right;	}

/* 術科試題 list */
.tech-area { margin-top: 30px; }
    .tech-border>.thumbnail:hover { border: 1px solid #939191; text-decoration: none; box-shadow: 3px 3px 12px #e2dddd;	}
	    .tech-border h4 {
		    overflow: hidden;
			text-overflow: ellipsis;
			height: 20px;
			text-align: left;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
		.tech-border p {
		    overflow: hidden;
			text-overflow: ellipsis;
			height: 60px;
			text-align: left;
			font-size: 14px;
			color: #666;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}
		
/* 術科試題內頁 */
.techfile-area .other-sub-lnk { margin-bottom: 25px; }
    .techfile-area .glyphicon { font-size: 15px; color: #888585; }
.techfile-area .tech-img-border>img { max-width: 100%; }
.techfile-area .tech-img-border>p { margin: 3px 0 25px; text-align: center; font-size: 15px; }
.techfile-area .thumbnail { padding: 30px 15px; background-color: #f5f5f5; border: 0; }
    .techfile-area .thumbnail> img { margin-top: 20px; max-width: 50%; min-width: 230px; }
	.techfile-area .thumbnail>div { margin-top: 20px; text-align: center; }
	    .techfile-area .thumbnail>div>ul {
		    display: inline-table;
			width: 100%;
			max-width: 50%;
			min-width: 230px;
			text-align: left;
		}
		    .techfile-area .thumbnail>div>ul .list-share-fb { text-align: center; }
		    .techfile-area .thumbnail>div>ul .badge { min-width: 60px; }
	    .techfile-area .thumbnail>div>a {
			width: 100%;
			max-width: 50%;
			min-width: 230px;
			font-size: 20px;
			font-weight: 600;
		}
		    .techfile-area .thumbnail>div>a>span { margin-right: 10px; color: #fff; }
		
/* ============ 管理專區 ============ */
.navbar-manage { position: relative; margin-bottom: 0; min-height: 100%; }
    .container-manage-top { padding: 10px 15px; width: auto; background-color: #204264; }
        .container-manage-top>a>img { max-width: 90%; max-height: 58px; }
.manage-title {
    margin: 0 auto 15px;
	padding: 8px;
	background-color: #c6c3c3;
	color: #434242;
	font-size: 18px;
}
    .manage-title>a.back-index { color: #434242; text-decoration: none;	}
    .manage-title>a.logout { color: #931b18; text-decoration: none;	}
	    .manage-title>a.logout:hover, .manage-title>a.back-index:hover { text-decoration: underline; }
    .container-con { padding-bottom: 180px; }
        .container-con ul.remark {
            margin: 10px 15px;
	        padding: 0;
	        padding-left: 15px;
	        font-size: 18px;
	        line-height: 2;
        }
        .container-con .outside-border {
            margin: 10px 0px;
	        padding: 0 10px 10px;
	        border-radius: 8px;
	        border: 2px solid #ddd;
        }
            .outside-border>p.top {
	            margin-bottom: 15px;
		        padding: 5px 0px;
		        border-bottom: 2px dotted #ddd;
		        font-size: 20px;
		        font-weight: bold;
	        }
h3.manage-title {
    margin-top: 10px;
    margin-bottom: 30px;
	padding: 5px 10px;
	background-color: #fff;
	color: #000;
	border-bottom: 1px solid #666;
}
.container-con .form-list-condition { width: 100%; margin-bottom: 10px; text-align: right; }
.table-title { background-color: #fff; }
    .table-title>thead>tr { background-color: #666;	color: #fff; }
	.no-data { height: 200px; color: #999; font-size: 18px;	}
.container-con .form-horizontal {
    margin: 15px 0px 20px;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 17px;
}
    .container-con .form-horizontal .form-group-line { border-bottom: 1px dotted #ddd; padding-bottom: 15px; }
	    .form-horizontal .control-label { color: #286090; }
	    .container-con .form-horizontal .form-group-line span.spanCon { padding-left: 4px; font-size: 12px;	color: #a94442;	}
		.container-con .form-horizontal .form-group-line .sel-title { margin: 15px 0 3px; color: #888; font-size: 15px;	}
	    .container-con .form-horizontal .form-group p.data-con { padding-top: 7px; }
		div.data-remark {
		    margin-top: 5px;
			padding: 8px 5px 1px 0px;
			line-height: 2;
			font-size: 14px;
			color: #FF6600;
		}
		.container-con .form-control { font-weight: normal; font-size: 16px; height: 34px; }
		.container-con .form-inline button, .container-con .form-inline .form-control, .container-con .form-inline .sel-area { margin-bottom: 0; }
		.container-con .form-inline .sel-area { display: inline-block; }
		.table-responsive-border {
		    margin: -15px auto;
		    padding: 15px 15px 0;
			border: 0;
			overflow: hidden;
			background-color: #f2f9fd;
		}
		
@media all and (max-width: 992px) {

    #container-con { width: auto; }

    /* 系列商品 (首頁) */
    .prod-area-index>.prod-border { padding-left: 8px; padding-right: 8px; }
	/* 系列商品 (內頁) */
	.prod-area>.prod-border { width: 33.33333333%; }
	    .prod-area-index>.prod-border .thumbnail { height: 250px; }
		    .prod-area-index>.prod-border .thumbnail>img { max-height: 180px; }

    /* 版權宣告 */
    .copyright-info>.cp-copyright { width: 75%; }
	.copyright-info>.online-num { width: 25%; }
}


@media all and (max-width: 800px) {

    /* 頁面路徑 */
    .position-path>.breadcrumb { padding: 8px 30px; }

    /* 系列商品 (首頁) */
	.prod-area-index>.prod-border .thumbnail { height: 230px; }
}
		
		
@media all and (max-width: 768px) {

    .container { overflow: hidden; }
	
	/* 頁面路徑 */
    .position-path { margin-top: 60px; margin-bottom: -60px; }
	
	/* 頁次 */
	.page-div nav .pagination .fst-page, .page-div nav .pagination .lst-page, .page-div nav .pagination .pageSel { display: none; }
	
	/* 網頁抬頭區塊 index_menu */
	.navbar-fixed-top>.container { height: 60px; }
	    .navbar-fixed-top .navbar-header { margin-right: -15px; margin-left: -15px; white-space: nowrap; }
	        /* menu button for mobile */
	        .navbar-fixed-top .navbar-toggle { display: block; }
			    .navbar-inverse .navbar-fixed-top .navbar-toggle .icon-bar { height: 3px; }
	        /* logo 圖示 */
		    .navbar-fixed-top .navbar-brand { margin-left: -10px; }
	            .navbar-fixed-top .navbar-brand>img { max-height: 50px; }
		/* 主選單 第一層 */
		.navbar-fixed-top>.container>.navbar-collapse {
		    margin-right: -15px;
            margin-left: -15px;
	        position: fixed;
	        top: 0;
	        width: 100%;
	        text-align: left;
	        background-color: #c7ccd0;
		}
		.navbar-fixed-top .navbar-collapse.collapse.in { display: block!important; top: 60px; overflow-y: auto;	}
		    .navbar-fixed-top .navbar-nav { float: left!important; margin: 0 -15px;	width: 100%; }
			    .navbar-inverse .navbar-fixed-top .navbar-nav>li {
				    float: none;
					margin-right: -30px;
					padding: 5px 0;
					border-bottom: 1px solid #dededf;
					height: auto;
				}
				    .navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover { color: #333232; }
					/* 主選單 第二層 */
					.navbar-inverse .navbar-fixed-top .navbar-nav>li.dropdown-submenu.open { padding: 0; }
					    .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
						    padding-top: 15px;
							padding-bottom: 15px;
							background-color: #84888b;
						}
						.dropdown-menu-prods { padding-top: 0; padding-bottom: 0; }
						    .dropdown-menu-prods>li {
							    padding-top: 10px;
								padding-bottom: 10px;
								background-color: #fff;
								border-bottom: 1px dotted #999;
								font-size: 15px;
							}
							    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover { color: #555; }
								
	/* 網頁內容區塊 */
    #container-con { margin-top: 60px; padding-bottom: 250px; }
	
	/* 系列商品 (內頁) */
	.prod-area>.prod-border { padding-left: 10px; padding-right: 10px; }
	
	/* 關於我們 */
    #about-us { margin-top: -200px; padding: 40px 50px 270px; }
	
	/* 版權宣告 */
	.copyright-info>.cp-copyright, .copyright-info>.online-num { width: 100%; }
	.copyright-info>.online-num { padding-top: 0; }
	
	/* 管理專區 */
	.container-con { padding-bottom: 270px; }
	    .container-con .form-inline .form-control { display: inline-block; width: auto;	}
}


@media (max-width: 767px) {
    
	/* 系列商品 (首頁) */
	.prod-area-index>.prod-border { padding-left: 15px; padding-right: 15px; }
	    .prod-area-index>.prod-border .thumbnail { height: 250px; }
		    .prod-area-index>.prod-border .thumbnail>.caption>p { height: 25px; text-align: center; -webkit-line-clamp: 1; }
}


@media (max-width: 671px) {

    /* 關於我們 */
    #about-us { padding: 40px 40px 270px; }
	
    /* 版權宣告 */
    .copyright-info>.cp-copyright { padding: 20px; }
	.copyright-info>.online-num { padding-left: 20px; }
	
	/* 管理專區 */
	.container-con .form-list-condition { text-align: center; }
	    .container-con .form-list-condition button { width: 100%; }
	    .container-con .form-inline button, .container-con .form-inline .form-control, .container-con .form-inline .sel-area { margin-bottom: 10px; }
		.container-con .form-inline .sel-area {
		    display: block;
			padding: 10px;
			background-color: #e3e2e2;
			border-radius: 4px;
		}
		    .container-con .form-inline .form-control { display: block; width: 100%; }
}


@media (max-width: 601px) {

    /* 頁面路徑 */
    .position-path>.breadcrumb { padding: 8px 15px; }

    /* 認證資料區塊, 系列商品 (首頁) */
    .certi-area-index>.certi-border, .prod-area-index>.prod-border { padding-left: 10px; padding-right: 10px; }
	
	/* 系列商品 (內頁) */
	.prod-area>.prod-border { width: 50%; }
	
	/* 科目別 */
    .sub-border>.sub-img, .sub-border>.sub-data { width: 100%; }
	.sub-border>.sub-img { text-align: center; }
	    .sub-border>.sub-img>img { max-width: 60%; }
	.sub-border>.sub-data>select#sub { margin-top: 30px; }
}


@media all and (max-width: 568px) {

	/* 網頁內容區塊 */
    #container-con { padding-bottom: 265px;	}


    /* 關於我們 */
    #about-us { margin-top: -220px; padding: 40px 35px 280px; }
}


@media all and (max-width: 480px) {

    /* menu button for mobile */
    .navbar-inverse .navbar-fixed-top .navbar-toggle { margin-top: 8px; }
	    .navbar-inverse .navbar-fixed-top .navbar-toggle .icon-bar { width: 30px; }
		
	
	/* 頁面標題 (首頁用) */
	.fun-title-1 { margin-left: -15px;	}
		
	/* 認證資料區塊, 系列商品 (首頁) */
    .certi-area-index>.certi-border, .prod-area-index>.prod-border { padding-left: 6px;	padding-right: 6px;	}
	    /* 系列商品 */
	    .prod-area-index>.prod-border .thumbnail>img { max-height: 180px; }
	    .prod-area-index>.prod-border .thumbnail>.caption>p { height: 45px; text-align: left; -webkit-line-clamp: 2; }
		
	/* 科目別 */
	.sub-border>.sub-img>img { max-width: 70%; }
	
	/* 術科試題 list */
	.tech-area { margin: 30px 15px 0; }
        .tech-border { width: 100%; }
}


@media (max-width: 401px) {

    /* menu button for mobile */
	.navbar-inverse .navbar-fixed-top .navbar-toggle { margin-left: 10px; margin-right: 10px; }
    /* logo 圖示 */
	.navbar-fixed-top .navbar-brand>img { max-width: 100%; max-height: 45px; }
	
	/* 認證資料區塊, 系列商品 (首頁) */
    .certi-area-index>.certi-border, .prod-area-index>.prod-border { padding-left: 15px; padding-right: 15px; width: 100%; }
	    /* 系列商品 (首頁) */
	    .prod-area-index>.prod-border .thumbnail>img { max-height: 200px; }
	    .prod-area-index>.prod-border .thumbnail>.caption>p { height: 25px; text-align: center; -webkit-line-clamp: 1; }
		
	/* 系列商品 (內頁) */
	.prod-area>.prod-border { padding-left: 6px; padding-right: 6px; }
	    .prod-area>.prod-border .thumbnail { height: 250px; }
	        .prod-area>.prod-border .thumbnail>img { max-height: 180px; }
			
	/* 關於我們 */
    #about-us { padding: 40px 25px 280px; }

    /* 版權宣告 */
	.copyright-info>.cp-copyright { padding: 20px 15px;	font-size: 14px; }
	.copyright-info>.cp-copyright>h4 { font-size: 17px; }
	.copyright-info>.online-num { padding: 0 15px 15px; }
	
	/* 科目別 */
	.sub-border>.sub-img>img { max-width: 90%; }
	
	/* 術科試題 list */
	.tech-area { margin: 30px 0 0; }
}