/**
 * Section - desktop
 */
@media (min-width: 768px) {
	.scroll_root {
		position: fixed;
		width: 100vw;
		height: 100vh;
		/* transition: 0.3s; */
		/* transition-timing-function: ease-out; */
	}
	#brand {
		height: 100vh;
		background-color: #000000;
	}
	#brand .slide_img_cover {
		position: relative;
	}
	#brand .slide_img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		transition: 0.2s;
	}
	#brand .slide_img.slide2,
	#brand .slide_img.slide3 {
		opacity: 0;
	}
	#brand .slide_text_cover {
		width: calc(100vw / 1440 * 438);
		position: absolute;
		top: 0;
		right: calc(100vw / 1440 * 180);
		overflow: hidden;
		transition: 0.4s;
		transition-timing-function: ease-out;
	}
	#brand .content_blank {
		height: calc(100vw / 1440 * 200);
	}
	#brand .content .title {
		font-family: brandon-grotesque;
		margin-top: calc(100vw / 1440 * 20);
	}
	#brand .content.code_academy .title {
		color: #ff6b00;
	}
	#brand .content.wms .title {
		color: #3366ff;
	}
	#brand .content .description_container {
		margin-top: calc(100vw / 1440 * 72);
	}
	#brand .content .description:not(:first-child) {
		margin-top: calc(100vw / 1440 * 24);
	}
	#brand .content a {
		margin-top: calc(100vw / 1440 * 72);
		display: inline-block;
	}
	#brand .content .button {
		background-size: contain;
		background-repeat: no-repeat;
		transition: 0.3s;
	}
	#brand .content .button:hover::before {
		right: 0;
	}
	#brand .content .button1 {
		background-image: url("../images/brand/brand_desktop_academy.svg");
		width: calc(100vw / 1440 * 171);
		height: calc(100vw / 1440 * 80);
	}
	#brand .content .button1:hover {
		background-image: url("../images/brand/brand_desktop_hover_academy.svg");
		transition: 0.3s;
	}
	#brand .content .button2 {
		background-image: url("../images/brand/brand_desktop_dlabon.svg");
		width: calc(100vw / 1440 * 170);
		height: calc(100vw / 1440 * 80);
	}
	#brand .content .button2:hover {
		background-image: url("../images/brand/brand_desktop_hover_dlabon.svg");
		transition: 0.3s;
	}
	#brand .content .button3 {
		background-image: url("../images/brand/brand_desktop_wms.svg");
		width: calc(100vw / 1440 * 192);
		height: calc(100vw / 1440 * 80);
	}
	#brand .content .button3:hover {
		background-image: url("../images/brand/brand_desktop_hover_wms.svg");
		transition: 0.3s;
	}
}

/**
 * Section - mobile
 */
@media (max-width: 767.98px) {
	.brand_mobile {
		width: 100vw;
		height: 100vh;
	}

	.brand_mobile .swiper-wrapper {
		margin: 0px;
		padding: 0px;
	}

	.brand_mobile .swiper-slide {
		list-style: none;
		width: 100vw;
	}

	.brand_mobile .slide {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.brand_mobile .slide_img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.brand_mobile .slide_description {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding-left: calc(100vw / 360 * 24);
		box-sizing: border-box;
		width: 100%;
		height: 100%;
	}
	.brand_mobile .slide_description .scroll_container {
		overflow-y: auto;
	}
	.brand_mobile .slide_description .scroll_container::-webkit-scrollbar {
		display: none;
	}
	.brand_mobile .slide_description .slide_blank_top {
		height: calc(100vw / 360 * 400);
	}
	.brand_mobile .slide_description .slide_blank_bottom {
		height: calc(100vw / 360 * 100);
	}
	.brand_mobile .slide_description .slide_text2 {
		margin-top: calc(100vw / 360 * 8);
		font-family: brandon-grotesque;
	}
	.brand_mobile .slide1 .slide_description .slide_text2 {
		color: #ff6b00;
	}
	.brand_mobile .slide2 .slide_description .slide_text2 {
		color: #f74902;
	}
	.brand_mobile .slide3 .slide_description .slide_text2 {
		color: #3366ff;
	}
	.brand_mobile .slide_description .slide_text3 {
		margin-top: calc(100vw / 360 * 32);
	}
	.brand_mobile .slide_description .slide_text4 {
		margin-top: calc(100vw / 360 * 16);
	}
	.brand_mobile .slide_description .slide_text5 {
		margin-top: calc(100vw / 360 * 16);
	}

	.brand_mobile .swiper-pagination {
		bottom: 24px !important;
	}
	.brand_mobile .swiper-pagination .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: #555555;
		border: none;
		opacity: 1;
	}
	.brand_mobile .swiper-pagination .swiper-pagination-bullet-active {
		background: #bbbbbb !important;
	}

	.brand_mobile .slide_gradient {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: calc(100vw / 360 * 100);
		background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 35.47%, rgba(0, 0, 0, 0) 96.56%);
	}

	.brand_mobile .button {
		margin-top: calc(100vw / 360 * 32);

		position: relative;
		display: flex;
		align-items: center;
		width: calc(100vw / 360 * 178);
		height: calc(100vw / 360 * 42);
		padding-top: calc(100vw / 360 * 10);
		padding-bottom: calc(100vw / 360 * 10);
		padding-left: calc(100vw / 360 * 16);
		box-sizing: border-box;
	}

	.brand_mobile .button .button_arrow {
		margin-left: calc(100vw / 360 * 12);
		width: calc(100vw / 360 * 40);
		height: auto;
	}

	.brand_mobile .button.button1 {
		border: 1.8px solid #ff6b00;
		color: #ff6b00;
	}
	.brand_mobile .button.button2 {
		border: 1.8px solid #f74902;
		color: #f74902;
	}
	.brand_mobile .button.button3 {
		border: 1.8px solid #3366ff;
		color: #3366ff;
	}
}