@charset "UTF-8";
@import "fonts.css";

:root {
	--font-default: "DB Heavent";
	--fontsize-default: 24px;
	--font-bold: "DB Heavent Med";
	--font-light: "DB Heavent Light";
	--font-fontello: "fontello";
	/* --colorcode-orange: #f37021; */	
	/* --colorcode-navy: #002561; */
	--colorcode-orange: #D65A0F;
	--colorcode-navy: #2C3E5D;
	--colorcode-gray: #939598;
	--colorcode-highlight-orange: #f7975c;
	--container-width: 1200px;
}

/* Test: start */
.container {
	/* border: 1px solid red; */
}
.navbar {
	/* border: 1px solid red; */
}
.carousel.topfunds {
	/* background: red; */
}
.carousel-item {
	/* background: rgb(251, 124, 124); */
}

/* Test: end */


/* General */
body {
	font-family: var(--font-default);
	font-size: var(--fontsize-default);
	line-height: 1;
}
.btn {
	font-size: var(--fontsize-default);
	border-radius: 25px;
	min-width: 150px;
	padding: .3125rem 1.5rem;
}
.btn-submit,
.btn-back {
	background-color: var(--colorcode-orange);
	border-color: var(--colorcode-orange);
}
.btn-submit:hover,
.btn-back:hover {
	background-color: var(--colorcode-highlight-orange);
	border-color: var(--colorcode-highlight-orange);
}
.ftColor-orange {
	color: var(--colorcode-orange);
}
.ftColor-navy {
	color: var(--colorcode-navy);
}

