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

/* 英文字 */
	@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
	/* font-family: 'Poppins', sans-serif; */

/* 中文字 */
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
	/* font-family: 'Noto Sans TC', sans-serif; */

/* 文字大小設定 */
	html, body,
	.modern-forms button,
	.modern-forms input,
	.modern-forms label,
	.modern-forms select,
	.modern-forms textarea,
	.headerScroll ul.navigation > li a h4 {
	    font-size: 1.125rem;/* 網頁內文字體以18pt為主 */
	}
	h2{
		font-size: 3.5rem;
	}
	h3,
	h6 small{
		font-size: 2rem;
	}
	h4,
	.modern-forms select#mySelect{
		font-size: 1.5rem;
	}
	h5{
		font-size: 8.125rem;
		/* 黃色英文字 */
	}
	h5 small{
		font-size: 6.875rem;
	}
	h6,
	span.h6number{
		font-size: 3rem;
	}
	h7{
		font-size: 1rem;
	}
	.footer,
	.footer .goTop p,
	.goBottom p {
		font-size: 1rem;
	}
	.footer .copyright,
	p small{
		font-size: 0.875rem;
	}
	.timer{
		font-size: 1.875rem;
	}
	.timer .days span{
		font-size: 1.75rem;
	}
	@media screen and (max-width: 1600px) and (min-width: 1281px){
		html, body,
		.modern-forms button,
		.modern-forms input,
		.modern-forms label,
		.modern-forms select,
		.modern-forms textarea {
		    font-size: 0.875rem;/* 網頁內文字體以14pt為主 */
		}
		h2{
			font-size: 3.25rem;
		}
		h3,
		h6 small{
			font-size: 1.75rem;
		}
		h4,
		.modern-forms select#mySelect{
			font-size: 1.25rem;
		}
		h5{
			font-size: 7.875rem;
			/* 黃色英文字 */
		}
		h5 small{
			font-size: 6.625rem;
		}
		h6,
		span.h6number{
			font-size: 2.75rem;
		}
		h7{
			font-size: 0.75rem;
		}
		.footer,
		.footer .goTop p,
		.goBottom p {
			font-size: 0.75rem;
		}
		.footer .copyright,
		p small{
			font-size: 0.625rem;
		}
		.timer{
			font-size: 1.625rem;
		}
		.timer .days span{
			font-size: 1.5rem;
		}
	}
	@media screen and (max-width: 1280px) and (min-width: 1151px){
		html, body,
		.modern-forms button,
		.modern-forms input,
		.modern-forms label,
		.modern-forms select,
		.modern-forms textarea{
			font-size: 1.6vw;
		}
		h2{
		    font-size: 4.9vw;
		}
		h3,
		h6 small{
			font-size: 3.2vw;
		}
		h4,
		.modern-forms select#mySelect{
			font-size: 2.2vw;
		}
		h5{
			font-size: 11.6vw;
		}
		h5 small{
			font-size: 10.9vw;
		}
		h6,
		span.h6number{
			font-size: 4.7vw;
		}
		h7{
			font-size: 1.6vw;
		}
		.footer,
		.footer .goTop p,
		.goBottom p {
			font-size: 1.6vw;
		}
		.footer .copyright,
		p small{
			font-size: 1.4vw;
		}
		.timer{
			font-size: 3vw;
		}
		.timer .days span{
			font-size: 2.5vw;
		}
	}
	@media screen and (max-width: 1150px) and (min-width: 631px){
		html, body,
		.modern-forms button,
		.modern-forms input,
		.modern-forms label,
		.modern-forms select,
		.modern-forms textarea {
		    font-size: 2.4vw;
		}
		h2{
			font-size: 5vw;
		}
		h3,
		h6 small{
			font-size: 3.2vw;
		}
		h4,
		.modern-forms select#mySelect{
			font-size: 2.7vw;
		}
		h5{
			font-size: 19.6vw;
		}
		h5 small{
			font-size: 16.5vw;
		}
		h6,
		span.h6number{
			font-size: 5vw;
		}
		h7{
			font-size: 2.1vw;
		}
		.footer,
		.footer .goTop p,
		.goBottom p {
			font-size: 1.7vw;
		}
		.footer .copyright,
		p small{
			font-size: 1.3vw;
		}
		.timer{
			font-size: 3.2vw;
		}
		.timer .days span{
			font-size: 2.7vw;
		}
	}
	@media screen and (max-width: 630px){
		html, body,
		.modern-forms button,
		.modern-forms input,
		.modern-forms label,
		.modern-forms select,
		.modern-forms textarea {
		    font-size: 3.8vw;
		}
		h2{
			font-size: 9.4vw;
		}
		h3,
		h6 small{
			/* font-size: 6.2vw; */
			/* font-size: 4.2vw; */
			font-size: 6vw;

		}
		h4,
		.modern-forms select#mySelect{
			font-size: 5vw;
		}
		h5{
			font-size: 16.6vw;
		}
		h5 small{
			font-size: 15.8vw;
		}
		h6,
		span.h6number{
			font-size: 6.5vw;
			/* font-size: 4.2vw; */
		}
		h7{
			font-size: 3.8vw;
		}
		.footer,
		.footer .goTop p,
		.goBottom p {
			font-size: 3.2vw;
		}
		.footer .copyright,
		p small{
			font-size: 3vw;
		}
		.timer{
			font-size: 6.2vw;
		}
		.timer .days span{
			font-size: 3vw;
		}
	}

