/* Basic */
	/*col-xxs customized*/
		.col-reset{
			padding:0;
			/*margin:0;*/
		}
		@media all and (max-width: 575px){
			.hidden-xxs{
				display:none!important;
			}
			.visible-xxs {
			    display: block!important;
			}
			.col-xxs-1{
				width:calc(100%*(1/12));
			}
			.col-xxs-2{
				width:calc(100%*(2/12));
			}
			.col-xxs-3{
				width:calc(100%*(3/12));
			}
			.col-xxs-4{
				width:calc(100%*(4/12));
			}
			.col-xxs-5{
				width:calc(100%*(5/12));
			}
			.col-xxs-6{
				width:calc(100%*(6/12));
			}
			.col-xxs-7{
				width:calc(100%*(7/12));
			}
			.col-xxs-8{
				width:calc(100%*(8/12));
			}
			.col-xxs-9{
				width:calc(100%*(9/12));
			}
			.col-xxs-10{
				width:calc(100%*(10/12));
			}
			.col-xxs-11{
				width:calc(100%*(11/12));
			}
			.col-xxs-12{
				width:calc(100%*(12/12));
			}
		}
	/*all*/
		* {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		    outline-color:#00aabb!important;
		    /*outline-width:2px!important;*/
		    }
	    *:focus{
			outline-width: 1px!important;
			outline-offset: -1px!important;
	    }
		html {
			/*position: relative;*/
			height: 100%;
			/*min-height: 100%;*/
			/*font-size:100%;*//*1em=16px*75%=12px*/
			font-size:16px;
			}
		body {
			font-family: "Helvetica Neue", Helvetica, Arial,"微軟正黑體", "微软雅黑", "新細明體","メイリオ", "맑은 고딕","Open Sans", sans-serif;
			padding-top:0px;
			/*margin-bottom:52px;*/
			font-size:1em;
			line-height: 1.4em;
			color:#444;
			background-color: #fcfcfc;
			/*height: 100%;*/
			position: relative;
			min-height: 100%;
			}
		::-moz-selection { /* Code for Firefox */
		    /*color: #0d968f;
		    background: #bfff8e;*/
		    color: #0d968f;
		    background: #fffda6;
		}
		::selection {
		    /*color: #0d968f;*/
		    color: #2c2c2c;
		    /*background: #fffda6;*/
		    background: rgba(250, 247, 123, 0.8);
		}
	/*close button in modal header*/
		.modal-header .close{
			padding: 0.25em 0.5em;
			margin-right: -5px;
		}
	/*tab key to focus obj*/
		button:focus,
		button:active,
		button:active:hover,
		button:active:focus,
		button:hover:focus,
		.btn:focus,
		.btn:active,
		.btn:active:hover,
		.btn:active:focus,
		.btn:hover:focus,
		[role="button"]:focus,
		[role="button"]:active,
		[role="button"]:active:hover,
		[role="button"]:active:focus,
		[role="button"]:hover:focus{
			/*outline: 2px solid #00aabb!important;*/
			/*outline:none!important;*/
		}

		button:not(.btn-default):focus,
		button:not(.btn-default):active,
		button:not(.btn-default):active:hover,
		button:not(.btn-default):active:focus,
		button:not(.btn-default):hover:focus,
		.btn[role="button"]:not(.btn-default):focus,
		.btn[role="button"]:not(.btn-default):active,
		.btn[role="button"]:not(.btn-default):active:hover,
		.btn[role="button"]:not(.btn-default):active:focus,
		.btn[role="button"]:not(.btn-default):hover:focus{
			/*outline-color:#00eeff!important;
			outline-style: solid;*/
			/*outline:none!important;*/
		}
		.btn label{
			margin-bottom:0;
		}
		.btn-block label{
			width:100%;
		}
		/*a:focus,*/
		a:focus{
			outline-style: solid;
		}
		a[href="#"]:focus{
			outline: 2px solid  #00aabb!important;
		}
		button:focus,
		.btn:focus,
		[role="button"]:focus{
			outline: 2px solid  #00aabb!important;
			z-index:1;
		}

		button:not(.btn-default):focus,
		.btn[role="button"]:not(.btn-default):focus{
			outline: 2px solid  #00eeff!important;
			z-index:1;
		}

		a,a:hover,a:focus {
			display:inline-block;
			color:inherit;
			/* for Firefox Google Chrome  */
			/*outline: none;*/
			/* for IE */
		    /*behavior:expression(this.onFocus=this.blur());*/
		    }
		a:hover{
			color:#22aabb;
	    }
	    a[href^="javascript"],
	    a[href^="javascript"]:hover,
	    a[href^="javascript"]:focus,
	    a[href^="javascript"]:active,
	    a[href^="javascript"]:active:focus,
	    a[href^="javascript"]:hover:focus{
			text-decoration: none!important;
	    }
		/*
		:visited{
			outline: 2px solid purple!important;
		}
	    :focus{
	    	outline: 2px solid yellow!important;
	    }
	    :active{
	    	outline: 2px solid orange!important;
	    }
		:active:hover{
			outline: 2px solid red!important;
		}
		:active:focus{
			outline: 2px solid blue!important;
		}
		:hover:focus{
			outline: 2px solid green!important;
		}
		*/
	/*content text*/
		h1{
			font-size:2rem;
			margin:1rem auto;
			font-weight:bold;
		}
		h2{
			font-size:1.8rem;
			margin:1rem auto;
			font-weight:bold;
		}
		h3{
			font-size:1.6rem;
			margin:1rem auto;
			font-weight:bold;
		}
		h4{
			font-size:1.4rem;
			margin:1rem auto;
			font-weight:bold;
		}
		h5{
			font-size:1.2rem;
			margin:1rem auto;
		}
		p{
			font-size:1rem;
			margin:0.5rem auto;
			word-wrap: break-word;
			line-height:1.5rem;
		}

		/*
		h1:first-child,
		h2:first-child,
		h3:first-child,
		h4:first-child,
		h5:first-child,
		p:first-child{
			margin-top:0;
		}
		h1:last-child,
		h2:last-child,
		h3:last-child,
		h4:last-child,
		h5:last-child,
		p:last-child{
			margin-bottom:0;
		}
		*/
		.sizeingText{
			font-size: calc(1em + (1.3125 - 1) * ((100vw - 20em) / (80 - 20)));
			line-height: calc(1.4em + (1.8 - 1.4) * ((100vw - 20em) / (80 - 20)));
		}
		.justify{
			text-align:justify; text-justify: inter-ideograph;
		}
	/*obj width by em*/
		*[wsize]{		display:inline-block;	}
		*[wsize="1"]{		width:1em;	}
		*[wsize="2"]{		width:2em;	}
		*[wsize="3"]{		width:3em;	}
		*[wsize="4"]{		width:4em;	}
		*[wsize="5"]{		width:5em;	}
		*[wsize="6"]{		width:6em;	}
		*[wsize="7"]{		width:7em;	}
		*[wsize="8"]{		width:8em;	}
		*[wsize="9"]{		width:9em;	}
		*[wsize="10"]{		width:10em;	}
		*[wsize="11"]{		width:11em;	}
		*[wsize="12"]{		width:12em;	}
		*[wsize="13"]{		width:13em;	}
		*[wsize="14"]{		width:14em;	}
		*[wsize="15"]{		width:15em;	}
		*[wsize="16"]{		width:16em;	}
		*[wsize="17"]{		width:17em;	}
		*[wsize="18"]{		width:18em;	}
		*[wsize="19"]{		width:19em;	}
		*[wsize="20"]{		width:20em;	}
	/*obj height by em*/
		*[hsize="1"]{		height:1em;	}
		*[hsize="2"]{		height:2em;	}
		*[hsize="3"]{		height:3em;	}
		*[hsize="4"]{		height:4em;	}
		*[hsize="5"]{		height:5em;	}
		*[hsize="6"]{		height:6em;	}
		*[hsize="7"]{		height:7em;	}
		*[hsize="8"]{		height:8em;	}
		*[hsize="9"]{		height:9em;	}
		*[hsize="10"]{		height:10em;	}
		*[hsize="11"]{		height:11em;	}
		*[hsize="12"]{		height:12em;	}
		*[hsize="13"]{		height:13em;	}
		*[hsize="14"]{		height:14em;	}
		*[hsize="15"]{		height:15em;	}
		*[hsize="16"]{		height:16em;	}
		*[hsize="17"]{		height:17em;	}
		*[hsize="18"]{		height:18em;	}
		*[hsize="19"]{		height:19em;	}
		*[hsize="20"]{		height:20em;	}

/*Main*/
	/*nav*/
		.navbar{
			min-height:60px;
			/*-webkit-box-shadow: 3px 9px 10px -1px rgba(0,0,0,0.37);
			-moz-box-shadow: 3px 9px 10px -1px rgba(0,0,0,0.37);
			box-shadow: 3px 9px 10px -1px rgba(0,0,0,0.37);*/
		    margin:0;
		}
		.navbar-brand{
			height:60px;
			line-height:40px;
			padding:10px 10px;
		}
		@media (max-width: 991px){
			.navbar-brand{
				font-size:initial;
			}
		}
		.navbar-nav{
			margin-top:0px;
			margin-bottom:0px;
		}
		@media (min-width: 768px){
			.navbar-right{
				margin-right:0;
			}
		}
		.navbar-nav>li>a{
			line-height:30px;
			padding: 1em 0.5em;
		}
		@media (max-width: 991px) and (min-width: 768px){
			.navbar-nav>li>a{
				padding: 1em 0.35em;
				font-size:0.95rem;
			}
		}
		@media (min-width: 768px){
			.navbar-nav>li:last-child{
				padding-right:0.5em;
			}
		}
		@media (max-width: 767px){
			.navbar-nav>li>a{
				padding: 0.5em 1rem;
			}
		}
		.navbar-inverse{
			background: #fff;
			border-color: #ddd;
			}
/*
			.navbar-inverse .logo{
			width:100px;
			height:40px;
			content:" ";
			background: url(../../images/project/logo.png) no-repeat 10px center;
			color: #333;
			padding-left: 65px;
			background-size:contain;
			}
		.navbar-inverse .logo:before{
			content:"MOSME 行動學習一點通";
			font-size: 1rem;
			position: absolute;
			left: 4.7rem;
			top: 0.3rem;
			color: #000;
		}
		.navbar-inverse .logo:after{
			content:"Mobile Online Study Made Easy.";
			font-size: 0.7rem;
			position: absolute;
			left: 4.7rem;
			top: 1.4rem;
			color: #555;
		}
*/
		.navbar-inverse .toogleBtn{
			line-height:40px;
			color: #fff;
			padding-top:3px;
		}
		.navbar-inverse .navbar-toggle .icon-bar {
		    background-color: #22aabb;
		}
		.navbar-inverse .navbar-toggle{
			border:0;
			padding: 15px 10px
			}
		.navbar-inverse .navbar-toggle:focus,
		.navbar-inverse .navbar-toggle:hover{
			background: none;
			}
		.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form{
			border-color: #ddd;
			}
		@media all and (orientation: portrait){
			.navbar-inverse .navbar-collapse{
				max-height: 90%;
			}
		}
		.navbar-inverse .navbar-nav>li>a,
		.navbar-inverse .navbar-nav>li>a:focus{
			color: #333;
			}
		.navbar-nav .dropdown-menu li a:hover,
		.navbar-inverse .navbar-nav>li>a:hover{
			color:#22aabb;
			}
		.navbar-inverse .navbar-nav>.open>a,
		.navbar-inverse .navbar-nav>.open>a:focus,
		.navbar-inverse .navbar-nav>.open>a:hover,
		.navbar-inverse .navbar-nav>.active>a,
		.navbar-inverse .navbar-nav>.active>a:focus,
		.navbar-inverse .navbar-nav>.active>a:hover{
			background: none;
			color:#22aabb;
			}
		@media all and (max-width: 767px){
			.navbar-collapse.collapse.in{
				-webkit-box-shadow: 0px 10px 18px -8px rgba(0,0,0,0.75);
				-moz-box-shadow: 0px 10px 18px -8px rgba(0,0,0,0.75);
				box-shadow: 0px 10px 18px -8px rgba(0,0,0,0.75);
			}
			.navbar-inverse .navbar-nav{
				background:#fff;
				}
			.navbar-inverse .navbar-nav>li>a,
			.navbar-inverse .navbar-nav>li>a:focus{
				color: #222;
				}
			.navbar-inverse .navbar-nav>li>a:hover{
				color:#22aabb;
				}
			.navbar-inverse .navbar-nav>.active>a,
			.navbar-inverse .navbar-nav>.active>a:focus,
			.navbar-inverse .navbar-nav>.active>a:hover{
				border:none;
				background:#22aabb;
				color:#fff;
				}
		}
	/*footer*/
		.footer {
			background: #009999;
			padding: 0;
			height:40px;
			text-align: center;
			width:100%;
			position: absolute;
/*			bottom: 0;                  */
			display: table;
			margin-top: -40px;
/*			z-index: 100;*/
			/* Add By Ocean @20181210 */
			z-index: 1800;
			bottom: 0px !important;
			}

		.footer .content{

			}
		.footer .content ul{
			list-style: none;
			margin:0px;
			}
		.footer .content ul li{
			display:inline-block;
			padding:0 5px;
		}
		.footer .content > * {
			color:#eaeaea;
			line-height: 35px;
			padding: 0px 3px;
			display: inline-block;
			}
		.footer .content > a:focus,
		.footer .content > a:hover{
			color:#FFFFFF;
			}
		.footer .copyright{
			color: #fff;
			}
