@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;600;700&display=swap');

.ad100{animation-delay:100ms}
.ad200{animation-delay:200ms}
.ad300{animation-delay:300ms}
.ad400{animation-delay:400ms}
.ad500{animation-delay:500ms}
.ad600{animation-delay:600ms}
.ad700{animation-delay:700ms}
.ad800{animation-delay:800ms}
.ad900{animation-delay:900ms}
.ad1000{animation-delay:1000ms}
.ad1100{animation-delay:1100ms}
.ad1200{animation-delay:1200ms}
.ad1300{animation-delay:1300ms}
.ad1400{animation-delay:1400ms}
.ad1500{animation-delay:1500ms}
.ad1600{animation-delay:1600ms}
.ad1700{animation-delay:1700ms}
.ad1800{animation-delay:1800ms}
.ad1900{animation-delay:1900ms}
.ad2000{animation-delay:2000ms}
.ad2100{animation-delay:2100ms}
.ad2200{animation-delay:2200ms}
.ad2300{animation-delay:2300ms}
.ad2400{animation-delay:2400ms}
.ad2500{animation-delay:2500ms}
.ad2600{animation-delay:2600ms}
.ad2700{animation-delay:2700ms}
.ad2800{animation-delay:2800ms}
.ad2900{animation-delay:2900ms}
.ad3000{animation-delay:3000ms}
.ad3100{animation-delay:3100ms}
.ad3200{animation-delay:3200ms}
.ad3300{animation-delay:3300ms}
.ad3400{animation-delay:3400ms}
.ad3500{animation-delay:3500ms}
.ad3600{animation-delay:3600ms}
.ad3700{animation-delay:3700ms}
.ad3800{animation-delay:3800ms}
.ad3900{animation-delay:3900ms}
.ad4000{animation-delay:4000ms}
.ad4100{animation-delay:4100ms}
.ad4200{animation-delay:4200ms}
.ad4300{animation-delay:4300ms}
.ad4400{animation-delay:4400ms}
.ad4500{animation-delay:4500ms}
.ad4600{animation-delay:4600ms}
.ad4700{animation-delay:4700ms}
.ad4800{animation-delay:4800ms}
.ad4900{animation-delay:4900ms}
.ad5000{animation-delay:5000ms}

.animaetd.ad100,
.animaetd.ad200,
.animaetd.ad300,
.animaetd.ad400,
.animaetd.ad500,
.animaetd.ad600,
.animaetd.ad700,
.animaetd.ad800,
.animaetd.ad900,
.animaetd.ad1000,
.animaetd.ad1100,
.animaetd.ad1200,
.animaetd.ad1300,
.animaetd.ad1400,
.animaetd.ad1500,
.animaetd.ad1600,
.animaetd.ad1700,
.animaetd.ad1800,
.animaetd.ad1900,
.animaetd.ad2000,
.animaetd.ad2100,
.animaetd.ad2200,
.animaetd.ad2300,
.animaetd.ad2400,
.animaetd.ad2500,
.animaetd.ad2600,
.animaetd.ad2700,
.animaetd.ad2800,
.animaetd.ad2900,
.animaetd.ad3000,
.animaetd.ad3100,
.animaetd.ad3200,
.animaetd.ad3300,
.animaetd.ad3400,
.animaetd.ad3500,
.animaetd.ad3600,
.animaetd.ad3700,
.animaetd.ad3800,
.animaetd.ad3900,
.animaetd.ad4000,
.animaetd.ad4100,
.animaetd.ad4200,
.animaetd.ad4300,
.animaetd.ad4400,
.animaetd.ad4500,
.animaetd.ad4600,
.animaetd.ad4700,
.animaetd.ad4800,
.animaetd.ad4900,
.animaetd.ad5000
{	 -webkit-animation-fill-mode: backwards;    animation-fill-mode: backwards;}

body {
	background-image: url('../images/home_cover_bg.png');
	background-repeat: no-repeat;
    background-size: contain;
	background-position: top;
	background-color: #1A1919;
	font-family: 'Lexend Deca', sans-serif;
	color: #FFF;
}

body.lang_tc {
	font-family: 'Noto Sans TC', sans-serif;
}

a {
	text-decoration: none;
	color: #FFF;
}

a:hover {
	opacity: .8
}

