
#header-content.header-vertical-dots,
.header-vertical-dots .slider-image {
    height: 100vh;
}
header .header-vertical-dots .slider-content-inner {
	margin-top: 5.208vw;
}
.header-vertical-dots .slider-content,
.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
    bottom: 3.125vw;
}

/* Slider Dots
-------------------*/  
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
	    display: flex;
	    width: 1.302vw; /*25px;*/
	    height: 28.385vw; /*545px;*/
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: center;
	}
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullets > span {
	    display: block;
	    position: relative;
	    z-index: 2;
	}
	.header-vertical-dots .vertical-bullets .swiper-pagination:after {
	    content: '';
	    width: 1px;
	    height: 100%;
	    position: absolute;
	    top: 0;
	    left: 50%;
	    background-color: #92979b;
	    opacity: 0.5;
	    pointer-events: none;
	    z-index: 1;
	}
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullet {
	    margin: 0px !important;
	    transition-property: height, width;
	    transition-duration: 0.2s;
	    transition-timing-function: linear;
	}
	.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	    width: 1.302vw; /*25px;*/
	    height: 1.302vw; /*25px;*/
	}
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullet {
	    background-color: #92979b;
	    opacity: 1;
	}
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullet:hover,
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
	    background-color: var(--color-white);
	}


	.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet {
	    position: relative;
	    display: block;
	}
	.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet:not(:last-child):after {
	    content: '';
	    width: 1px;
	    left: 50%;
	    transform: translateX(-50%);
	    display: block;
	    position: absolute;
	    height: 0;
	    background-color: var(--color-pure-white);
	}
	.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active:not(:last-child):after {
	    height: var(--progHeight);
	    transition: height 10s cubic-bezier(0.03, 0.35, 0.99, 1.01);
	}


/*----------------------------------------------------------------------------
------------------------------- media query ----------------------------------
-----------------------------------------------------------------------------*/

/* 1920x1080px
--------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
	header .header-vertical-dots .slider-content-inner {
		margin-top: 100px;
	}
	.header-vertical-dots .slider-content,
	.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
	    bottom: 60px;
	}

	/* Slider Dots
	-------------------*/  
		.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
		    width: 25px;
		    height: 545px;
		}
		.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active {
		    width: 25px;
		    height: 25px;
		}

}


@media screen and (max-width: 1440px) {
	/* Slider Dots
	-------------------*/  
		.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
		    height: 450px;
		    width: 20px;
		}
		.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active {
		    width: 20px;
		    height: 20px;
		}

	/* Content slider width */
		body .header-txt.wd_50 {
		    width: 60%;
		}
}

@media screen and (max-width: 1280px) {
	/* Slider Dots
	-------------------*/  
		.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
		    height: 400px;
		    max-height: 70vh;
		}

	/* Content slider width */
		body .header-txt.wd_50 {
		    width: 65%;
		}
}

/* Tab Landscape
--------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
	/* Slider Dots
	-------------------*/  
		.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
		    height: 380px;
		}
		.header-vertical-dots .vertical-bullets span.swiper-pagination-bullet.swiper-pagination-bullet-active {
		    width: 16px;
		    height: 16px;
		}

	header .header-vertical-dots .slider-content-inner {
	    padding-left: 2em;
	    padding-right: 0;
	}
	/* Content slider width */
		body .header-txt.wd_50 {
		    width: 70%;
		}
}



/* Tab Port
--------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
	#header-content.header-vertical-dots,
	.header-vertical-dots .slider-image {
	    max-height: 100vw;
	}


	/* Content slider width */
		body .header-txt.wd_50 {
		    width: 80%;
		}
}

/* Mob
--------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
	header .header-vertical-dots .slider-content-inner {
	    margin-top: 85px;
	}
	#header-content.header-vertical-dots,
	.header-vertical-dots .slider-image {
	    height: 100vh;
	    max-height: 100vh;
	}
	header .header-vertical-dots .swiper-slide {
	    height: 100%;
	}
	header .header-vertical-dots .stripe-container .slider-content-inner.apply-pad {
	    padding-left: 1.5em;
	}
}


/* Mobile Landscape + Port
------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 767px) {
		body .header-txt.wd_50 {
		    width: 100%;
		    padding-right: 0;
		}
		.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
		    height: 300px;
		}
		.header-subtitle {
		    overflow: hidden;
		    display: -webkit-box;
		    -webkit-line-clamp: 3;
		    line-clamp: 3;
		    -webkit-box-orient: vertical;
		}
		.header-vertical-dots .slider-content, .header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
			bottom: 2em;
		}
	}



/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
    @media screen and (max-width: 767px) and (orientation: landscape) {
		#header-content.header-vertical-dots a.btn {
		    margin-top: 15px;
		}
		header .header-vertical-dots .slider-content-inner {
		    margin-top: 60px;
		}
		#header-content.header-vertical-dots .home-slider-title {
		    margin-bottom: 10px;
		}
	}

/* Mobile Portrait
------------------------------------------------------------------------------------------------*/
    @media screen and (max-width: 600px) {
		.header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
		    max-height: 40vh;
		    padding-left: 1em;
		    padding-right: 1em;
		}
		.header-vertical-dots .slider-content, .header-vertical-dots .vertical-bullets .swiper-pagination-bullets {
			bottom: 3em;
		}
	}