dbnt.co.kr2023/css/demos/demo-product-landing.css

h1, h2, h3, h4, h5, h6 {
	font-family: "Oswald", sans-serif;
}

.custom-absolute-y-center {
	position: absolute;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.custom-border-color-1 {
	border-color: #31363c !important;
}

.custom-border-color-2 {
	border-color: #44494e !important;
}

.custom-filter-grayscale-1 {
	-webkit-filter: grayscale(1);
					filter: grayscale(1);
}

@media (min-width: 500px) {
	.custom-ws-nowrap {
		white-space: nowrap !important;
	}
}
@media (max-width: 991px) {
	.custom-remove-left-divider {
		border-left: 0 !important;
	}
}
/* Header */
#header .header-nav-main nav > ul > li > a {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 13.6px;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
}
#header .header-nav-main-arrows nav > ul > li > a.dropdown-toggle:after {
	margin-top: 3px;
}
#header .list > li > a {
	font-family: "Oswald", sans-serif;
	font-weight: 400;
	font-size: 13.6px;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
	color: #212529;
}

@media (min-width: 992px) {
	#header .header-nav-main nav > ul > li > a {
		padding: 0 1.2rem !important;
	}
}
/* Custom Section Padding */
@media (min-width: 992px) {
	.custom-section-padding-1 {
		padding: 10vw 0 !important;
	}
}
/* Custom Product Image Styles */
@media (min-width: 1200px) {
	.custom-product-image-style-1 {
		position: absolute;
		bottom: -37px;
		left: 0;
		max-width: calc(100% + 140px);
	}
}
@media (min-width: 992px) {
	.custom-product-image-style-2 {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate3d(0, -50%, 0);
		max-width: none;
		width: 47vw;
	}
}
/* Custom Icons */
.custom-icon-left-arrows,
.custom-icon-right-arrows {
	position: relative;
	width: 13px;
	height: 13px;
}
.custom-icon-left-arrows:before,
.custom-icon-right-arrows:before {
	content: '';
	position: absolute;
	left: -35%;
	top: 50%;
	width: 90%;
	height: 90%;
	border-top: 1px solid #212529;
	border-left: 1px solid #212529;
	opacity: 0.6;
	transform: translate3d(0, -50%, 0) rotate(-45deg);
}
.custom-icon-left-arrows:after,
.custom-icon-right-arrows:after {
	content: '';
	position: absolute;
	right: -35%;
	top: 50%;
	width: 100%;
	height: 100%;
	border-top: 1px solid #212529;
	border-left: 1px solid #212529;
	transform: translate3d(0, -50%, 0) rotate(-45deg);
}

.custom-icon-right-arrows {
	transform: rotateY(180deg);
}

/* Custom Min Width */
.custom-min-width {
	display: inline-block;
	min-width: 170px;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.custom-min-width {
		min-width: 140px;
	}
}
/* Custom Play Button */
.custom-play-button-1 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	border-radius: 100%;
	background: #FFF;
	color: #212529;
	transition: ease transform 300ms;
	font-size: 25.6px;
	font-size: 1.6rem;
}
.custom-play-button-1:hover {
	transform: scale(1.1);
}

/* Custom List Styles */
.custom-list-style-1 > li {
	margin: 0 !important;
	padding-right: 16px;
	padding-right: 1rem;
	padding-left: 16px;
	padding-left: 1rem;
	border-right: 1px solid #414346;
	line-height: 1;
}
.custom-list-style-1 > li:last-child {
	border-right: 0;
}

/* Rating Size */
.rating-container {
	font-size: 12px !important;
}

/* Custom SVG Line Animation */
@-webkit-keyframes customSVGLineAnim {
	from {
		stroke-dasharray: 310;
		stroke-dashoffset: 170;
	}
	to {
		stroke-dasharray: 310;
		stroke-dashoffset: 340;
	}
}
@keyframes customSVGLineAnim {
	from {
		stroke-dasharray: 310;
		stroke-dashoffset: 170;
	}
	to {
		stroke-dasharray: 310;
		stroke-dashoffset: 340;
	}
}
.customSVGLineAnim {
	-webkit-animation-name: customSVGLineAnim;
					animation-name: customSVGLineAnim;
}

@-webkit-keyframes customSVGLineAnimTwo {
	from {
		stroke-dasharray: 820;
		stroke-dashoffset: 500;
	}
	to {
		stroke-dasharray: 1120;
		stroke-dashoffset: 500;
	}
}

@keyframes customSVGLineAnimTwo {
	from {
		stroke-dasharray: 820;
		stroke-dashoffset: 500;
	}
	to {
		stroke-dasharray: 1120;
		stroke-dashoffset: 500;
	}
}
.customSVGLineAnimTwo {
	-webkit-animation-name: customSVGLineAnimTwo;
					animation-name: customSVGLineAnimTwo;
}