/*Common*/
	/*Brand Color*/
		.facebook{
			color:#3B5998;
		}
		.googleplus{
			color:#DE5E53;
		}
		.facebook-bg{
			color:#fff;
			background:#3B5998;
			font-size:0.8rem;
			padding:0 0.5em;
		}
		.googleplus-bg{
			color:#fff;
			background:#DE5E53;
			font-size:0.8rem;
			padding:0 0.5em;
		}
	/*rpic*/
		.pic{
		    width: initial;
		    max-width: 100%;
		}
		.pic-gap {
			margin-right:0.5em;
		}
		.pic-corner{
			border-radius: 0.25em;
		}
		.pic-circle{
		    border-radius: 50%;
		}
	/*helpInfo*/
		.helpInfo{
		    background: #e9f9f5;
		    border: 1px solid #8fe2cb;
		    padding: 0.5em;
		    margin-bottom:15px;
		    border-radius:0.25em;
		}
	/*pagination */
		.pagination li a:hover{
			background-color:#fafafa;
		}
		.pagination select,
		.pagination select:focus{
			border:0px;
			background: transparent;
			/*outline: none;*/
			padding:10px 16px 10px 16px;
			margin:-10px -16px -10px -16px;
			min-width: 50px;/*for safari*/
		    cursor: pointer;
	        height: inherit;
		}
	/*pagination-full*/
		.pagination-full{
			width:100%;
			height:2.5rem;
			display:table;
		}
		.pagination-full li{
			display:table-cell;
			height:inherit;
			float:none;
			margin:0;
			padding:0;
		    vertical-align: middle;
		}
		.pagination-full .previous{
			width:48px;
		}
		.pagination-full .pageSelect{

		}
		.pagination-full .next{
			width:50px;
		}
		/*
		.pagination-full .next a{
			border-top-left-radius:0%!important;
			border-top-right-radius:50%!important;
			border-bottom-right-radius:50%!important;
			border-bottom-left-radius:0%!important;
		}
		.pagination-full .previous a{
			border-top-left-radius:50%!important;
			border-top-right-radius:0%!important;
			border-bottom-right-radius:0%!important;
			border-bottom-left-radius:50%!important;
		}
		*/
		.pagination-full li a,
		.pagination-full li a:active,
		.pagination-full li a:focus,
		.pagination-full li a:hover{
		    background-color: #fff;
			display:table;
			vertical-align: middle;
			text-align:center;
			width:100%;
			height:inherit;
			margin:0;
			padding:0;
		}
		.pagination-full li a:focus:active{
			background-color: #eee;
		}
		.pagination-full li a >*{
			display:table-cell;
			width:100%;
			height:inherit;
			vertical-align: middle;
		}
		.pagination-full .pageSelect select{
			width:100%;
			margin:0;
			padding:0;
			display:block;
			line-height:2.3rem;
		}
	/*list-group*/
		.list-group{
			position:relative;
			/*min-height:160px;*/
		}
		.list-group-item{
			margin-bottom:0;
		}
		.examgroupDefault,
		.list-group-item .default{
			display:inline;
			margin-left:-0.5em;
			background:#fff;
			position:relative;
		}
		.list-group-item:hover .examgroupDefault,
		.list-group-item.active .examgroupDefault{
			background:#ecfffe;
		}
		.examgroupDefault::before,
		.list-group-item .default::before{
		    content: "　";
		    background: inherit;
		    position:absolute;
		    left:0;
		    width:0.45em;
		}
		.examgroupDefault::after,
		.list-group-item .default::after{
			content:"*";
			color: hsl(0, 80%, 57%);
			padding-left:0.25em;
		}
		.list-group-item .default::first-letter {
			/*color: hsl(0, 80%, 57%);*/
		}
		.list-group a.list-group-item{
			display:block;
		}
		.list-group-item.list-group-item-dropdown{
			display:table;
			width:100%;
			padding: 0;
		}
		.list-group-item.list-group-item-dropdown>*{
			display:table-cell;
			vertical-align: middle;
			padding:0.5em;
			word-break: break-all;
		}
		.list-group-item.list-group-item-dropdown>span>a{
			/*display:inline;*/
		}
		.list-group-item.list-group-item-dropdown>span:not(.dropdownBlock)>*:not(div){
		    display: inline;2
		}
		@media all and (max-width: 767px){
			.list-group-item.list-group-item-dropdown .examinfo{
				display:block;
				padding-top:0.25em;
				font-size:0.9em;
			}
		}
		@media all and (min-width: 768px){
			.list-group-item.list-group-item-dropdown .examinfo{
				display:inline-block;
				float:right;
				font-size:0.95em;
			}
		}
		.list-group-item.list-group-item-dropdown a:hover:not(.btn){
    		text-decoration: underline;
		}
		.list-group-item.list-group-item-dropdown .dropdownBlock{
			padding:0;
			width:40px;
			text-align:center;
		}
		.list-group-item.list-group-item-dropdown>.dropdownBlock>a,
		.list-group-item.list-group-item-dropdown>.dropdownBlock>a:hover{
			padding:10px 10px;
			width:100%;
		    text-decoration: none;
		}
		.list-group-item.list-group-item-dropdown .dropdownBlock> .dropdown-menu{
		    right:0;
	        left: inherit;
		}
		.dropdown-menu .dropdown-header{
			padding-left: 15px;
			padding-right: 15px;
		}
		.dropdown-menu li a{
			padding:0.5em 1em;
			/*color:inherit!important;*/
		}
		.list-group-item .fileSize{
			width:6.5em;
			text-align:right;
		}
		.list-group-item .date{
			width:6.5em;
			text-align:right;
		}
		.list-group-item .name{
			width:8em;
			text-align:right;
		}
		.list-group-item .actionIcon,
		.list-group-item .subCount{
			width:3em;
			/*text-align:right;*/
			text-align:center;
		}
		.list-group-item .subCount::before{
			content:"(";
		}
		.list-group-item .subCount::after{
			content:")";
		}
		.list-group-item+.subGroup::before{
			content:"";
			position:absolute;
			width:100%;
			height:5px;
		    z-index: 1;
		    border-top:1px solid #ccc;
		}
		.list-group-item+.subGroup>.list-group-item>:first-child{
			padding-left:1em;
		}
		@media (max-width: 767px){
			.list-group-item+.subGroup>.list-group-item.block-xs>*{
				padding-left:1em;
			}
		}
		.subGroup{
			margin-bottom: 5px;
		}
		.subGroup.collapse.in{
			/*border-left:1px solid #0988dd;*/
		}
		.subGroup .list-group-item{
			/*background-color: #f5f5f5;*/
		}
		.subGroup .well{
			border-radius:0;
			margin-bottom:0;
		}
		/*list-group.selectionlist*/
			.list-group-box{
				max-height:200px;
			    border: 1px solid #ddd;
			}
			.list-group-box .list-group{
				margin-bottom:0;
			}
			.list-group.selectionlist .selection[role="button"]{
				cursor: pointer;
			}
			.list-group.selectionlist .selection:focus,
			.list-group.selectionlist .selection:hover,
			.list-group.selectionlist .selection.active{
			    z-index: 1;
			    color: #158b82;
			    background-color: #26aaa0;
			    background-color: #ecfffe;
			    border-color: #a0d0cc;
			}
			.list-group.selectionlist .selection:hover+.selection,
			.list-group.selectionlist .selection.active+.selection{
				border-top-color: #a0d0cc;
			}
			.list-group.selectionlist .selection.active::before{
			    content: "";
			    /* width: 1em; */
			    /* height: 1em; */
			    border-style: solid;
			    border-width: 0.4em 0 0.4rem 0.5em;
			    border-color: transparent transparent transparent #44a29b;
			    display: inline-block;
			    padding-right: 0.5em;
				-webkit-animation-name: fadeInLeft;
				animation-name: fadeInLeft;
			    animation-duration: 1s;
			}
			@-webkit-keyframes fadeInLeft {
			  from {
			    opacity: 0;
			    -webkit-transform: translate3d(-100%, 0, 0);
			    transform: translate3d(-100%, 0, 0);
			  }
			  to {
			    opacity: 1;
			    -webkit-transform: none;
			    transform: none;
			  }
			}

			@keyframes fadeInLeft {
			  from {
			    opacity: 0;
			    -webkit-transform: translate3d(-100%, 0, 0);
			    transform: translate3d(-100%, 0, 0);
			  }
			  to {
			    opacity: 1;
			    -webkit-transform: none;
			    transform: none;
			  }
			}
		/*quickEdit */
			/*header*/
				.quickEdit h5{
					color:#00aabb;
					border-bottom: 1px solid #00aabb!important;
					padding-bottom: 0.5em;
				}
				.quickEdit .pull-right{
					margin-top: -0.5rem;
				}
				.quickEditBtn{
				    /*background: #22aabb;
				    color: #fff;
				    padding: 0.3em 0.5em;
				    font-size: 0.8em;
				    border-radius:0.25em;*/
				}
			/*level*/
				.list-group .level-1{
					margin-top:1em;
					/*-webkit-box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.28);
					-moz-box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.28);
					box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.28);*/
				}
				.list-group .level-1>.list-group-item:first-child{
					background: #f6f6f6;
				}
				.list-group .level-1>.list-group-item:first-child>:first-child input{
					color: #333;
					font-weight: bold;
				}
				.list-group .level-2 .list-group-item{
					padding-left:1em;
				}
				.list-group .level-3 .list-group-item{
					padding-left:2.5em;
					/*background:#f8f8f8;*/
				}
				.list-group .level-3 .list-group-item:before{
				    position: absolute;
				    top: 0.7em;
				    left:2em;
				    content: "\f105";
				    font-family: "FontAwesome";
				    color: #aaa;
				}
			/*user-mode*/
				.list-group[user-mode="read"] input:disabled{
					background:none;
					border:none;
					cursor:default;
				}
				.list-group[user-mode="read"] .btn,
				.list-group[user-mode="read"] .btn:hover,
				.list-group[user-mode="read"] .btn:active,
				.list-group[user-mode="read"] .btn:focus{
				    cursor: default;
				    outline: 0!important;
				    box-shadow: none;
				}
				.list-group[user-mode="read"] .btn.moveBtnPre,
				.list-group[user-mode="read"] .btn.moveBtnNext{
					display:none;
				}
				.list-group[user-mode="edit"] .btn{
					background:none;
					border-radius: 0!important;
					border-left:1px solid #ddd;
				}
				.list-group[user-mode="edit"] .list-group-item.in{
					background:hsl(187, 69%, 43%);
					color:#fff;
				}
				.list-group[user-mode="edit"] .list-group-item.in:before{
					color:#fff;
				}
				.list-group[user-mode="edit"] .list-group-item.in .btn{
					background:inherit;
					color:#fff;
				}
				.list-group[user-mode="edit"] .btn:hover{
					/*color: #22aabb!important;
					border-radius: 0!important;*/
				}
				.list-group-item .unpublishBtn{
					color:#aaa;
				}
	/*list-group row col .userSummary*/
		.list-group .row .list-group-item{
			margin:7px auto;
		}
		@media (max-width: 767px){
			.list-group .row .col-xs-12 .list-group-item{
				margin:0px;
			}
		}
		.list-group-item .userSummary{
			text-decoration:none!important;
			/*background:#f4f4f4;*/
		}
		.list-group-item .userSummary:hover>:first-child{
			text-decoration:underline;
		}
		.list-group-item .summary{
			/*border-top:1px solid #ddd;*/
			margin-top:0.5em;
			padding-top:0.5em;
			color:#666;
			background:#fff;
			margin:0.25em -0.5em -0.5em -0.5em;
			padding:0.5em;
		}
	/*search-block*/
		.search-block{
			margin-bottom:0.5rem;
		}
		.search-block .list-group{
		    position: relative;
		    max-height: 130px;
		    overflow-y: auto;
		    border: 1px solid #dcdcdc;
		    border-top: 0;
		    display:none;
		    margin-bottom:0;
		}
		.search-block input+a:hover:focus{
		    color: #fdfdfd!important;
    		background: #1e9bab;
		}
	/*addListBlock*/
		.addListItem+.emptyDefault{
			display:none;
		}
		.emptyDefault{
			padding:0!important;
		}
		.emptyDefault>label{
			padding:0.3rem 0.5rem;
		}
	/*loading*/
		.loading{
			color:#fff;
			background:#19a684;
			width:100%;
			height:100%;
			position:fixed;
			top:30px;/*nav half height*/
			z-index:1000;
			text-align:center;
			display:table;
		}
		.loading .box{
		    display: table-cell;
		    vertical-align: middle
		}
	/*div shapes*/
		.circleShapes{
			width:5em;
			height:5em;
	    	border-radius: 50%!important;
	    	display:table-cell !important;
	    	vertical-align:middle;
	    	text-align:center;
		}
		.circleShapes *{

		}
	/*nowrap*/
		.nowrap{
		    white-space: nowrap;
		    overflow: hidden;
		    overflow-x: auto;
		}
		@media all and (max-width: 767px){
			.nowrap-xs{
			    white-space: nowrap;
			    overflow: hidden;
			    overflow-x: auto;
			}
		}
		@media all and (min-width: 768px) and (max-width: 991px){
			.nowrap-sm{
			    white-space: nowrap;
			    overflow: hidden;
			    overflow-x: auto;
			}
		}
		@media all and (min-width: 992px) and (max-width: 1199px){
			.nowrap-md{
			    white-space: nowrap;
			    overflow: hidden;
			    overflow-x: auto;
			}
		}
		@media all and (min-width: 1200px){
			.nowrap-lg{
			    white-space: nowrap;
			    overflow: hidden;
			    overflow-x: auto;
			}
		}
	/*ps-container*/
		.ps-scrollbar-x-rail,.ps-scrollbar-y-rail{
			z-index:3;
		}
		.ps-container>.ps-scrollbar-y-rail{
			opacity: 0.5;
		}
		.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{
			margin:0px 1px;
			width:4px;
		}
		.ps-container:hover>.ps-scrollbar-y-rail>.ps-scrollbar-y,
		.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y:hover,
		.ps-container.ps-in-scrolling>.ps-scrollbar-y-rail>.ps-scrollbar-y{
			margin:0px;
			width:8px;
		}
	/*scroll*/
		.scroll-x{
			position: relative;
			overflow-x:hidden;/*Don't set auto for .btnScroll in scrollable container*/
		}
		.scroll-y{
			position: relative;
			overflow-y:hidden;/*Don't set auto for .btnScroll in scrollable container*/
		}
		/*not work at container of position: absolute*/
		.shadow:after {
		    content: "";
		    display: block;
		    position: absolute;
		    bottom: -15px;
		    left: 0;
		    width: 100%;
		    height: 15px;
		    background-image: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 50, color-stop(10%, rgba(0,0,0,0.3)), color-stop(50%, transparent));
		    background-image: -webkit-radial-gradient(center top, rgba(0,0,0,0.3) 10%,transparent 50%);
		    background-image: -moz-radial-gradient(center top, rgba(0,0,0,0.3) 10%,transparent 50%);
		    background-image: -o-radial-gradient(center top, rgba(0,0,0,0.3) 10%,transparent 50%);
		    background-image: radial-gradient(center top, rgba(0,0,0,0.3) 10%,transparent 50%);
		    z-index: 1;
		}
	/*table*/
		table[data-td-average="1"] td, .table[data-td-average="1"] td{
			width:calc( 100% / 1 );
		}
		table[data-td-average="2"] td, .table[data-td-average="2"] td{
			width:calc( 100% / 2 );
		}
		table[data-td-average="3"] td, .table[data-td-average="3"] td{
			width:calc( 100% / 3 );
		}
		table[data-td-average="4"] td, .table[data-td-average="4"] td{
			width:calc( 100% / 4 );
		}
		table[data-td-average="5"] td, .table[data-td-average="5"] td{
			width:calc( 100% / 5 );
		}
		table[data-td-average="6"] td, .table[data-td-average="6"] td{
			width:calc( 100% / 6 );
		}
		table[data-td-average="7"] td, .table[data-td-average="7"] td{
			width:calc( 100% / 7 );
		}
		table[data-td-average="8"] td, .table[data-td-average="8"] td{
			width:calc( 100% / 8 );
		}
		table[data-td-average="9"] td, .table[data-td-average="9"] td{
			width:calc( 100% / 9 );
		}
		table[data-td-average="10"] td, .table[data-td-average="10"] td{
			width:calc( 100% / 10 );
		}
		thead{
			background:#c7f9ec;
		}
		.text-center th{
			text-align:center;
		}
		.table-important thead{
			background:#fffebb;
		}
		.table-notimportant thead{
			background:#eee;
		}
		tfoot{
			background:#d9ece6;
		}
		.table-hover>tbody>tr:hover{
			/*background:rgb(253, 255, 198);*/
		}
		table.halfPadding th, table.halfPadding td{
			padding: 0.25em !important;
		}
		table.noCellPadding th, table.noCellPadding td{
			padding:0 !important;
		}
		table.noCellPadding th :first-child, table.noCellPadding td :first-child{
			margin-top:0;
		}
		th, td{
		    padding: 0.5em !important;
		    vertical-align:top!important;
		    height: inherit;
		    /*vertical-align:middle!important;*/
		}
		th > label, td > label{
			margin-bottom: 0px;
			width:100%;
		}
		th > label > input, td > label > input{
			margin: 0px 0 0!important;
		}
		td select, td select:focus{
		    /*padding:0.5em 0px;
	        vertical-align: inherit;*/
		}
		table .level1 td{
			color:#00945f;
		}
		table .level3 td:first-child{
			padding-left: 1rem;
			font-size: 0.95rem;
		}
		table .level3 td:first-child:before{
			content:'-';
			padding-right:0.5em;
		}
		th[datd-type="text"],td[datd-type="text"]{
			text-align:left;
		}
		th[datd-type="number"],td[datd-type="number"]{
			text-align:center;
		}
		th[datd-type="money"],td[datd-type="money"]{
			text-align:right;
		}
		th[datd-type="action"],td[datd-type="action"]{
			text-align:center;
		}
		.table{
			border:1px solid #ddd;
			margin:0;
		}
		.table-responsive:not(:last-child),
		.table:not(:last-child){
			margin-bottom: 15px;
		}
		.v-sub, .table.v-top td,.table.v-top th{
			vertical-align:sub!important;
			/*border:1px solid #ddd;*/
		}
		.v-top, .table.v-top td,.table.v-top th{
			vertical-align:top!important;
			/*border:1px solid #ddd;*/
		}
		.v-middle, .table.v-middle td, .table.v-middle th{
			vertical-align:middle!important;
		}
		.v-bottom, .table.v-bottom td, .table.v-bottom th{
			vertical-align:bottom!important;
		}
		.noheader> thead > tr > th:nth-child(1),
		.noheader > tbody > tr > td:nth-child(1){
			background-color:#eee;
			/*background-color:#c7f9ec;*/
		    font-weight: bold;
		}
		.fixedchar.fixedFirst[fixed-char="1"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="1"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="1"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="1"] > tbody > tr> td:last-child{
			width:2.1em;
			min-width:2.1em;
		}
		.fixedchar.fixedFirst[fixed-char="2"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="2"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="2"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="2"] > tbody > tr> td:last-child{
			width:3.1em;
			min-width:3.1em;
		}
		.fixedchar.fixedFirst[fixed-char="3"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="3"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="3"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="3"] > tbody > tr> td:last-child{
			width:4.1em;
			min-width:4.1em;
		}
		.fixedchar.fixedFirst[fixed-char="4"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="4"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="4"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="4"] > tbody > tr> td:last-child{
			width:5.1em;
			min-width:5.1em;
		}
		.fixedchar.fixedFirst[fixed-char="5"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="5"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="5"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="5"] > tbody > tr> td:last-child{
			width:6.1em;
			min-width:6.1em;
		}
		.fixedchar.fixedFirst[fixed-char="6"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="6"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="6"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="6"] > tbody > tr> td:last-child{
			width:7.1em;
			min-width:7.1em;
		}
		.fixedchar.fixedFirst[fixed-char="7"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="7"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="7"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="7"] > tbody > tr> td:last-child{
			width:8.1em;
			min-width:8.1em;
		}
		.fixedchar.fixedFirst[fixed-char="8"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="8"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="8"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="8"] > tbody > tr> td:last-child{
			width:9.1em;
			min-width:9.1em;
		}
		.fixedchar.fixedFirst[fixed-char="9"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="9"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="9"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="9"] > tbody > tr> td:last-child{
			width:10.1em;
			min-width:10.1em;
		}
		.fixedchar.fixedFirst[fixed-char="10"] > thead > tr> th:nth-child(1),
		.fixedchar.fixedFirst[fixed-char="10"] > tbody > tr> td:nth-child(1),
		.fixedchar.fixedLast[fixed-char="10"] > thead > tr> th:last-child,
		.fixedchar.fixedLast[fixed-char="10"] > tbody > tr> td:last-child{
			width:11.1em;
			min-width:11.1em;
		}
		/*break table*/
			.break-table-xs.border-none table,
			.break-table-xs.border-none tbody,
			.break-table-xs.border-none tr,
			.break-table-xs.border-none td{
				border:none;
			}
			@media all and (max-width: 767px){
				.break-table-xs.fixedchar.fixedFirst[fixed-char="1"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="1"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="2"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="2"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="3"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="3"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="4"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="4"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="5"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="5"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="6"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="6"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="7"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="7"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="8"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="8"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="9"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="9"] td:nth-child(1),
				.break-table-xs.fixedchar.fixedFirst[fixed-char="10"] th:nth-child(1),.break-table-xs.fixedchar.fixedFirst[fixed-char="10"] td:nth-child(1){
					width:initial;
				}
				.break-table-xs.table{
					border:initial;
				}
				.break-table-xs, .break-table-xs thead, .break-table-xs tbody, .break-table-xs th, .break-table-xs td, .break-table-xs tr {
				    display: block;
				}
				.break-table-xs-leftSideHeader> thead > tr > th:nth-child(1),
				.break-table-xs-leftSideHeader > tbody > tr > td:nth-child(1){
					/*background-color:#eee;*/
					background-color:#c7f9ec;
				    font-weight: bold;
				}
				.break-table-xs thead tr{
				    position: absolute;
				    top: -9999px;
				    left: -9999px;
				}
				.break-table-xs tr {
				    border: 1px solid #ccc;
				    margin-bottom: 10px;
				    background-color: #ffffff;
				}
				.break-table-xs td[data-title]{
				    border: none !important;
				    border-bottom: 1px solid #eee !important;
				    position: relative;
				    padding-left: 35% !important;
				    white-space: normal;
				    text-align: left;
				}
				.break-table-xs td[data-title]:before {
				    content: attr(data-title);
				    position: absolute;
				    top: 0px;
				    left: 6px;
				    width: 30%;
				    padding-right: 10px;
				    white-space: nowrap;
				    text-align: left;
				    font-weight: bold;
				    color: #1a1a1a;
				    padding-top: inherit;
				    padding-bottom: inherit;
				}
			}
	/*div table*/
		.dtable {
		    display: table;
		}
		.dtable.border .dtable-cell{
			border:1px solid #ccc;
			padding:0.25em 0.5em;
		}
		.dtable.border-row{
			border-left:1px solid #ccc;
			border-right:1px solid #ccc;
		}
		.dtable.border-row .dtable-cell{

		}
		.dtable.top .dtable-cell {
		    vertical-align:top;
		}
		.dtable.middle .dtable-cell {
		    vertical-align:middle;
		}
		.dtable-row{
			display: table-row;
		}
		.dtable-cell{
		    display: table-cell;
		    vertical-align: middle;
		    padding:0 0.25em;
			/*width:100%;*/
		}
		.hw100 {
		    height: 100%;
		    width: 100%;
		}
		a.hw100,
		span.hw100{
			display:block;
		}
	/*dotdot*/
		.multiellipsis{
			overflow: hidden;
		}
		.multiellipsis.dotdot1{
			height:1.5em;
		}
		.multiellipsis.dotdot2{
			height:3em;
		}
		.multiellipsis.dotdot3{
			height:4.5em;
		}
		.multiellipsis.dotdot4{
			height:6em;
		}
	/*modal*/
		/*modal to center
		.modal.fade.in {
		  text-align: center;
		  display:table!important;
		  width:100%!important;
		  max-width:750px;
		  height: 100%!important;
		  vertical-align: middle;
		  margin:0 auto !important;
		  padding:15px !important;
		}

		.modal-dialog {
		  display: table-cell!important;
		  text-align: left;
		  vertical-align: middle;
		}*/
	/*text Style*/
		/*text color*/
			.unvailableText,
			.unvailableText:hover{
				color:#777;
			}
			.unvailableText.underline{
				border-bottom:2px solid #aaa;
			}
			.infoText,
			.infoText:hover{
				color:#0988dd;
				/*font-weight:bold;*/
			}
			.infoText.underline{
				border-bottom:2px solid #0988dd;
			}
			.importantText,
			.importantText:hover{
				color:#ff6633;
				/*font-weight:bold;*/
			}
			.importantText.underline{
				border-bottom:2px solid #ff6633;
			}
			.warningText,
			.warningText:hover{
				color:#ff2277;
				/*font-weight:bold;*/
			}
			.warningText.underline{
				border-bottom:2px solid #ff2277;
			}
			.dangerText,
			.dangerText:hover{
				color:  hsl(0, 80%, 57%);
				/*font-weight:bold;*/
			}
			.dangerText.underline{
				border-bottom:2px solid hsl(0, 80%, 57%);
			}
			.grayText,
			.grayText:hover{
				color: #555;
				/*font-weight:bold;*/
			}
			.subText,
			.subText:hover{
				color: #999;
				font-size:0.8rem;
				line-height: 0.8rem;
			}
			.grayText.underline{
				border-bottom:2px solid #555;
			}
			.disableText,
			.disableText:hover{
				color: #999;
			}
			.disableText.underline{
				border-bottom:2px solid #999;
			}
			.successText,
			.successText:hover{
				/*color:hsl(105, 67%, 40%);*/
				color:hsl(120, 39%, 46%);
			}
			.successText.underline{
				border-bottom:2px solid hsl(105, 67%, 40%);
			}
			.normalText,
			.normalText:hover{
				color: #2b8f77;
			}
			.normalText.underline{
				border-bottom:2px solid #2b8f77;
			}
			.normalText2,
			.normalText2:hover{
				color: #457ebf;
			}
			.normalText2.underline{
				border-bottom:2px solid #457ebf;
			}
			.normalText3,
			.normalText3:hover{
				color:#22aacc;
			}
			.normalText3.underline{
				border-bottom:2px solid #22aacc;
			}
			.normalText4,
			.normalText4:hover{
				color:#00aeaa;
			}
			.normalText4.underline{
				border-bottom:2px solid #00aeaa;
			}
			.yellowText{
				color: #ffee44;
			}

		/*text inverse*/
			.inverseText{
				display:inline-block;
				border-radius: 1em;
				padding:0.3em 0.8em;
			}
			.inverseText2{
				display:inline-block;
				border-radius: 0.25em;
				padding:0.3em 0.5em;
				line-height:1em;
				font-size:0.85em;
				border:1px solid;
			}
			.inverseText3{
				display:inline-block;
				border-radius: 0.25em;
				padding:0.3em 0.5em;
				line-height:1em;
				font-size:0.85em;
			}
			.inverseText+*,
			.inverseText3+*{
				margin-left:0.5em;
			}
			.infoText.inverseText,
			.infoText.inverseText2{
				background:#0988dd;
				color:#fff;
				border-color:#0988dd;
			}
			.importantText.inverseText,
			.importantText.inverseText2{
				background:#ff6633;
				color:#fff;
				border-color:#ff6633;
			}
			.warningText.inverseText,
			.warningText.inverseText2{
				background:#ff2277;
				color:#fff;
				border-color:#ff2277;
			}
			.dangerText.inverseText,
			.dangerText.inverseText2{
			    background: hsl(0, 80%, 57%);
			    color: #fff;
			    border-color: hsl(0, 80%, 57%);
			}
			.grayText.inverseText,
			.grayText.inverseText2{
			    background: #555;
			    color: #fff;
			    border-color:#555;
			}
			.normalText.inverseText,
			.normalText.inverseText2{
			    background: #008866;
			    color: #fff;
			    border-color:#008866;
			}
			.normalText2.inverseText,
			.normalText2.inverseText2{
			    background: #255994;
			    color: #fff;
			    border-color:#255994;
			}
			.normalText3.inverseText,
			.normalText3.inverseText2{
			    background: #22aacc;
			    color: #fff;
			    border-color:#22aacc;
			}
			.normalText4.inverseText,
			.normalText4.inverseText2{
			    background: #00aeaa;
			    color: #fff;
			    border-color:#00aeaa;
			}
			.infoText.inverseText3{
				border:1px solid #0988dd;
				color:#0988dd;
				background:#fff;
			}
			.importantText.inverseText3{
				border:1px solid #ff6633;
				color:#ff6633;
				background:#fff;
			}
			.warningText.inverseText3{
				border:1px solid #ff2277;
				color:#ff2277;
				background:#fff;
			}
			.dangerText.inverseText3{
			    background: #fff;
			    color: hsl(0, 80%, 57%);
			    border: 1px solid hsl(0, 80%, 47%);
			}
			.grayText.inverseText3{
			    background: #fff;
			    color:#555;
			    border: 1px solid #888;
			}
			.normalText.inverseText3{
			    background: #fff;
			    color:#008866;
			    border: 1px solid #008866;
			}
			.normalText2.inverseText3{
			    background: #fff;
			    color:#255994;
			    border: 1px solid #255994;
			}
			.normalText3.inverseText3{
			    background: #fff;
			    color:#22aacc;
			    border: 1px solid #22aacc;
			}
			.normalText4.inverseText3{
			    background: #fff;
			    color:#00aeaa;
			    border: 1px solid #00aeaa;
			}
	/*icon*/
		.glyphiconTextL{
		/*padding-right:3px;*/
		padding-right:0.25em;
		}
		.glyphiconTextR{
		/*padding-left:3px;*/
		padding-left:0.25em;
		}
	/*btn*/
		.disable{
			cursor: not-allowed;
		}
		/*exam test mode*/
			.exam{
			    background: #0074bd;
			    color: #fff;
			    border: 1px solid #0074bd;
				/*
			    background: #4dab00;
			    color: #fff;
			    border: 1px solid #4dab00;
			    */
			}
			/*練習模式*/
			/*
			.exercises{
			    background: #0074bd;
			    color: #fff;
			    border: 1px solid #0074bd;
			}
			*/
			.expired{
			    background: #444;
			    color: #fff;
			    border: 1px solid #444;
			}
			.hoodaa{
				/*
			    background: url(../../images/project/hoodaa.png) no-repeat 7px center;
			    background-size: auto 65%;
			    padding-left: 1.8em;
			    color: #008475;
			    border: 1px solid #008475;
			    */
			    background-color:#029e8c;
			    border: 1px solid #029e8c;
			    color:#fff;
			}
			.hoogaa{
				/*
			    background: url(../../images/project/hoogaa.png) no-repeat 5px center;
			    background-size: auto 58%;
			    padding-left: 1.8em;
			    color: #5c6882;
			    border: 1px solid #5c6882;
			    */
			   	background-color:#684ca3;
			    /*background-color:#ff8700;*/
			    /*background-color:#ca3492;*/
			    border: 1px solid #684ca3;
			    color:#fff;
			}
		/*badge*/
			.badge.btn{
				cursor: pointer;
			    padding: 3px 7px;
			    min-width:3em;
			}
			.badge.badge-default{
				background:#fff;
			    color: #333;
			    border: 1px solid hsl(0, 0%, 66%);
			}
			.badge.badge-normal{
				background: hsla(177, 67%, 40%, 1);
				color: #fff;
			}
			.badge.badge-normal2{
				background: hsl(187, 69%, 43%);
				color: #fff;
			}
			.badge.badge-info{
				background: #0988dd;
				color: #fff;
			}
			.badge.badge-inverse-info{
			    background: #fff;
			    color: #0988dd;
			    border:1px solid #0988dd;
			}
			.badge.badge-danger{
			    background: hsl(0, 80%, 57%);
			    color: #fff;
			}
			.badge.badge-inverse-danger{
			    background: #fff;
			    color: hsl(0, 80%, 57%);
			    border:1px solid hsl(0, 80%, 57%);
			}
		/*btn*/
			.modal-footer .btn+.btn{
				margin:initial;
			}
			.btn{
				font-size:0.85em;
				/*margin:3px 2px;*/
			    cursor: pointer;
		        /*padding: 5px 10px;*/
	            /*padding: 0.3em 0.5em;*/

	            text-decoration: none;
	            /*color:#FFF;*/
	            vertical-align: baseline;
			}
			.btn:not(:first-child){
				/*margin-top:5px;*/
			}
			/*.btn:not(:last-child){
				margin-bottom:5px;
			}*/
            .btn{
				margin-bottom:5px;
			}
			.btn.btn-xs{
				font-size:0.7em;
			}
			.btn.btn-sm{
				font-size:0.85em;
			}
			.btn.btn-md{
				font-size:1em;
			}
			.btn.btn-lg{
				font-size:1.2em;
			}
			li a.btn{
				margin:0;
			}
			.btn.btn-static{
				cursor: default;
			}
			.btn-group,
			.btn-group-full{
				white-space: nowrap;
			}
			.btn-group .btn{
				margin:0px;
			    display: inline;
			    float: none;
		        line-height: 2em;
			}
			.btn-group-full .btn{
				margin:0px;
			    display: inline-block;
			    float: none;
			}
			.btn-full{
				width:100%;
				text-align:center;
			}
			.btn.btn-disable-opacity{
			    opacity: 0.65;
			    cursor: not-allowed;
			}
		/*add*/
			.btn.circle{
				border-radius:50%;
				text-align:center;
			}
			.btn.circle > *{
				display:table-cell;
			    vertical-align: middle;
			    padding:0px 0px 0px 0px;
			    margin:0px 0px 0px 0px;
			}
			.btn.circle.btn-default.basic{
				    border: none;
			}
		/*btn-toogle*/
			.btn-toogle {
			    color: #fff;
			    background-color: #19a684;
			    border-color: #19a684;
			    margin-left:0px;
				border-top-left-radius:0px;
				border-bottom-left-radius:0px;
			}
			@media all and (max-width: 991px) {
				.btn-toogle {
				    margin-left:0px;
				}
			}
			.btn-toogle.active{
			border-radius:4px;
				/* Add By Ocean @20181210 */
				border-top-left-radius: 0px;
				border-bottom-left-radius: 0px;
			}
			.btn-toogle:active,
			.btn-toogle:active:hover,
			.btn-toogle:hover,
			.btn-toogle:focus {
			    color: #2b8f77;
			    background-color: #d2f7ee;
			    border-color: #19a684;
			}
		/*btn-default*/
			.btn-default,
			.btn-default:focus,
			.btn-static.btn-default,
			.btn-static.btn-default:focus,
			.btn-static.btn-default:hover,
			.btn-static.btn-default:hover:focus,
			.btn-static.btn-default.active,
			.btn-static.btn-default:active:hover{
				background: hsl(0, 0%, 100%);
			    color: #444;
			    border: 1px solid hsl(0, 0%, 66%);
			    box-shadow:none;
			}
			.btn-default:hover,
			.btn-default:hover:focus{
				color: #000;
				background:#eee;
				border: 1px solid hsl(0, 0%, 50%);
			}
			.btn-default.active{
				background:#ddd;
				color:#444;
			}
			.btn-default:active:hover{
				color: #444;
				background:hsl(0, 0%, 95%);
			}
			.btn-default.disable,
			.btn-default.disable:hover,
			.btn-default.disable:hover:focus,
			.btn-default.disable:active,
			.btn-default.disable:active:hover{
			    border: 1px solid hsl(0, 0%, 66%);
				background: hsl(0, 0%, 97%);
			    color: #aaa;
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c01*/
			.btn-c01,
			.btn-c01:focus,
			.btn-static.btn-c01,
			.btn-static.btn-c01:focus,
			.btn-static.btn-c01:hover,
			.btn-static.btn-c01:hover:focus,
			.btn-static.btn-c01.active,
			.btn-static.btn-c01:active:hover{
				background:hsl(187, 69%, 43%);
				color:#fff;
				border:1px solid hsl(187, 69%, 37%);
				box-shadow:none;
			}
			.btn-c01,
			.btn-c01:focus{
				background:hsl(187, 69%, 43%);
				color:#fff!important;
				border:1px solid hsl(187, 69%, 37%);
			}
			.btn-c01:hover,
			.btn-c01:hover:focus{
				color:#fff;
				background:hsl(187, 77%, 37%);
			}
			.btn-c01.active{
				background:#fff;
				color:hsl(187, 69%, 43%)!important;
			}
			.btn-c01:active:hover{
				color:#eee;
				background:hsl(187, 69%, 34%);
			}
			.btn-c01.disable,
			.btn-c01.disable:hover,
			.btn-c01.disable:hover:focus,
			.btn-c01.disable:active,
			.btn-c01.disable:active:hover{
				border:1px solid #22aabb;
				background:#fff;
				color:#22aabb;
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c02, onlineExam*/
			.btn-c02,
			.btn-c02:focus,
			.btn-static.btn-c02,
			.btn-static.btn-c02:focus,
			.btn-static.btn-c02:hover,
			.btn-static.btn-c02:hover:focus,
			.btn-static.btn-c02.active,
			.btn-static.btn-c02:active:hover{
				background:hsl(208, 56%, 46%);
				color:#fff;
				border:1px solid hsl(208, 56%, 40%);
				box-shadow:none;
			}
			.btn-c02:hover,
			.btn-c02:hover:focus{
				color:#fff;
				background:hsl(208, 66%, 43%);
			}
			.btn-c02.active{
				background:#fff;
				color:hsl(208, 56%, 46%);
			}
			.btn-c02:active:hover{
				color:#eee;
				background:hsl(208, 56%, 40%);
			}
			.btn-c02.disable,
			.btn-c02.disable:hover,
			.btn-c02.disable:hover:focus,
			.btn-c02.disable:active,
			.btn-c02.disable:active:hover{
				border:1px solid #337ab7;
				background:#fff;
				color:#337ab7;
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c03*/
			.btn-c03,
			.btn-c03:focus,
			.btn-static.btn-c03,
			.btn-static.btn-c03:focus,
			.btn-static.btn-c03:hover,
			.btn-static.btn-c03:hover:focus,
			.btn-static.btn-c03.active,
			.btn-static.btn-c03:active:hover{
				background:hsl(105, 67%, 40%);
				color:#fff;
				border:1px solid hsl(105, 67%, 34%);
				box-shadow:none;
			}
			.btn-c03:hover,
			.btn-c03:hover:focus{
				color:#fff;
				background:hsl(105, 67%, 35%);
			}
			.btn-c03.active{
				background:#fff;
				color:hsl(105, 67%, 40%);
			}
			.btn-c03:active:hover{
				color:#eee;
				background:hsl(105, 67%, 32%);
			}
			.btn-c03.disable,
			.btn-c03.disable:hover,
			.btn-c03.disable:hover:focus,
			.btn-c03.disable:active,
			.btn-c03.disable:active:hover{
				border:1px solid #44aa22;
				background:#fff;
				color:#44aa22;
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c04*/
			.btn-c04,
			.btn-c04:focus,
			.btn-static.btn-c04,
			.btn-static.btn-c04:focus,
			.btn-static.btn-c04:hover,
			.btn-static.btn-c04:hover:focus,
			.btn-static.btn-c04.active,
			.btn-static.btn-c04:active:hover{
				background:hsl(0, 63%, 56%);
				color:#fff;
				border:1px solid hsl(0, 70%, 47%);
				box-shadow:none;
			}
			.btn-c04:hover,
			.btn-c04:hover:focus{
				color:#fff;
				background:hsl(0, 63%, 52%);
			}
			.btn-c04.active{
				background:#fff;
				color:hsl(0, 63%, 56%);
			}
			.btn-c04:active:hover{
				color:#eee;
				background:hsl(0, 63%, 47%);
			}
			.btn-c04.disable,
			.btn-c04.disable:hover,
			.btn-c04.disable:hover:focus,
			.btn-c04.disable:active,
			.btn-c04.disable:active:hover{
				border:1px solid #ee3333;
				background:#fff;
				color:#ee3333;
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c05*/
			.btn-c05,
			.btn-c05:focus,
			.btn-static.btn-c05,
			.btn-static.btn-c05:focus,
			.btn-static.btn-c05:hover,
			.btn-static.btn-c05:hover:focus,
			.btn-static.btn-c05.active,
			.btn-static.btn-c05:active:hover{
				background:hsl(28,90%,50%);
				color:#fff;
				border:1px solid hsl(28,90%,40%);
				box-shadow:none;
			}
			.btn-c05:hover,
			.btn-c05:hover:focus{
				color:#fff;
				background:hsl(28,90%,45%);
			}
			.btn-c05.active{
				background:#fff;
				color:hsl(28,90%,50%);
			}
			.btn-c05:active:hover{
				color:#eee;
				background:hsl(28,90%,43%);
			}
			.btn-c05.disable,
			.btn-c05.disable:hover,
			.btn-c05.disable:hover:focus,
			.btn-c05.disable:active,
			.btn-c05.disable:active:hover{
				border:1px solid hsl(25,90%,50%);
				background:#fff;
				color:hsl(25,90%,50%);
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c06*/
			.btn-c06,
			.btn-c06:focus,
			.btn-static.btn-c06,
			.btn-static.btn-c06:focus,
			.btn-static.btn-c06:hover,
			.btn-static.btn-c06:hover:focus,
			.btn-static.btn-c06.active,
			.btn-static.btn-c06:active:hover{
				background:hsl(338, 80%, 55%);
				color:#fff;
				border:1px solid hsl(338, 80%, 45%);
				box-shadow:none;
			}
			.btn-c06:hover,
			.btn-c06:hover:focus{
				color:#fff;
				background:hsl(338, 80%, 45%);
			}
			.btn-c06.active{
				background: #fff;
				color: hsl(338, 80%, 55%);
			}
			.btn-c06:active:hover{
				color:#eee;
				background:hsl(338, 80%, 40%);
			}
			.btn-c06.disable,
			.btn-c06.disable:hover,
			.btn-c06.disable:hover:focus,
			.btn-c06.disable:active,
			.btn-c06.disable:active:hover{
				border:1px solid #ee3377;
				background:#fff;
				color:#ee2277;
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c07*/
			.btn-c07,
			.btn-c07:focus,
			.btn-static.btn-c07,
			.btn-static.btn-c07:focus,
			.btn-static.btn-c07:hover,
			.btn-static.btn-c07:hover:focus,
			.btn-static.btn-c07.active,
			.btn-static.btn-c07:active:hover{
				background:hsl(187, 31%, 33%);
				color:#fff;
				border:1px solid hsl(187, 31%, 23%);
				box-shadow:none;
			}
			.btn-c07:hover,
			.btn-c07:hover:focus{
				color:#fff;
				background:hsl(187, 31%, 28%);
			}
			.btn-c07.active{
				background: #fff;
				color: hsl(187, 31%, 23%);
			}
			.btn-c07:active:hover{
				color:#eee;
				background:hsl(187, 31%, 23%);
			}
			.btn-c07.disable,
			.btn-c07.disable:hover,
			.btn-c07.disable:hover:focus,
			.btn-c07.disable:active,
			.btn-c07.disable:active:hover{
				border:1px solid hsl(187, 31%, 43%);
				background:#fff;
				color:hsl(187, 31%, 43%);
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c08, hoodaa*/
			.btn-c08,
			.btn-c08:focus,
			.btn-static.btn-c08,
			.btn-static.btn-c08:focus,
			.btn-static.btn-c08:hover,
			.btn-static.btn-c08:hover:focus,
			.btn-static.btn-c08.active,
			.btn-static.btn-c08:active:hover{
				background:hsl(173, 55%, 43%);
				color:#fff;
				border:1px solid hsl(173, 55%, 43%);
				box-shadow:none;
			}
			.btn-c08:hover,
			.btn-c08:hover:focus{
				color:#fff;
				background:hsl(173, 97%, 33%);
			}
			.btn-c08.active{
				background: #fff;
				color: hsl(173, 97%, 31%);
			}
			.btn-c08:active:hover{
				color:#eee;
				background:hsl(173, 97%, 31%);
			}
			.btn-c08.disable,
			.btn-c08.disable:hover,
			.btn-c08.disable:hover:focus,
			.btn-c08.disable:active,
			.btn-c08.disable:active:hover{
				border:1px solid hsl(173, 31%, 43%);
				background:#fff;
				color:hsl(173, 31%, 43%);
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c09, hoogaa*/
			.btn-c09,
			.btn-c09:focus,
			.btn-static.btn-c09,
			.btn-static.btn-c09:focus,
			.btn-static.btn-c09:hover,
			.btn-static.btn-c09:hover:focus,
			.btn-static.btn-c09.active,
			.btn-static.btn-c09:active:hover{
				background:hsl(259, 32%, 51%);
				color:#fff;
				border:1px solid hsl(259, 32%, 51%);
				box-shadow:none;
			}
			.btn-c09:hover,
			.btn-c09:hover:focus{
				color:#fff;
				background:hsl(259, 36%, 45%);
			}
			.btn-c09.active{
				background: #fff;
				color: hsl(259, 36%, 43%);
			}
			.btn-c09:active:hover{
				color:#eee;
				background:hsl(259, 36%, 43%);
			}
			.btn-c09.disable,
			.btn-c09.disable:hover,
			.btn-c09.disable:hover:focus,
			.btn-c09.disable:active,
			.btn-c09.disable:active:hover{
				border:1px solid hsl(259, 31%, 43%);
				background:#fff;
				color:hsl(259, 31%, 43%);
				text-decoration:blink;
				cursor:default;
				box-shadow:none;
			}
		/*btn-c10*/
			.btn-c10,
			.btn-c10:focus,
			.btn-static.btn-c10,
			.btn-static.btn-c10:focus,
			.btn-static.btn-c10:hover,
			.btn-static.btn-c10:hover:focus,
			.btn-static.btn-c10.active,
			.btn-static.btn-c10:active:hover{
				background:#555;
				color:#fff;
				border:1px solid #333;
				box-shadow:none;
			}
			.btn-c10:hover,
			.btn-c10:hover:focus{
				color:#fff;
				background:#424242;
			}
			.btn-c10.active{
				background: #323232;
				color: #f2f2f2;
			}
			.btn-c10:active:hover{
				background: #323232;
				color: #eee;
			}
			.btn-c10.disable,
			.btn-c10.disable:hover,
			.btn-c10.disable:hover:focus,
			.btn-c10.disable:active,
			.btn-c10.disable:active:hover{
			    background: #888;
			    color: #eeeeee;
			    border: 1px solid #999;
			}
	/*scrollTop*/
		a.scrollTop, a.scrollTop:focus{
		    width: 40px;
		    height: 40px;
		    line-height:40px;
		    position: fixed;
		    bottom: 55px;
		    right: 20px;
		    display: none;
		    text-align:center;
	    	background:rgb(139, 194, 30);;
	    	filter: alpha(opacity=50); opacity: 0.5;
	    	color:#FFFFFF;
		    z-index:1000;
		    font-weight:bold;
		    border-radius:5px;
		}
		a.scrollTop:hover{
        	filter: alpha(opacity=80); opacity: 0.8;
        	color:#FFFFFF;
		}
		@media all and (max-width: 767px){
		  a.scrollTop,a.scrollTop:hover, a.scrollTop:focus{
/*		    bottom: 10px;*/
		    right: 10px;
			  /* Add By Ocean @20181210 */
			  bottom: 55px !important;
		  }
		}
	/*action actionRow*/
		:not(.actionRow) .action:not(:first-child){
			margin-top:5px;
		}
		:not(.actionRow) .action:not(:last-child){
			/*margin-bottom:5px;*/
		}
		.actionRow{
			/*border:1px solid gray;*/
			display:table;
			width:100%;
			height:36px;
			margin:15px auto;
		}
		.actionRow.basic{
			margin:0;
		}
		.actionRow input,
		.actionRow select{
			font-size:1em;
			height:34px;
		}
		.actionRow label{
			vertical-align:middle;
			padding:3px;
			margin-bottom:0;
		}
		.actionRow label > * {
			vertical-align:middle;
		}
		.actionRow .btn,
		.actionRow button{
			margin-top:0;
			margin-bottom:0;
		}
		.actionRow label input,
		.actionRow label select{
		    width:100%;
		}
		.actionRow>.select{
		    /*float: left!important;*/
		    /*border:1px solid red;*/
		    display:table-cell;
		    text-align:left;
		    vertical-align: middle;
		}
		.actionRow>.select input[type="text"]{
			/*width:100px;*/
		}
		.actionRow>.select select{
			/*height:32px;*/
		}
		.actionRow>.action{
		    /*float: right!important;*/
		    /*border:1px solid blue;*/
		    display:table-cell;
		    text-align:right;
		    vertical-align: middle;
		}
		.actionRow>.action .btn{
			padding: 5px 10px;
			margin:0;
		}
		.actionRow .or{
			width:20px;
			margin-left:-20px;
			margin-top:5px;
		    margin-bottom: 0;
			float:left;
			border-radius:50%;
			text-align:center;
			position:relative;
			left:20px;
		}
		.actionRow .or + input,
		.actionRow .or + .form-control{
			/*padding-left:25px !important;*/
			margin-left:30px;
			width: calc(100% - 30px);
		}
		.actionRow .or + .form-control.submitGroup{
			width: calc(100% - 30px - 4rem - 5px);
		}
		.actionRow .form-control.submitGroup{
			width: calc(100% - 4rem - 5px);
			display:inline-block;
		}
		.actionRow .form-control.submitGroup~.btn{
			/*display:inline-block;*/
			width: 4rem;
		}
	/*bookSearch*/
		.bookSearch{
			position:relative;
			width:100%;
		    height: 40px;
		}

/* Add By Ocean @20181210 */
.m_bookSearch {
	display: none;
}
@media all and (max-width: 990px){
	.bookSearch{
		display: none;
	}
	.m_bookSearch {
		display: block;
	}
}

	/*panel*/
		/*panel-default*/
			@media all and (min-width: 768px){
				.panel-group.tofixed{
					position: fixed;
					top: 70px;
				}
			}
			.panel-default{
				border-radius:30px;
				border-color:#ccc;
				background-color: #fff;
			}
			.panel-default>.panel-heading{
				background: #19a684;
				color:#fff;
			}
			.panel-group{
				/*padding-bottom:40px;*/
				/*margin:15px;*/
				/*margin-top: 5px;*/
				width:170px;
			    margin-bottom: 0px;
			}
			.panel{
			    border-radius: 0px!important;
			    border-top:0px;
			}
			.panel a{
				display:block;
			}
			.panel li,
			.panel-group .panel+.panel{
				margin-top: 0px;
			}
			.panel-group a.panel-heading:hover,
			.panel-group a.panel-heading:focus{
				background:#1bb791;
			}
			.panel-group a.panel-heading,
			.panel-group a.panel-heading:focus,
			.panel-group a.panel-heading:hover{
				color:#fff;
				text-decoration:none;
			}
			.panel-group .panel-heading+.panel-collapse>.list-group,
			.panel-group .panel-heading+.panel-collapse>.panel-body{
				border:0px;
				border-top:1px solid #eee;
				list-style: none;
				border-radius:0px;
			}
			.panel li:first-child{
				border:0px;
			}
			.panel-default .list-group-item.active,
			.panel-default .list-group-item.active:focus,
			.panel-default .list-group-item.active:hover {
			    z-index: 0;
			    color: #2b8f77;
			    background-color: #d2f7ee;
			    border:0px solid #eee;
			}
			.panel-default a.list-group-item:focus,
			.panel-default a.list-group-item:hover,
			.panel-default button.list-group-item:focus,
			.panel-default button.list-group-item:hover {
			    color: #2b8f77;
			    text-decoration: none;
			    background-color: inherit;
			}
		/*panel-selection*/
			.panel-selection .panel-heading{
			    background: hsla(177, 67%, 40%, 1);
			    color:#fff;
			}
			.panel-selection .panel-body{
				padding:0;
			}
			.panel-selection .panel-body .list-group-box{
			    max-height: 160px;
			}
			.panel-selection .panel-body .selectionlist{
				margin-bottom:0;
			}
	/*inline-sm-block-xs*/
		.inline-sm-block-xs{
			display:inline-block;
			padding-right:0.5em;
		    text-decoration: inherit;
		}
		a .inline-sm-block-xs{
			padding-right:initial;
		}
		@media all  and (max-width: 767px)  {
			.inline-sm-block-xs{
		 		display: block;
		 		padding-right:0em;
	 		    text-decoration: inherit;
			}
			.inline-sm-block-xs.block-xs-border+.block-xs-border{
				border-top:1px solid #ccc;
				margin-top:0.5em;
			}
			.inline-sm-block-xs.block-xs-center{
				text-align:center;
			}
		}
	/*form*/
		/*
		label, label>*{
		    vertical-align: middle;
		}
		*/
		.form-horizontal .form-group {
		    margin-right: initial;
		    margin-left: initial;
		    /*margin:15px auto;*/
		    margin:10px auto;
		}
		.form-group{
		    display: table;
		    width: 100%;
		}

		.form-horizontal .checkbox, .form-horizontal .checkbox-inline, .form-horizontal .radio, .form-horizontal .radio-inline{
			padding-top:initial;
		}
		@media (min-width: 768px){
			.form-horizontal .control-label {
				padding-top:0;
			}
		}
		.form-group>* {
		    display: table-cell;
		    /*vertical-align: top;*/
		    /*float:initial;*/
		}
		@media (max-width: 767px){
			.form-group > [class^="col-"]:not(label){
			    /*margin-left:-15px;
			    margin-right:-15px;*/
			    padding-left: 0.7em;
			}
			.form-group,
			.form-group>* {
			    display: block;
			}
			.form-group > label {
			    border-left: 3px solid #71ca00;
			    /*margin-left: 15px;*/
			    margin-left: 0px;
			    padding-left: 0.5em;
			    /* border-radius: 30px; */
			}
		}
		.form-control,
		input.form-control,
		input.form-control:focus{
		    padding: 6px;
		    /*font-size:initial;*/
		    /*font-size:inherit;*/
	        -webkit-box-shadow: none;
	        box-shadow: none;
		}
		.dateStart::after,
		.timeStart::after{
			content:"～";
		}
		.dateEnd::after,
		.timeEnd::after{
			content:"止";
		}
		.dateStart input[disabled],
		.dateEnd input[disabled]{
			cursor: no-drop;
			background: #f2f2f2f2!important;
			color: #aaa!important;
		}
		@media (max-width: 650px){
			.timeStart label:first-child,
			.timeEnd label:first-child{
				display:block;
			}
		}
		@media (max-width: 420px){
			/*.modal .dateStart label,
			.modal .dateEnd label{
				width: calc(100% - 2rem);
			}
			.modal .dateStart label>input,
			.modal .dateEnd label>input{
				width: 100%;
			}
			.dateStart i,
			.dateEnd i,*/
			.timeStart i,
			.timeEnd i{
				display:none;
			}
			.timeStart input,
			.timeEnd input{
				width: 100%;
			}
		}
		@media (max-width: 400px){
			.timeStart::after,
			.timeEnd::after{
				/*content:"";*/
			}
		}
		input:-moz-read-only { /* For Firefox */
		    background: none!important;
		    border:none!important;
		}
		input:read-only{
		    background: none!important;
		    border:none!important;
		}
		input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(^#search-input):not(#slideSearch):not(#rss-input),
		textarea,select:not(#qTypeSelect){
			height:2em;
			line-height:2em;
			padding:0 0.5em;
		}
		input,textarea,select {
			background: #fff;
			/*outline: 0;*/
			/*padding:6px;*/
			border:1px solid #bbb;
		}
		input:focus,textarea:focus,select:focus{
			/*outline: 0;*/
			/*padding:6px;*/
			border:1px solid #22aabb;
			border-color:#22aabb!important;
		    -webkit-box-shadow:none!important;
			box-shadow:none!important;
		    /*outline: none !important;
		    behavior: expression(this.onFocus=this.blur());*/
		}
		input[type="radio"]{
			border-radius:50%;
		}
		select, select:focus{
			background:#fff;
		}
		input[type="file"],
		input[type="file"]:focus{
			height:initial!important;
			/*font-size:initial!important;*/
		}
		.well-white input[type="file"]{
			background-color: #f4f4f4;
		}
		*:not(.formOneCol)> input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select{
			height:32px;
			line-height:32px;
		}
		.form{
			/*display:table;*/
		}
		.form .col{
			margin:0.1rem auto;
		}
		.formOneCol{
			position:relative;
		}
		.formOneCol>*{
			height:2em;
		}
		.formOneCol label {
		    position: absolute;
		    left: 25px;
		    top: 5px;
		    color:#bbb;
		    max-width:100%;
		}
		.formOneCol label + input[type="text"] {
			padding-left:40px;
		}
	    .form input[type="text"]{
	        width:100%;
	        border:0px;
	        border-bottom:1px solid #bbb;
	        background:none;
	        padding:5px;
	    }
	    .form input:focus[type="text"]{
	        /*outline: none;*/
	        border:0px;
	        border-bottom:1px solid #22aabb!important;
	        padding-top:5px;
	        animation-name: inputlight;
	        animation-timing-function: ease-in;
	        animation-iteration-count: 1;
	        animation-duration: 0.2s;
	    }
	    @keyframes inputlight {
	        from {border-color:#fff; border-width:1px;}
	        to {border-color:#22aabb; border-width:1px;}
	    }
		.form [role="button"],.form [type="submit"]{
			color:#fdfdfd;
			padding:5px 10px;
			background:#22aabb;
			display:inline-block;
			border-radius:5px;
		}
		.form [role="button"]:hover, .form [type="submit"]:hover,
		.form [role="button"]:focus, .form [type="submit"]:focus,
		.form [role="button"]:active, .form [type="submit"]:active,
		.form [role="button"]:active:hover, .form [type="submit"]:active:hover{
			background:#333;
		}
		.formOneCol input[type="text"]{
			padding-right:50px;
			border-radius:3px;
		}
		.formOneCol [role="button"], .formOneCol [type="submit"]{
			color:#bbb;
			padding:5px 7px;
			background:none;
			position: absolute;
			right: 15px;
			top: 0px;
		}
		.formOneCol input:focus[type="text"] +[role="button"],
		.formOneCol input:focus[type="text"] +[type="submit"]{
			color:#22aabb;
		}
		.formOneCol [role="button"]:hover,
		.formOneCol [type="submit"]:hover{
			/*color:#22aabb!important;*/
			border-radius:3px;
		    border-top-left-radius: 0px;
		    border-bottom-left-radius: 0px;
			background:#22aabb;
			color:#fdfdfd!important;
		}
		.formOneCol [role="button"]:focus, .formOneCol [type="submit"]:focus
		.formOneCol [role="button"]:active, .formOneCol [type="submit"]:active
		.formOneCol [role="button"]:active:hover, .formOneCol [type="submit"]:active:hover{
			background:none;
		}
		/*basic*/
			.form.basic .formOneCol [role="button"],
			.form.basic .formOneCol [type="submit"]{
			    background: #22aabb;
			    color: #fdfdfd!important;
			    border-top-left-radius: 0px;
			    border-bottom-left-radius: 0px;
			    height:100%;
			    font-size:0.9em;
			}
			.form.basic .formOneCol [role="button"]:hover,
			.form.basic .formOneCol [type="submit"]:hover{
			background-color: #209fae;
			}

			.form.basic .formOneCol input[type="text"]{
			background: #fff;
			border: 1px solid #bbb;
			color: #666;
			}

			.form.basic .formOneCol input:focus[type="text"]{
			background: #fff;
			border: 1px solid #bbb;
			color: #666;
			border: 1px solid #22aabb!important;
			}
		/*placeholder*/
		    ::-webkit-input-placeholder {
		       color: #aaa;
		    }
		    :-moz-placeholder { /* Firefox 18- */
		       color: #aaa;
		    }
		    ::-moz-placeholder {  /* Firefox 19+ */
		       color: #aaa;
		    }
		    :-ms-input-placeholder {
		       color: #aaa;
		    }
	/*Toggle Switch*/
		.switch {
			position: relative;
			display: inline-block;
			width:  4em;
			height: 1.5em;
			overflow:hidden;
			margin-bottom:0;
		    -webkit-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
		}
		.switch+.desc{
			display: inline-block;
			overflow:hidden;
		}
		.switch input {
			/*display:none;*/
			width: 100%;
			height:100%;
			float:left;
			padding:0;
		    margin-top: 0;
		}
		.switch input:focus::after {
			position:absolute;
			content:"";
			width:100%;
			height:100%;
			padding:3px;
		    outline: 2px solid  #22aabb!important;
		}
		.slider {
			position:absolute;
			z-index:1;
			width: inherit;
			height: inherit;
			overflow:hidden;
			background-color: #e7e7e7;
			border: 1px solid #aaa;
		}
		.slider-container{
			display: inline;
			white-space: nowrap;
			position: absolute;
			cursor: pointer;
			left:-2em;
			-webkit-transition: .4s;
			transition: .4s;
		}
		.slider-container span{
			display:inline-block;
			text-align:center;
			height: inherit;
			vertical-align: middle;
		}
		.slider-container span:not(.slideDot){
			width:2em;
		}
		.slider-container span:first-child{
			color:#fff;
		}
		.slider-container span:last-child{
			color:#a2a2a2;
		}
		.slider-container .slideDot {
			width: 1em;
			height:1em;
			background-color: #fff;
			margin-bottom: 0.15em;
			-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.25);
			-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.25);
			box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.25);
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+42,e1e1e1+69 */
			background: rgb(255,255,255); /* Old browsers */
			background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 42%, rgba(225,225,225,1) 69%); /* FF3.6-15 */
			background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 42%,rgba(225,225,225,1) 69%); /* Chrome10-25,Safari5.1-6 */
			background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 42%,rgba(225,225,225,1) 69%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e1e1',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		}
		input:checked + .slider {
		  background-color: #39b3cf;
		}

		input:focus + .slider {
		  box-shadow: 0 0 1px #39b3cf;
		}
		input:checked + .slider .slider-container {
		  -webkit-transform: translateX(2.4em);
		  -ms-transform: translateX(2.4em);
		  transform: translateX(2.4em);
		}
		input:checked + .slider .slider-container span:last-child{
			display:none;
		}
		.slider,
		.slider-container .slideDot {
			border-radius: 1em;
		}
	/*ul inline*/
		.inline-block{
			display:inline-block;
		}
	  ul.inline{
	    list-style: none;
	    display: block;
	    padding:0;
	    margin: 0;
	  }
	  @media all and (max-width: 767px){
	    ul.inline + *::before{
	      margin-bottom: 10px;
	    }
	  }
	  ul.inline>li{
	    display: inline-block;
	  }
	  ul.inline>li::after{
	  	/*display: inline-block;*/
	  	display: table;
	    content: "";
	  }
	  ul.inline>li.title{
	    color:#000000;
	    font-weight: 800;
	  }
	  ul.inline>li.content{
	    color:#666;
	  }
	  ul.inline>li > *,
	  ul.inline>li.content > *{
	    display: inline-block;
	  }
	  ul.inline>li.content > ul{
	    display: block;
	  }
		@media all  and (max-width: 767px)  {
			ul.block-xs{
				/*margin-top:5px;*/
			}
			ul.block-xs>li,
			/*ul.block-xs>li > * ,*/
			ul li.block-xs{
				display: block;
			}
			ul.block-xs>li:not(:last-child){
				margin:0 0 5px 0;
			}
			ul.block-xs > li > .btn{
				width:100%;
			}
			.list-group-item-dropdown.block-xs{
				display: block;
			}
			.list-group-item-dropdown.block-xs>:first-child{
				padding-top:0.5em;
			}
			.list-group-item-dropdown.block-xs>*{
				display: block;
				padding:0 0.5em;
				padding-bottom:0.5em;
				width:initial;
			}
		}
		@media all and (max-width: 575px){
			ul.block-xxs{
				/*margin-top:5px;*/
			}
			ul.block-xxs>li,
			/*ul.block-xs>li > * ,*/
			.block-xxs,
			ul li.block-xxs{
				display: block;
			}
			ul.block-xxs>li:not(:last-child){
				margin:0 0 5px 0;
			}
			ul.block-xxs > li > .btn{
				width:100%;
			}
			.list-group-item-dropdown.block-xxs{
				display: block;
			}
			.list-group-item-dropdown.block-xxs>:first-child{
				padding-top:0.5em;
			}
			.list-group-item-dropdown.block-xxs>*{
				display: block;
				padding:0 0.5em;
				padding-bottom:0.5em;
				width:initial;
			}
		}
	/*afrerSeparateSpace*/
		ul.afrerSeparateSpace>li:not(:first-child)::before,
		.afrerSeparateSpace + *::before{
		content: ' ';
		padding:0 5px;
		}
		ul.afrerSeparateSpace01>li:not(:first-child)::before,
		.afrerSeparateSymbol01 + *::before{
		content: '~';
		padding:0 5px;
		}
		ul.afrerSeparateSpace02>li:not(:first-child)::before,
		.afrerSeparateSymbol02 + *::before{
		content: '/';
		padding:0 5px;
		}
		ul.afrerSeparateSpace03>li:not(:first-child)::before,
		.afrerSeparateSymbol03 + *::before{
		content: ',';
		padding:0 5px;
		}
		ul.afrerSeparateSpace04>li:not(:first-child)::before,
		.afrerSeparateSymbol04 + *::before{
		content: '、';
		padding:0px;
		}
		ul.afrerSeparateSpace05>li:not(:first-child)::before,
		.afrerSeparateSymbol05 + *::before{
		content: '：';
		padding:0px;
		margin:0;
		}
		ul.afrerSeparateSpace06>li:not(:first-child)::before,
		.afrerSeparateSymbol06 + *::before{
		content: '，';
		padding:0px;
		margin:0;
		}
		ul.afrerSeparateSpace07>li:not(:first-child)::before,
		.afrerSeparateSymbol07 + *::before{
		content: '|';
		padding:0 5px;
		margin:0;
		}
		@media all  and (max-width: 767px)  {
		  .afterReset-xs::before{
		  	content:'';
		    padding:0px;
		    margin:0;
		  }
		}
	/*ul listStyle1*/
		.listStyle,
		.listStyle ul{
			padding:0;
			list-style: none;
		}
		.listStyle ul{
			padding-left:1em;
		}
		.listStyle li{
		    display: block;
		}
		.listStyle-dashLline li{
			display:block;
			margin-left : 1em;
			text-indent :-1em;
		}
		.listStyle-dashLline li::before{
			content:'-';
			width:1em;
			float:left;
		}
		.listStyle-contents{

		}
		.listStyle-contents ul{
			color:#666;
			padding:1em;
		}
		.listStyle-contents ul>ul{
			color:#666;
			padding:0.5em 2em;
		}
		.listStyle-contents ul>li>*{
			margin:0;
		}
		.listStyle-contents > ul{
			color:#666;
			background:#f5f5f5;
			border: 1px solid #e3e3e3;
			padding:1em;
		}
	/*mutiDropdown*/
		.mutiDropdown{
			padding-left:15px;
			padding-right:15px;
		}
		.mutiDropdown .col{
			padding-left:0;
			padding-right:0;
			margin-bottom:0.25em;
		}
		@media all  and (min-width: 992px) {
			.mutiDropdown .col+.col{
				padding-left:0.5em;
			}
		}
		.mutiDropdown .col:last-child{
			margin-bottom:15px;
		}
	/*well*/
		.well{
			padding:15px;
			margin-bottom:15px;
			background-color: #f6f6f6;
		}
		/*
		.well :first-child{
			margin-top:0;
		}
		.well :last-child{
			margin-bottom:0;
		}
		*/
		.well-white{
		    background-color: #fff;
		    border: 1px solid #e3e3e3;
		}
		.well-arrow-top{
		    border-width: 1px solid #e3e3e3;
	        margin-top: 15px;
	        position:relative;
		}
		.well-tips{
		    text-align: left;
		    background-color: hsla(175, 44%, 97%, 1);
		    border-width: 0px 0px 1px 5px;
		    border-style: solid;
		    border-color: hsla(175, 24%, 90%, 1);
		    border-left-color: hsla(175, 70%, 41%, 1);
		    padding: 0.5em;
		    color: #555;
		}
		.well-tips .topic{
		    color: hsla(175, 70%, 41%, 1);
		    font-weight:600;
		}
		.well-arrow-top::before{
			content: "";
			display: block;
			position: absolute;
			top: -10px;
			left: 50%;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 8px 10px 8px;
			border-color: transparent transparent #e3e3e3 transparent;
		}
		.well.textlist{
			text-align:left;
		}
		.well.textlist p:before{
			border-left-width:5px;
			border-left-style:solid;
			border-left-color:inherit;
			padding-left:0.5em;
		}
	/*fileType*/
		.fileTypefolder{
			color:hsl(187, 69%, 43%);
			margin-right:0.5em;
		}
		.fileTypePDF{
			color:#e60303;
			margin-right:0.5em;
		}
		.fileTypePPT{
			color:#ff6d00;
			margin-right:0.5em;
		}
		.fileTypeWORD{
			color:#146ece;
			margin-right:0.5em;
		}
		.fileTypeXLS{
			color:#009d00;
			margin-right:0.5em;
		}
		.fileTypeZIP{
			color:#00adcc;
			margin-right:0.5em;
		}
		.fileTypeImage{
			color:#00b493;
			margin-right:0.5em;
		}
		.fileTypeURL{
		    color: #0093c7;
			margin-right:0.3em;
		}
	/*fileUpload*/
		input[type="file"]{
			width:100%;
			margin:0.5em 0;
			padding:5px;
		}
		.fileUploadList{
			display:table;
			width:100%;
			border-left:1px solid #bbb;
			border-right:1px solid #bbb;
		}
		.fileUploadItem{
			display:table-row;
		}

		.fileUploadItem.error{
			background:#fff;
		}
		.fileUploadItem.error i{
			/*color:#c7130b;*/
			color:#ff8c00;
		}
		.fileUploadItem.waitting{
			background:#fff;
			color:#999;
		}
		.fileUploadItem.waitting a{
			color:#999;
		}
		.fileUploadItem.process{
			background:hsl(194, 69%, 87%);
			/*background:hsl(138, 69%, 87%);*/
		}
		.fileUploadItem.process i{
			color:#666;
		}
		.fileUploadItem.finish{
			/*background:hsl(138, 69%, 87%);*/
		}
		.fileUploadItem.finish i{
			color:#5fab0b;
		}
		.fileUploadItem>*{
			display:table-cell !important;
			padding:10px 15px;
			border-top:1px solid #bbb;
			border-bottom:1px solid #bbb;
		}
		.fileUploadItem>.fileName{
			max-width:267px;
			text-align:left;
			overflow:hidden;
			text-overflow: ellipsis;
		}
		.fileUploadItem>.processState{
			width:2em;
			text-align:center;
		}
		.fileUploadItem.waitting>.processState{
			cursor: pointer;
		}
		.fileProcessPanel{
			/*border:1px solid #bbb;*/
			background:#fff;
			position:fixed;
			right:0;
			bottom:0;
			width:100%;
			max-width:500px;
		}
		@media all and (max-width: 767px){
			.fileProcessPanel{
				width:100%;
				max-width:100%;
			}
		}
		.fileProcessPanelHeader{
			display:table;
			width:100%;
			background:#242424;
			color:#ddd;
			/*border:1px solid #bbb;*/
			padding:10px 15px;
		}
		.fileProcessPanelHeader>*{
			display:table-cell;
		}
		.fileProcessPanelHeader>.status .leftFiles{
			margin:0 0.4em;
		}
		.fileProcessPanelHeader>.action{
			text-align:right;
		}
		.fileProcessPanelHeader>.action>a{
			padding:0 0.4em;
		}
		.fileProcessPanelContent{
			position:relative;
			width:100%;
			max-height:110px;
			overflow-y:auto;
			overflow-x:hidden;
		}
/*page body*/
	.pageBody{
		position: relative;
		min-height:100%;
		/* padding-top:60px; */
		padding-bottom:40px;
		/*margin-top:61px;
		padding-bottom:52px;
		min-height:100%;*/
		/*min-height:100%;
		padding-top:113px;
		margin-top:-52px;*/
		margin: 0;
		/*height: 100%;*/
		/*overflow: inherit;*/
	}

	#slide-menu{
		background:none;
	    position: fixed;
	    top: 0px;
	    left: -200px;
	    display: block;
	    float: left;
	    width: 100%;
	    max-width: 200px;
	    height: 100%;
	    overflow-y: auto;
	    -moz-transition: all 300ms;
	    -webkit-transition: all 300ms;
	    transition: all 300ms;
	    /*padding:75px 15px 58px 15px;*/
	    /*padding:75px 15px 0px 15px;*/
	    /*background:red;*/
	    padding:15px 15px 0px 15px;
	    margin-top:60px;
	}
	#slide-menu > .panel-group{
/*	    padding-bottom:115px;*/
	    /*padding-bottom:65px;*/
		/* Add By Ocean @20181210 */
		/* padding-bottom:125px; */
	}
	#main{
	    position: relative;
	    /*position: fixed;
	    top: 0px;
	    left: 0;*/
	    width: 100%;
	    height: 100%;
	    /*overflow-y: auto;
	    overflow-x: hidden;*/
	    background: #fcfeff;
	    border-radius: 0px;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    /*-moz-box-shadow: -3px 0 6px #4a5562;
	    -webkit-box-shadow: -3px 0 6px #4a5562;
	    box-shadow: -3px 0 6px #4a5562;*/
	    -moz-transition: all 300ms;
	    -webkit-transition: all 300ms;
	    transition: all 300ms;
	    /*padding:55px 15px 52px 15px;*/
	    /*padding:15px 15px 15px 90px;*/
	    padding:15px;
	    /*background:green;*/
	}
	#main.disable:before{
		content:"";
		display:block;
		margin: -15px;
		width:300%;
		height:300%;
		min-width:3000px;
		min-height:3000px;
	    cursor: default;
		position:absolute;
		left: -200px;
		z-index: 1002;
		/*background:rgba(166, 206, 183, 0.65);
		background:rgba(175, 217, 210, 0.65);
		background:rgba(189, 229, 222, 0.65);
		background:rgba(225, 225, 225, 0.53);*/
		background:rgba(182, 220, 221, 0.47);
	}
	@media all and (max-width: 991px) {
		#main{
		    padding:15px 15px 15px 15px;
		}
	}
	#main :first-child{
		/*margin-top:15px;*/
	}
	#slide-menu,
	#slide-menu.active{
	    left: 0px;
        z-index: 1003;
		/* Add By Ocean @20181210 */
		height: 100%;
	}
	#slide-menu +#main,
	#slide-menu.active +#main{
	    /*left: 200px;*/
	    /*margin-left:200px;
	    padding-left:90px;*/
	    margin-left:200px;
	    /*padding-left:15px;*/
	    padding-right:215px;
	}
	@media (min-width: 992px){
		#slide-menu{
		    height: calc(100% - 105px);
		    /*height: calc(100% - 65px);*/
		    margin-top:65px;
		}
	}
	@media (max-width: 991px){
		/*default */
		#slide-menu{
		    left: -200px;
		    /*
		    -webkit-box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.35);
		    -moz-box-shadow: 0px 10px 0px 0px rgba(0,0,0,0.35);
		    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.35);*/
		    border-right:1px solid #ccc;
		    margin-top:61px;
		}
		#slide-menu +#main{
			left:0px;
		    margin-left:0px;
		    padding-left:15px;
		    padding-right:15px;
		}
		#slide-menu.active{
			left:0;
			background: rgba(255, 255, 255, 0.9);
		}
		#slide-menu.active +#main{
			left:200px;
		    margin-left:0px;
		    padding-right:0px;
		}
	}
	/*fixedTopActionRow*/
		.fixedTopActionRow{
		    position:fixed;
		    /*width:inherit;*/
		    left:0px;
		    top:75px;
		    z-index:1002;
		    /*padding-left:15px;
		    padding-right:15px;*/
		    display:none;
		}
		.fixedTopActionRow > *{
			display:inline-block;
			float:left;
			margin-top:0px;
		}
		#slide-menu +#main>.fixedTopActionRow,
		#slide-menu.active +#main>.fixedTopActionRow{
			left:200px;
		}
		@media (max-width: 991px){
			.fixedTopActionRow{
				display:inherit;
			}
			#slide-menu +#main>.fixedTopActionRow{
				left:0px;
			}
			#slide-menu.active +#main>.fixedTopActionRow{
				left:200px;
			}
		}