/* 主架構及所有頁面共用基本css設定 */
	html{
		background: #d9dcde;
	}
	html, body {
		height: 100%;
	    -webkit-text-size-adjust:100%; /*IOS橫向字體大小不會被放大*/
	    /* font-family: Arial, "微軟正黑體"; */
	    font-family: 'Noto Sans TC', sans-serif;
	    color: #000;
	    line-height: 1.7;
	    letter-spacing: 1px;
	}
	body{
		overflow-x: hidden;
	}
	body.hidden{
		overflow: hidden;
	}
	.wrap {
		min-height: 100%;
		*display: table; /* For IE7 Hack */
		*height: 100%; /* For IE7 Hack */
	}
	.header{
		width: 100%;
		position: fixed;
		z-index: 99;
		top: 0;
	    transition: all .5s;
	}
	.footer {
		background: #FFF;
		display: table;
		width: 100%;
		position: relative;
		padding: 2% 0 0 0;
	}
	.main{
		position: relative;
		z-index: 2;

		/* overflow:auto; */
		/*要注意！！！部分頁面有使用position: sticky; 則此父元素不能使用overflow*/
	}
	section{
		position: relative;
		width: 100%;
		/* overflow-x: hidden; */
		overflow: hidden;
	}
	.content{
		max-width: 1280px;
		margin: 0 auto;
		position: relative;
	}
	.pageContent{
		padding: 4% 0 7% 0;
		position: relative;
	}
	.pageContent:before{
		content: '';
		background: url('/images/all/star_border.svg') no-repeat right bottom;
		background-size: 100%;
		position: absolute;
		z-index: -1;
		right: -37%;
	    bottom: -110px;
	    width: 51%;
	    height: 100vw;
	}	
	img{
		width: 100%;
		display: block;
		height: auto;
	}
	h5{
		color: #fac210;
		font-family: 'Poppins', sans-serif;
	    font-weight: bolder;
        line-height: 1;
	}
	a{ outline: none; /* for Firefox Google Chrome  */
	   behavior:expression(this.onFocus=this.blur()); /* for IE */
		text-decoration: none;
	}
	.mb {
		display: none !important;
	}
	@media screen and (min-width: 631px){
		.footer {
		    z-index: 999;
		}
	}
	@media screen and (max-width: 1540px){
		.allLeftRightPadding{
			padding-left: 30px !important;
			padding-right: 30px !important;
		}
	}
	@media screen and (max-width: 1350px){
		.pageContent {
		    padding: 9% 4% 9% 4%;
		}
	}
	@media screen and (max-width: 1150px){
		html, body{
			height:auto;
			overflow-x: hidden;
		}
		.header{
			z-index: 999;
			height: 66px;
		}
		.footer {
		    padding: 5% 0 0 0;
		}
		.pageContent:before{
			display: none;
		}
	}
	@media screen and (max-width: 630px){
		.footer {
			margin-bottom: 16%;
		}
		.allLeftRightPadding{
			padding-left: 15px !important;
			padding-right: 15px !important;
		}
		.pageContent {
		    padding: 4% 4% 19% 4%;
		}
	}
	@media screen and (max-width: 500px){
		.pc{
			display: none !important;
		}
		.mb{
			display: block !important;
		}
	}