.noselect, .noselect * {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.dnone {
	display: none;
}

.row {
    margin: 0px;
}
.navbar-toggler:focus{
	box-shadow: none;
}
button.navbar-toggler {
    border: none;
}

.nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show, .nav-link:focus, .nav-link:hover {
    text-align: center;
	color: #FFF;
	font-weight: 600;
	transition: .3s all;
}


.cover_highlight {
	color: #FCDF16;
	padding: 0px 6px;
    background: #3D3C32;
    border-radius: 6px;
    display: inline-flex;
	margin: 2px;
}

.home_featurebox {
	background: #1A1919;
	border: 1px solid #707070;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
	transition: all .5s;
}

.home_featurebox path {
	transition: all .5s;
}

.home_featurebox > h4 {
	color: #FFF;
	
	position: relative;
}
.home_featurebox > p {
	color: #9B927E;
	position: relative;
}

.home_featurebox_deco {
    position: absolute;
    right: -10%;
    top: 50%;
    transform: translateY(-50%);
	width: 35%;
}

.home_featurebox_deco_2 {
    right: -20%;
    width: 50%;
}

.home_featurebox_deco_4 {
    right: -40%;
    top: 60%;
    width: 70%;
}
.home_featurebox_deco_5 {
    right: -27%;
    width: 60%;
}
/*
.home_featurebox_deco_6 {
    right: 0%;
    top: 63%;
    width: 40%;
}
*/
.home_featurebox_deco_6 {
    right: -20%;
    top: 62%;
    width: 45%;
}

.home_featurebox_deco > svg {
	max-width: 100%;
}

.home_featurebox.highlight {
	background: #FCDF16;
	border: 1px solid #FCDF16;
}



.home_featurebox.highlight path {
	fill: #f5ce0e;
}

.home_featurebox.highlight > h4, .home_featurebox.highlight > p {
	color: #1A1919;
}



.ai_power {
	background-image: url('../images/home_grid_bg.png');
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
}

.home_ai_featurebox {
	border: 1px solid #707070;
	border-radius: 25px;
	position: relative;
	overflow: hidden;
	background: #1A1919;
	max-height: 380px;
	transition: .5s all;
}

.home_ai_featurebox.highlight {
	background: #f5ce0e;
	border: 1px solid #f5ce0e;
	color: #1A1919;
}

.home_ai_featurebox_content {
	position: absolute;
	bottom:0px;
}


.home_ai_featurebox_deco {
    position: absolute;
	text-align: center;
}
.home_ai_featurebox_deco_1 {
    left: 50%;
    top: -5%;
    transform: translateX(-50%);
	width: 110%;
}
.home_ai_featurebox_deco_2 {
	left: 35%;
    top: -20%;
    transform: translateX(-50%);
	width: 110%;
}
.home_ai_featurebox_deco_3 {
    left: 35%;
    top: -20%;
    transform: translateX(-50%);
    width: 100%;
}
.home_ai_featurebox_deco_4 {
    left: 27%;
    top: -10%;
    transform: translateX(-50%);
    width: 155%;
}

.home_ai_featurebox_deco > svg {
	max-width: 100%;
}

.home_ai_featurebox_min_height {
	padding-top:170%
}

footer {
	background-image: url('../images/home_cover_bg.png');
	background-repeat: no-repeat;
    background-size: cover;
	background-position: top;
}

.subscription_card {
	color: #1A1919;
	border-radius: 25px;
	overflow: hidden;
	position: relative;
}

.subscription_form {
	background: #FBF9EB;
	color: #1A1919;
	border-radius: 25px;
	overflow: hidden;
	position: relative;
}


.subscription_card_content > img, .subscription_card_header > img, .subscription_form > img {
	mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
	opacity: .5;
	z-index:0;
	width: 100%;
    height: 100%;
	object-fit: cover;
}

.subscription_card_header {
	background: linear-gradient(45deg,#FCDF16, #FFC02E);
	overflow: hidden;
}

.subscription_card_content, .subscription_form {
	background: #FBF9EB;
	overflow: hidden;
}

.subscription_card_content {
	height: 100%;
}

.subscription_form_container {
	position: relative;
	z-index: 1;
}

#subscriptionForm input {
    border: none;
    background: rgb(193 189 164 / 50%);
    width: 100%;
    border-radius: 8px;
    padding: 10px;
	outline: none;
	transition: all .3s;
}

#subscriptionForm input.error {
    background: #f0c4c4;
}