/*page layout*/
	/*section*/
		.mblock{
			/*margin:15px auto;*/
			margin-top:15px;
			margin-bottom:15px;
		}
		.pblock{
			/*padding:15px 0 15px 0;*/
			padding-top:15px;
			padding-bottom:15px;
		}
		.row-margin{
			margin:0 15px;
		}
		.row-padding{
			padding:0 15px;
		}
		/*basic*/
			.section-block{
				border-bottom:1px solid #ddd;
				/*padding-top:30px;
				padding-bottom:30px;*/
				padding-top:1em;
				padding-bottom:1em;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,ffffff+3 */
				background: rgb(247,247,247); /* Old browsers */
				background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(255,255,255,1) 3%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 3%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 3%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
			}
			.section-header{
				padding-bottom:15px;
			}
			.section-header .colBlock{

			}
			.section-header .colBlock h2{

			}
			.section-body .colBlock{
				padding-top:0.5em;
				padding-bottom:0.5em;
			}
		/*layout default*/
			.section-body .fa-stack{
				font-size:3rem;
			}
		/*layout list*/
			.section-body.list{
				text-align:left;
			}
			.section-body.list .colBlock .block{
				display:table;
				padding:15px;
				margin:0px;
			}
			.section-body.list .colBlock div > *{
				/*display:inline-block;*/
				float:left;
			}
			.section-body.list i{
				font-size:2.6rem;
				margin:0.5rem auto;
				margin-right:1.5rem;
			}
			.section-body.list img{
				width:3.6rem;
				height:3.6rem;
				margin-right:15px;
			}