/* 按鈕設定 */
	/* 按鈕大小共用設定 */
		.btn,
		.grayBtn{
			margin: auto;
		  	position: relative;
		  	padding: 0;
		  	box-sizing: border-box;
		  	border-radius: 100em;
		  	text-align: center;
		  	text-decoration: none;
		    max-width: inherit;
		    display: table;
		    transition: all .5s;
	        font-weight: bold;
		}
		
		/* 火狐CSS hank */
			@-moz-document url-prefix(){
				.btn,
				.grayBtn{
				    overflow: hidden;
				}
			}

		.shine-btn span,
		.grayBtn span {
			overflow: hidden;
		  	position: relative;
		    padding: 9px 46px;
		    display: table;
		    width: auto;
	        border-radius: 100em;
	        transform: translateZ(0);/* for safari */
		}
	
	/* 邊框灰色按鈕 */
		.grayBtn{
		  	color: #000;
		  	border: solid 3px #000;
		}
		.grayBtn:hover{
		  	color: #FFF;
		  	background: #000;
		  	border: solid 3px #000;
		  	transition: all .5s;
		}

	/* 背景漸層按鈕 */
		.bgGradientBtn{
			z-index: 3;
		    font-weight: bold;
		}
		.bgGradientBtn:hover:before{
			background: linear-gradient(to right, #c3118c, #633ac3 50%, #0064fc);
			transition: all .5s;
		}
		.bgGradientBtn.shine-btn span:after{
			display: none;
		}

	/* 邊框漸層+掃光按鈕 */
		.btn {
		  	color: #fff;
		  	background: #000;
		  	background-clip: padding-box;
		  	border: solid 3px transparent;
		}
		.btn:before {
		  	content: "";
		  	position: absolute;
		  	top: 0;
		  	right: 0;
		  	bottom: 0;
		  	left: 0;
		  	z-index: -1;
		  	margin: -3px;
		  	border-radius: inherit;
		  	background: linear-gradient(to right, #0064fc, #633ac3 50%, #c3118c);
		  	transition: all .5s;
		}
		.shine-btn {
		  	transition: 1.5s;
		}
		.shine-btn span:after {
		  	content: "";
		  	display: block;
		  	position: absolute;
		  	background: url('/images/all/shine_light.png') no-repeat center;
		  	background-size: cover;
		  	width: 200%;
    		height: 200%;
    		margin-top: -40%;
		  	animation: btn-shine 4s ease 1s infinite;
		}
		.shine-btn span p{
			position: relative;
			z-index: 2;
		}
		@keyframes btn-shine {
		  	0% {
		    	transform: translateX(-150%);
		  	}
		  	70% {
		    	transform: translateX(120%);
		  	}
		  	100% {
		    	transform: translateX(120%);
		  	}
		}

	/* 按鈕並排框架 */
		.sideBySideMoreBt{
			clear: both;
			padding: 6% 0 4% 0;
			text-align: center;
		}
		.sideBySideMoreBt a{
			display: inline-table;
			margin: 0 10px;
		}
		@media screen and (max-width: 630px){
			.sideBySideMoreBt {
			    padding: 11% 0 4% 0;
			}
		}

/* header */
	.header .nav{
		padding: 0 40px;
	}
	a.menuLogo{
		background: url("/images/all/logo.svg") no-repeat center left;
		background-size: contain;
		display: table;
		width: 272px;
		height: 150px;
		transition: all .5s;

		position: absolute;
		z-index: 1;
		top: 11%;
	}	
	.stickyMenuLogo{
		position: relative;
		margin: 10px 0 0 2%;
		display: none;
		transition: all .5s;

		background: url("/images/all/logo.svg") no-repeat center;
		background-size: contain;
		width: 125px;
		height: 80px;
	}

	/*漢堡選單設定*/
		.header a.hamburger{
			width:65px;
			height:65px;
			right: 0;
			display:none;
			position:fixed;
			z-index:9999;
			top: 0;
			background-color: #fac210;
			box-sizing: border-box;
    		padding-top: 14px;
    		transition: all .5s;
		}
		.hamburger .line{
			width: 33px;
			height: 2px;
			background-color: #000;
			display: block;
			margin: 8px auto;
			-webkit-transition: all 0.3s ease-in-out;
			-o-transition: all 0.3s ease-in-out;
			transition: all 0.3s ease-in-out;
		}
		.hamburger:hover{
			cursor: pointer;
		}
		#hamburger-1.is-active .line:nth-child(2){
		  	opacity: 0;
		}
		#hamburger-1.is-active .line:nth-child(1){
		  	-webkit-transform: translateY(13px) rotate(45deg);
		  	-ms-transform: translateY(13px) rotate(45deg);
		  	-o-transform: translateY(13px) rotate(45deg);
		  	transform: translateY(13px) rotate(45deg);
		  	background-color: #000;
		}
		#hamburger-1.is-active .line:nth-child(3){
		  	-webkit-transform: translateY(-8px) rotate(-45deg);
		  	-ms-transform: translateY(-8px) rotate(-45deg);
		  	-o-transform: translateY(-8px) rotate(-45deg);
		  	transform: translateY(-8px) rotate(-45deg);
		  	background-color: #000;
		}

	/* 手機板header快速連結 */
		.sticky_quickLink{
			position: fixed;
		    z-index: 2;
		    top: 0;
		    right: 65px;
		    display: none;
		    width: 65px;
    		height: 65px;
    		background:rgba(0,0,0,0.24);
    		transition: all .5s;
    		cursor: pointer;
		}
		.sticky_quickLink > div{
    		background: url('/images/all/sticky_quickLink.svg') no-repeat center;
    		background-size: 50% 50%;
    		width: 100%;
    		height: 65px;
		}
		.sticky_quickLink > div.iconChange{
    		background: url('/images/all/close.svg') no-repeat center;
    		background-size: 36% 36%;
		}
		.sticky_quickLink_div{
			position: fixed;
			right: 0;
			top: 65px;
			width: 130px;
			background:rgba(0,0,0,0.88);
			display: none;
			overflow: hidden;
			transition: all .5s;
		}
		.sticky_quickLink_div.openQuickLinkMenu{
			transition: all .5s;
			opacity: 1;
			display: block;
		}
		.sticky_quickLink_div ul{
			display: block;
			overflow: hidden;
		}
		.sticky_quickLink_div ul li{
			float: left;
			width: 50%;
		}
		.sticky_quickLink_div ul li a{
	    	width: 65px;
    		height: 65px;
	    	display: table;
			transition: all .5s;
			margin: 0 auto;
		}
		.sticky_quickLink_div ul li a div{
			display: table-cell;
			vertical-align: middle;
		}
		.sticky_quickLink_div ul li a div img{
			width: 40%;
			margin: 0 auto;
		}		

	/* 下拉選單css */
		ul.navigation{
			width: auto;
    		text-align: right;
		    height: 80px;
		}
		ul.navigation li {
		    position: relative;
		    display: inline-table;
		    vertical-align: middle;
			list-style:none;
			margin-right: 38px;
		}
		ul.navigation li:last-of-type{
			margin-right: 0;
		}

		/* 特定在第一層，選單li裡面連結之樣式 */
			ul.navigation li a{
			    display: table;
				overflow: hidden;
			    height: 100%;
			    color: #fac210;
			}
			ul.navigation li a h4{
				font-weight: inherit;
				transition: all .5s;
			}
			/* ul.navigation li a.menu p{
				width: 100%;
				display: table-cell;
    			vertical-align: middle;
			    transition: all .5s;
			} */

		/* 觸發第二層時，第一層選單hover樣式 */
			ul.navigation > li > a:before{
				content: '';
				background-color: #0064fc;
				background-image: linear-gradient(160deg, #0064fc 0%, #bb1490 100%);
				width: 0%;
				height: 3px;
				position: absolute;
				z-index: -1;
				left: 0;
				bottom: 0;
				transition: all .5s;
			}
			ul.navigation > li:hover a.menu p{
				color: #FFF;
				transition: all .5s;
			}
			ul.navigation > li:hover > a:before{
				width: 100%;
				transition: all .5s;
			}
			ul.navigation > li > ul > li:last-of-type{
				margin-right: 38px;
			}

		/* 以下為多層選單的樣式，第二層之後下拉部分之樣式 */
			ul.navigation li ul{
			    display: none;
			    float: left;
			    position: absolute;
			    margin: 0;
			    padding: 0;
			}

		/* 當第一層選單被觸發時，指定第二層顯示 */
			ul.navigation li:hover > ul{
			    display: block;
			}

		/* 特定在第二層或之後下拉部分li之樣式*/
			ul.navigation ul li {
			    border-bottom: 0;
			    margin-top: 0;/* 不要邊線 */
			}
			ul.navigation ul li:last-child {
			    border-bottom: none;
			}

		/* 第二層或之後 選單li之樣式 */
			ul.navigation ul a {
			    width: 150px;
			    padding: 12px 17px;
			    color: #fac210;
			    background: rgba(0,0,0,0.5);
			    box-sizing: border-box;
			    text-align: left;
			    transition: all .5s;
			}
			ul.navigation ul a:hover {
			    /* background-color: #0064fc;
				background-image: linear-gradient(160deg, #0064fc 0%, #bb1490 100%); */
				color: #FFF;
			    transition: all .5s;
			}

		/* 第三層之後，上一層的選單觸發則顯示出來(皆為橫向拓展) */
			ul.navigation ul li:hover > ul{
			    display: block;
			    position: absolute;
			    top: 0;
			    left: 100%;
			}

	@media screen and (min-width: 1151px){
		ul.navigation li {
		    height: 69%;
    		margin-top: 30px;
		}
	}
	@media screen and (max-width: 1400px){
		ul.navigation li,
		ul.navigation > li > ul > li:last-of-type{
			margin-right: 20px;
		}
	}
	@media screen and (max-width: 1150px){
		/* 1150px為平板樣式 */
		.header .nav {
		    padding: 0;
		}
		a.menuLogo{
			display: none;
		}
		.stickyMenuLogo,
		.header a.hamburger{
			display: block;
		}
		.sticky_quickLink{
		    display: table;
		}
		div.allMenu{
			width: 100%;
			height: 100vh;
			overflow: auto;
			position: fixed;
			z-index: 4;
			top: 0;
			left: 0;
			background: rgba(0,0,0,0.88);
			transition: all .5s;
			opacity: 0;
			display: none;
		}
		div.allMenu.openMenu{
			transition: all .5s;
			opacity: 1;
			display: block;
		}
		ul.navigation ul li.openMenu02 a{
			padding-left: 50px;
			box-sizing: border-box;
		}

		/* 下拉選單css */
			ul.navigation li {
			    display: block;
			    /* border-bottom: 1px solid #363636; */
			    margin-right: 0;
			}
			ul.navigation li a.menuLogo{
				display: none;
			}
			ul.navigation li a.menu{
				text-align: left;
				width: 100%;
				height: auto;
				padding: 20px;
				box-sizing: border-box;
			}
			/* ul.navigation li a.menu p, */
			ul.navigation li a.menu h4{
				line-height: inherit;
				display: inline;
				margin-right: 20px;
			}
			ul.navigation li a.menu.menu01 p,
			ul.navigation li a.menu.menu03 p{
				margin-right: 20px;
			}
			ul.navigation li a.menu.menu01::after{
			    content: "";
			    position: absolute;
			    width: 3vw;
			    height: 3vw;
			    top: 28px;
			    z-index: 1;
			    background: url("/images/all/btBottom.svg") no-repeat 96% center;
			    background-size: cover;
			    transform: rotate(0deg);
			    transition: all .5s;
			}
			ul.navigation li a.menu.secondMenuOpen.menu01::after{
			    transform: rotate(-180deg);
			    transition: all .5s;
			}

			/* 當第一層選單被觸發時，指定第二層顯示 */
				ul.navigation > li:hover > a:before{
					display: none;
				}
			/* 以下為多層選單的樣式，第二層之後下拉部分之樣式 */
				ul.navigation li ul,
				ul.navigation ul li:hover > ul{
				    float: none;
				    position: relative;
				    left: 0;
				}
			/* 針對移動裝置取消掉hover效果_____勿刪除 */
				ul.navigation li:hover > ul,
				ul.navigation ul li:hover > ul{
				    display: none;
				}
			/* 第二層或之後 選單li之樣式 */
				ul.navigation ul li{
					border: 0;
				}
				ul.navigation ul a {
				    width: 100%;
				    background: rgba(255,255,255,0.08);
				    padding: 20px;
				}
				ul.navigation > li > ul > li:last-of-type{
					margin-right: 0;
				}
	}
	@media screen and (max-width: 1000px){
		.stickyMenuLogo{
			width: 126px;
		    margin-top: 0;
		}
	}
	@media screen and (max-width: 630px){
		ul.navigation li a.menu.menu01::after{
	        top: 5vw;
		    width: 6vw;
		    height: 6vw;
		}
	}
	@media screen and (max-width: 490px){
		ul.navigation {
		    text-align: center;
		}
		ul.navigation li a.menu.menu01::after{
	        top: 6vw;
		}
	}

/* .headerScroll的狀態 */
	.headerScroll{
		background:rgba(0,0,0,0.5);
		transition: all .5s;
	}
	.headerScroll ul.navigation{
	    height: 59px;
	    transition: all .5s;
	}
	.headerScroll a.menuLogo{
		height: 40px;
	}
	.headerScroll .stickyMenuLogo{
	    width: 100px;
	    height: 59px;
	    margin-top: 0;
	}
	.headerScroll ul.navigation > li a h4{
		/* font-size: 1.25rem; */
		transition: all .5s;
	}

	@media screen and (min-width: 1151px){
		.headerScroll ul.navigation > li {
	        height: 82%;
    		margin-top: 11px;
		}
	}
	@media screen and (max-width: 1150px){
		.headerScroll{
			height: 59px;
		}
		.header.headerScroll a.hamburger{
			width: 59px;
		    height: 59px;
		    padding-top: 9px;
		    transition: all .5s;
		}
		.headerScroll .sticky_quickLink{
			width: 59px;
		    height: 59px;
		    right: 59px;
		    transition: all .5s;
		}

		.headerScroll .sticky_quickLink_div{
			top: 59px;
			width: 118px;
			transition: all .5s;
		}
		.headerScroll .sticky_quickLink_div ul li a{
	    	width: 59px;
    		height: 59px;
    		transition: all .5s;
		}
		.headerScroll .sticky_quickLink > div{
    		height: 59px;
		}
	}

/* fixedRightLink */
	.fixedRightLink{
		position: fixed;
		z-index: 14;
	}
	.fixedRightLink ul,
	.fixedRightLink ul li{
		display: block;
		width: 100%;
		text-align: center;
	}
	.fixedRightLink ul li:last-of-type{
		margin-bottom: 0;
	}
	.fixedRightLink ul li a{
	    width: 30px;
    	display: block;
    	transform: scale(1); 
		transition: all .5s;
	}
	.fixedRightLink ul li a:hover{
    	transform: scale(1.2); 
		transition: all .5s;
	}
	@media screen and (min-width: 1151px){
		.fixedRightLink{
			top: 30%;
			right: 0;
			width: 51px;
		}
		.fixedRightLink ul li{
			margin-bottom: 60%;
		}
	}
	@media screen and (max-width: 1150px) {
		.fixedRightLink{
    		display: none;
		}
	}

/* footer */
	.footer ul{
		display: table;
		width: 100%;
		margin-bottom: 3%;
	}
	.footer ul li{
		display: table-cell;
		vertical-align: top;
		line-height: 1.8;
	}
	.footer ul li > div{
		width: 49%;
    	display: inline-table;
	}
	.footer ul li p{
		font-weight: bolder;
	    margin-bottom: 4%;
	}
	.footer ul li a{
		display: table;
		color: #000;
	}
	.footer .copyright{
		text-align: center;
		background: #fac210;
		padding: 10px 0;
	}
	.footer .copyright a{
		color: #000;
		transition: all .5s;
		margin-left: 4px;
	}
	.footer .copyright a:hover{
		color: #FFF;
		transition: all .5s;
	}
	.footer_quickLink{
		text-align: center;
		margin: 4% 0;
	}
	.footer_quickLink a{
		display: inline-table;
		vertical-align: middle;
		width: 25px;
		margin: 0 1.5%;
	    transform: scale(1);
    	transition: all .5s;
	}
	.footer_quickLink a:hover{
	    transform: scale(1.1);
    	transition: all .5s;
	}
	@media screen and (min-width: 801px){
		.footer ul li{
			width: 40%;
		}
		.footer ul li:first-of-type{
			width: 20%;
		}
		.footer ul li:first-of-type > div{
			display: table;
			margin: 0 auto;
		}
		.footer ul li > div > div{
			display: table;
			margin: 0 auto;
		}
	}
	@media screen and (max-width: 1150px){
		
	}
	@media screen and (max-width: 800px){
		.footer ul {
		    width: 88%;
		}
		.footer ul li {
	        width: 33.33%;
    		display: inherit;
    		float: left;
		}
		.footer ul li > div{
			display: table;
			margin: 0 auto;
			width: auto;
		}
	}
	@media screen and (max-width: 630px){
		.footer .goTop {
		    top: -28%;
		}
		.footer .goTop:hover{
	    	top: -32%;
		}
	}
	
/* loading */
	#loading {
	  	position: fixed;
	  	top: 0;
	  	left: 0;
	  	right: 0;
	  	width: 100%;
	  	height: 100%;
	  	/* background-color: #0064fc;
		background-image: linear-gradient(160deg, #0064fc 0%, #bb1490 100%); */
		background: #131442;
	  	z-index: 9000000;
	}
	#loading .load-center {
		position: absolute;
		top: 43%;
		left: 50%;
		margin-left: -40px;
		margin-top: -29px;
		width: 80px;
		height: 80px;
	}
	#loading .load-center div{
		background: url('/images/all/loading.svg') no-repeat center;
		background-size: cover;
		width: 100%;
		height: 100%;
	}
	#loading .load-center .line-wrap {
	  position: relative;
	  display: inline-block;
	  box-sizing: border-box;
	  width: 60px;
	  height: 60px;
	  padding: 30px;
	}
	#loading .load-center .line-wrap .line {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 60px;
		height: 3px;
		background: #FFF;
		animation: spin 1.5s infinite ease;
	}
	#loading .load-center .line-wrap .line:nth-of-type(2) {
	  	animation-delay: -0.1s;
	}
	#loading .load-center .line-wrap .line:nth-of-type(3) {
	  	animation-delay: -0.2s;
	}
	#loading .load-center .line-wrap .line:nth-of-type(4) {
	  	animation-delay: -0.3s;
	}
	#loading .load-line {
	  	position: absolute;
	  	top: 50%;
	  	left: 0;
	  	margin-top: 20px;
	  	width: 0%;
	  	height: 1px;
	  	background-color: #FFF;
	  	transition: all 1s 0.5s ease;
	}
	@media screen and (max-width: 1050px){
		#loading .load-center{
			width: 50px;
		    height: 50px;
		    margin-top: 10px;
	        margin-left: -25px;
		}
	}
	@media screen and (max-width: 500px){
		#loading .load-line {
		    top: 55%;
		}
	}

