@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{  font-family: 'Noto Sans TC',"Arial Unicode MS","微軟正黑體", "蘋果儷中黑","新細明體"; }

.bg_login { background-image: url('/files/image/bg_login.jpg');}
.page_login .full-container{
background-image: url('/files/image/bg_login.jpg');background-size: cover;background-repeat: no-repeat; background-position:bottom;
height: 100%;width: 100%;
position:absolute;
align-content: center;
}
.fc1{
background-image: linear-gradient(to bottom, rgba(255, 255,255, 0),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;
background-size: cover, cover; background-repeat: no-repeat ,no-repeat; background-position:bottom, top;
height: 768px;width: 100%;
align-content: center;
animation-name: fc1;	animation-duration:3s; animation-iteration-count:1;
}

@keyframes fc1 {
	0%{  	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .8),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	14%{  	background-image: linear-gradient(to bottom, rgba(50, 50, 50, .8),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	28%{  	background-image: linear-gradient(to bottom, rgba(80, 80, 80, .7),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	40%{  	background-image: linear-gradient(to bottom, rgba(110, 110, 110, .6),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	52%{  	background-image: linear-gradient(to bottom, rgba(140, 140, 140, .5),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	64%{  	background-image: linear-gradient(to bottom, rgba(170, 170, 170, .4),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	76%{  	background-image: linear-gradient(to bottom, rgba(200, 200, 200, .3),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	88%{  	background-image: linear-gradient(to bottom, rgba(230, 230, 230, .2),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ;}
	100%{	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 0)),url('/files/image/bg1.jpg') ; }
}
.fc2{
	background-color: rgba(96,89,80,.9);
	background-image: linear-gradient(to bottom, rgba(255, 255,255, 0),  rgba(255, 255, 255, 0)),url('/files/image/bg_cat.jpg') ;
	background-size: cover, cover; background-repeat: no-repeat ,no-repeat; background-position:right, top left;
	color:#fff;
}
.fc3{
	background-color: rgba(80,60,60,.8);
	background-image: linear-gradient(to bottom, rgba(255, 255,255, 0),  rgba(255, 255, 255, 0)),url('/files/image/bg3.png') ;
	background-size: cover, cover; background-repeat: no-repeat ,no-repeat; background-position:right, center;
	color:#fff;
}
.fc3 i {  background-image: url(/files/image/exit_fff.svg);    display: inline-block;    background-size: cover; width:14px; height:14px;margin-right:5px;}
.fc2 i {  background-image: url(/files/image/exit_fff.svg);    display: inline-block;    background-size: cover; width:10px; height:10px;margin-right:5px;}

/*.page_login*/
.page_login .card,.page_member .card{ height: 370px;margin-top: auto;margin-bottom: auto;width: 400px;background-color: rgba(0,0,0,0.5) !important;}
.page_login .social_icon{ position: absolute; right: 20px; top: -45px; }
.page_login .social_icon span{ font-size: 60px; margin-left: 10px; color: #FFC312;}
.page_login .social_icon span:hover{ color: white; cursor: pointer; }
.page_login input::placeholder { color:rgba(40,160,40,.6);}
.page_login input:focus::placeholder { color:rgba(40,160,40,1);}


.page_login .remember{color: white; }
.page_login .remember input { width: 20px; height: 20px; margin-left: 15px; margin-right: 5px;}

.card-header h3{color: white;}
.input-group-prepend span{ width: 50px;background-color: #364f4b;color: #fff;border:0 !important;}
input:focus{ outline: 0 0 0 0  !important; box-shadow: 0 0 0 0 !important;}

.navbar-nav .dropdown-menu { background-color: rgba(0,0,0,.8) !important;}
.dropdown-item { color: rgba(255,255,255,.5);}
.dropdown-item:hover{ color:rgba(255,255,255,.7); background-color:transparent;}

.login_btn{ color: #fff;background-color: #364f4b;width: 100px;}
.login_btn:hover{color: #364f4b;background-color: white;}


.links {color: white;}
.links a{margin-left: 4px;}

.share_icon {width: 60px; height: 60px; display: inline-block; background-size: cover; opacity: .4;}
.share_icon:hover {	animation-name: share_eff;	animation-duration:1.2s; animation-iteration-count:infinite;}

.icon_fb{background-image: url('../image/icon_fb_325x325.png');}
.icon_line{background-image: url('../image/icon_line_325x325.png');}
.icon_google{background-image: url('../image/icon_google_325x325.png');}


.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}


.bg-dark {background-color: rgba(0,0,0,.8) !important;}

/*header設定*/
header nav a{
	position: relative;
	text-decoration: none;
	color: #fff;
	padding: 1.2em 0.8em;
}
header nav .nav-underline:before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 0;
	border-bottom: 0px solid #999;			
	left: 0;
}
header nav .nav-underline:hover:before {
  width: 100%;
  border-bottom: 2px solid #999;
  
}
header nav .nav-underline:before {

	transition-property: width border-bottom;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
  
}
header nav .nav-underline-active,
header nav .nav-underline-active:hover {
	border-bottom: 2px solid #999;


}		
.dropdown-item {			/*padding: .25rem 5%;*/		}

.wrapper {padding-top:10px;}
.fc4{background-color: rgba(80,140,100,.4);}
.fc5{background-color: rgba(80,120,100,.4); color:#eee;}
.fc5_item_bg {background-color: rgba(0,0,0,.4);}
.fc5 p{ color:#eee;}
.fc5 a{ color:rgba(255,255,255,.8) !important; }
.fc5 a:hover{ color:rgba(160,40,40,.8) !important; }

footer{background-color: rgba(80,80,80,.4);}
.fc_rest{background-color: rgba(180,220,140,.4);}
.fc4 ul,.fc4 ul li {margin:0; padding:0;}
.fc4 a{ color:rgba(0,0,0,.8) !important;  }
.fc2 a{ color:rgba(255,255,255,.8) !important;  }
.fc3 a{ color:rgba(255,255,255,.8) !important;  }
.fc4 a:hover{ color:rgba(40,160,40,.8) !important;  }
.fc2 a:hover { color:rgba(40,160,40,.8) !important;  }
.fc3 a:hover { color:rgba(160,40,40,.8) !important;  }
footer a{color:rgba(0,0,0,.8) !important;}
footer a:hover {color:rgba(160,40,40,.8) !important; }
.row { /*   padding: 0;
		box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
		-webkit-box-shadow: 0px 5px 20px -20px rgb(133, 133, 133);
		-moz-box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
		-o-box-shadow: 0px 40px 20px -40px rgb(133, 133, 133);
		background: #ffffff;*/
}


@keyframes share_eff {
	0%{  	opacity: .6; }
	25%{	opacity: .7; }
	50%{	opacity: .8; }
	75%{	opacity: .9; }
	100%{	opacity: .9; }
}

@keyframes share_eff {
	0%{  	opacity: .9; }
	50%{	opacity: .8; }
	100%{	opacity: .9; }
}

@keyframes eff_opacity10 {
	0%{  	opacity: .0; }
	100%{	opacity: 1; }
}


.popover {
	background-color: rgba(0,0,0,0.8) !important;
}
.icon_x32{  
	display: inline-block;
    width: 32px;
    height: 32px;
	
}
/* 不支援的狀況 */
.icon_face_hypnotized {	background-image: url(/files/image/face/hypnotized_fff.svg); }
.icon_face_smile2 {		background-image: url(/files/image/face/smile2_fff.svg);	 }
.icon_face_shy {		background-image: url(/files/image/face/shy_fff.svg);	 }
.icon_face_idea {		background-image: url(/files/image/idea_fff.svg);	 }

/* 支援mask */
/*
.icon_face_hypnotized {	mask: url(/files/image/face/hypnotized.svg); 	-webkit-mask: url(/files/image/face/hypnotized.svg); }
.icon_face_kiss {		mask: url(/files/image/face/kiss.svg); 		 	-webkit-mask: url(/files/image/face/kiss.svg);}
.icon_face_shy {		mask: url(/files/image/face/shy.svg);  			-webkit-mask: url(/files/image/face/shy.svg);}
.icon_face_wink2 {		mask: url(/files/image/face/wink2.svg); 		-webkit-mask: url(/files/image/face/wink2.svg); }
.icon_face_smile {		mask: url(/files/image/face/smile.svg);  		-webkit-mask: url(/files/image/face/smile.svg);}
.icon_face_smile2 {		mask: url(/files/image/face/smile2.svg);		-webkit-mask: url(/files/image/face/smile2.svg); }
.icon_idea {			mask: url(/files/image/idea.svg); 				-webkit-mask: url(/files/image/idea.svg);}

.bgc_fff { background-color:#fff;}
*/