/*index.html*/
	/*searchAD*/
		.searchAD{
			/*background: url(http://glad.1sttac.com/images/bg/GLAD_bg.jpg) no-repeat center;*/
			background: url(../../images/project/bg-lg.jpg)  no-repeat center;
		    background-position: center bottom;
		    background-repeat: no-repeat;
		    background-size: cover;
			width:100%;
			height:200px;
		}
		@media  (max-width: 767px) {
			.searchAD{
				background-position:center center;
				height:200px;
			}
		}
		.searchAD .opacity{
		  background-color: rgba(0,0,0,0.75);
		}
		.searchAD input[type="text"]{
			color:#fff;
			border-color:#888;
		}
		.searchAD input:focus[type="text"]{
			color:#fff;
			background-color: rgba(0,0,0,0.3);
		}
		.searchAD div[role="button"]{
			color:#aaa;
		}
		.searchAD div[role="button"]:hover{
			color:#22aabb;
		}
	/*bookinfo*/
		.books{
		    margin-top: 30px;
		}
		.books .bookinfo{
			margin-bottom: 15px;
		}
		.bookinfo .imgBlock{
			width:125px;
			height:175px;
			margin:0 auto;
			/*display:inline-block;*/
		}
		.bookinfo .imgBlock .img{
		    /*height: inherit;*/
			display:table-cell;
			vertical-align: middle;
		    position: relative;
		}
		.bookinfo img{
			border:1px solid #ccc;
			max-height: 175px;
			max-width:100%;
			/*max-width:125px;
			max-height:175px;*/
		    width: 100%;
		    /*height: 100%;*/
		}
		.bookinfo a:hover{

		}
		.bookinfo a:hover p{

		}
		.bookinfo a:hover .img{
			/*
			-webkit-transform: translate(0px,-10px);
			-ms-transform: translate(0px,-10px);
			transform: translate(0px,-10px);
			box-shadow: 10px 10px 15px -1px rgba(0,0,0,0.4)!important;
			*/
			/*
			-ms-transform: scale(1.1, 1.1);
			-webkit-transform: scale(1.1, 1.1);
			transform: scale(1.1, 1.1);
			*/
			/**/
		    -ms-transform: rotate(-3deg);
		    -webkit-transform: rotate(-3deg);
		    transform: rotate(-3deg);
			-webkit-transition: all 150ms linear;
		}
		.bookinfo .imgBlock .img.graduallyExpiring{
			    background: #000;
			    border:0;
		}
		.bookinfo .imgBlock .img.graduallyExpiring img{
			zoom: 1;
			opacity: 0.4;
			filter: opacity(60%);
		}
		.bookinfo .imgBlock .img.graduallyExpiring::after{
		    content: "即將到期";
		    color: #fff;
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    display: table-cell;
		    text-align: center;
		    padding-top: 50%;
		    font-size:1.2em;
		    font-weight:100;
		}
		.bookinfo .action .btn{
			display:inline-block;
		}
		@media all and (max-width: 500px) {
			.bookinfo:not(.authorize) .action .btn{
				display:block !important;
			}
		}
	/*authorize*/
		.authorize .imgBlock{
			/*height:initial;*/
			padding-top:10px;
		}
		.authorize .well{
			padding:10px;
		}
		@media all and (max-width: 767px) {
			.authorize .block{
				display:block;
			}
		}
	/*section style footerInfo*/
		.section-block.what .fa-circle{
			color:#22aabb;
		}
		@media all and (max-width: 767px) {
			.section-block.what .section-body{
				text-align:left;
			}
			.section-block.what .fa-stack {
			    font-size: 1.4em;
			    display: inline-block;
			    margin-top: -0.5em;
			}
			.section-block.what h3{
			    display: inline-block;
			}

		}
		.section-block.join{
			background: #192c2e;
			/*background:#159aab;*/
			color: #ffffff;
			border: none;
		    position: relative;
		}
		.section-block.join::after{
			content:"";
			position:absolute;
			top: 100%;
			left:50%;
			margin-left:-25px;
			border-style: solid;
			border-width: 15px 25px 0 25px;
			border-color: #192c2e transparent transparent transparent;
			/*border-color: #159aab transparent transparent transparent;*/
		}
		.section-block.why{
			/*background: #17879a;*/
			/*background: #213133;*/
			background:#23393c;
			color: #ffffff;
			border:none;
			/*background:#eee;*/
		}
		.section-block.why i{
			color: #ffffff;
			background: #08b7a8;
			/*background: #57c308;*/
			/*background:#22aabb;*/
			/*background:#019070;*/
			padding:10px;
			border-radius:5px;
			font-size:1.6rem;
		}
		.section-block.why i.fa-book{
			/*background: #2a68da;*/
			background: #1f8fb1;
		}
		.section-block.why i.fa-list-ol{
			/*background: #57c308;*/
		    background: #4fb11f;
		}
		.section-block.why i.fa-trophy{
			/*background: #f72986;*/
		    background: #ab357b;
		}
		.section-block.why i.fa-line-chart{
			/*background: #f38109;*/
			background: #d8861d;
		}
		.section-block.why i{
			/*background:#333!important;*/
		}
		.section-block.why .section-body .colBlock .block{
			background:#fff;
		}
		.section-block.why .section-body .colBlock .block h3{
			color:initial;
		}
		.section-block.why .section-body .colBlock .block p{
			color:initial;
		}
		.section-block.demo{

		}
		.section-block.footerInfo{
			background: #edf9f8;
		}
		.section-block.footerInfo h4{
			color:#009999;
		}
		.footerInfo input[type="text"]{
			background:#4a5a59;
			color: #fff;
		}
		.footerInfo input[type="text"]:focus{
			background:#2d3a38;
			color:#fff;
		}