/* 我要報名 倒數計時 */
	.signUp{
		display: table;
		color: #FFF;
		position: fixed;
		z-index: 2;
    	text-align: center;
	}
	.signUp .signUpContent{
	    display: table-cell;
    	vertical-align: middle;
	}
	@media screen and (min-width: 631px){
		.signUp,
		.signUp:before{
			width: 240px;
			height: 240px;
		}
		.signUp{
			border-radius: 100em;
			background: url('/images/all/signUp.png') no-repeat center;
			background-size: 100%;
		    right: 1%;
	    	bottom: 3%;
	    	transform: scale(1.1); 
			transition: all .5s;
		}
		.signUp:hover{
			transform: scale(1.2); 
			transition: all .5s;
		}
		.signUp:before{
			content: '';
			position: absolute;
			z-index: 3;
			background: url('/images/all/signUp_text.png') no-repeat center;
			background-size: 100%;
			right: 0;
	    	top: 0;

		    -webkit-animation: rotate 50s linear infinite;
	    	animation: rotate 50s linear infinite;
		}
		@-webkit-keyframes rotate {
	  		from {
	    		transform: rotate(0deg);
	  		}
	  		to {
	    		transform: rotate(360deg);
	  		}
		}
		@keyframes rotate {
	  		from {
	    		transform: rotate(0deg);
	  		}
	  		to {
	    		transform: rotate(360deg);
	  		}
		}
	}
	@media screen and (max-width: 1600px) and (min-width: 1281px){
		.signUp,
		.signUp:before{
			width: 13vw;
			height: 13vw;
		}	
	}
	@media screen and (max-width: 1280px) and (min-width: 631px){
		.signUp,
		.signUp:before{
			width: 20vw;
			height: 20vw;
		}
	}
	@media screen and (max-width: 1150px) and (min-width: 631px){
		.signUp,
		.signUp:before{
			width: 23vw;
			height: 23vw;
		}
	}
	@media screen and (max-width: 630px) {
		.signUp{
			width: 100%;
			background: url('/images/all/signUp_mb.jpg') no-repeat center;
			background-size: 100% 100%;
			bottom: 0;
		    padding: 4% 0;
		    box-sizing: border-box;
		}
		.signUp h3,
		.signUp .signUpContent > p,
		.signUp .signUpContent > div{
			display: inline-table;
		}
	}
	/* 倒數計時 */
		.timer{
		  	color: #FFF;
		  	font-weight: 100;
		  	margin-top: -6px;
		  	line-height: 1.3;
		}
		.timer .days{
			margin-bottom: -9px;
		}
		.timer .hours span,
		.timer .minutes span,
		.timer .seconds span{
			display: none;
		}
		.timer .hours,
		.timer .minutes,
		.timer .seconds{
			display: inline-table;
		}
		.timer .timeContent{
			display: none;
			/* 將時間隱藏, 只保留天數 */
		}
		@media screen and (max-width: 1600px) and (min-width: 1051px){
			.timer .timeContent span{
				margin-right: -3px;
			}	
		}
		@media screen and (max-width: 1050px){
			.timer .timeContent span{
				margin-right: -3px;
			}
			.timer .days{
				margin-bottom: 0;
			}
			.timer .days span{
				margin-top: -2px;
				display: inline-table;
			}
		}
		@media screen and (max-width: 630px){
			.timer .days{
				display: inline-table;
				margin-bottom: 0;
			}
			.timer .timeContent span{
				margin-right: 3px;
			}
		}

