@import url(css_icons.css);

html{background: #1d1921 url(../images/main_bg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; min-height: 100vh; padding:0; margin:0; overflow-x: hidden; font-size: 16px;}
body{background:  none; background-color: transparent; font-size:  1rem; line-height: 1.85rem; padding:0; padding-top: 40px; margin:0; overflow-x: hidden;
	font-family: "Microsoft JhengHei","微軟正黑體","Microsoft YaHei","微软雅黑体",PMingLiU,"新細明體",'宋体', simsun,Helvetica, Arial,sans-serif; letter-spacing:0;
}
html[lang=en-GB] body{font-family: Helvetica, Arial, "Microsoft JhengHei","微軟正黑體","Microsoft YaHei","微软雅黑体",PMingLiU,"新細明體",'宋体', simsun, sans-serif; font-size: 14px}

a, a>img, .btn, button, .trans-effect, .hover-effect,  .trans-effect a, .hover-effect a, .trans-effect img, .hover-effect img{
 transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}

a{color: inherit;} 
a,a:focus, a:hover{text-decoration: none;}

svg, .svg-file{max-width: 100%; max-height: 100%;}
svg path{fill: currentColor;}
.btn .icon{font-size: 1.25em; vertical-align:text-bottom;}

/*HEADER*/
#header{color:#FFF; background-color: rgba(0,0,0,0.35); position: fixed; top:0; right:0; left:0; z-index: 3;}
#header a, #header button{color:inherit;}
#header a:hover, #header a:focus, #header a:hover, #header button:hover, #header button:focus, #header button:hover{color:#ffe500; }
#header .navbar { padding:0; }
#header .navbar a, #header .navbar button{padding: 0.25em; margin-left: 1rem}
#header .navbar svg{ margin-right: 0.25em;}
#header .row{justify-content: flex-end;}

/*MAIN*/
.library-main{display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 86vh; padding-top: 20px; padding-bottom: 60px;}
.library-main a, .library-main .navbar a{outline: none;}
.library-logo{margin-bottom: 1rem;}
.library-logo .org-name{display:flex; justify-content: center; color:#FFF;}
.org-name .org-logo{max-height: 80px; margin-right: 0.5rem}
.org-name h1{ text-align: justify; text-align-last: justify; margin-bottom: 0;}
.org-name h1 span{display:block;font-size: 0.5em; margin-top: 2px;}
.library-logo .library-title{text-align: center; color:#FFFFFF; margin: 1rem auto; margin: 1rem auto 2rem; padding-top: 1rem; position: relative;}
.library-logo .library-title:before{ content: ""; display:inline-block; width: 80%; max-width: 400px; height: 1px; background-color: #FFFFFF; position: absolute; top:0; left:0; right:0; margin: 0 auto;}
.library-logo .library-title img, .library-logo .library-title svg{max-width: 100%;}

.library-ui-buttons{display:flex; justify-content: space-between;}

.btn-cislibrary{
	font-size: 1.5rem;
	background-color: rgba(54,46,43,0.50);
	border: 3px solid #CCC;
	border-radius: 50%;
	width: 240px;
	height: 240px; position: relative;
	display:flex; flex-direction: column;
	align-items: center;
	justify-content: center;
	color:#FFF;
	padding: 0; margin-bottom: 2rem;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-touch-callout: none; /* iOS Safari */
 -webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* Internet Explorer/Edge */
 user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.btn-cislibrary>img{max-width: 100%;}
.btn-cislibrary>img, .btn-cislibrary>svg, .btn-cislibrary>span{position: relative; z-index: 1;}

.btn-cislibrary:hover, .btn-cislibrary:focus, .btn-cislibrary:active{
	background-color: rgba(255,255,255,1);
	border-color:#FFFFFF;
	color:#ff5722;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.btn-cislibrary:before, .btn-cislibrary:after {
	position: absolute;
	top: 0; left: 0; z-index: 0;
	/*margin: -25% 0 0 -25%;*/
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 0 0 10px #FFF;
}

.btn-cislibrary:hover:before, .btn-cislibrary:focus:before, .btn-cislibrary:active:before {
	-webkit-animation: anim-ripple-1 1s  forwards; /*infinite*/
	animation: anim-ripple-1 1s forwards;
}

.btn-cislibrary:hover:after, .btn-cislibrary:focus:after, .btn-cislibrary:active:after {
	-webkit-animation: anim-ripple-2 1s forwards;
	animation: anim-ripple-2 1s forwards;
}

.btn-cislibrary svg{max-width: 50%; max-height: 50%;}
.btn-cislibrary .title-text{ padding-top: 0.5rem;}
.btn-cislibrary .title-text span{display: block; text-align: center}
.btn-cislibrary .title-text span:lang(en){font-size: 0.9em}
.btn-cislibrary .title-text span:lang(zh){font-size: 1em; text-align-last: justify}

.library-panel{background-color: #FFF; padding: 20px; border-radius: 8px; max-width: 100%; margin: auto;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);}

.library-panel-sm{ max-width: 768px;}
.library-panel-xs{ max-width: 320px;}

.library-panel h1, .library-panel h2, .library-panel h3, .library-panel h4,.library-panel h5, .library-panel h6{ /*color:#687686;*/ /*color:#141f2b;*/ color:#866871; }

.panel-title{background: #554944 url(../images/title_bg.jpg) no-repeat center; background-size: cover; color:#FFF;margin: -20px; margin-bottom: 1em; border-radius: 8px 8px 0 0 ; overflow: hidden; position: relative;display: flex; align-items: flex-end; justify-content: stretch; }
.panel-title-large{min-height: 300px;}
.panel-title h1, .panel-title h2, .panel-title h3, .panel-title h4, .panel-title h5, .panel-title h6, .panel-title p{ color:inherit; margin-bottom: 0;}

.panel-title .title-text{ flex-grow: 1; padding: 1rem; text-align: center;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 );
}

.library-panel .btn{ border-radius: 2rem; }
.library-panel .btn-lg{padding: 0.5rem 2rem;}

.flow-wrapper{ margin: 20px 0;}
.flow-title{font-size: 1.5em;}
.stepguide{display:flex; justify-content: center; align-items: center; flex-wrap: nowrap; margin-top: 10px;}
.stepguide>*{flex-grow: 1; flex-shrink: 1;}
.stepguide .step{font-size: 1.25em; line-height: 1em; font-weight: bold; color:#666;display:block;}
.stepguide{ counter-reset: item-counter; padding-left: 0;  }
.stepguide>*{position:relative; list-style: none; counter-increment: item-counter; padding:5px 32px 5px 60px; background-color: #CCC; color:#333; margin-right: 10px; border-radius: 34px 0 0 34px;}
.stepguide>*:before {
	content: counter(item-counter); font-size: 24px; line-height: 32px; text-align: center;
	display: block; width: 2em; height: 2em; border: 6px #ccc double; background-color: #FFF; border-radius: 50%;
	position: absolute; top:5px; left:5px;
	font-weight: bold;
}
.stepguide>*.active{background-color: #9ad853;}
.stepguide>*.active .step{color:#333;}
.stepguide>*.active:before{background-color: #FFF ; border-color: #9ad853; color:#6fb71c;}

.stepguide>*:after{
	content: ""; display:block; z-index: 1;
	position: absolute;
height: 0;
    width: 0;
    border-top: 30px solid #FFF;
    border-bottom: 30px solid #FFF;
    border-left: 18px solid transparent;
    top: 0;
    right: 0;
}
.stepguide>*:last-child{padding-right: 10px; border-radius: 34px;}
.stepguide>*:last-child:after{
	display:none;
}
.panel-button-group{display:flex; justify-content: space-between;}


#login{}
#login h1, #login h2{text-align: center}


#login h1{ width: 140px; height: 140px; border: 2px solid currentColor; border-radius: 50%; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }

#login h1 svg{height: 96px;}

/*FOOTER*/
#footer {	font-size: 0.8rem; color: #FFF; text-align: center; padding: 3px 10px; }
#footer a { color: inherit; }
#footer a:hover, #footer a:focus, #footer a:hover{color: inherit; }
.system-by img{vertical-align: baseline;}

.model-custom{position: fixed; top:0; right:0; bottom:0; left:0; opacity: 1;z-index: 3; z-index: 9999 !important; display: flex; align-items: center; justify-content: center;}
.model-custom.m-on{z-index: 9999 !important; opacity: 1;}
.model-custom.m-off{z-index: -9999 !important; opacity: 0;}
.model-custom .pre-model{position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(0,0,0,0.5); opacity: 0; z-index: -1;
	transition:0.5s opacity;
	-webkit-transition:0.5s opacity;
	-moz-transition:0.5s opacity;
	-o-transition:0.5s opacity;
	-ms-transition:0.5s opacity;
}
.model-custom.m-on .pre-model{z-index: 1;opacity:1;}
.model-custom .inbox{width: 100%; height: auto; position: relative; z-index: 2; overflow: hidden; background-color: #FFF; border-radius: 8px; max-width: 100%;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5);
}
.model-custom-header{padding: 10px 20px; font-size: 1.5em; color:#888;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
.model-custom .btn-close{width: 36px; height: 36px; font-size: 1.5em; line-height: 0; background: #FFF; position: absolute; right:10px; top:7px; color:#BBB; border: 2px #BBB solid; border-radius: 50%; cursor: pointer; display:flex; align-items: center; justify-content: center;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.model-custom .btn-close:hover{color:#666; border-color: #666;}
.model-custom-body{height:auto; /*max-height: 90%;*/ overflow-y: auto; padding: 20px;}

.ieblock{position: fixed; top:0; right:0; bottom:0; left:0; z-index: 99999; background-color: #343a40; color:#FFFFFF }
.ieblock .message-box{font-size: 18px; color:#FFFFFF; width: 720px; height: 400px; position: absolute; top:0; right:0; bottom:0; left:0; margin: auto}


/*#helpModel{max-width: 400px;}*/

/*ANIMEATION*/
@-webkit-keyframes anim-ripple-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes anim-ripple-1 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
}

@-webkit-keyframes anim-ripple-2 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	50%, 100% {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}

@keyframes anim-ripple-2 {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(0.5, 0.5, 1);
		transform: scale3d(0.5, 0.5, 1);
	}
	50%, 100% {
		opacity: 0;
		-webkit-transform: scale3d(1.2, 1.2, 1);
		transform: scale3d(1.2, 1.2, 1);
	}
}


/*PRELOADER*/
#preloader{
	background:#1d1921;
	/*height: 100%;
	width: 100%;*/
	position: fixed;
	z-index: 9999;
	margin: 0;
	top: 0; right:0; bottom:0; left:0;
}
#preloader-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#preloader-center-absolute {
	position: absolute;
	top: 0; right:0; bottom:0; left: 0; margin: auto;
	height: 32px; width:185px;
	display:flex; align-items: center;
}
#preloader .chip{
	width: 32px;
	border-radius: 50%;
	height: 32px;
	margin-right:5px;
	background-color: #FFF;
	-ms-transform: scale(0); 
   	-webkit-transform: scale(0);
    transform: scale(0);
	opacity: 0;
	-webkit-animation: loader-animate 1s infinite;
	animation: loader-animate 1s infinite;
	/*float: left;*/
	}

#preloader .chip.ch10 {
	margin-right: 0px;
	}

#preloader .chip.ch10{
	-webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;	
	}
#preloader .chip.ch9{
	-webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;	
	}	
#preloader .chip.ch8{
	-webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;	
	}
#preloader .chip.ch7{
	-webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;	
	}
#preloader .chip.ch6{
	-webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;	
	}
#preloader .chip.ch5{
	-webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
	}
#preloader .chip.ch4{
	-webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;		
	}
#preloader .chip.ch3{
	-webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;	
	}
#preloader .chip.ch2{
	-webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
	}						


@-webkit-keyframes loader-animate {
  50% {
	-ms-transform: scale(1); 
   	-webkit-transform: scale(1);
    transform: scale(1);
			opacity:.9;
	  /*height: 64px;
	  border-radius: 8px;*/
	  }
}

@keyframes loader-animate {
  50% {
	-ms-transform: scale(1); 
   	-webkit-transform: scale(1);
    transform: scale(1);
			opacity:.9;
	  /*height: 64px;
	  border-radius: 8px;*/
	  }
}


/*RESPONSIVE*/
@media (max-width: 1440px){ 
}

@media (min-width: 1281px){
}

@media (max-width: 1280px){ /*bootstrap xl*/
}

@media (max-width:1199px){
	/*.btn-cislibrary{width: 200px; height: 200px;}*/
}

@media (max-width: 1080px){
	.btn-cislibrary{ width: 200px; height: 200px;}
}

@media (max-width: 992px){ /*bootstrap lg*/
	.library-ui-buttons{flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 800px){ /*desktops min*/
}

@media (max-width: 768px){
	.library-main{padding-bottom: 0;}	
	.btn-cislibrary{ width: 180px; height: 180px;}
	.btn-cislibrary svg{width: 68px; height: 68px;}
}
@media (max-width: 767px){
	.stepguide{flex-direction: column; align-items: center; }
	.stepguide>*{margin-bottom: 30px; border-radius: 32px; min-width: 70%; margin-right: 0;}
	.stepguide>*:after{
	content: ""; display:block; z-index: 1;
	position: absolute;
height: 0;
    width: 0;
    border-top: 20px solid #CCC;
				border-bottom: 0 solid transparent;
    border-left: 30px solid #FFF;
				border-right: 30px solid #FFF;
    bottom: -20px;
    left:0; right: 0; margin: auto auto 0;
}
	.stepguide>*.active:after{ border-top: 20px solid #9ad853;}
	
}

@media (max-width: 736px){ /*iPhone 8+ landscape*/
}

@media (max-width: 667px){ /*iPhone 8 landscape*/
}

@media (max-width: 568px){ /*iPhone 5 landscape*/ 
}

@media (max-width: 480px){ /*Android*/
	.library-ui-buttons>*{max-width: 140px;}
	.btn-cislibrary svg{width: 48px; height: 48px;}
	.btn-cislibrary{height: 140px;}
	.panel-title-large{min-height: 200px;}
	.stepguide>*{min-width: 90%;}
}

@media (max-width: 414px){ /*iPhone 8+*/
}

@media (max-width: 375px){ /*iPhone 8*/
	.btn-cislibrary svg{width: 48px; height: 48px;}
}

@media (max-width: 320px){ /*iPhone 5*/
	html{font-size: 14px;}
	.stepguide>*:before{top:2px;}
	.panel-title-large{min-height: 0;}
	.library-panel .btn-lg{padding: 0.5rem 1rem;}
	
}