/*book-detail.html*/
	/*basic*/
		.bookIntro{
			display:table;
			/*margin-top:15px;*/
			margin-bottom:15px;
			width: 100%;
		}
		.bookIntro .imgBlock,
		.bookIntro .descriptionBlock{
		    position: relative;
			display:table-cell;
			vertical-align: top;
		}
		.bookIntro .imgBlock{
			padding:0px 15px 0px 15px;
			text-align:center;
		    width: 140px;
	        margin-top: 15px;
		}
		.bookIntro .imgBlock > img{
			max-height:175px;
			border:1px solid #ccc;
		}
		.bookIntro .descriptionBlock{
			text-align:left;
		}
		.bookIntro .descriptionBlock h5{
			margin-top:0.5em;
			margin-bottom:0.5em;
		}
		@media all and (min-width: 992px) {
			.bookIntro .descriptionBlock h5{
				/*max-width:600px;*/
			}
		}
		@media all and (max-width: 991px) {
			.bookIntro{
				padding-left:50px;
			}
		}
		@media all and (max-width: 767px) {
			.bookIntro {
				text-align:center;
				padding-left:0px;
			}
			.bookIntro .imgBlock,
			.bookIntro .descriptionBlock{
				text-align:center;
				display:block;
				vertical-align: top;
				margin:0 auto;
			    margin-top: 15px;
			}
		}
	/*examList*/
		.examList{
			/*max-width:1000px;*/
		}
		.examList th,
		.examList td{
			min-width:3em;
		}
		.examList th:nth-child(1),
		.examList td:nth-child(1){
			/*width:70%;*/
			min-width:120px;
			/*table-layout: fixed;*/
		    white-space: initial!important;
		}
		.examList th:nth-child(2),
		.examList td:nth-child(2){
			min-width:4em;
		}
		.examList th:last-child,
		.examList td:last-child{
			min-width:3em;
		}
	/*bookTabs*/
		.content-menuselect{
    		height: 4rem;
		}
		.content-fake{
    		height: 4rem;
		}
		.content-menu{
			position:  absolute;
		    width: 100%;
		    left:  0;
		    margin-top: -3.5rem;
		    z-index: 10;
		}
		.content-menuselect .nav.bookTabs{
			margin-bottom: 1rem;
		}
		.nav.bookTabs{
			background: #17b9b9;
	    	border-bottom:0;
    	    border-radius: 0;
    	    white-space: nowrap;
    	    text-align:left;
    	    position:relative;
	        min-width: max-content;
			}
		@media all and (max-width: 991px) {
			.nav.bookTabs{
		    	/*margin:0 -15px;*/
				}
		}
		.nav.bookTabs >li{
			/*background: #17b9b9;*/
			background:transparent;
			color:#fff;
			float:none;
			display:inline-block;
			margin-bottom: 0px;
			margin-right: -5px;
		}
		.nav.bookTabs >li.nav-item:nth-last-child(2){
			margin-right: 0px;
		}
		.nav.bookTabs > li > a{
			padding:0.5rem 1rem;
			/*line-height:1rem;*/
			border:none;
			margin-right:0;
		}
		.nav.bookTabs >li:not(.active):hover{
		    background-color: rgba(80, 80, 80, 0.1);
		}
		.nav.bookTabs >li:not(.active)>a:hover,
		.nav.bookTabs >li:not(.active)>a:focus{
		    color: #fff;
		    /*border-color: #00abaa #00abaa #00abaa;
		    background-color: #00abaa;*/
		    background-color: rgba(80, 80, 80, 0.1);
		    border-bottom:0;
		}
		.nav.bookTabs>li.active>a{
		    /*border-top: 4px solid #00a2a2;
		    margin-top: -3px;
		    border-top-left-radius: 4px;
		    border-top-right-radius: 4px;*/
		    border:none;
	        margin-top: 2px;
		}
		.nav.bookTabs>li.active>a:hover:focus{
			border:none;
		}
		@media all and (min-width: 768px){
			.nav.bookTabs>li.active>a:before{
			    content: "";
			    width: 100%;
			    height: 16px;
			    position: absolute;
			    top: 0;
			    left: 0;
			    background: -moz-linear-gradient(top, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
			    background: -webkit-linear-gradient(top, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
			    background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%);
			    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26000000', endColorstr='#00000000',GradientType=0 );
			}
		}
		.bookTabContent{
			/*padding-top:15px;*/
		}
		.nav.bookTabs > li.nav-dropdown,
		.nav.bookTabs > li.nav-close,
		.nav.bookTabs > li.nav-closeend{
			display:none;
			background:transparent;
		}
		.nav.bookTabs > li.nav-closeend > a{
			color: rgba(255, 255, 255, 0.8);
			background-color: rgba(255, 255, 255, 0.1);
		}
		@media all and (max-width: 767px){
			.nav.bookTabs{
				display: flex;
				flex-direction: column;
			}
			.nav.bookTabs:before{
				content:none;
			}
			.nav.bookTabs > li{
				display: none;
				order:2;
				margin:0;
				padding:0;
			}
			.nav.bookTabs > li a{
				margin:0;
				padding:0.75rem 1rem;
			}
			.nav.bookTabs > li.active{
				display: block;
				order:1;
			}
			.nav.bookTabs > li.active > a{
				border:none;
				margin:0;
			    /*background-color: #17b9b9;*/
			    background-color:transparent;
			    color:#fff;
			    border:0;
			}
			.nav.bookTabs > li.nav-dropdown,
			.nav.bookTabs > li.nav-close{
				width: 100%;
				position: absolute;
				z-index: 1;
			    text-align: right;
			}
			.nav.bookTabs > li.nav-dropdown{
				display:block;
			}
			.nav.bookTabs > li.nav-dropdown:hover,
			.nav.bookTabs > li.nav-close:hover{
				background-color:transparent;
			}
			.nav.bookTabs > li.nav-dropdown > a,
			.nav.bookTabs > li.nav-dropdown > a:hover,
			.nav.bookTabs > li.nav-dropdown > a:focus,
			.nav.bookTabs > li.nav-close > a,
			.nav.bookTabs > li.nav-close > a:hover,
			.nav.bookTabs > li.nav-close > a:focus{
				background-color:transparent;
				padding-right: 1rem;
			}
			.nav.bookTabs.in >li{
				display:block;
				background-color:transparent;
			}
			.nav.bookTabs.in >li.nav-dropdown{
				display:none;

			}
			.nav.bookTabs.in > li.active > a{
				background-color: rgba(80, 80, 80, 0.1);
				border-bottom: 1px solid #2fcdcd;
			}
		}
		/*TKED*/
			.TKED{
			    background-image: url(../../images/project/TIKED.png);
			    display: inline-block;
			    padding: 0 0.6rem;
			    margin-right: 0.5rem;
			    height: 1rem;
			    /* width: auto; */
			    background-position: center bottom;
			    background-repeat: no-repeat;
			    background-size: contain;
			}
			.bookTabs li .TKED{
			    background-image: url(../../images/project/TIKED-White.png);
			}
			.bookTabs li.active .TKED{
			    background-image: url(../../images/project/TIKED.png);
			}
			@media all and (max-width: 767px){
				.TKED,
				.bookTabs li.active .TKED{
					background-image: url(../../images/project/TIKED-White.png);
				}
			}

	/*salesProfile*/
		.userRights,.userRights:hover{
		    background: hsl(87, 76%, 72%);
		    border: 1px solid hsl(87, 85%, 37%);
	        color: hsl(87, 90%, 21%);
		    border-radius: 3px;
		    padding: 0px 3px;
		    display: inline;
		    font-size: 0.8em;
		    display:inline-block;
		}
		.bookinfo .userRights,
		.bookIntro .userRights{
		    position: absolute;
		    top: -10px;
		    left: -10px;
		}
		.bookIntro .userRights{
		    margin-left:15px;
		}
		.salesProfile{

		}
		.line, .official{
			display:inline-block;
			vertical-align:top;
			padding:0 15px;
			/*background:#fff;
			border:1px solid #ddd;
		    padding: 5px;*/
		}
		.official{
			/*padding:15px;*/
			text-align:left;
		    border-top-right-radius: 5px;
		    border-bottom-right-radius: 5px;
		}
		.line{
			display:inline-block;
			padding:0px 0px 0px 0px;
			text-align:center;
			/*background:#48ae22;*/
			background:#fff;
			border:1px solid #ddd;
		    vertical-align: middle;
		    border-top-left-radius: 5px;
		    border-bottom-left-radius: 5px;
		}
		.line img{
			height:8em;
			display:inline-block;
			border-right:1px solid #ddd;
		}
		.line .description{
			display:inline-block;
			padding:15px;
			/*color:#fff;*/
		}
/*step*/
	/*common*/
		.stepHeader{
			padding: 15px 0 80px 0;
			border-bottom: 1px solid #e8e8e8;
			background: hsla(175,16%,30%,1);
			color: hsl(0, 0%, 100%);
			text-align: center;
			width:100%;
		}
		.stepBody{
			position:relative;
			top:-70px;
			background:#fff;
		}
		@media (min-width: 768px){
			.stepBody{
			    border: 0;
			    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
				-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
				-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
				border-radius:5px;
			}
		}
		@media (max-width: 767px){
			.stepHeader{
				padding: 0px;
				display:table;
				vertical-align:middle;
				padding-left:15px;
			}
			.stepBody{
				position:relative;
				top:0;
			}
		}

		.stepBlock{
			text-align:center;
			/*padding:15px 0;*/
			margin:15px 0;
			/*margin-bottom:15px;*/
		}
		.stepCircleBlock>*{
			display:inline-block;
		}
		.stepCircle{
			text-align:center;
			display:inline-block;
			border-radius:50%;
			width:24px;
			height:24px;
			line-height:24px;
			font-size:0.8em;
			position:relative;
			top:-0.1em;
			margin-right:5px;

			color:#fff;
			background:#7ecf18;
			border-color:#7ecf18;
		}
		.setpCircleSetting{
			border-bottom:0px solid #7ecf18;
		}
		.setpCircleSetting .stepCircle,
		.setpCircleSetting.stepCircle{
			color:#fff;
			background:#7ecf18;
			border-color:#7ecf18;
		}
		.stepCircleFinish{
			border-bottom:0px solid #7ecf18;
			opacity: 0.35;
		}
		.stepCircleFinish .stepCircle,
		.stepCircleFinish.stepCircle{
			/*
			background:#fff;
			border:1px solid #7ecf18;
			color:#7ecf18;
			font-width:bold;
			*/
			color:#fff;
			background:#7ecf18;
			border-color:#7ecf18;
		}
		.stepCircleUndo{
			border-bottom:0px solid #ccc;
		}
		.stepCircleUndo .stepCircle,
		.stepCircleUndo.stepCircle{
			background:#fff;
			border:1px solid #aaa;
			color:#aaa;
		}
	/*stepSimple*/
			.stepSimple.stepFlow{
				display:inline-block;
				padding:15px 0;
			}
			.stepSimple.stepFlow .stepCircleBlock{
				width:2.5em;
			}
			.stepSimple.stepFlow .stepCircleBlock .name{
				display:none;
			}
			.stepSimple.stepFlow .stepCircleBlock::before{
				content:'';
				border-bottom:2px solid;
				border-color:inherit;
				display:block;
				width:100%;
				position:absolute;
				top:50%;
			}
			.stepSimple.stepFlow .stepCircleFirst::before{
				width:50%;
				left:50%;
			}
			.stepSimple.stepFlow .stepCircleLast::before{
				width:50%;
			}
	/*stepDesc*/
		.stepDesc, .stepBlockBottom{
		    margin: 0 auto;
		    background: #ddd;
		    padding: 1em 0px;
	        padding-bottom: 0;
		    /*margin: 0 -15px;*/
		    /*一般*/
		    border-top: 1px solid #eee;
		    background: rgb(246,246,246);
		    background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 10%);
		    background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 10%);
		    background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 10%);
			/*下弧形
		    border-bottom: 2px solid #eee;
		    border-radius: 50%;
		    background: rgb(246,246,246);
		    background: -moz-linear-gradient(bottom, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 10%);
		    background: -webkit-linear-gradient(bottom, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 10%);
		    background: linear-gradient(to top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 10%);
		    margin-bottom:30px;
		    */
		   	/*上弧形
		    border-top: 2px solid #eee;
		    border-radius: 50%;
		    background: rgb(246,246,246);
		    background: -moz-linear-gradient(top, rgba(246,246,246,1) 0%, rgba(255,255,255,1) 10%);
		    background: -webkit-linear-gradient(top, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 10%);
		    background: linear-gradient(to bottom, rgba(246,246,246,1) 0%,rgba(255,255,255,1) 10%);
		    margin-top:30px;
		    */
		}
		.stepBlockBottom{
			padding:0;
		}
	/*stepFull*/
		.stepFull{
			max-width:600px;
			margin:15px auto;
			/*margin-bottom:30px;*/
			text-align:center;
		}
		.stepFull .name{
			color:#777;
			font-weight:bold;
		}
		.stepFull .setpCircleSetting .name{
			color:#6fbd0f;
		}
		@media (max-width: 500px){
			/*stepFull-basic-xxs*/
				.stepFull.stepFull-basic-xxs{
					text-align:center;
				}
				.stepFull.stepFull-basic-xxs .stepCircleBlock{
					margin-bottom:0!important;
				}
				.stepFull.stepFull-basic-xxs .name{
					display:none;
				}
			/*stepFull-important-xxs*/
				.stepFull.stepFull-important-xxs .stepCircleBlock{
					width:calc(100% / 3);
				}
				.stepFull.stepFull-important-xxs >*:not(.setpCircleSetting){
					display:none;
				}
				.stepFull.stepFull-important-xxs .stepCircleBlock[data-important="1"]{
					display:block;
				}
		}
		/*stepFlow*/
			.stepFull.stepFlow{
				/*padding-left:30px;
				padding-right:30px;*/
			}
			.stepFull.stepFlow .stepCircleBlock{
				/*margin:0em 0 2em 0;*/
				margin-bottom: 2em;
			}
			.stepFull.stepFlow .stepCircleBlock .name{
				position:absolute;
				top:100%;
				left:0;
				width:100%;
				padding-top:0.5em;
			}
			.stepFull.stepFlow .stepCircleBlock::before{
				content:'';
				border-bottom:2px solid;
				border-color:inherit;
				display:block;
				width:100%;
				position:absolute;
				top:50%;
			}
			.stepFull.stepFlow .stepCircleFirst::before{
				width:50%;
				left:50%;
			}
			.stepFull.stepFlow .stepCircleLast::before{
				width:50%;
			}
		/*stepLinear*/
			.stepFull.stepLinear{
				margin-top:0px;
				/*margin-left: -15px;
				margin-right: -15px;*/
			}
			.stepFull.stepLinear .stepCircleBlock{
				padding:0.5em;
			}
			.stepFull.stepLinear .stepCircle{
				margin:5px;
			}
			.stepFull.stepLinear .stepCircleFinish,
			.stepFull.stepLinear .setpCircleSetting,
			.stepFull.stepLinear .stepCircleUndo{
				border-width:3px;
			}
			.stepFull.stepLinear .stepCircleUndo:nth-child(2n+1){
				/*border-color:#ddd;*/
			}