/* goTop , goBottom */
	.footer .goTop,
	.goBottom{
		position: absolute;
		z-index: 3;
		right: 15px;
    	top: 19%;
    	cursor: pointer;
    	transition: all .5s;
    	width: 37px;
	}
	.footer .goTop:hover{
    	top: 15%;
    	transition: all .5s;
	}
	.footer .goTop span,
	.goBottom span{
		width: 2px;
		height: 95px;
		background: #828282;
		display: table;
		margin: 0 auto;
	}
	.footer .goTop:before,
	.goBottom:before{
		content: '';
		background: url('/images/footer/star.svg') no-repeat center top;
		background-size: contain;
		position: absolute;
		z-index: 2;
		left: 0;
		/* top: -9%; */
		width: 36px;
		height: 30px;

		animation: goTopAnimate 1.5s infinite;
      	-webkit-animation: goTopAnimate 1.5s infinite;
	}
	.footer .goTop p,
	.goBottom p{
		margin-top: 10px;
	}
	.goBottom{
		left: 15px;
    	bottom: 4%;
    	top: inherit;
    	right: inherit;
    	width: 46px;
	}
	.goBottom:hover{
    	bottom: 0%;
    	transition: all .5s;
	}
	.goBottom:before{
		width: 46px;
		animation: goBottmoAnimate 1.5s infinite;
      	-webkit-animation: goBottmoAnimate 1.5s infinite;
	}
	.goBottom span{
		background: #FFF;
	}
	.goBottom p{
		color: #FFF;
	}
	@-webkit-keyframes goTopAnimate {
	    0% {
	        top: 60%;
	        opacity: 0;
	    }
	    5% {
	        top: 60%;
	        opacity: 1;
	    }
	    85% {
	        top: -9%;
	        opacity: 1;
	    }
	    100% {
	        top: -9%;
	        opacity: 0;
	    }
	}
	@keyframes goTopAnimate {
	    0% {
	        top: 60%;
	        opacity: 0;
	    }
	    5% {
	        top: 60%;
	        opacity: 1;
	    }
	    85% {
	        top: -9%;
	        opacity: 1;
	    }
	    100% {
	        top: -9%;
	        opacity: 0;
	    }
	}
	@-webkit-keyframes goBottmoAnimate {
	    0% {
	        top: -9%;
	        opacity: 0;
	    }
	    5% {
	        top: -9%;
	        opacity: 1;
	    }
	    85% {
	        top: 60%;
	        opacity: 1;
	    }
	    100% {
	        top: 60%;
	        opacity: 0;
	    }
	}
	@keyframes goBottmoAnimate {
	    0% {
	        top: -9%;
	        opacity: 0;
	    }
	    5% {
	        top: -9%;
	        opacity: 1;
	    }
	    85% {
	        top: 60%;
	        opacity: 1;
	    }
	    100% {
	        top: 60%;
	        opacity: 0;
	    }
	}
	@media screen and (max-width: 630px){
		.footer .goTop:before,
		.goBottom:before {
		    left: -16%;
		    width: 128%;
		}
		.footer .goTop{
		    top: 5%;
	        width: 7%;
		}
		.goBottom {
		    width: 8%;
		}
	}