#subscriptionForm input:focus {
    background: rgb(193 189 164 / 100%);
}

#subscriptionForm label {
    color: #F00;
    font-size: 14px;
}

.submit_button {
    background: #FCDF16;
    border-radius: 100px;
    padding: 20px 20px 20px 25px;
	transition: all .3s;
	cursor: pointer;
}

.success_icon {
    background: #FCDF16;
    border-radius: 100px;
    padding: 25px 20px;
	transition: all .3s;
	width: fit-content;
    margin: auto;
}

.mw-1320 {
	max-width: 1320px;
	margin: auto;
}

.submit_button:hover {
	background: #FFC02E;
}

.home_cover_title > svg {
	max-width: 100%;
    height: auto;
}

#Path_1046 {
    animation: home_cover_title_effect_1 3s infinite;
    transform-origin: 7% 7%;
}

#Group_67 {
    animation: home_cover_title_effect_2 3s infinite;
    transform-origin: 7% 7%;
}

@keyframes home_cover_title_effect_1 {
  0% {
      transform: rotate(0deg) scale(0);
  }
  60% {
      transform: rotate(360deg) scale(1);
  }
  80% {
      transform: rotate(360deg) scale(1);
  }
  100% {
      transform: rotate(360deg) scale(0);
  }
}

@keyframes home_cover_title_effect_2 {
  0% {
      opacity:0;
  }
  40% {
      opacity:1;
  }
  80% {
      opacity:1;
  }
  100% {
      opacity:0;
  }
}

.home_cover_deco > svg {
	max-width: 100%;
    height: auto;
}


#Group_141 {
    animation: home_cover_deco_1 1.5s infinite;
}

@keyframes home_cover_deco_1 {
  0% {
      transform: translateY(20%);
      opacity: 0;
  }
  60% {
      transform: translateY(0%);
      opacity: 1;
  }
  80% {
      transform: translateY(0%);
      opacity: 1;
  }
  100% {
      transform: translateY(-10%);
      opacity: 0;
  }
}


.navbar-brand img {
	height: 60px;
}

.floating_tabs {
	background-image: url('../images/Floating_bg.png');
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 70px;
	height: 184px;
	z-index: 100;
}
.floating_tab {
	position: relative;
	width: 90%;
    left: 10%;
	height: 80%;
	top:10%;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: space-evenly;
	color: #1A1919;
	font-weight: bold;
}

.floating_tab > div {
	cursor: pointer;
}

.faq_question {
	background: #1A1919;
	color: #FFF;
	border: 1px solid #707070;
	border-radius: 25px;
	cursor: pointer;
	transition: .3s all;
}

.faq_question.open, .faq_question:hover {
	background: #FCDF16;
	color: #1A1919;
	border: 1px solid #707070;
}

.faq_question .icon_question {
	height: 30px;
	margin-right: 10px;
}
.faq_question #Path_1255 {
	transition: .3s all;
}
.faq_question.open #Path_1255, .faq_question:hover #Path_1255 {
	fill: #373737;
}

.faq_answer {
	max-height: 0px;
	overflow: hidden;
	background: #FFFFFF;
	color: #9B927E;
	border-radius: 0px 0px 25px 25px;
	cursor: auto;
	transition: .3s all;
}

.faq_question.open .faq_answer {
	max-height: 1000px;
	border-top: 1px solid #707070;
}

.ai_plans {
	background: #FCDF16;
	color: #1A1919;
}

.plan_box {
	border-radius: 25px;
	height: 100%;
}

.plan_box_a {
	background: #FFFFFF;
	color: #1A1919;
}

.plan_box_b {
	background: #1A1919;
	color: #FFFFFF;
}

.plan_header {
	border-bottom: 1px solid #CECCBD;
	overflow:hidden;
	position: relative;
}
.plan_details {
	color: #9B927E;
}
.plan_icon {
	position: absolute;
	right:0%;
	top:50%;
	transform: translateY(-50%);
	height: 100%;
}

.plan_button {
	background: #FCDA19;
	color: #1A1919;
	border-radius: 25px;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
}
.plan_button:hover {
	background: #F5CE0E;
}

@media only screen and (max-width: 1199px) {
	.ai_power {
		background-image: url('../images/home_grid_bg_m.png');
	}
	.w-lg-100 {
		width: 100% !important;
	}
}
@media only screen and (max-width: 991px) {
	.navbar-brand img {
		height: 24px;
	}
}