/*select book*/
	.selectBooks .bookinfo{
		position:relative;
	}
	.selectBooks .bookinfo .inputIcon{
	    display: inline-block;
	    padding: 3px 15px;
	    border-radius: 5px;
	    background: #b8fb7e;
	    border: 1px solid #b0d48f;
	}
	.selectBooks .bookinfo .book{
		padding:10px 5px;
		margin:5px -10px;
	}
	.selectBooks .bookinfo p{
		font-weight:normal!important;
	}
	.selectBooks .bookinfo .book:hover{
	    text-decoration: none;
        color: inherit;
	}
	.selectBooks .bookinfo .book{
	    /*background: #f4f4f4;
	    border: 1px solid #ddd;*/
	    border: 1px solid #fff;
	}
	.selectBooks .bookinfo .book.active{
	    /*background: #f4f4f4;
	    border: 1px solid #ddd;*/
		background:#e6f6ff;
	    border: 1px solid #acdaea;
	}
	.fakeTextImg{
		content:"";
	    width: 100%;
	    height: 100%;
	    display: inline-block;
	    position: absolute;
	    top: 0;
	    left: 0;
	}
	/*selectBooksByList*/
		.selectBooksByList label{
			margin-bottom:0;
			animation-duration: 150ms;
			animation-delay: 0ms;
			animation-timing-function: ease;
		}
		.selectBooksByList .bookinfo .dtable-cell{
			vertical-align: top;
		}
		.selectBooksByList .bookinfo .dtable-cell:last-child{
		    width: 100%;
		}
		.selectBooksByList .book{
			border:1px solid #ddd!important;
			padding:15px;
			background:#fff;
		}
		.selectBooksByList .bookinfo .imgBlock{
			/*width: 70px;
			height: 98px;*/
			width: 65px;
			height: 91px;
			/* for dotdot2 of <p>
			width: 50px;
			height: 70px;*/
		}
		.selectBooksByList .bookinfo p{
			padding:0;
			margin:0;
		}
		.selectBooksByList .bookinfo p:last-child{
			padding-right:1em;
			display:inline-block;
			height: 1.2em;
			overflow:hidden !important;
			text-overflow: ellipsis;
		}
		.selectBooksByList .bookinfo label{
			/*position:relative;*/
			margin-bottom:0;
		}
		.selectBooksByList .bookinfo input{
			position:absolute;
			bottom:0.25em;
			right:1em;
			bottom:1em;
			/*width:100%;*/
			margin:0;
		}
		.bookinfo .nopic{
			position:relative;
			border: 1px solid #ccc;
		    width: 100%;
		    height:100%;
		    /*background: url(../../images/project/book-bg.jpg) no-repeat 0px 0px;*/
		    background-image: url("../../images/project/book-bg.jpg"), url("../../images/project/book-bg.jpg");
		    background-repeat: no-repeat, no-repeat;
		    background-position: center 4px, center center;
		    background-size: auto 100%, auto auto;
		    /*
		    --geturl: attr(data-image);
		    --seturl: "url('" var(--geturl) "')";
		    background-image:var(--seturl);
		    background-image:attr( imageurl url ? [ , "http://e-file.huawei.com/~/media/EBG/Video/images/large/old/hw_276745.jpg" ]? );
		    */
		}
		.bookinfo .nopic::before{
			position:absolute;
			bottom:0;
			display:block;
			content:"";
			width:100%;
			height:100%;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.1+100 */
			background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#1a000000',GradientType=0 ); /* IE6-9 */
		}
		.bookinfo .nopic::after{
			display:block;
			content:"自訂題庫";
			font-size:0.8rem;
			height:1.6em;
			line-height:1.6em;
			position:relative;
			top:3px;
			text-align:center;
	        background: hsla(0, 0%, 0%, 0.6);
		    color: #fff;
		}
		.selectBooksByList .bookinfo .book{
		    padding: 5px 5px;
		    margin: 5px -10px;
		}
		@media (max-width: 500px){
			.well.well-selectBooks{
			    margin-left: -15px;
			    margin-right: -15px;
			    padding: 5px;
			}
			.selectBooksByList .bookinfo .book{
				margin: 5px -15px;
			}
		}
/*qType*/
	.qType{
		padding-left:1em;
	}
	@media (min-width: 992px){
		.qType{
			display:none;
		}
	}
	.qType span{
		display:inline-block;
		color:#999 !important;
		/*padding: 0.1em 0.25em;*/
		border-radius: 10%;
	}

	.qType span  + *::before{
		content:"/";
		display:inline-block;
		color:#999;
		padding:0 0.2em 0 0em;
	}

	.qType .trueFalse{
		/*color: hsla(61,35%,44%,1);*/
	    /*background: hsla(61,100%,91%,1);
	    border: 1px solid hsla(61,21%,72%,1);*/
	}
	.qType .multipleChoice{
		/*color: hsla(100,35%,44%,1);*/
	    /*background: hsla(100,100%,91%,1);
	    border: 1px solid hsla(100,21%,72%,1);*/
	}
	.qType .multipleSelection{
		/*color: hsla(172,35%,44%,1);*/
	    /*background: hsla(172,100%,91%,1);
	    border: 1px solid hsla(172,21%,72%,1);*/
	}
	.qType .orderingQuestion{
		/*color: hsla(203,35%,44%,1);*/
	    /*background: hsla(203,100%,91%,1);
	    border: 1px solid hsla(203,21%,72%,1);*/
	}
	.qType .matching{
		/*color: hsla(250,35%,44%,1);*/
	    /*background: hsla(250,100%,91%,1);
	    border: 1px solid hsla(250,21%,72%,1);*/
	}
	.qType .fillInTheBlank{
		/*color: hsla(313,35%,44%,1);*/
		/*background: hsla(313,100%,91%,1);
	    border: 1px solid hsla(313,21%,72%,1);*/
	}
/*qTypeSelected*/
	.qTypeCountFixed{
	    z-index: 1001;
	    /*
	    background:#1b70bb;
	    */
	    color:#fff;
    	background: rgba(14, 154, 122, 0.95);
    	border:1px solid rgba(14, 154, 122, 0.95);
    	background:rgba(34, 120, 100, 0.95);
	}
	.qTypeCountInfo,
	.qTypeCountInfo:focus{
		position:relative;
	    cursor: pointer;
	    color:#fff;
    	background: rgba(14, 154, 122, 0.95);
    	text-decoration:none;
	}
	.qTypeCountInfo:hover{
	    background:#fff;
    	color: rgba(14, 154, 122, 0.95);
    	text-decoration:none;
	}
	.qTypeCountFixed .tooltip{
		min-width:100px;
	}
	@media all and (max-width: 767px){
		.qTypeCountFixed{
		    position: fixed;
		    bottom: 0px;
		    left: 0px;
		    display:table;
		    width:100%;
		    height:60px;
		}
		.qTypeCountFixed .qTypeCountInfo{
			position:relative;
			text-align:center;
			display:table-cell;
			height:100%;
			vertical-align:middle;
		}
		.qTypeCountInfo,.qTypeCountInfo:hover{
			border-right:1px solid rgba(255,255,255,0.6);
		}
		.qTypeCountFixed{
		    height:50px;
		}
	}
	@media all and (min-width: 768px){
		.qTypeCountFixed{
		    position: fixed;
		    width:86px;
		    top: 220px;
		    right:0px;
		    display:block;
		}
		.qTypeCountFixed .qTypeCountInfo{
			position:relative;
			text-align:center;
			display:block;
			/*width:70px;*/
			height:60px;
			padding:10px 5px;
			display:block;
		}
		.qTypeCountInfo,.qTypeCountInfo:hover{
			border-bottom:1px solid rgba(255,255,255,0.6);
		}
		/*to fixed the parent position is fixed.*/
		.qTypeCountInfo+.tooltip,
		.qTypeCountInfo .popover{
			position:absolute!important;
			width:initial!important;
			left:-150%!important;
			/*border:1px solid red;*/
		}
	}
	@media all and (min-width: 768px) and (max-width: 924px){
		.qTypeCountFixed {
			right:0px;
			/*border-bottom:3px solid purple;*/
		}
	}
	@media all and (min-width: 925px) and (max-width: 991px){
		.qTypeCountFixed {
			right:calc( (100% - 750px) * 0.5 - 86px);
			/*border-bottom:3px solid blue;*/
		}
	}
	@media all and (min-width: 992px) and (max-width: 1139px){
		.qTypeCountFixed {
			right:0px;
			/*border-bottom:3px solid green;*/
		}
	}
	@media all and (min-width: 1140px) and (max-width: 1199px){
		.qTypeCountFixed {
			right:calc( (100% - 970px) * 0.5 - 86px);
			/*border-bottom:3px solid yellow*/
		}
	}
	@media all and (min-width: 1200px) and (max-width: 1339px){
		.qTypeCountFixed {
			right:0px;
			/*border-bottom:3px solid orange;*/
		}
	}
	@media all and (min-width: 1340px){
		.qTypeCountFixed {
			right:calc( (100% - 1170px) * 0.5 - 86px);
			/*border-bottom:3px solid red;*/
		}
	}
	/*
	.qTypeCountInfo.trueFalse{
	    background: hsl(31, 88%, 49%);
	}
	.qTypeCountInfo.multipleChoice{
        background: hsl(86, 81%, 35%);
	}
	.qTypeCountInfo.multipleSelection{
	        background: hsl(208, 74%, 47%);
	}
	.qTypeCountInfo.orderingQuestion{
		background: hsl(330, 57%, 51%);
	}
	.qTypeCountInfo.matching{
	    background: hsl(230, 43%, 43%);
	}
	.qTypeCountInfo.fillInTheBlank{
	    background: hsl(352, 59%, 45%);
	}
	*/
	.qTypeCountInfo .qTypeCountName{
		font-size:0.9em;
	}
	.qTypeCountInfo >*{
		position:relative;
	}
	.qTypeCountInfo .max::before{
		content:"/";
		padding:0 2px;
	}
	.qTypeCountInfo .tips{
		color:rgb(254, 253, 0);
	}
	.qTypeCountInfo:hover .tips{
		color:rgb(254, 158, 0);
	}
	.qTypeCountInfo .popover{
		color: rgba(0, 129, 98, 0.95);
		min-width: 105px;
	}
/*bs-callout*/
	.bs-callout {
	    padding: 15px;
	    border: 1px solid #eee;
	    border-left-width: 5px;
	    border-radius: 3px;
	    text-align:left;
	}
	.bs-callout h4 {
	    margin-top: 0;
	    margin-bottom: 5px;
	}
	.bs-callout-info {
	    border-left-color: #1b809e;
	}
	.bs-callout-info h4 {
	    color: #1b809e;
	}
/*hrefTag*/
	.well.hrefTag{
		padding:5px 15px;
	}
	.hrefTag{
		position:relative;
	}
	.hrefTag .resetY{
		/*background:red;*/
		width:3px;
		height:60px;/*header height*/
		position:absolute;
		top:-15px;/*header height by js, padding 15px*/
	}
	.modal.in .hrefTag .resetY{
		top:0;
	}
/*tooltip*/
	/*
	.tooltip{
		border-color:#ffd132;
	}
	.tooltip > .tooltip-inner{
		background-color: #ffd132;
		color: #693d02;
	}
	.tooltip.top > .tooltip-arrow{
		border-top-color:inherit!important;
	}
	.tooltip.bottom > .tooltip-arrow{
		border-bottom-color:inherit!important;
	}
	.tooltip.left > .tooltip-arrow{
		border-left-color:inherit!important;
	}
	.tooltip.right > .tooltip-arrow{
		border-right-color:inherit!important;
	}
	*/
