body{background-color: #f6f6f6;}

.wrap {
    width: 100%;
    position: relative;
    line-height: 1.6;
    font-size: 1em;
    font-family: '微軟正黑體';
}

/*----------------------------- 單元--------------------------------- */
.unitName{ background:#ffb23a;}

/*-------------mainNav單元文字變色---------------*/
/*.mainNav > ul > li:nth-child(5) > a { color:#00babc; font-weight:bold;}*/


/*perfect-scrollbar*/
.ps {
  overflow: hidden !important;
  overflow-anchor: none;
  -ms-overflow-style: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  height: 15px;
  /* there must be 'bottom' or 'top' for ps__rail-x */
  bottom: 0px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-y {
  display: none;
  opacity: 0;
  transition: background-color .2s linear, opacity .2s linear;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  width: 15px;
  /* there must be 'right' or 'left' for ps__rail-y */
  right: 0;
  /* please don't change 'position' */
  position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
  display: block;
  background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
  opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
  background-color: #eee;
  opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, height .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s ease-in-out;
  height: 6px;
  /* there must be 'bottom' for ps__thumb-x */
  bottom: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__thumb-y {
  background-color: #aaa;
  border-radius: 6px;
  transition: background-color .2s linear, width .2s ease-in-out;
  -webkit-transition: background-color .2s linear, width .2s ease-in-out;
  width: 6px;
  /* there must be 'right' for ps__thumb-y */
  right: 2px;
  /* please don't change 'position' */
  position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: #999;
  height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: #999;
  width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important;
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important;
  }
}



/*版頭圖文*/

#start {    background-color: #edf6ff;    margin-bottom: 30px;    width: 100%;}

.top-img {    width: 100%;    max-width: 230px;    margin: 20px 0;    margin-right: 20px;}
.top-text {    font-size: 48px;    color: #0a7eda;    font-weight: bold;}
.top-text p {    font-size: 17px;    color: #646464;    font-weight: normal;    margin-left: 5px;}

.novice-wrap {    width: 100%;    max-width: 1366px;    margin: 0 auto;    overflow: hidden;    z-index: 1;}

/*左側選單*/

.side-menu {position: absolute;    padding-bottom: 150px;    line-height: 2;    font-size: 17px;    width: 100%;    height: 100%;
    max-width: 185px !important;    z-index: 1;    overflow-y: scroll;    margin-left: 20px;    padding-right: 20px;}

/*左側選單向下滑動時*/
.side-menu.fixed {    position: fixed;    top: 75px;}

/*左側選單到底部時*/
.side-menu.on-top {    position: absolute !important;    bottom: 0;}


/*左側選單-隱藏手機版-收起選單*/
.menu-btn.hide{display:none;}


/*左側選單連結樣式*/
.side-menu a {    text-decoration: none;    color: #444;    padding-left: 8px;}


/*左側選單-次選單*/
.side-menu .sub-title {    position: relative;    cursor: pointer;	padding-left: 8px;}
/*.side-menu .sub-title:after {    content: '\f0d7';    font-family: 'FontAwesome';    font-size: 22px;    position: absolute;    right: 0;    top: -5px;}*/
.side-menu li.sub-nav {    margin-left: 16px;    font-size: 16px;}

/*左側選單-標示位置(搭配scrollspy*/
.side-menu .is-inview {    color: #0a7eda !important;    font-weight: bold;    border-left: 3px solid;    padding-left: 5px;}


footer#a1Footer {    position: relative;    z-index: 999;}


.novice{ width:100%;max-width:1180px; margin:0 auto; padding-bottom:  100px ; text-align: center; }


/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 右側list 大分類 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

.novice-wrap .js-scrollspy-content {    width: calc(100% - 200px);    margin-left: 220px;}

.novice-wrap .novice-sort {    width: 97%;    padding-left: 20px;}
.novice-wrap .novice-sort .item {    letter-spacing: -5px;    margin-bottom: 25px;    background-color: #fff;    padding: 15px;    border-radius: 10px;}

.novice-sort .item > *{ display:inline-block; letter-spacing:1px; vertical-align: middle;}

/*模組標題*/

.novice-sort .item h3 { font-size: 20px;    padding: 0 5px 10px;    font-weight: bold;    color: #0a7eda;    text-align: left;    width: 100%;    display: block;    border-bottom: 1px solid #eee;}

.novice-sort .item h3 .icon:before{content:"";font-family: 'FontAwesome'; margin-right:.2em;}
.novice-sort .item h3 .icon-01:before{content:"\f007";}
.novice-sort .item h3 .icon-02:before{content:"\f013";}
.novice-sort .item h3 .icon-03:before{content:"\f02d";}
	
/*章節*/

.novice-sort .item .links {    text-align: left;   min-height: 50px;    width: 100%;    list-style: none;}
.novice-sort .item .links li {    display: inline-block;    margin: 2px;    vertical-align: middle;    vertical-align: -webkit-baseline-middle;    width: 24%;    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;}

.novice-sort .item .links li a {    padding: 3px 8px;    font-size: 15px;    color: #626262;    text-decoration: none;    white-space: nowrap;}
.novice-sort ul.links working {    display: block;    padding-top: 15px;    color: #686868;    font-size: 15px;padding-left: 12px;}
/*	.novice-sort .item .links li a:before{content:"●"; margin-right:4px; font-size:8px; font-family:"Arial "; position:relative; top:-3px;}*/

.novice-sort .item .links li a:hover {    background: #e7e7e7;    text-decoration: none;    border-radius: 5px;}
	
@media screen and (max-width: 1366px) {
	
.novice-sort .item .links li {  width: 24%;}	
	
}
	
@media screen and (max-width: 1024px) {
	
.novice-sort {    padding: 0;    padding-right: 40px;}
.novice-sort .item .links li {  width: 32%;}

}


	
@media screen and (max-width: 768px) {
	
.novice{ text-align:left;}
.novice-sort .item h3 ,.novice-sort .item .links{ 
/*	width:96%;*/
	margin:0 auto; }
.novice-sort .item .links {border-left: none; }
.top-img {    margin: 0 auto;}
.top-text {    margin-bottom: 30px;    text-align: center;}		
.novice-wrap.m-style .content {    margin-left: 0;    width: 100%;}
.novice-wrap.m-style .side-menu {    left: -190px;}
.novice-wrap .m-btn-active.side-menu {    left: 0;    top: -11px;    margin: 0;    padding: 15px 15px;    background-color: rgb(255 255 255 / 95%);    box-shadow: 0 0 10px #999;}
	
	
/*選單裡的按鈕	*/
.novice-wrap.m-style .menu-btn.side-menu{position:relative;top:-5px;left:0;display:inline-block;margin:0 auto;padding:0;height:auto;border-radius:5px;background-color:#0a7eda;color:#fff;text-align:center;letter-spacing:1px;font-weight:700;font-size:16px;font-family:'微軟正黑體'}

	

/*
.side-menu a {
    color: #fff;
}
.side-menu .is-inview {
    color: #ffdc89 !important;
}	
.side-menu .sub-title {
    color: #fff;
}
*/
	
.menu-btn.side-menu i {    margin-right: 10px;}	
.novice-wrap .m-btn-active.side-menu.fixed {    top: 50px;    height: 100%;}	
.novice-wrap .m-btn-active .content {    margin-left: 220px;}
.novice-wrap.m-style .novice-sort {    padding: 0;    margin: 0 auto;}	
.novice-wrap.m-btn-active .side-menu.fixed {    padding-top: 80px;}	
	
	
.novice-sort .item {    padding: 15px 0;}	
.novice-sort .item .links {    width: 100%;    }	
.novice-sort .item h3 {    margin-bottom: 10px;}	
.novice-sort .item .links li {   width: 48%;   vertical-align: top; font-size: 14px;}
.novice-sort .item .links li a {    padding: 3px 0;font-size: 14px;    letter-spacing: 0;}
	
}