@media only screen and (max-width: 767px) {
	.home_featurebox {
		border-radius: 0px;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
	.home_ai_featurebox_1 {
		border-radius: 0px;
		border: none;
	}
	
	.home_ai_featurebox:not(.home_ai_featurebox_1) {
		border-radius: 10px;
		min-height: 170px;
	}
	
	.home_ai_featurebox:not(.home_ai_featurebox_1) .home_ai_featurebox_content {
		width: 60%;
		top: 50%;
		bottom: unset;
		transform: translateY(-50%);
		right: 0%;
	}
	.home_ai_featurebox_deco_1 {
		left: 0%;
		top: 50%;
		transform: translate(-20%,-50%);
		width: 50%;
	}
	.home_ai_featurebox_deco_2 {
		left: 0%;
		top: 0%;
		transform: translateX(-20%);
		width: 50%;
	}
	.home_ai_featurebox_deco_3 {
		left: 0%;
		top: 0%;
		transform: translate(-20%,-13%);
		width: 50%;
	}
	.home_ai_featurebox_deco_4 {
		left: 0%;
		top: 0%;
		transform: translateX(-50%);
		width: 70%;
	}
	
	.home_ai_featurebox_min_height {
		padding-top:40%
	}
	
	.subscription_card,.subscription_form {
		border-radius: 0px;
	}
	
	.floating_tabs {
		background-image: url('../images/Floating_bg_m.png');
		top: unset;
		bottom: 0;
		left: 0;
		transform: none;
		width: 100%;
		padding-top: calc( 100% * 100 / 786 );
		height: 0px;
	}
	.floating_tab {
		position: absolute;
		width: 100%;
		left: 0%;
		height: 80%;
		top:10%;
		flex-direction: row;
		align-items: center;
		justify-content: space-evenly;
	}
	.floating_tab > div {
		display: flex;
		align-items: center;
	}
	.floating_tab img{
		height:30px;
	}
	.copyright {
	    margin-bottom: 15%;
	}
}

body.payment_page {
	background-image: url('../images/payment_backgroud.png');
	background-size: cover;
    min-height: 100vh;
}

.payment_page header {
	position: fixed;
}

.payment_box {
	margin: auto;
	width: 100%;
	max-width: 540px;
	background: #FFFFFF;
	border-radius: 25px;
	color: #1A1919;
    font-weight: 600;
}

.payment_box_top {
	border-bottom: 1px solid #CECCBD;
}

.h1, h1, b, .font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.font-regular {
    font-weight: 400;
}

#paymentForm input{
	border: none;
	background: #ECEADD;
	border-radius: 10px;
	transition: all .3s;
	width: 100%;
	padding: 10px;
    outline: none;
}

#paymentForm input:autofill,#paymentForm input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px #ECEADD inset;
}

#paymentForm input:focus:not([readonly]) {
    background: rgb(193 189 164 / 100%);
}

.payment_plan_box {
	
	background: #FCDA19;
	border-radius: 10px;
}

.payment_plan_box_top {
	border-bottom: 1px solid #d7bc26;
}

#paymentForm input#promo_code {
	width: 65%;
	border-radius: 10px 0px 0px 10px;
}

.promo_code_sumbit, .promo_code_remove {
	width: 35%;
	background: #FCDD2F;
	cursor: pointer;
	border-radius: 0px 10px 10px 0px;
	
}

#paymentForm label.error, .promo_code_error_msg {
    color: #F00;
}

.payment_button {
	width: fit-content;
	margin: auto;
	background: #FCDD2F;
	cursor: pointer;
	border-radius: 10px;
	padding: 10px 35px;
	color: #1A1919;
}
.payment_terms {
	color: #B1AFA1;
    font-weight: 400;
}

.transition {
	transition: all .3s;
}

.tga_terms {
    overflow: auto;
    height: 150px;
    background: #ECEADD66;
    border-radius: 10px;
    padding: 10px 5px;
}
.tga_terms > ol {
  padding-left:15px;
}
.tga_terms ol {
  counter-reset: item;
}
.tga_terms > ol > li {
  margin-bottom:10px;
}
.tga_terms li {
  display: block;
}
.tga_terms li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

@media only screen and (max-width: 1199px) {
	.payment_page header {
		position: static;
	}
}