/*customerProfile*/
	.customerProfile{
		margin-top:15px;
		margin-bottom:30px;
	}
	.customerProfile .col+.col{
		/*border-left:1px solid #ddd;*/
	}
	.customerProfile .dropdownBlock{
		position:relative;
		display:inline-block;
		margin-bottom:0.5em;
	}
	.customerProfile h5{
		position:relative;
		/*border:1px solid #ccc;
		border-radius:1em;*/
		border-bottom:1px solid #ccc;
		padding:0.5em 2em;
		display:inline-block;
		margin:0;
	}
	.customerProfile h5 i{
		color:#555;
		padding-right:0.5em;
	}
	@media all and (max-width: 767px){
		.customerProfile{
			margin:15px;
			margin-top:0px;
		}
		.customerProfile h5{
			border:none;
			display:inline-block;
			font-weight:bold;
			padding:0;
			border-bottom: 1px solid #ccc;
			padding-left: 2em;
			padding-right: 2em;
		    /*margin-top: 1em;*/
			height: 2em;
		    line-height: 2em;
		}
		.customerProfile > :not(:first-child):not(:last-child) > h5,
		.customerProfile i{
			display:none;
		}
		.customerProfile > :last-child{
			/*border-top:1px solid #ddd;*/
			margin-top:15px;
			/*padding-top:15px;*/
		}
	}
/*report*/
	/*basic*/
		.report{
			width:100%;
		}
		.report .reportBlock{
			width:100%;
			padding:5px;
		}
		.report .reportBlock.mirror{
			display:none;
		}
		.report.mirror .reportBlock{
			width:50%;
			display:block;
			float:left;
		}
		@media all and (max-width: 767px){
			.report.mirror .reportBlock{
				width:100%;
				display:block;
			}
			.report.mirror .reportBlock.mirror{
				display:none;
			}
		}
		.report .pagination{
			margin:0 0 15px 0;
		}
	/*scoreViewer*/
		.slideViewer{
			width:100%;
			overflow:hidden;
		}
		.slideContainer{
			width:100%;
			white-space: nowrap;
		}
		.slideGroup{
			width:100%;
			display:inline-block;
			vertical-align:top;
		}
		.slideGroup .summary{
			margin-bottom:15px;
		}
		.slideGroup table{
			text-align:center;
			margin:0;
		}
		.slideGroup table,
		.slideGroup table *{
			text-align:center;
			font-weight:normal;
		}
		.reportController{
			text-align:center;
			margin-bottom:15px;
		}
		.reportController .btn-group .btn{
			padding:5px 8px;
			line-height:1.5em;
		}
		.reportControllerTable th,
		.reportControllerTable td{
			padding:0.25em!important;
		}
		.reportControllerTable th:nth-child(1),
		.reportControllerTable td:nth-child(1){
		    min-width: 0.5em;
		    white-space: normal !important;
		}
		.reportControllerTable th:nth-child(2),
		.reportControllerTable td:nth-child(2){
		    text-align: left;
		    min-width: 5em;
		    white-space: normal !important;
		}
		.reportControllerTable th.displayType,
		.reportControllerTable td.displayType{
			text-align: left;
			min-width:100px;
		}
		/*
		td[title]{
			position:relative;
		}
		td[title]:hover::before{
		    content: "";
		    position: absolute;
		    top: 100%;
		    margin-top: -7.5px;
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 0 7.5px 10px 7.5px;
		    border-color: transparent transparent #222 transparent;
		}
		td[title]:hover::after {
			content: attr(title);
		    position: absolute;
		    top: 100%;
		    left: 0;
		    z-index: 999999;
		    background: #222;
		    color: #fff;
		    padding: 0.2em 0.3em;
		    border-radius: 0.3em;
		    font-size: 0.8em;
		    display: block;
		    white-space: normal;
		    overflow: visible;
		    margin: 0 auto;
		    width: 80%;
		    margin-left: 10%;
		}
		*/
	/*graph*/
/*ckeditor*/
	.cke_editable{
		font-size: 16px;
	}
/*document download*/
	/*parameterBlock*/
		.parameter-key .text{
			min-width: 5em;
			display: inline-block;
			text-align: left;
		}
		.parameterBlock .parameter-key{
			display:inline-block;
		}
		.parameterBlock .parameter-custom .text,
		.documentBlock .parameter-custom .text{
			display: inline-block;
			max-width:10em;
			height:1.1em;
			overflow:hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.parameterBlock .parameter-custom button[append-parameterID="parametercustom1"] .text::before{
			content:"自訂1:";
			padding-right:0.25em;
		}
		.parameterBlock .parameter-custom button[append-parameterID="parametercustom2"] .text::before{
			content:"自訂2:";
			padding-right:0.25em;
		}
		.parameterBlock .parameter-custom button[append-parameterID="parametercustom3"] .text::before{
			content:"自訂3:";
			padding-right:0.25em;
		}
		#parametercustom1.parameter-custom .text::before{
			content:"自訂1:";
			padding-right:0.25em;
		}
		#parametercustom2.parameter-custom .text::before{
			content:"自訂2:";
			padding-right:0.25em;
		}
		#parametercustom3.parameter-custom .text::before{
			content:"自訂3:";
			padding-right:0.25em;
		}
		.parameterBlock .custom-parameter-input{
			padding:0.5em;
		}
	/*documentBlock*/
		.documentBlock .empty{
			color:#999;
		}
		.parameter-mirror{
		    margin:5px;
		}
		@media all and (min-width: 768px){
			.documentBlock th:not(:nth-child(1)),
			.documentBlock td:not(:nth-child(1)){
				width:150px;
			}
			.documentBlock th,
			.documentBlock td:nth-child(1){
				text-align:center;
			}
		}
		@media (max-width: 767px){
			.documentBlock .break-table-xs td[data-title] {
				padding-left: 4.5em !important;
			}
			.documentBlock .break-table-xs td[data-title]:before{
				width: 4em;
			}
		}
/*animation*/
	/*flash-infinite*/
		@-webkit-keyframes flashInfinite {
		  	0%{opacity:1}
		  	5%{opacity:0}
		  	10%{opacity:1}
		  	15%{opacity:0}
		  	20%{opacity:1}
		  	25%{opacity:0}
		  	30%{opacity:1}
		  	100%{opacity:1}
		}
		@keyframes flashInfinite {
		  	0%{opacity:1}
		  	5%{opacity:0}
		  	10%{opacity:1}
		  	15%{opacity:0}
		  	20%{opacity:1}
		  	25%{opacity:0}
		  	30%{opacity:1}
		  	100%{opacity:1}
		}

		.flash-infinite {
		  -webkit-animation-name: flashInfinite;
		  -webkit-animation-iteration-count: infinite;
		  -webkit-animation-duration: 2.8s;
		  -webkit-animation-delay: 2s;
		  animation-name: flashInfinite;
		  animation-iteration-count: infinite;
		  animation-duration: 2.8s;
		  animation-delay: 2s;
		}