/* 立即報名register now */
	.registerNow{
		position: relative;
	}
	.registerNow svg{
		position: absolute;
	    left: 0;
	    top: -6.1vw;
	    width: 13vw;
	}
	.registerNow div{
		width: 100%;
		text-align: center;
		display: flex;
	    flex-direction: column;
	    padding: 10.6vw 0;
	    background: url('/images/all/registerNow.jpg') no-repeat center top;
	    background-size: 110%;
	    position: relative;
    	z-index: 1;
    	/* transition: all .5s; */
	}
	.registerNow div img{
		width: 15%;
	    max-width: 265px;
	    margin: 0 auto 3% auto;
	}
	@media screen and (max-width: 1150px){
		.registerNow svg{
		    top: -15.3vw;
    		width: 33vw;
		}
		.registerNow div{
		    padding: 33vw 0;
		    background: url('/images/all/registerNow_mb.jpg') no-repeat center top;
		    background-size: 112%;
		}
		.registerNow div img{
			width: 28%;
			margin: 0 auto 5% auto;
		}
	}
	@media screen and (max-width: 630px){
		.registerNow div{
		    padding: 31vw 0;
		    background-size: 120%;
		}
	}

/* 內頁KV */
	.pageKV{
		overflow: inherit;
	    text-align: center;
    	color: #FFF;
    	padding: 5vw 0 3vw 0;

    	background: url('/images/signUpProcess/KVbn_pc.jpg');
		background-size: cover;
	}
	.pageKV .pageTitle{
		margin-bottom: 0;
	}
	.pageTitle{
		text-align: center;
	}
	.pageTitleMarginBottom{
		margin-bottom: 3%;
	}
	.pageTitle h2 {
	    position: relative;
	    z-index: 2;
	}
	.pageTitle h5 {
	    margin-top: -2.8%;
	}
	.pageTitle h2 {
        letter-spacing: 3px;
	}
	.pageTitle h5{
		position: relative;
	    display: table;
		margin-left: auto;
		margin-right: auto;
	}
	.pageTitle h2.black{
		color: #000;
	}
	.pageTitle h5 svg,
	.pageTitle h5 img{
		width: auto;
		/* width: 100%; */
	    height: 5vw;
	    margin: 0 auto;
	}
	.pageTitle h5 svg{
		position: absolute;
		left: 0;
		top: 0;
	}
	@media screen and (max-width: 1600px) and (min-width: 1281px){
		.pageTitle h5 {
		    margin-top: -2.2%;
		}
		/* .pageTitle h5 svg,
		.pageTitle h5 img {
		    height: 8vw;
		} */
	}
	@media screen and (max-width: 1280px) and (min-width: 1151px){
		.pageTitle h5 svg,
		.pageTitle h5 img {
		    height: 8vw;
		}
	}
	@media screen and (max-width: 1150px){
		.pageKV{
	    	padding: 26.5vw 0 25vw 0;

	    	background: url('/images/signUpProcess/KVbn_mb.jpg');
			background-size: cover;
		}
		.pageTitle h5 svg,
		.pageTitle h5 img {
		    height: 9vw;
		}
	}
	@media screen and (max-width: 630px){
		.pageTitle h5 {
		    margin-top: -6.8%;
		}
		.pageTitle h5 svg,
		.pageTitle h5 img {
		    height: 13vw;
		}
	}

/* popUp */
	.popUp{
        background:rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 9999;             
        left: 0;
        top: 0;
        display: none;
    }
    .popUp > div{
    	width: 100%;
    	height: 100%;
    	display: table;
    	max-width: 350px;
    	margin: 0 auto;
    }
    .popUpDiv{
        width: 100%;
        display: table-cell;
        vertical-align: middle;
    }
    .popUpContent{
        padding: 20px;
        width: 100%;
        margin: 0 auto;
        position: relative;
        background: #fac210;
        box-sizing: border-box;
    }
    a.closePopUp{
        width: 50px;
        height: 50px;
        display: table;
        position: absolute;
        z-index: 2;
        right: 0;
        top: -50px;
        background: url('/images/all/close.svg') no-repeat center;
        background-size: 70%;
        transition: all .5s;
    }
    a.closePopUp:hover{
        background: url('/images/all/close.svg') no-repeat center #000;
        background-size: 70%;
        transition: all .5s;
    }

/* 編輯器 */
	.editArea{
		width: 100%;
		margin: 0 auto;
		display: table;
		position: relative;
	}
	.editArea .editor{
		/* 英文斷行 */
		word-break: break-all;
		word-wrap: break-word;

		/* 文字左右對齊 */
		text-align: justify;
		/* text-justify: inter-ideograph; */
	}
	.editArea .editor span,
	.editArea .editor p,
	.editArea .editor div,
	.editArea .editor h1,
	.editArea .editor h2,
	.editArea .editor h3,
	.editArea .editor h4,
	.editArea .editor h5,
	.editArea .editor h6,
	.editArea .editor h7{
	    font-family: 'Noto Sans TC', sans-serif !important;
	}
	.editArea .editor img{
		max-width: 100%;
		width: auto;
		height: auto !important;
	}
	.editArea .editor a{
		color: #000;
		text-decoration: none;
		padding-bottom: 0;
    	border-bottom:  1px solid #000;
		transition: all .4s;
	}
	.editArea .editor a:hover{
		color: #fac210;
		border-bottom:  1px solid #fac210;
		transition: all .4s;
	}
	.editArea .editor iframe{
		max-width: 100%;
	}

