/* 
** partner-area >> icon/image size can be adjust by add class:
				   ~ s1 = width: 30px
				   ~ s2 = width: 100px
				>> can add extra the size class if necessary, in f2_d.css
** text-area >> put 'd-grid' class if got WL request display text content in grid style
			 >> grid columns number class:
			 	~ grid-2 = 2 columns in a row
			 	~ grid-3 = 3 columns in a row
			 	~ grid-4 = 4 columns in a row
			 	~ grid-5 = 5 columns in a row
			 	~ grid-6 = 6 columns in a row
			 	~ grid-7 = 7 columns in a row
			 >> grid gap class:
			 	~ grid-gap-1 = .5rem
			 	~ grid-gap-2 = 1rem
			 	~ grid-gap-3 = 1.5rem
			 	~ grid-gap-4 = 2rem
			 	~ grid-gap-5 = 2.5rem */

/* FOOTER */
footer {
	color: var(--f2_MAIN_TXT);
	background: var(--f2_MAIN_BG)
}

.foot-block {
	position: relative;
    padding: 4vw 0
}

.foot-block:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background: var(--f2_BLOCK_SEP_LINE)
}

.foot-block:last-child:after {
	width: 0;
	height: 0;
	background: transparent
}

.foot-block h3 {
	margin-bottom: 10px;
    font-size: 3.2vw;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--f2_BLOCK_LBL_TXT)
}

.foot-block .partner-area {
	display: flex;
    flex-wrap: wrap;
    gap: 5vw 0;
    align-items: flex-start;
    justify-content: space-between
}

.foot-block .partner-area .partner- {
	/* margin: 0 5vw 0 0 */
}

.foot-block .partner-area .partner-.w-half {
	/* width: 40%;
	margin: 0 3.5vw 0 0 */
}

.foot-block .partner-area .center {
	align-self: center
}

.foot-block .partner-area .brand-ambassador .brand-ambassador-ul .brand-ambassador-li{
	display: block;
}

.foot-block .partner-area .brand-ambassador .brand-ambassador-ul .brand-ambassador-li img{
	height: 100px;
    margin-bottom: 5px;
}

.foot-block .partner-area ul {
	display: flex;
	flex-wrap: wrap;
	gap: 5px
}

.foot-block .partner-area ul.text- {
	gap: 1rem;
	font-size: 1rem
}

.foot-block .partner-area .partner-img-text- ul {
	justify-content: space-between;
	align-items: baseline
}

.foot-block .partner-area .partner-img-text-flex- ul {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3vw 2.1333333333vw
}

.foot-block .partner-area .partner-img-text-flex- ul li {
	display: grid;
    grid-template-columns: 10vw auto;
    grid-column-gap: 2.1333333333vw;
    font-size: 3.2vw
}

.foot-block .partner-area .s1 {
	width: 30px;
	height: 30px
}

.foot-block .partner-area .s2 {
	max-width: 100px
}

.foot-block .partner-area .s3 {
	max-height: 50px;
    max-width: 150px
}

.foot-block .partner-area .s4 {
	width: 45px;
	height: 30px
}

.foot-block .partner-area p {
	line-height: normal;
    margin-bottom: 5px;
    font-size: 3.2vw
}

.foot-block .text-area {
	line-height: 1rem;
	text-align: justify
}

.foot-block .text-area b {
	font-weight: 700
}

.foot-block .text-area p {
    line-height: normal;
    margin-bottom: 10px;
    font-size: 3.2vw
}

.foot-block .copyright-area {
	position: relative;
	display: flex;
	align-items: center;
    gap: 1rem
}

.foot-block .copyright-area .footer_logo {
	position: relative;
	padding: 0 20px 0 0
}

.foot-block .copyright-area .footer_logo img {
	max-width: 150px
}

.foot-block .copyright-area .copyright {
	font-size: 3vw
}

.foot-block .navilist-area ul {
	display: flex;
    align-items: center;
    gap: 1rem 0;
    flex-wrap: wrap
}

.foot-block .navilist-area ul li {
	position: relative;
    width: 33%;
    padding: 3px 5px 3px 1rem;
    font-weight: 600;
    color: var(--f2_NAV_LI_TXT_COLOR)    
}

.foot-block .navilist-area ul li:before {
	content: "";
	position: absolute;
    width: 3px;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--f2_NAV_LI_BULLET)
}