/*ul for question preview*/
	/*list-sty;e*/
		ol[ol-style="none"]{
			list-style-type: none;
		}
		ol[ol-style="none"] .title{
			margin-left:-2.2em;
			margin-bottom:0.5em;
			margin-top:0.5em;
		}
		ol[ol-style="cjk"]{
			list-style-type: cjk-ideographic;
		}
		ol[ol-style="decimal"]{
			list-style-type:decimal;
		}
		ol[ol-style="decimal-leading-zero"]{
			list-style-type:decimal-leading-zero;
		}
		ol[ol-style="upper-alpha"]{
			list-style-type:upper-alpha;
		}
		ol[ol-style="lower-alpha"]{
			list-style-type:lower-alpha;
		}
		ol[ol-style="upper-roman"]{
			list-style-type:upper-roman;
		}
		ol[ol-style="lower-roman"]{
			list-style-type:lower-roman;
		}
	/*qBlock*/
		ol.qBlock *{
		}
		ol.qBlock>li{
			/*background:lightblue;*/
			font-size:1.4rem;
		    font-weight: bold;
		    clear:both;
		}
		ol.qBlock>li{
			margin-top:1.5em;
		}
		ol.qBlock .title{
			font-weight: bold;
			display:inline-block;
		}
		ol.qBlock .title .badge{
			font-size: 0.8rem;
			font-weight: bold;
		}
		ol.qBlock .desc{
			font-weight: bold;
			display:inline-block;
		}
		@media all and (max-width: 380px){
			ol.qBlock .desc{
			    margin-left: -2em;
			}
		}
	/*quection groupe*/
		.qTypeGroup > ol,
		.qTypeGroup > ol > li{
		    position: relative;
		}
		li.qg {
			/*background: #f4f4f4;*/
		    border-right: 1px solid #aaa;
		    border-left:1px solid #aaa;
		    /*border-right-style: dashed;*/
		    padding-left: 0.5rem;
		    margin-top: 0;
		    padding-top: 0.2rem;
		    padding-bottom: 0.2rem;
		    padding-right: 1rem;
		}
		li.qg::before {
			margin-left:0.5rem;
		}
		li.qg::after {

		}
		li.qg-start{
			/*border-right-style: solid;*/
			/*margin-top: 0.75rem;*/
			border-top-left-radius: 0.3rem;
			border-top: 1px solid #aaa;
		}
		li.qg-end{
			/*border-right-style: solid;*/
			/*margin-bottom: 0.75rem;*/
			border-bottom-left-radius: 0.3rem;
			border-bottom-right-radius: 0.3rem;
			border-bottom: 1px solid #aaa;
		}
		li.qg-end + li.qg-start{
			margin-top: 0.75rem;
		}
		li.qg-start > :first-child::after{
			font-size: 0.7rem;
			padding-top:0.2rem;
			content: "題組";
			width: 1.2rem;
			height: 2.7rem;
			text-align:center;
			border-top-left-radius: 0.25rem;
			border-top-right-radius: 0.25rem;
			background: #CDDC39;
			position: absolute;
			right: -0.7rem;
			top: -0.3rem;
			z-index:1;
		    line-height: 1.1rem;
		}
		li.qg-start > :first-child::before{
			font-size: 0.7rem;
			content: "";
			text-align:center;
			position: absolute;
			right: -0.7rem;
			top: 2.4rem;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 7px 0.6rem 0 0.6rem;
			border-color: #CDDC39 transparent transparent transparent;
			z-index:1;
		}
		/*
		li.qg-end > :first-child::after{
			font-size: 0.7rem;
			content: "";
			width: 0.7rem;
			height: 0.7rem;
			border-radius: 50%;
			background: #CDDC39;
			position: absolute;
			right: -0.4rem;
			bottom: 0rem;
		}*/


	/*qMode = [default, write, answer, answer-detail] */
		/*basic*/
			ol.qBlock>li>ol.qTypeGroup{
				/*background:purple;*/
				list-style-position: outside;
			    padding:0;
		        font-weight: normal;
	            position: relative;
			}
			ol.qBlock>li>ol.qTypeGroup>li{
			    position: relative;
				font-size:1rem;
				/*background:orange;*/
			}
			ol.qBlock>li>ol.qTypeGroup>li>div{
				/*background:lightgray;*/
			}
			ol.qBlock>li>ol.qTypeGroup>li{
				/*margin-top:0.5em;*/
				padding-top: 0.25rem;
				padding-bottom: 0.25rem;
			}
			ol.qBlock>li>ol.qTypeGroup>li>ol{
				/*background:lightgreen;*/
				margin-top:0.3em;
				padding-left:0.5em;
			    margin-left:1em;
			}
			ol.qBlock>li>ol.qTypeGroup>li>ol>li{
				/*background:lightgoldenrodyellow;
				border:1px solid red;*/
			}
		/*qImgBox overflow control*/
			.qImgBox,
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox{
			    display: inline-block;
			    max-width: 100%;
			    overflow: hidden;
			    vertical-align: top;
			    position:relative;
			}
			.qImgBox img,
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox img{
				vertical-align: top;
			    max-width: 100%;
			    position:relative;
			}
			.qImgBox.overflow,
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox.overflow{
		    	border-radius: 5px;
				-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
				-moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
				box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.75);
			}
			.qImgBox.overflow img,
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox.overflow img{


			}
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox{

			}
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox:hover img,
			ol.qBlock>li>ol.qTypeGroup>li .qImgBox:active img{
			    /*qImgBox with scroll-x scroll-y class, show bigger img only by css
			    width: initial;
			    max-width:150%;
			    padding-bottom:15px;*/
			}
		/*selection mode*/
			ol.qBlock[selection-mode="true"]{
				margin-left:0.5em;
			}
			ol.qBlock[selection-mode="true"] .desc{
			    margin: 0;
			    margin-bottom: 0.5em;
			    vertical-align: bottom;
			}
			@media (max-width: 500px){
				ol.qBlock[selection-mode="true"] .desc{
			        margin: 0 0 1em -3em;
				    display: block;
				}
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li:after{
				position:absolute;
				left:-3.4em;
				top:0.25rem;
				content:"\f096";
				font-family: "FontAwesome";
				font-size:0.9em;
				color:#aaa;
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li:hover{
			    cursor: pointer;
			    font-weight:bold;
			    /*color:hsl(328, 82%, 55%);*/
			    /*color:hsl(204, 95%, 45%);*/
			    background:#f2f2f2;
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li:hover:focus{
				background:none;
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li:not(.active):hover:before{
				/*border-color: hsl(328, 82%, 55%)!important;*/
				/*border-color: hsl(204, 95%, 45%)!important;*/
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li:not(.active):hover:after{
				/*color: hsl(328, 82%, 55%);*/
				/*color: hsl(204, 95%, 45%);*/
				color:#666;
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li.active{
				/*color: hsl(204, 95%, 45%);*/
				font-weight:bold;
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li.active:after{
				content: "\f14a";
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li.active:before{
				/*border-color: hsl(204, 95%, 45%)!important;*/
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li.active:after{
				color: hsl(204, 95%, 45%);
			}
			ol.qBlock[selection-mode="true"]>li>ol.qTypeGroup>li.active:hover:after{
				color: hsl(198, 91%, 56%);
			}
		/*qMode*/
			ol.qBlock[qMode]>li>ol.qTypeGroup{
				/*background:yellow;*/
			}
			ol.qBlock[qMode="write"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li,
			ol.qBlock[qMode="answer"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li,
			ol.qBlock[qMode="answer-detail"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li{
				/*background:pink;*/
				padding-left:3.5em;
				/*text-align: justify;
				text-justify: inter-word;*/
				position:relative;
			}
			ol.qBlock[qMode="answer"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li:before,
			ol.qBlock[qMode="answer-detail"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li:before{
				/*background:lightgreen;*/
				text-align:center;
				margin-left: -3.3em;
				display: inline-block;
				letter-spacing: 0.1em;
				/*content:"〔"attr(ans)"〕";
				min-width:3em;*/
				content:attr(ans);
				/*background:#e4e4e4!important;
				-webkit-print-color-adjust: exact;
				min-width:3em;*/
				border-bottom:1px solid #777;
				min-width:3em;
				/*position: absolute;
				letter-spacing:1em;
				word-wrap: break-word;
				text-decoration: underline;
				width:3em;*/
			    float: left;
			}
			ol.qBlock[qMode="write"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li:before{
				/*background:lightgreen;*/
				content:"〔\2003〕";
				width:3em;
				margin-left: -3.3em;
				display: inline-block;
			}
			ol.qBlock>li>ol.qTypeGroup>li>div:first-child{
				display: inline-block;
				width: 100%;
			    vertical-align: top;
			}
			ol.qBlock>li>ol.qTypeGroup>li>ol{
				/*background:lightblue;*/
				padding-left:0;
			}
			ol.qBlock>li>ol.qTypeGroup>li>.panel{
				display:none;
			}
			ol.qBlock[qMode="answer-detail"]>li>ol.qTypeGroup>li>.panel{
				display:block;
			}
			@media all and (max-width: 575px){
				ol.qBlock[qMode="answer-detail"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li>.panel{
					margin-left:-5em;
				}
			}
			ol.qBlock[qMode="answer-detail"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li>.panel>.panel-heading,
			ol.qBlock[qMode="answer-detail"]>li:not([qType="fillInTheBlank"]):not([qType="essayQuestion"])>ol.qTypeGroup>li>.panel>.panel-body{
				/*padding:0.5em;*/
			}
			@media print{
				ol.qBlock[qMode="answer-detail"]>li>ol.qTypeGroup>li>.panel{
					border:1px solid #ddd;
				}
				ol.qBlock[qMode="answer-detail"]>li>ol.qTypeGroup>li>.panel>.panel-heading{
					border-color:#ddd;
					background-color:#eee!important;
					-webkit-print-color-adjust: exact;
				}
			}
	/*option-text = [decimal, upper-alpha]
	  option-style = [default, parentheses]*/
		ol.qBlock>li>ol.qTypeGroup>li>ol{
			list-style: none;
			margin-left:0em;
			counter-reset: option-counter;
		}
		ol.qBlock>li>ol.qTypeGroup>li>ol>li{
			/*background:lightblue;*/
			padding-left:1.7em;
		}
		ol.qBlock>li>ol.qTypeGroup>li>ol>li:before{
			min-width:1.7em;
			display:inline-block;
			counter-increment: option-counter;
			margin-left:-1.7em;
		}

		ol.qBlock[option-text="decimal"]>li>ol.qTypeGroup>li>ol>li::before{
			content:counter(option-counter, decimal);
		}
		ol.qBlock[option-text="upper-alpha"]>li>ol.qTypeGroup>li>ol>li::before{
			content:counter(option-counter, upper-alpha);
		}
		ol.qBlock[option-text="decimal"][option-style="parentheses"]>li>ol.qTypeGroup>li>ol>li::before{
			content:'('counter(option-counter, decimal)')';
		}
		ol.qBlock[option-text="upper-alpha"][option-style="parentheses"]>li>ol.qTypeGroup>li>ol>li::before{
			content:'('counter(option-counter, upper-alpha)')';
		}

		ol.qBlock>li>ol.qTypeGroup[option-text="decimal"]>li>ol>li::before{
			content:counter(option-counter, decimal);
		}
		ol.qBlock>li>ol.qTypeGroup[option-text="upper-alpha"]>li>ol>li::before{
			content:counter(option-counter, upper-alpha);
		}
		ol.qBlock>li>ol.qTypeGroup[option-text="decimal"][option-style="parentheses"]>li>ol>li::before{
			content:'('counter(option-counter, decimal)')';
		}
		ol.qBlock>li>ol.qTypeGroup[option-text="upper-alpha"][option-style="parentheses"]>li>ol>li::before{
			content:'('counter(option-counter, upper-alpha)')';
		}
	/*option-col : option-col = [default, condensed, avg, 2, 4, 5]*/
		/*initial*/
			ol.qBlock>li>ol.qTypeGroup>li>ol,
			ol.qBlock>li>ol.qTypeGroup>li>ol>li{
				display:block;
				width:100%;
			}
		/*setting option-col at qBlock*/
			@media print and (max-width: 130mm), screen and (max-width: 767px){
				ol.qBlock[option-col]>li>ol.qTypeGroup>li>ol,
				ol.qBlock[option-col]>li>ol.qTypeGroup>li>ol>li{
					display:block;
					width:100%;
				}
			}
			@media print and (min-width: 130mm), screen and (min-width: 768px){
				ol.qBlock[option-col]>li>ol.qTypeGroup>li>ol>li{
					padding-right:0.25em;
				}
				ol.qBlock[option-col="default"]>li>ol.qTypeGroup>li>ol,
				ol.qBlock[option-col="default"]>li>ol.qTypeGroup>li>ol>li{
					display:block;
					width:100%;
				}
				ol.qBlock[option-col="condensed"]>li>ol.qTypeGroup>li>ol{
					display:block;
					width:100%;
				}
				ol.qBlock[option-col="condensed"]>li>ol.qTypeGroup>li>ol>li{
					display:inline;
					padding-right:0.25em;
					width:initial;
				}
				ol.qBlock[option-col="avg"]>li>ol.qTypeGroup>li>ol{
					display:table;
					width:100%;
				}
				ol.qBlock[option-col="avg"]>li>ol.qTypeGroup>li>ol>li{
					display:table-cell;
					width:auto;
				}
				ol.qBlock[option-col="2"]>li>ol.qTypeGroup>li>ol,
				ol.qBlock[option-col="4"]>li>ol.qTypeGroup>li>ol,
				ol.qBlock[option-col="5"]>li>ol.qTypeGroup>li>ol{
				    display: -webkit-flex;
				    display: flex;
				    -webkit-flex-wrap: wrap;
				    flex-wrap: wrap;
				    width: 100%;
				}
				ol.qBlock[option-col="2"]>li>ol.qTypeGroup>li>ol>li{
					width: 50%;
					min-width: 50%;
				}
				ol.qBlock[option-col="4"]>li>ol.qTypeGroup>li>ol>li{
					width: 25%;
					min-width: 25%;
				}
				ol.qBlock[option-col="5"]>li>ol.qTypeGroup>li>ol>li{
					width: 20%;
					min-width: 20%;
				}
			}
		/*setting option-col at qTypeGroup*/
			@media print and (max-width: 130mm), screen  and (max-width: 767px){
				ol.qBlock>li>ol.qTypeGroup[option-col]>li>ol,
				ol.qBlock>li>ol.qTypeGroup[option-col]>li>ol>li{
					display:block;
					width:100%;
				}
			}
			@media print and (min-width: 130mm), screen and (min-width: 768px){
				ol.qBlock>li>ol.qTypeGroup[option-col]>li>ol>li{
					padding-right:0.25em;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="default"]>li>ol,
				ol.qBlock>li>ol.qTypeGroup[option-col="default"]>li>ol>li{
					display:block;
					width:100%;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="condensed"]>li>ol{
					display:block;
					width:100%;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="condensed"]>li>ol>li{
					display:inline;
					padding-right:0.25em;
					width:initial;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="avg"]>li>ol{
					display:table;
					width:100%;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="avg"]>li>ol>li{
					display:table-cell;
					width:auto;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="2"]>li>ol,
				ol.qBlock>li>ol.qTypeGroup[option-col="4"]>li>ol,
				ol.qBlock>li>ol.qTypeGroup[option-col="5"]>li>ol{
				    display: -webkit-flex;
				    display: flex;
				    -webkit-flex-wrap: wrap;
				    flex-wrap: wrap;
				    width: 100%;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="2"]>li>ol>li{
					width: 50%;
					min-width: 50%;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="4"]>li>ol>li{
					width: 25%;
					min-width: 25%;
				}
				ol.qBlock>li>ol.qTypeGroup[option-col="5"]>li>ol>li{
					width: 20%;
					min-width: 20%;
				}
			}
		/*setting option-col at option ol*/
			@media print and (max-width: 130mm), screen  and (max-width: 767px){
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col],
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col]>li{
					display:block;
					width:100%;
				}
			}
			@media print and (min-width: 130mm), screen and (min-width: 768px){
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col]>li{
					padding-right:0.25em;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="default"],
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="default"]>li{
					display:block;
					width:100%;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="condensed"]{
					display:block;
					width:100%;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="condensed"]>li{
					display:inline;
					padding-right:0.25em;
					width:initial;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="avg"]{
					display:table;
					width:100%;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="avg"]>li{
					display:table-cell;
					width:auto;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="2"],
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="4"],
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="5"]{
				    display: -webkit-flex;
				    display: flex;
				    -webkit-flex-wrap: wrap;
				    flex-wrap: wrap;
				    width: 100%;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="2"]>li{
					width: 50%;
					min-width: 50%;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="4"]>li{
					width: 25%;
					min-width: 25%;
				}
				ol.qBlock>li>ol.qTypeGroup>li>ol[option-col="5"]>li{
					width: 20%;
					min-width: 20%;
				}
			}
	/*matching qType*/
		ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ol{

		}
		ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list{
			list-style: none;
			padding:0;
			margin-bottom:0.5em;
			margin-top:0.3em;
		}
		ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list>li{
			/*padding-left:2.5em;*/
			padding-left:2.1em;
		}
		ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list>li:not(:first-child){

		}
		ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list>li:before{
	        content:"(　)";
            padding-right: 0.3em;
            margin-left: -2em;
			/*content:"____ ";
			padding-right: 0.3em;
			margin-left: -2.5em;*/
			display:inline-block;
	        vertical-align: text-bottom;
		}
		@media print and (min-width: 130mm), screen and (min-width: 768px){
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li{
				clear: both;
			}
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>:first-child{

			}
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ol,
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list{
				/*calc(50% - 1em)*/
				width:49%;
				display:inline-block;
				padding:0;
				margin:initial;
				margin-top:0.3;
			}
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ol{
				float:left;
			}
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list{
				/*float:right;*/
			}
			ol.qBlock>li[qType="matching"]>ol.qTypeGroup>li>ul.list>li{
				display:block;
				width:100%;
			}
		}
	/*fillInTheBlank*/
		ol.qBlock>li[qType="fillInTheBlank"]>ol.qTypeGroup>li>div{
		    line-height:2em;
		    margin-top:-0.3em;
		}
		ol.qBlock>li[qType="fillInTheBlank"]>ol.qTypeGroup>li .fillIn{
		    border-bottom:1px solid #333;
		    padding-left:0.5em;
		    padding-right:0.5em;
		    display:inline-block;
		    width:6em;
		    height:1.4em;
	        vertical-align: baseline;
		}
		ol.qBlock[qMode^="answer"]>li[qType="fillInTheBlank"]>ol.qTypeGroup>li .fillIn{
			width:initial;
			min-width:3em;
		    text-align:center;
		}
		ol.qBlock[qMode^="answer"]>li[qType="fillInTheBlank"]>ol.qTypeGroup>li .fillIn::after{
			content: attr(ans);
			text-align:center;
		}
	/*essayQuestion*/
		ol.qBlock[qMode="answer"]>li[qType="essayQuestion"] .panel{
			display:block!important;
			border:none;
		}
		ol.qBlock[qMode="answer"]>li[qType="essayQuestion"] .panel-heading{
			display:none;
		}
		ol.qBlock[qMode="answer"]>li[qType="essayQuestion"] .panel-body {
			border:1px solid #888;
		}
		ol.qBlock[qMode="answer"]>li[qType="essayQuestion"] .panel-body [title="出處"]{
			display:none;
		}
	/*ans-result*/
		ol.qBlock>li>ol.qTypeGroup>li[ans-result="error"]{
			/*color: #be227b;*/
		}
		ol.qBlock>li>ol.qTypeGroup>li[ans-result="error"]::before{
			/*border-bottom-color: #be227b!important;*/
		}
	/*panel*/
		.panel.panel-danger{
		    /*border-color: #ebcce6;*/
		}
		.panel.panel-danger>.panel-heading{
		    background-color: #ffe9f6;
		    border-color: #ebccd1;
		    border-bottom: none;
		    color: #be227b;
		}
	/*studentMode= [default, basic]*/
		.qBlock .panel{
			clear:both;
			margin-top:0.5em!important;
		}
		.qBlock[studentMode="basic"] .panel{
			margin-left: 0em!important;
		}
		.qBlock[studentMode="basic"] .panel.panel-info{
			display:none!important;
		}
		.qBlock[studentMode="basic"] .panel.panel-danger>.panel-body{
			display:none!important;
		}
	/*qBlock nav*/
		#scoreUpdateSingle{
	        /*margin-bottom: 3em;*/
	        bottom: 3em;
	        overflow-x:hidden;
		}
		#scroeLogDetail+.qBlockNav,
		#scoreUpdateSingle>.qBlockNav{
			display:none;
		}
		#scroeLogDetail+.qBlockNav,
		#scoreUpdateSingle.in>.qBlockNav{
	        background: #34bcca!important;
			position: fixed;
			bottom: 0;
			left: 0;
			display: block;
			z-index: 1050;
			width: 100%;
			overflow-y: visible!important;
		}
		#scroeLogDetail+.qBlockNav>*,
		#scoreUpdateSingle>.qBlockNav>*{
			vertical-align: middle;
			display: inline-block;
			float: left;
		}
		#scroeLogDetail+.qBlockNav>select,
		#scoreUpdateSingle>.qBlockNav>select{
			border: 0px;
			cursor: pointer;
			height: 2em;
			min-width: 5em;
			margin: 0.5em 0.25em 0.5em 0.5em;
		}
		#scroeLogDetail+.qBlockNav>.qNumNav,
		#scoreUpdateSingle>.qBlockNav>.qNumNav{
			width:calc( 100% - 6em );
	        padding: 0.5em 0;
			/*height: 3em;*/
		    overflow-y: visible!important;
		}
		#scroeLogDetail+.qBlockNav>.qNumNav>.qNumBlock,
		#scoreUpdateSingle>.qBlockNav>.qNumNav>.qNumBlock{
		    display: block;
		    white-space: nowrap;
		    overflow-y: visible;
		}
		#scroeLogDetail+.qBlockNav>.qNumNav>.qNumBlock>.qNumBtn,
		#scoreUpdateSingle>.qBlockNav>.qNumNav>.qNumBlock>.qNumBtn{
			border: 1px solid #43878f !important;
			min-width:3em;
			margin: 0 0.1em;
			display:inline-block;
		}
		#scroeLogDetail+.qBlockNav>.qNumNav>.qNumBlock>.qNumBtn+.tooltip .tooltip-inner,
		#scoreUpdateSingle>.qBlockNav>.qNumNav>.qNumBlock>.qNumBtn+.tooltip .tooltip-inner{
			min-width:3em;
		}
/*chapterSelectorFixed*/
	.chapterSelectorFixed{
		display:block;
		width:100%;
		z-index: 1001;
	    position: fixed;
	    bottom: 0px;
	    left: 0px;
	    text-align:center;
	    background:#fff;
	    border-top:1px solid #ccc;
		background:hsl(187, 74%, 41%);
	}
	@media (max-width: 575px){
		.chapterSelectorFixed{
			font-size:0.8em;
		}
	}
	.chapterSelectorFixed .scrollTop{
		position:absolute!important;
		top:-3.5rem;
	}
	.progress-chapter .progress{
		/*height:10px;*/
		margin-bottom:0.5em;
	}
	.progress-chapter .progress-bar{
		/*min-width: 2em;*/
		text-align:right;
		color:#444;
		font-weight:bold;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#37f1ff+35,eeff2c+90 */
		background: rgb(55,241,255); /* Old browsers */
		background: -moz-linear-gradient(left, rgba(55,241,255,1) 35%, rgba(238,255,44,1) 90%); /* FF3.6-15 */
		background: -webkit-linear-gradient(left, rgba(55,241,255,1) 35%,rgba(238,255,44,1) 90%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to right, rgba(55,241,255,1) 35%,rgba(238,255,44,1) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37f1ff', endColorstr='#eeff2c',GradientType=1 ); /* IE6-9 */
	}
	.progress-chapter .progressbar-text{
		position:absolute;
		top:0;
		left:0;
		text-align:right;
		width:100%;
		padding-right:0.5em;
		color: #333;
	}
	.chapterControl{
		/*background: hsl(187, 69%, 43%);*/
		color:#fff;
	}
	.chapterControl .btn:active,
	.chapterControl .btn:hover,
	.chapterControl .btn:focus{
		color:#ffff00;
		/*color:#d1ff00;*/
	}
	.chapterControl img{
		width: 65%;
    	height: initial;
    	margin:0 auto;
    	margin-top:2px;
    	display:block;
	    border: 1px solid hsl(0, 0%, 82%);
	}
	.chapterControl .btn:hover img{
		border-color: #fff;
	}
	.chapterControl .changeBookBtn{
		position:relative;
		display:block;
		width:90%;
		text-align:center;
		padding:0;
		margin:0 auto;
	}
	.chapterControl .changeBookBtn .changeBook{
		position:absolute;
		left:5%;
		bottom:3em;
		/*background: rgba(0, 185, 222, 0.85);
		color: #f4ff00;
		border-bottom: 1px solid rgba(0, 213, 255, 0.9);*/
	    background:rgb(167, 235, 23);
	    color: #182e1a;
	    border: 1px solid #fff;
		width:90%;
		margin:2px auto;
		border-radius:0.25em;
	}
	.chapterControl .changeBookBtn:active .changeBook,
	.chapterControl .changeBookBtn:hover .changeBook,
	.chapterControl .changeBookBtn:focus .changeBook{
	    background: #ffff00;
	    color: rgb(69, 47, 16);
	    border: 1px solid #fff;
	}
	.chapterControl .bookSource{
		width:100%;
		display:block;
		text-align:center;
		overflow:hidden;
	}
	.chapterControl .bookImg:not(.in){
		width:100%;
		display:inline-block;
		display:none;
	}
	.chapterControl .bookIndex{
	    background: rgba(58, 58, 58, 0.5);
	    width: 85%;
	    margin:0.25em auto;
	    /*position: absolute;
	    left: 5%;
	    bottom: 2em; */
	    border-radius: 0.5em;
	}
	.chapterControl .bookIndex i{
		padding-left:1em;
	}
	.chapterControl .chapterControlPrev,
	.chapterControl .chapterControlNext{
		line-height:2em;
	    /*padding-top: 40%;
	    padding-bottom: 40%;*/
	}
	.chapterControl .pagination{
		margin:0.25em 0;
    	color: #333;
    	text-decoration: none;
    	background-color: #fff;
    	border: 1px solid #ddd;
    	height:2em;
	}
	.qTypeCheckedInfo{
		color:#fff;
	}
	@media (max-width: 767px){
		.chapterControl,
		.qTypeCheckedInfo{
		    width:100%;
		    max-width:100%;
		}
	}
	@media (min-width: 768px){
		.chapterControl,
		.qTypeCheckedInfo{
		    width:768px;
		    margin:0 auto;
		}
	}
	.qTypeCheckedInfo>*{
    	display:block;
    	vertical-align:top;
    	position:relative;
    	float:left;
    	height:100%;
	}
	.qTypeCheckedInfo>:first-child{
	    width:6em;
	}
	.qTypeCheckedInfo>:first-child>:first-child{
		padding:0.2em 0;
	}
	.qTypeCheckedInfo>:nth-child(2){
		width:calc(100% - 12em);
	}
	.qTypeCheckedInfo>:last-child{
		width:6em;
	}
	.qTypeCheckedInfo>:last-child>*{
		width:5em;
	}
	@media (min-width: 768px){
		.qTypeCheckedInfo>:last-child>*{
		    height: 2.8em;
		}
	}
	.qTypeCheckedInfo a.viewSelectedBtn,
	.qTypeCheckedInfo a.viewSelectedBtn:focus,
	.qTypeCheckedInfo a.viewSelectedBtn:active{
	    color: #444444;
	    font-weight: bold;
	    background: rgb(167, 235, 23);
	    padding: 0 0.5em;
	    margin: 0.25em;
	    box-sizing: border-box;
	    border:1px solid #738f27;
	}
	.qTypeCheckedInfo a.viewSelectedBtn:hover,
	.qTypeCheckedInfo a.viewSelectedBtn:focus,
	.qTypeCheckedInfo a.viewSelectedBtn:active{
		background:#ffff00;
	}
	.qTypeSelector{
		display:table;
		width:100%;
	    padding-bottom: 0.5em;
	}
	.qTypeSelector span{
		display:table-cell;
		max-width:10em;
	}
	.qTypeSelector .btn{
		display:block;
	    margin: 0.1em 0.1em 5px 0.1em;
	}
	.selectedList .qBlock .title{
		display: block;
	    border-bottom: 1px solid #ddd;
	    border-radius: 0.25em;
	    padding: 0.5em;
	    background: #f4f4f4;
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,ffffff+9,ffffff+9,f4f4f4+100 */
		background: rgb(244,244,244); /* Old browsers */
		background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(255,255,255,1) 9%, rgba(255,255,255,1) 9%, rgba(244,244,244,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 9%,rgba(255,255,255,1) 9%,rgba(244,244,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(244,244,244,1) 0%,rgba(255,255,255,1) 9%,rgba(255,255,255,1) 9%,rgba(244,244,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
	}
	.selectedList .qBlock .title .badge{
		float:right;
	}
	.selectedList ul.inline{
		display:inline;
	}
/*viewSelected modal*/
	/*recover*/
		#viewSelected+.recover{
			display:none;
		}
		#viewSelected.in+.recover{
			display:block;
		}
		.recover{
			background: #0391a5!important;
			position: fixed;
			bottom: 0;
			left: 0;
			display: block;
			z-index: 1050;
			width: 100%;
			overflow-y: visible!important;
			padding:0.5em 0.5em;
			color:#fff;
			text-shadow: 1px 1px 2px rgba(90, 90, 90, 0.7);
			text-align:center;
		}
		.recover a:hover,
		.recover a:focus{
			color:#fcff44;
		}

/*content-process.html*/
	.ftpinfo{
		    line-height: 32px;
	}
	.searchbookid .scrollTop{
		display:none;
	}
	@media (max-width: 767px){
		.searchbookid{
			position:fixed;
			bottom:0;
			left:0;
			width:100%;
			margin:0;
			border-top:1px solid #ccc;
		    background: #3fc6c6;
			z-index:1001;
			padding:0.5rem;
		}
		.searchbookid form{
			width:calc(100% - 2em);
			display:inline-block;
			padding-right:0.5rem;
			float:left;
		}
		.searchbookid .scrollTop{
			line-height:1.4rem;
			width:2rem;
			display:inline-block;
		}
	}

/*code-5part*/
	@media (max-width: 500px){
		.code-5part{
			font-size:0.95rem;
		}
	}

/*.inputKeyCodeGroupe*/
	.inputKeyCodeGroupe input{
		padding: 0.25rem 0.25rem;
	    text-align: center;
	    letter-spacing: 0.1em;
	    background:#f6f6f6;
	}
	.inputKeyCodeGroupe input:not(:last-child){
		margin-bottom:0.25rem;
	}


/*testResult*/
	.progressText{
		font-size:0.8rem;
		clear:both;
	}
	.progressText+.progress{
		height:0.75rem;
		margin-bottom:0rem;
	}
	.progressTextBottom{
		height:1rem;
		font-size: 0.7rem;
		color: #888;
	}
	.testResultImg {
		position:absolute;
		right: 0.75rem;
		bottom: 0.5rem;
	}
	.testResultImg .pass{
		background: url(../../images/project/pass.png)  no-repeat center;
	    background-position: center bottom;
	    background-repeat: no-repeat;
	    background-size: contain;
		width:5rem;
		height:5rem;
	}
	.testResultImg .fail{
		background: url(../../images/project/fail.png)  no-repeat center;
	    background-position: center bottom;
	    background-repeat: no-repeat;
	    background-size: contain;
		width:5rem;
		height:5rem;
	}
	.table.testResultTable th,
	.table.testResultTable td{
		padding:0.2rem;
		font-size:0.95rem;
	}

/*operationalExamType*/
	.operationalExamType{
	    /*font-size: 0.8rem;*/
	    padding: 0.2rem 0.4rem;
	    padding-right:1rem;
	    border-right:1px solid #ccc;
	    margin-right:0.5rem;
	}
	@media all and (max-width: 575px){
		.operationalExamType{
		    padding: 0.2rem 0.4rem;
		    border-right:0;
		    margin-right:0;
		}
		.operationalExamType+a{
			display:block!important;
		}
	}
	.xxxoperationalExamType.softway-1{
		/*background: #1c80d5;*/
	    background: #6e66b0;
	    color: #fff;
	}
	.xxxoperationalExamType.softway-2{
	    /*background: #19b49e;*/
	    /*background: #1d8dc3;*/
	    /*background: #6e66b0;*/
	    background: #555;
	    color: #fff;
	}
	.xxxoperationalExamType.de{
		background: #217ff3;
		color: #fff;
	}
	.xxxoperationalExamType.df{
		border: 1px solid #217ff3;
	    color: #217ff3;
	}

/*opQuestionID*/
	.opQuestionID .badge{
		display:inline-block;
		min-width:2.5rem;
		text-align:center;
	    margin: 0.25rem 0;
	}
	.opQuestionID .badge-info{
		min-width: 5.25rem;
	}
	.opQuestionID .badge-default:before{
		content:"#";
		padding-right:0.25rem;
	}
	.opQuestionID+.actionRow .well{
		margin: 0;
		padding: 6px 1rem;
	}
	.tempMsg{
	    position: relative;
		display:block;
		width:100%;
		background-color: #d9534f;
		padding: .2em .6em .3em;
		font-size: 0.9rem;
		font-weight: bold;
		line-height: 1.5rem;
		color: #fff;
		text-align: center;
		white-space: nowrap;
		vertical-align: baseline;
		border-radius: .25em;
		margin-bottom: 0.5rem;
	}
	.tempMsg::before{
	    content: "";
	    display: block;
	    position: absolute;
	    margin-left:-6px;
	    left: 50%;
	    bottom: -6px;
	    width: 0;
	    height: 0;
	    border-style: solid;
	    border-width: 6px 10px 0 10px;
	    border-color: #d9534f transparent transparent transparent;
	}


/* Add @ 20180129 By Ocean */
.m-bookList {
	height: 345px;
}
@media only screen and (max-width: 468px){
	.m-bookList {
		height: 380px;
	}
}

/* Add By Ocean For Web Logo @20190319 */
.navbar-inverse .logo {
	width: 239px;
	height: 40px;
	content:" ";
	background: url(../../images/project/mosme_logo.png) no-repeat center;
	background-size: contain;
	margin-top: 4px;
}
@media all and (max-width: 886px){
	.navbar-inverse .logo {
		width: 176px;
		height: 29px;
		margin-top: 6px;
	}
}
@media all and (max-width: 575px){
	.navbar-inverse .logo {
		width: 160px;
		height: 27px;
		margin-top: 8px;
	}
}