/* style01_swiper按鈕樣式設定 */
	.style01_swiper .swiperArrow{
		position: absolute;
	    z-index: 8;
	    bottom: 1%;
	    width: 31%;
	    height: 50px;
	    left: 50%;
	    margin-left: -15.5%;
	}
	.style01_swiper .swiperArrow .swiper-button-prev,
	.style01_swiper .swiperArrow .swiper-button-next{
		width: 50px;
		height: 50px;
		transition: all .5s;
		border: 0;
	}
	.style01_swiper .swiperArrow .swiper-button-prev:hover,
	.style01_swiper .swiperArrow .swiper-button-next:hover{
		background: #000;
		transition: all .5s;
	}
	.style01_swiper .swiperArrow .swiper-button-prev{
		left: 0;
	    right: auto;
	}
	.style01_swiper .swiperArrow .swiper-button-next{
		right: 0;
		left: auto;
	}
	.style01_swiper .swiperArrow .swiper-button-prev:after,
	.style01_swiper .swiperArrow .swiper-button-next:after{
		background-size: 50%;
	}
	.style01_swiper .swiper-container-horizontal>.swiper-pagination-bullets,
	.style01_swiper.swiper-container-horizontal>.swiper-pagination-bullets{
	    width: 22%;
	    left: 50%;
		margin-left: -11%;
		bottom: 25px;
		max-width: 270px;
	}
	.style01_swiper .swiper-pagination-bullet,
	.style01_swiper.swiper-pagination-bullet {
	    width: 10% !important;
	    height: 2px !important;
	    border-radius: inherit !important;
	    margin: 0 !important;
	    border: 0 !important;
	    background: #a5a7a9;
	}
	.style01_swiper .swiper-pagination-bullet-active,
	.style01_swiper.swiper-pagination-bullet-active{
	    background: #000;
	}
	@media screen and (max-width: 950px){
		.style01_swiper .swiper-button-next:hover:after,
		.style01_swiper .swiper-button-prev:hover:after{
		    width: 50%;
		    height: 50%;
		}
	}
	@media screen and (max-width: 800px){
		.style01_swiper .swiperArrow {
		    width: 41%;
		    margin-left: -20.5%;
		}
	}
	@media screen and (max-width: 630px){
		.style01_swiper .swiper-container-horizontal>.swiper-pagination-bullets,
		.style01_swiper.swiper-container-horizontal>.swiper-pagination-bullets{
		    width: 52%;
			margin-left: -26%;
			max-width: inherit;
		}
		.style01_swiper .swiperArrow {
		    width: 71%;
		    margin-left: -35.5%;
		}
	}
	@media screen and (max-width: 450px){
		.style01_swiper .swiperArrow {
		    width: 80%;
		    margin-left: -40%;
		}
	}

