@font-face {
    font-family: Fselliotpro;
    src: url(../fonts/FSElliotPro-Heavy.woff) format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'FSElliotPro';
  src: url(../fonts/FSElliotPro-Bold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'FSElliotPro';
  src: url(../fonts/FSElliotPro.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
    font-family: FSElliotPro;
    src: url(../fonts/FSElliotPro-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
  font-family: 'FSElliotPro';
  src: url(../fonts/FSElliotPro-Thin.woff) format('woff');
  font-weight: 100;
  font-style: normal;
}

:root {
	--main-header-height: 47vw;
	--bs-link-color: #0F2741;
	--bs-primary: #0F2741;
	--bs-primary-rgb: 15,39,65;
	--bs-body-bg: #273852;
	--bs-btn-app: #0F2741;
	--interactive-active-bg: #fff;
	--bs-font-sans-serif: FSElliotPro, FSElliot, Arial, "Heiti TC", "Heiti SC", JhengHeiFix, "微軟正黑體", "微软雅黑", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}
@media (min-width: 1200px) {
	:root {
		--main-header-height: 24vw;
	}
}
.placeholder-color::placeholder {
  color: var(--placeholder-color);
  opacity: 1;
}
.placeholder-color::-ms-input-placeholder {
  color: var(--placeholder-color);
}
a, a:hover {
  text-decoration: none;
}
#wrapper-main {
	--w: 2500;
	--h: 5500;
}
@media (min-width: 1200px) {
	#wrapper-main {
		--w: 2500;
		--h: 1280;
	}
}
.with-bg {
  	background-image: url('../images/app/bg_login_mobile.jpg');
	background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
}
@media (min-width: 1200px) {
	.with-bg {
	    background-image: url('../images/app/bg_login_desktop.jpg');
	}
}
.login-side {
	background: rgba(255, 255, 255, 0.8);
}

.h-full-aspect {
	/*min-height: 100vh;*/
    min-height: calc(100vw * var(--h) / var(--w));
}
@media (min-width: 1200px) {
	.h-full-aspect {
	    min-height: calc(100vw * var(--h) / var(--w));
	}
}

.placeholder-login::placeholder {
	color: var(--bs-primary);
	text-align: center;
}

.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: #0F2741;
	--bs-btn-border-color: #0F2741;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #153d67;
	--bs-btn-hover-border-color: #153d67;
	--bs-btn-focus-shadow-rgb: 49,132,253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #153d67;
	--bs-btn-active-border-color: #153d67;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #0F2741;
	--bs-btn-disabled-border-color: #0F2741;

	box-shadow: 1px 1px 2px rgb(255 255 255 / 10%);
}
.form-check-input:checked {
	background-color: #0F2741;
	border-color: #0F2741;
}
.main-header {
	min-height: var(--main-header-height);
	background-position: top 10% left;
	background-size: cover;	
}

.main-body {
	min-height: calc(100vh - var(--main-header-height));
	background-position: top left;
	background-size: cover;	
	transition: all 1s;
}
.main-body .mobile-overlay {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: 220%;
	background-position: left top;
}
.login-side {
	/*background: rgb(178 214 212 / 92%);*/
}

.show-invalid-feedback .invalid-feedback {
	display: block;
}

.split-bar {
	display: block;
	width: 100%;
	height: 20px;
	background: #50bcb8;
}
.bg-app-gradient {
	/*background: #51b9bf;*/
	/*background: linear-gradient(90deg, #51b9bf 20%, #7dc5b6 100%);*/
	background: #0F2741;

}
.bg-interactive-active {
	background: var(--interactive-active-bg);
}
.btn-interactive-tab {
	border: 0;
	color: #fff;
}
.btn-interactive-tab.active,
.btn-interactive-tab:hover,
.btn-interactive-tab:focus,
.btn-interactive-tab:active {
	background: #5ccbd2;
	color: #fff;
}
.btn-reaction {
	width: 35px;
}
@media (min-width: 992px) {
	.btn-reaction {
		width: 45px;
	}
}
.btn-reaction {
	transition: transform .25s ease-in-out;
	-webkit-transition: transform .25s ease-in-out;
}
.btn-reaction:hover:focus,
.btn-reaction:focus {
	transform: scale3d(1, 1, 1);
	-webkit-transform: scale3d(1, 1, 1);
}
.btn-reaction:hover {
	transform: scale3d(1.2, 1.2, 1.2);
	-webkit-transform: scale3d(1.2, 1.2, 1.2);
}

.reaction-floating {
	position: absolute;
	width: 3vw;
}
@media (min-width: 992px) {
	.reaction-floating {
		width: 1.5vw;
	}
}
.interactive-tab-height {
	--interactive-tab-height-deduct: 0;
	min-height: 330px;
	height: calc(var(--interactive-tab-height) - var(--interactive-tab-height-deduct));
}
@media (min-width: 992px) {
	.interactive-tab-height {
		min-height: 0;
	}
}

.qna-active {
	display: block;
	width: 5px; 
	height: 5px;
	background: red;
	border-radius: 50%;
}


/*YOUR CUSTOM STYLES*/

.float_right{
	float: right !important;
}
.loadmore_content{
	 display:inline-block;
		height:110px;
		overflow:hidden !important;
	    text-overflow: ellipsis;
	}
.loadmore_btn{
	display: block;
}

.radiusBorder{
	-webkit-border-radius: 3px !important;
	border-radius: 3px !important;
	
}
.loginBox{
	background: #f9f9f9;
	padding: 15px;
	border: #e2e2e2 1px solid;
	-webkit-border-radius:3px;
	border-radius: 3px;
	
}
.registerBox input{
	-webkit-border-radius: 3px !important;
	border-radius: 3px !important;
}
.registerBox{
	background: #f9f9f9;
	padding: 15px;
	border: #e2e2e2 1px solid;
	-webkit-border-radius:3px;
	border-radius: 3px;
}

@media (min-width: 992px) {
    .loadmore_content{
	 	height:auto;
	}
	.loadmore_btn{
		display: none;
	}
}

.iconBg{
	color: #e3e3e3 !important;
	font-size: 150px !important;
	width: 100%;
	height: 100%;
	line-height: 200px;
	text-align: center;
	vertical-align: middle;
}
.iconBg2{
	color: #e3e3e3 !important;
	font-size: 150px !important;
	width: 100%;
	height: 100%;
	line-height: 200px;
	text-align: center;
	vertical-align: middle;
}
@media (min-width:992px) {
	.iconBg{
		line-height: 272px;
	}
	.iconBg2{
		line-height: 360px;
	}
  	
}
@media (min-width: 1200px) {
	.iconBg{
		line-height: 350px;
	}
	.iconBg2{
		line-height: 460px;
	}
}

#social-stat-container{
    width:100%;
    max-width: 340px;
}
.social-block{
    width:25%;
    float:left;
}
.social-icon{
    width:25px;
    height:25px;
    display: inline-block;
    float: left;
    margin-left: 10px;
    cursor: pointer;
}
.like-icon{
    background-image:url('../images/icon/like.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
    
}
.love-icon{
    background-image:url('../images/icon/love.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
}
.excited-icon{
    background-image:url('../images/icon/excited.png');
    background-repeat:no-repeat;
    background-size: 100% 100%;
}
.count-text{
    font-size: 16px;
    display: inline-block;
    height: 25px;
    float: left;
    line-height: 25px;
    margin-left: 10px;
}
.clear{
    clear:both;
    float:none;
}