/* Header */
.cid-rKZuqbI3d6 {
	padding: 0 0 4.75rem;
	padding: 0 0 3.875rem;
}
.cid-rKZuqbI3d6 .navbar {
	padding: 1rem 0;
	background-color: var(--colorcode-navy);
	background: linear-gradient(180deg, rgba(0, 37, 97, 1) 0%, rgba(43, 69, 123, 1) 28%, rgba(105, 115, 160, 1) 56%, rgba(255, 255, 255, 1) 100%);
	background: #FFF;
	transition: none;
	box-shadow: 0px 2px 6px 2px #f9f9fb;
	width: 100%;
	min-height: 76px;
	min-height: 50px;
}
.navbar-dropdown.navbar-fixed-top,
.navbar.navbar-fixed-top {
	position: fixed;
	z-index: 1030;
}
.cid-rKZuqbI3d6 .menu-logo .navbar-brand .navbar-logo img,
.cid-rKZuqbI3d6 .img-logo {
	display: flex;
	height: 2.9112rem;
	height: 1.875rem;
}
.navbar-toggler {
	border: none;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.navbar {
	--bs-navbar-toggler-border-color: #FFF;
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}
.main-wrapper {
	background: url(../images/img-banner-d.jpg) no-repeat;	
	background-position: top -131px left 58%;
}

/* Footer */
/* footer {
	position: fixed;
	bottom: 0;
	width: 100%;
} */
.cid-rLbBmXULTP {
	padding-top: 60px;
	padding-bottom: 60px;
	font-family: "DB Heavent";
	background-color: #FFF;
	color: #FFF;
	background: linear-gradient(180deg, rgba(0, 37, 97, 1) 0%, rgba(1, 25, 65, 1) 0%, rgba(1, 25, 64, 1) 17%, rgba(1, 23, 59, 1) 31%, rgba(0, 37, 97, 1) 95%, rgba(0, 34, 90, 1) 100%);
	line-height: 1.5;
}
.media-container-row {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: start;
	-ms-flex-align: start;
	align-items: start;
}
.cid-rLbBmXULTP .media-wrap img {
	height: 6rem;
	height: 4rem;
	height: 2.8125rem;
}
.cid-rLbBmXULTP .display-6 {
	font-size: 1.5rem;
}
.cid-rLbBmXULTP .mbr-text {
	font-size: 1.1875rem;
	font-size: min(1.1875rem, 5.313vw);
	font-size: min(1.2188rem, 5.313vw);
	letter-spacing: .5px;
}
.socicon-youtube:before {
	content: "";
	background: url(../images/img-ico_youtube.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: 25px;
}
.cid-rLbBmXULTP .footer-lower .social-list {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}
.cid-rLbBmXULTP .footer-lower .social-list .soc-item {
	margin: 0 .5rem;
}
.cid-rLbBmXULTP .footer-lower .social-list a {
	margin: 0;
	opacity: .5;
	-webkit-transition: .2s linear;
	transition: .2s linear;
}
.cid-rLbBmXULTP .footer-lower .social-list a:hover {
	opacity: 1;
}
.cid-rLbBmXULTP .contact-email {
	padding: 0 0 1rem;
}
.socicon-line:before {
	content: "";
	background: url(../images/img-ico_lineoa.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: 25px;
}
.socicon-telegram:before {
	content: "";
	background: url(../images/img-ico_telegram.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: 25px;
}
.socicon-twitter:before {
	content: "";
	background: url(../images/img-ico_twitter.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: 25px;
}
.socicon-facebook:before {
	content: "";
	background: url(../images/img-ico_fb.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: 25px;
}
.socicon-instagram:before {
	content: "";
	background: url(../images/img-ico_instagram.png) no-repeat;
	display: inline-block;
	width: 25px;
	height: 25px;
	background-size: 25px;
}
.cid-rLbBmXULTP a.text-primary,
.cid-rLbBmXULTP a.text-primary:hover,
.cid-rLbBmXULTP a.text-primary:focus {
	color: #FFF !important;
	text-decoration: none;
}
.cid-rLbBmXULTP .footer-lower hr {
	margin: 1rem 0;
	border-color: #fff;
	opacity: .05;
}
.general,
.customer,
.userlogin {
	display: none;
}
.general.active,
.customer.active,
.userlogin.active {
	display: block;
}
.recomFund-wrapper,
.groupOne-wrapper,
.groupTwo-wrapper,
.groupThree-wrapper {
	display: none;
}
.recomFund-wrapper.active,
.recomFund-wrapper.active,
.groupOne-wrapper.active,
.groupTwo-wrapper.active,
.groupThree-wrapper.active {
	display: block;
}

/* Wireframe */
.header-wrapper .heading {
	font-size: 3.75rem;
	font-size: min(14.06vw, 3.75rem);
	font-size: min(12.5vw, 3.75rem);
	font-size: min(11.875vw, 3.75rem);
	/* font-family: var(--font-bold); */
	font-weight: 700;
	color: var(--colorcode-navy);
	line-height: 1;
	margin: 0;
}
.header-wrapper .sub-head {
	font-size: 3.75rem;
	font-size: min(14.06vw, 3.75rem);
	font-size: min(12.5vw, 3.75rem);
	font-size: min(11.875vw, 3.75rem);
	/* font-family: var(--font-bold); */
	/* color: var(--colorcode-navy); */
	font-weight: 700;
	line-height: .9;
}
.box-border {
	display: flex;
	padding-bottom: 1.5rem;
}
.funds-wrapper {
	border-radius: .9375rem;
	border: 1px solid #F1F1F2;
	padding: 1rem;
	padding: 2.9375rem 2.25rem;
	background: rgba(241, 241, 242, 0.20);	
	background: #FFF;
	box-shadow: 0px 4px 13px 1px rgb(0 0 0 / 7%);
}
.funds-wrapper:hover {
	/* background: #6973A0;
	box-shadow: 0px 4px 13px 1px rgb(0 0 0 / 49%);
	border-color: #6973a0; */
}
.funds-type {
	/* font-family: var(--font-bold); */
	font-size: 2.1875rem;
	font-weight: 700;
	color: var(--colorcode-navy);
	text-align: center;
}
.funds-name {
	text-align: center;
}
.funds-risk {
	border: 1px solid #F1F1F2;
	border-radius: .625rem;
	background: #FFF;
	padding: 1rem 1rem 2.4375rem;
	margin: 1.5rem 0 0;
}
.risk-score-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.risk-title {
	padding: 0;
	margin: 0;	
	/* font-family: var(--font-bold); */
	font-size: min(6.25vw, 1.5rem);
	color: var(--colorcode-navy);
}
.score {
	position: relative;	
	top: 1px;
	display: inline-block;
	background-color: #F7F8F9;
	padding: 0 .5rem;
	border-radius: 2rem;
	min-width: 4rem;
	text-align: center;
	font-size: 2.5rem;
	/* font-family: var(--font-bold); */
	font-weight: 700;
	line-height: 1;
	color: #13AE5A;
}
.score:after {
	content: "/8";
	padding: 0 0 0 2px;
	margin: 0;
	font-size: 1.125rem;
	font-family: var(--font-default);
	font-weight: 400;
	color: #B3B9C4;
}
.risk-illustration {
	text-align: center;
	padding: 1.625rem 0 0;
}
.funds-cta {
	display: flex;
	flex-direction: row;	
	justify-content: space-between;
	padding: 1rem;
	margin-top: 1.5rem;
	align-items: center;
	background: #8088B0;
	background: #F7F8F9;
	border-radius: .5rem;	
	color: #FFF;
}
.funds-ctaBtn .btn {
	padding: .5rem 1rem;
	line-height: 1;
	font-size: 1.25rem;
	font-size: min(5.625vw, 1.25rem);
	min-width: 100px;
}
.btn.cta-factsheet {
	background: #E8EBF0;
	color: #626F86;
}
.btn.cta-purchase {
	background-color: #EB6311;
	border-color: #EB6311;
}
.highlight-wrapper {
	padding: 1rem;
	border: 1px solid #DCDFE4;
	border-radius: .5rem;	
	color: var(--colorcode-navy);
	background: #FFF;
}
.highlight-wrapper > div {
	padding: 0 0 .5rem;
	/* font-family: var(--font-bold); */
	font-weight: 500;
}
.highlight-bullet {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: #9D9FA2;
	color: #626F86;
}
.cta-openacc {
	text-align: center;
	font-size: 1.25rem;
	color: var(--colorcode-navy);
	color: #2C3E5D;
	padding: .625rem;
	margin: 2.5625rem 0 .3125rem;
	background: #F7F8F9;
	border-radius: 8px;
}
.cta-openacc.inactive {
	display: none;
}
.link.openacc {
	color: var(--colorcode-orange);
}
.attachFile {
	color: var(--colorcode-orange);
	text-decoration: underline;
}
.remarks {
	display: flex;
	flex-direction: row;
	gap: 0 5px;
	font-size: 1.2813rem;
	color: var(--colorcode-navy);
	color: #1A92DC;
	padding: 1.5rem 1rem 0;
}
.remarks .remarks-title {
	color: #000;
	color: #1A92DC;
	color: var(--colorcode-navy);
}
.onelink-wrapper {
	text-align: center;
	padding: 1.5rem 0;
}
.btn.onelink {
	background: #EB6311;
	border-color: #EB6311;
	color: #FFF;
	line-height: 1;
	padding: .5rem 1rem;
}
.btn.onelink:active {
	background: var(--colorcode-highlight-orange);
	border-color: var(--colorcode-highlight-orange);
}
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
	background-color: var(--colorcode-highlight-orange);
	border-color: var(--colorcode-highlight-orange);
	color: #000;
}
.mutualfund-howto-wrapper {
	position: relative;
	color: #626F86;
}
.mutualfund-howto-wrapper .link {
	text-decoration: none;
	color: var(--colorcode-orange);
}
/* .mutualfund-howto-wrapper .link:after {
	content: "\f105";
	font-family: "fontello";
	position: relative;
	top: 3px;
	left: 15px;
} */
.carousel-control-next,
.carousel-control-prev {
	width: auto;
}
.carousel .carousel-inner {
	padding: 0 2rem;
	padding: 0 1rem;
}
.carousel-indicators [data-bs-target] {
	width: 10px;
	height: 10px;
	background: #B3B9C4;
	border: 1px solid #B3B9C4;
	border-radius: 100px;
}
.carousel-indicators .active {
	background: #2C3E5D;
	border-color: #2C3E5D;
}
.header-wrapper {
	padding: 4.375rem 0 0;
}
.header-wrapper .title {
	padding: .5rem 0 0;
	color: #2C3E5D;
}
.topfunds-wrapper {
	padding: 2.6875rem 0 0;
}

/* Risk Gauge */
.riskGauge-wrapper .list-inline {
	border-radius: 5px;
	display: inline-block;
	position: relative;
	font-size: 1.1563rem;
	font-size: 1.25rem;
	font-family: var(--font-bold);
	color: #626F86;
	margin: 0;
}
.riskGauge-wrapper .list-inline:before {
	content: "ต่ำ";
	padding: 0 .6875rem 0 0;
}
.riskGauge-wrapper .list-inline:after {
	content: "สูง";
	padding: 0 0 0 .6875rem;
}
.riskGauge-wrapper .list-inline-item {	
	position: relative;
	min-width: 25px;
	min-height: 25px;
	margin: 0;
	padding: .3125rem;
	text-align: center;
	color: #FFF;
	font-size: 1rem;
	/* text-shadow: 1px 1px 4px #000; */
}
.riskGauge-wrapper .list-inline-item:not(:last-child) {
	margin: 0 -5px 0 0;
}
.riskGauge-wrapper .list-inline-item:nth-child(1) {
	background: #137e41;
	border-radius: 8px 0 0 8px;
}
.riskGauge-wrapper .list-inline-item:nth-child(2) {
	background: #42a34f;
}
.riskGauge-wrapper .list-inline-item:nth-child(3) {
	background: #6cb648;
}
.riskGauge-wrapper .list-inline-item:nth-child(4) {
	background: #9ac942;
}
.riskGauge-wrapper .list-inline-item:nth-child(5) {
	background: #ebeb86;
}
.riskGauge-wrapper .list-inline-item:nth-child(6) {
	background: #fdbf15;
}
.riskGauge-wrapper .list-inline-item:nth-child(7) {
	background: #f79a3c;
}
.riskGauge-wrapper .list-inline-item:nth-child(8) {
	background: #cb2d32;
}
.riskGauge-wrapper .list-inline-item:nth-child(9) {
	background: #801617;
	border-radius: 0 8px 8px 0;
}
.riskGauge-wrapper .list-inline-item.index:before {
	content: "\e8a9";
	position: absolute;
	top: -14px;
	left: 8px;
	color: #6CB648;
	font-family: var(--font-fontello);
	font-size: 1.125rem;
	text-shadow: none;
}
.riskGauge-wrapper .list-inline-item.index:after {
	content: "\e8ac";
	position: absolute;
	bottom: -14px;
	left: 8px;
	color: #6CB648;
	font-family: var(--font-fontello);
	font-size: 1.125rem;
	text-shadow: none;
}
.risk-illustration .img-fluid {
	display: none;
}
.funds-stockid {
	/* font-size: 1.4063rem;
	font-size: 1.3438rem; */
	color: #2C3E5D;
}
.cta-factsheet {
	margin: 0 .5rem 0 0;
}
.funds-description .caption {
	padding: 1.5rem 1rem;
	font-size: 1.25rem;
}
.funds-description .caption .title {
	font-family: var(--font-bold);
}
.funds-description .caption p:last-child {
	margin: 0;
}
.funds-description .notes {
	font-size: 1.25rem;
	padding: 1.5rem 1rem 0;
}
.funds-wrapper:hover .funds-type,
.funds-wrapper:hover .funds-name,
.funds-wrapper:hover .funds-description .caption,
.funds-wrapper:hover .funds-description .notes,
.funds-wrapper:hover .remarks,
.funds-wrapper:hover .remarks .remarks-title,
.funds-wrapper:hover .remarks .remark-content,
.funds-wrapper:hover .cta-openacc {
	/* color: #FFF; */
}
.funds-wrapper:hover .funds-cta {
	/* background: #FFF;
	color: var(--colorcode-navy); */
}
.funds-wrapper .funds-description .caption, .funds-wrapper .funds-name,
.funds-wrapper .funds-description .notes {
	color: #2C3E5D;
}
.funds-wrapper .funds-name {
	color: #626F86;
}
/* .borderGradient-top {
	width: 100%;
	height: 17px;
	background: radial-gradient(106.66% 43.96% at 50.62% 5.23%, rgba(207, 209, 210, 0.40) 15%, rgba(229, 230, 230, 0.40) 27%, rgba(230, 231, 231, 0.40) 28%, rgba(241, 241, 241, 0.40) 39%, rgba(243, 243, 243, 0.40) 43%, rgba(252, 252, 252, 0.40) 65%, rgba(255, 255, 255, 0.40) 100%);
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
}
.borderGradient-bottom {
	width: 100%;
	height: 17px;
	background: radial-gradient(106.66% 43.96% at 50.62% 5.23%, rgba(207, 209, 210, 0.40) 15%, rgba(229, 230, 230, 0.40) 27%, rgba(230, 231, 231, 0.40) 28%, rgba(241, 241, 241, 0.40) 39%, rgba(243, 243, 243, 0.40) 43%, rgba(252, 252, 252, 0.40) 65%, rgba(255, 255, 255, 0.40) 100%);
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
	transform: rotate(180deg);
} */
#scroll-btn:hover,
#scroll-btn:hover:before {
	color: #F37021;
}
#scroll-btn {
	position: fixed;
	cursor: pointer;
	z-index: 99;
	bottom: 120px;
	bottom: 20px;
	right: 30px;
	display: block;
	color: #002561;
	font-weight: bolder;
}
#scroll-btn:before {
	content: "\e8a4";
	font-family: "fontello";
	font-size: 2rem;
	display: block;
	text-align: center;
	color: #ffffff;
	background: #002561;
	border-radius: 200px;
	width: 50px;
	height: 50px;
	padding-top: 6px;
	margin: 0 auto;
	box-shadow: 0 1px 10px 6px #FFF;
}
.cta-purchase.mobile {
	display: none;
}
.breakVP-768 {
	display: none;
}

/* Modal */
.modal-title {
	font-family: var(--font-bold);
	font-size: var(--fontsize-default);
	font-size: min(10vw, 2.5rem);
	line-height: 1;
	margin: 0 auto;
	text-align: center;
	color: var(--colorcode-navy)
}
.modal-header {
	position: relative;
	border-bottom: none;
	padding: 1.25rem 1.5rem 0;
	padding: 2rem 1.5rem 0;
	color: var(--colorcode-navy);
}
.modal-header .btn-close {
	position: absolute;
	top: 24px;
	right: 24px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
	background-color: #B3B9C4;
	background-size: 15px;
	width: 12px;
	height: 12px;
	border-radius: 50px;	
}
.modal-header .btn-close:focus {
	box-shadow: none;
}
.modal-body {
	padding: 1.5rem;
}
.mutualfund-step-wrapper {
	background: #E8EBF0;
	border-radius: 8px;
	padding: 1.5rem;
	color: var(--colorcode-navy);
}
.mutualfund-step-wrapper .list {
	font-size: 1.25rem;	
	margin: 0;
}
.mutualfund-step-wrapper .list-item:not(:last-child) {
	padding-bottom: .5rem;
}
.mutualfund-howto-wrapper .list {	
	font-size: 1.25rem;
	margin: 0;
}
.mutualfund-howto-wrapper .list-item:not(:last-child) {
	padding-bottom: .5rem;
}
.modal-remarks {
	padding: .5rem 0 0 1rem;
	font-size: 1.1563rem;
	font-size: min(4.69vw, 1.1563rem);
	color: #b1b1b1;
	color: #758195;
}
.modal-footer {
	border-top: none;
}

/* Download */
.download .header-wrapper .heading,
.download .header-wrapper .sub-head {
	font-size: min(12.19vw, 3.75rem);
}
.download-content {
	padding: 4rem 3.125rem;
}
.download-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border-radius: 10px;
	border: 1px solid #F1F1F2;
	background: rgba(245, 245, 245, 0.20);
	box-shadow: 0px 4px 100px 5px rgba(0, 0, 0, 0.05);
	position: relative;
}
.download-wrapper .download-container {
	flex: 0 0 50%;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.download-wrapper .download-container:not(:last-child) {
	min-height: 355px;
}
.download-app {
	position: relative;
}
.download-app:after {
	content: "";
	position: absolute;
	transform: rotate(-90deg);
	background: radial-gradient(106.66% 43.96% at 50.62% 5.23%, rgba(207, 209, 210, 0.20) 15%, rgba(229, 230, 230, 0.20) 27%, rgba(230, 231, 231, 0.20) 28%, rgba(241, 241, 241, 0.20) 39%, rgba(243, 243, 243, 0.20) 43%, rgba(252, 252, 252, 0.20) 65%, rgba(255, 255, 255, 0.20) 100%);
	background-blend-mode: multiply;
	mix-blend-mode: multiply;
	height: 27px;
	width: 270px;
	top: 200px;
	right: -146px;
}
.download-container .title {
	font-size: 2.1875rem;
	font-size: min(9.375vw, 2.1875rem);
	color: var(--colorcode-navy);
	text-align: center;
	padding: 4.125rem 0 3.5rem;
	margin: 0;
}
.qrcode-wrapper {
	text-align: center;
}
.qrcode-wrapper .img-fluid {
	max-width: 148px;
	margin: 0 auto;
	border: 1px solid #F1F1F2;
	border-radius: 10px;
}
.app-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px 0;
}
.download-login {
	padding: 2.25rem 0 3.6875rem;
}
.download-login .link {
	color: var(--colorcode-orange);
}


@supports (-webkit-overflow-scrolling: touch) {
	/* CSS specific to iOS devices */
	.header-wrapper .heading,
	.funds-wrapper .funds-type,
	.header-wrapper .sub-head {
		letter-spacing: -2px;
	}
}