/* 自動滿版youtube */
	.embed-container{
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
	}
	.embed-container iframe,
	.embed-container object,
	.embed-container embed{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

/* 頁籤 */
	.stickyBtn{
		padding-bottom: 0;
	    max-width: inherit;
	    background: rgba(217,220,222,0.9);
	    position: sticky;
	    z-index: 2;
	    /* top: 59px;
	    padding-top: 0; */
	    top: 0;
		/* margin-top: 59px; */
		padding-top: 59px;
	}
	.stickyBtn.pageContent:before{
		display: none;
	}
	.tab{
		width: 100%;
	    display: flex;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	margin-bottom: 5%;
	    /* padding-top: 2%; */
	    max-width: 1280px;
	    margin: 0 auto;
	}
	.tab li{
		flex: 1;
	}
	.tab li div{
		width: 95%;
		border-bottom: 2px solid #000;
		font-weight: bold;
		transition: all .5s;
	}
	.tab li div h4{
		display: inline;
		margin-left: 12px;
	}
	.tab li.active div{
		color: #FFF;
		border-bottom: 2px solid #633ac3;
		background: linear-gradient(to right, #c3118c, #633ac3 50%, #0064fc);
		transition: all .5s;
	}
	.tab li a div {
		color: #000;
		padding-bottom: 0;
		transition: all .5s;
	}
	.tab li a:hover div {
		color: #633ac3;
		border-bottom: 2px solid #633ac3;
		transition: all .5s;
	}
	.tab li.active a:hover div {
		color: #FFF;
	}
	.listMenu .modern-forms.mb1150,
	.modern-forms.mb1150{
		display: none;
	}
	@media screen and (max-width: 1150px){
		/* .stickyBtn{
			padding-top: 0;
			top: 59px;
		} */
		.tab{
		    padding-top: 5%;
		}
		.listMenu .pcListMenu.pc1151,
		.pcListMenu.pc1151{
			display: none;
		}
		.listMenu .modern-forms.mb1150,
		.modern-forms.mb1150{
			display: block;
			overflow: hidden;
		}
	}
	/* 手機版下拉選單 */
		.listMenu .modern-forms.mb1150 .mdn-select>select{
	        background: none;
    		border: 0;
		    border-bottom: 2px solid #633ac3;
		    padding: 2% 0;
   			outline:0px;
		}
		.listMenu .modern-forms.mb1150 select{
			font-weight: bold;
			border:0px;
   			outline:0px;
		}
		.listMenu .modern-forms.mb1150 .mdn-select:after {
		    content: ' ';
		    position: absolute;
		    pointer-events: none;
		    z-index: 76;
		    bottom: 16%;
    		right: 24px;

		    background: url('/images/all/modern-formSmdn-select.svg') no-repeat center;
		    background-size: 100%;
		    width: 20px;
		    height: 20px;
		}
		@media screen and (max-width: 1150px) {
		    .listMenu .modern-forms .mdn-select>select{
		        color: #633ac3;
		        width: 150%;
		    }
		    .listMenu .modern-forms .mdn-select>select option{
		        color: #000;
		    }
		}

/* 錨點 */
	.Anchor{
		position: absolute;
		top: -65px;
	}

/* 自定義ScrollBar */
	.ScrollBarContent {
	    max-width: 1200px;
	    height: 100%;
    	overflow: hidden;
	}
	.ScrollBarContent .demo {
	    /* border: 1px solid #CCC; */
	    overflow: hidden;
	    height: 100%;
	}
	.ScrollBarContent .demo .inner-content {
	    border: 1px solid #CCC;
	    max-height: 170px;
	    width: 600px;
	}
	.ScrollBarContent .demo > div {
	    height: 100%;
	    overflow: auto;
	}
	.ScrollBarContent .demo .scrollbarDiv{
	    padding: 20px;
	}
	/*************** SCROLLBAR BASE CSS ***************/
		.scroll-wrapper {
		    overflow: hidden !important;
		    padding: 0 !important;
		    position: relative;
		}
		.scroll-wrapper > .scroll-content {
		    border: none !important;
		    box-sizing: content-box !important;
		    height: auto;
		    left: 0;
		    margin: 0;
		    max-height: none;
		    max-width: none !important;
		    overflow: scroll !important;
		    padding: 0;
		    position: relative !important;
		    top: 0;
		    width: auto !important;
		}
		.scroll-wrapper > .scroll-content::-webkit-scrollbar {
		    height: 0;
		    width: 0;
		}
		.scroll-element {
		    display: none;
		}
		.scroll-element, .scroll-element div {
		    box-sizing: content-box;
		}
		.scroll-element.scroll-x.scroll-scrollx_visible,
		.scroll-element.scroll-y.scroll-scrolly_visible {
		    display: block;
		}
		.scroll-element .scroll-bar,
		.scroll-element .scroll-arrow {
		    cursor: default;
		}
		.scroll-textarea {
		    border: 1px solid #cccccc;
		    border-top-color: #999999;
		}
		.scroll-textarea > .scroll-content {
		    overflow: hidden !important;
		}
		.scroll-textarea > .scroll-content > textarea {
		    border: none !important;
		    box-sizing: border-box;
		    height: 100% !important;
		    margin: 0;
		    max-height: none !important;
		    max-width: none !important;
		    overflow: scroll !important;
		    outline: none;
		    padding: 2px;
		    position: relative !important;
		    top: 0;
		    width: 100% !important;
		}
		.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
		    height: 0;
		    width: 0;
		}
		 
		/*************** SCROLLBAR LIGHT ***************/
		 
		.scrollbar-light > .scroll-element,
		.scrollbar-light > .scroll-element div {
		    border: none;
		    margin: 0;
		    overflow: hidden;
		    padding: 0;
		    position: absolute;
		    z-index: 10;
		}
		.scrollbar-light > .scroll-element {
		    background-color: #ffffff;
		}
		.scrollbar-light > .scroll-element div {
		    display: block;
		    height: 100%;
		    left: 0;
		    top: 0;
		    width: 100%;
		}
		.scrollbar-light > .scroll-element .scroll-element_outer {
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		    border-radius: 10px;
		}
		.scrollbar-light > .scroll-element .scroll-element_size {
		    background: #dbdbdb;
		    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi
		    8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
		    VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
		    VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
		    Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
		    UiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
		    0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
		    c+);
		    background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
		    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#dbdbdb), color-stop(100%,#e8e8e8));
		    background: -webkit-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
		    background: -o-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
		    background: -ms-linear-gradient(left, #dbdbdb 0%,#e8e8e8 100%);
		    background: linear-gradient(to right, #dbdbdb 0%,#e8e8e8 100%);
		 
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		    border-radius: 10px;
		}
		.scrollbar-light > .scroll-element.scroll-x {
		    bottom: 0;
		    height: 17px;
		    left: 0;
		    min-width: 100%;
		    width: 100%;
		}
		.scrollbar-light > .scroll-element.scroll-y {
		    height: 100%;
		    min-height: 100%;
		    right: 0;
		    top: 0;
		    width: 17px;
		}
		.scrollbar-light > .scroll-element .scroll-bar {
		    background: #fefefe;
		    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi
		    8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2
		    VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaW
		    VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2
		    Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMC
		    UiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD
		    0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdm
		    c+);
		    background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
		    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fefefe), color-stop(100%,#f5f5f5));
		    background: -webkit-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
		    background: -o-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
		    background: -ms-linear-gradient(left, #fefefe 0%,#f5f5f5 100%);
		    background: linear-gradient(to right, #fefefe 0%,#f5f5f5 100%);
		 
		    border: 1px solid #dbdbdb;
		    -webkit-border-radius: 10px;
		    -moz-border-radius: 10px;
		    border-radius: 10px;
		}
		 
		/* scrollbar height/width & offset from container borders */
		 
		.scrollbar-light > .scroll-content.scroll-scrolly_visible { left: -17px; margin-left: 17px; }
		.scrollbar-light > .scroll-content.scroll-scrollx_visible { top:  -17px; margin-top:  17px; }
		 
		.scrollbar-light > .scroll-element.scroll-x .scroll-bar { height: 10px; min-width: 10px; top: 0px; }
		.scrollbar-light > .scroll-element.scroll-y .scroll-bar { left: 0px; min-height: 10px; width: 10px; }
		 
		.scrollbar-light > .scroll-element.scroll-x .scroll-element_outer { height: 12px; left: 2px; top: 2px; }
		.scrollbar-light > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
		 
		.scrollbar-light > .scroll-element.scroll-y .scroll-element_outer { left: 2px; top: 2px; width: 12px; }
		.scrollbar-light > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
		 
		/* update scrollbar offset if both scrolls are visible */
		 
		.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -19px; }
		.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -19px; }
		 
		.scrollbar-light > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -19px; }
		.scrollbar-light > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -19px; }


		/*style裡的css*/
		/*************** SIMPLE INNER SCROLLBAR ***************/
		    .scrollbar-inner > .scroll-element,
		    .scrollbar-inner > .scroll-element div
		    {
		        border: none;
		        margin: 0;
		        padding: 0;
		        position: absolute;
		        z-index: 10;
		    }
		    .scrollbar-inner > .scroll-element div {
		        display: block;
		        height: 100%;
		        left: 0;
		        top: 0;
		        width: 100%;
		    }
		    .scrollbar-inner > .scroll-element.scroll-x {
		        bottom: 2px;
		        height: 8px;
		        left: 0;
		        width: 100%;
		    }
		    .scrollbar-inner > .scroll-element.scroll-y {
		        height: 100%;
		        right: 2px;
		        top: 0;
		        width: 8px;
		    }
		    .scrollbar-inner > .scroll-element .scroll-element_outer {
		        overflow: hidden;
		    }
		    .scrollbar-inner > .scroll-element .scroll-element_outer,
		    .scrollbar-inner > .scroll-element .scroll-element_track,
		    .scrollbar-inner > .scroll-element .scroll-bar {
		        -webkit-border-radius: 8px;
		        -moz-border-radius: 8px;
		        border-radius: 8px;
		    }
		    .scrollbar-inner > .scroll-element .scroll-element_track,
		    .scrollbar-inner > .scroll-element .scroll-bar {
		        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
		        filter: alpha(opacity=40);
		        opacity: 1;
		    }
		    /* .scrollbar-inner > .scroll-element .scroll-element_track { background-color: #d9dcde; } */
		    .scrollbar-inner > .scroll-element .scroll-bar { /* background: linear-gradient(to right, #0064fc, #633ac3 50%, #c3118c); */background-image: linear-gradient(-60deg, #0064fc, #633ac3, #c3118c); }
		    .scrollbar-inner > .scroll-element:hover .scroll-bar { background-image: linear-gradient(-60deg, #0064fc, #633ac3, #c3118c); }
		    .scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-image: linear-gradient(-60deg, #0064fc, #633ac3, #c3118c); }

		    /* update scrollbar offset if both scrolls are visible */

		    .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
		    .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }

		    .scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
		    .scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }