@charset "utf-8";

/***************************************
*              Sub Common              *
***************************************/

	.section{
		min-height: 100vh;
		padding-top: 9rem;
		padding-bottom: 9rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.fontOrange{
		font-size: inherit;
		font-weight: inherit;
		color: #ffb926;
	}

	.fontPink{
		font-size: inherit;
		font-weight: inherit;
		color: #e50a84;
	}

	.fontMint{
		font-size: inherit;
		font-weight: inherit;
		color: #00AFC3;
	}

	.fontPurple{
		font-size: inherit;
		font-weight: inherit;
		color: #6C2F99;
	}

	.fontRed{
		font-size: inherit;
		font-weight: inherit;
		color: #E73656;
	}
		
	.secTitle{
		font-size: 5.6rem;
		color: #282828;
	}

	.subTitle{
		margin-top: 3rem;
		font-size: 2.4rem;
		color: #888;
	}

	.subTitle+.subTitle{
		margin-top: 1rem;
	}

	.secTitle *,
	.subTitle *{
		font-size: inherit;
		line-height: inherit;
	}

	#section1 .secTitle{
		width: 100%;
		font-size: 7.4rem;
		font-weight: 700;
		color: #494949;
		line-height: 1.2;
	}

	#section1 .secTitle.title1{
		opacity: 0;
		animation-name: titleFirstMotion;
		animation-duration: 2.5s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	#section1 .secTitle.title2{
		opacity: 0;
		animation-name: titleSecondMotion;
		animation-duration: 1s;
		animation-delay: 3.5s;
		animation-fill-mode: forwards;
	}

	#section1 .subTitle{
		width: 100%;
		margin-top: 12rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	#section1 .subTitle .title1{
		color:#282828;
		font-weight: 600;
		margin-bottom: 2rem;
		transform: translateY(500%);
		opacity: 0;
		font-size: 2.8rem;
		animation-name: titleTopMotion;
		animation-duration: 1s;
		animation-delay: 4s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	#section1 .subTitle .title1 .fontPink,
	#section1 .subTitle .title1 .fontOrange,
	#section1 .subTitle .title1 .fontMint,
	#section1 .subTitle .title1 .fontPurple{
		margin-right: 2rem;
	}

	#section1 .subTitle .title2{
		margin-top: 1rem;
		transform: translateY(250%);
		opacity: 0;
		font-size: 2rem;
		animation-name: titleBottomMotion;
		animation-duration: 1s;
		animation-delay: 4.8s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	

	@media screen and (max-width: 1279px) {

		.section{
			height: auto;
			padding-top: 10rem;
			padding-bottom: 10rem;
		}

		.secTitle{
			font-size: 4.4rem;
		}

		.subTitle{
			font-size: 2rem;
		}

		#section1 .secTitle{
			font-size: 5.4rem;
		}		
	}

	@media screen and (max-width: 767px) {

		.secTitle{
			font-size: 2.6rem;
			word-break: keep-all;
		}

		.subTitle{
			font-size: 1.6rem;
			line-height: 1.2;
			word-break: keep-all;
		}

		.subTitle + .subTitle{
			margin-top: 0.5rem;
		}

		#section1 .secTitle{
			font-size: 2.6rem;
			letter-spacing: -1.5px;
		}

		#section1 .subTitle{
			top:42% !important;
			transform: translate(-50%, -42%) !important;
			padding-left: 2rem;
			padding-right: 2rem;
		}
	
		#section1 .subTitle .title1{
			font-size: 1.8rem;
			line-height: 1.2;
			word-break: keep-all;
		}
	
		#section1 .subTitle .title2{
			font-size: 1.4rem;
			line-height: 1.2;
			word-break: keep-all;
		}
	}

	
	
	@keyframes titleFirstMotion {
		30% {opacity: 1;}
		70% {opacity: 1;}
		100% {opacity: 0;}
	}
	@keyframes titleSecondMotion {
		0% {opacity: 0;}
		100% {opacity: 1;}
	}
	@keyframes titleTopMotion {
		0%{
			opacity: 0;
			transform: translateY(500%);
		}
		100%{
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes titleBottomMotion {
		0%{
			opacity: 0;
			transform: translateY(250%);
		}
		100%{
			opacity: 1;
			transform: translateY(0);
		}
	}

/***************************************
*             //Sub Common             *
***************************************/




/***************************************
*             AboutUs.html             *
***************************************/

/********* section1 *********/

#aboutUs #section1{
	padding-top: 0;
	padding-bottom: 0;
}

#aboutUs #section1 .innerWrap{
	height: 100vh;
	position: relative;
}

#aboutUs #section1 .secTitle{
	width: 100%;
	margin-top: -6rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#aboutUs #section1 .secTitle,
#aboutUs #section1 .secTitle div{
	font-weight: 700;
	color: #494949;
}

#aboutUs #section1 .secTitle.title1{
	opacity: 0;
	animation-name: titleFirstMotion;
	animation-duration: 2.5s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
#aboutUs #section1 .secTitle.title2{
	opacity: 0;
	animation-name: titleSecondMotion;
	animation-duration: 1s;
	animation-delay: 3.5s;
	animation-fill-mode: forwards;
}

#aboutUs #section1 .subTitle{
	width: 100%;
	margin-top: 12rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

#aboutUs #section1 .subTitle .title1{
	margin-bottom: 2rem;
	transform: translateY(500%);
	opacity: 0;
	animation: titleTopMotion 1s cubic-bezier(.9,0,.58,1) 4s forwards;
}

#aboutUs #section1 .subTitle .title2{
	margin-top: 1rem;
	transform: translateY(250%);
	opacity: 0;
	animation: titleBottomMotion 1s cubic-bezier(.9,0,.58,1) 4.8s forwards;
}

@media screen and (max-width: 767px) {
	#section1 .subTitle .title1 .fontOrange{
		margin-right: 0.5rem;
	}		
}


/********* section2 *********/

#aboutUs #section2 .secTitle,
#aboutUs #section2 .subTitle{
	text-align: center;
}
#aboutUs #section2 .innerWrap .secTitle div{
	margin-bottom: 1rem;
}
#aboutUs #section2 .flexWrap.grid{
	margin-top: 5rem;
}

#aboutUs #section2 .contBox{
	padding: 5rem 6rem;
	background: #f2f2f2;
	border-radius: 1.5rem;
	text-align: center;
}

#aboutUs #section2 .contBox .contTitle{
	font-size: 2.4rem;
	color: #6c6c72;
}

#aboutUs #section2 .contBox .contTitle::before{
	content: '';
	width: 5.6rem;
	height: 6.4rem;
	display: inline-block;
	margin-right: 1rem;
	text-align: center;
	vertical-align: middle;
	background: center center / cover no-repeat;
}

#aboutUs #section2 .contBox.item1 .contTitle::before{background-image: url(../img/icon_subAboutUs_rank.png);}
#aboutUs #section2 .contBox.item2 .contTitle::before{background-image: url(../img/icon_subAboutUs_partner.png);}
#aboutUs #section2 .contBox.item3 .contTitle::before{background-image: url(../img/icon_subAboutUs_sales.png);}

#aboutUs #section2 .contBox .data{
	margin-top: 7rem;
	font-size: 9rem;
	font-weight: bold;
	color: #282828;
}

#aboutUs #section2 .contBox .data:after{
	font-size: 2.8rem;
	color: #888;
}

#aboutUs #section2 .contBox.item1 .data:after{content: '위';}
#aboutUs #section2 .contBox.item2 .data:after{content: '개';}
#aboutUs #section2 .contBox.item3 .data:after{content: '억';}


@media screen and (max-width: 1279px) {

	#aboutUs #section2 .contBox{
		padding: 3rem;
	}

	#aboutUs #section2 .contBox .data{
		font-size: 7rem;
	}

	#aboutUs #section2 .contBox .contTitle{
		font-size: 2.2rem;
	}

	#aboutUs #section2 .contBox .contTitle::before{
		display: block;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {

	#aboutUs #section2 .contBox .data {
		margin-top: 3rem;
	}		
}




/********* section3 *********/

#aboutUs #section3{
	height: 100vh;
	background: url(../img/bg_subAboutUs1.jpg) center center / cover no-repeat;
	background-attachment: fixed;
}

#aboutUs #section3 .secTitle,
#aboutUs #section3 .subTitle{
	text-align: center;
	color: #fff;
}

#aboutUs #section3 .circleWrap{
	margin-top: 9rem;
}

#aboutUs #section3 .item .outCircle{
	width: 35rem;
	height: 35rem;
	padding: 2.5rem;
	position: relative;
	background-color: rgba(237, 40, 145, 0.15);
	border: 1px solid #ddd;
	border-radius: 50%;
}

#aboutUs #section3 .item .outCircle::before{
	content: '';
	width: 5px;
	height: 5px;
	position: absolute;
	top: 17.3rem;
	left: -3px;
	background-color: #fff;
	border-radius: 50%;	
}

#aboutUs #section3 .item .outCircle::after{
	content: '';
	width: 5px;
	height: 5px;
	position: absolute;
	top: 17.3rem;
	right: -3px;
	background-color: #fff;
	border-radius: 50%;	
}

#aboutUs #section3 .item:first-child .outCircle:before,
#aboutUs #section3 .item:last-child .outCircle:after{
	content: none;
}

#aboutUs #section3 .item .outCircle .inCircle{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ed2891;
	border-radius: 50%;
}
#aboutUs #section3 .item .outCircle .inCircle:after{
	content: '';
	width: 10.5rem;
	height: 1px;
	background-color: #fff;
	position: absolute;
	top: 15rem;
	right: -13rem;
}

#aboutUs #section3 .item:last-child .outCircle .inCircle::after{
	content: none;
}

#aboutUs #section3 .item .outCircle .inCircle .itemTitle{
	font-size: 2.8rem;
	color: #fff;
	text-align: center;
}

#aboutUs #section3 .item .context{
	margin-top: 2rem;
	font-size: 2.4rem;
	color: #fff;
	text-align: center;
	line-height: 1.2;
}

@media screen and (max-width: 1279px) {
	
	#aboutUs #section3 .circleWrap{
		width: 72.8rem;
		margin: 6rem auto 0;
	}

	#aboutUs #section3 .item .outCircle{
		width: 20rem;
		height: 20rem;
		padding: 1.9rem;
	}

	#aboutUs #section3 .item .outCircle::after{
		top: 9.75rem;
	}
	

	#aboutUs #section3 .item .outCircle::before{
		top: 9.74rem;
	}

	#aboutUs #section3 .item .outCircle .inCircle:after{
		width: 6.5rem;
		top: 8.1rem;
		right: -8.4rem;
	}

	#aboutUs #section3 .item .outCircle .inCircle .itemTitle{
		font-size: 2.4rem;
	}

	#aboutUs #section3 .item .context{
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 767px) {
	#aboutUs #section3{
		height: auto;
	}

	#aboutUs #section3 .circleWrap{
		width: 28rem;
		justify-content: center;
	}

	#aboutUs #section3 .item .outCircle{
		padding: 1rem;
	}

	#aboutUs #section3 .item .outCircle::before,
	#aboutUs #section3 .item .outCircle::after{
		content: none;
	}

	#aboutUs #section3 .item .outCircle .inCircle::before,
	#aboutUs #section3 .item .outCircle .inCircle::after{
		content: none;
	}

	#aboutUs #section3 .item .outCircle .inCircle .itemTitle{
		font-size: 1.8rem;
	}

	#aboutUs #section3 .item .context{
		margin: 1rem auto 4rem;
	}
	
}


/********* section4 *********/

#aboutUs #section4{
	background-color: #f0f0f0;
	padding-top: 12.4rem;
	overflow: hidden;
}

#aboutUs #section4 .btnWrap{
	margin-top: 3rem;
}

#aboutUs #section4 .slideMoveBtn{
	width: 5rem;
	height: 5rem;
	margin-right: 1rem;
	background: #ddd center center / 2.2rem no-repeat;
	border: none;
	border-radius: 50%;
}

#aboutUs #section4 .slideMoveBtn.slick-disabled{
	background-color: #c2c2c2;
}

#aboutUs #section4 .slideMoveBtn.prev{background-image: url(../img/icon_subAboutUs_arrow_prev.svg);}
#aboutUs #section4 .slideMoveBtn.next{background-image: url(../img/icon_subAboutUs_arrow_next.svg);}

#aboutUs #section4 .slideWrap{
	width: calc(100vw - (50vw - 64rem));
	margin: 3rem 0 0 auto;
	padding-top: 3rem;
	border-top: 2px solid #282828;
	cursor: grab;
}

#aboutUs #section4 .slideWrap:active{
	cursor: grabbing;
}

#aboutUs #section4 .slideWrap .slideItem{
	width: 36rem;
	margin-right: 5rem;
}

#aboutUs #section4 .slideWrap .slideItem li{
	margin: 1.6rem 0;
	display: flex;
}

#aboutUs #section4 .slideWrap .slideItem .year{
	font-size: 2.4rem;
	font-weight: bold;
}

#aboutUs #section4 .slideWrap .slideItem .month{
	margin-right: 1rem;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.2;
}

#aboutUs #section4 .slideWrap .slideItem .desc{
	width: 26rem;
	font-size: 1.6rem;
	font-weight: 500;
	color: #888;
	line-height: 1.2;
}

@media screen and (max-width: 1279px) {
	#aboutUs #section4 .slideWrap{
		width: 100%;
	}

	#aboutUs #section4 .slideWrap .slideItem{
		margin-right: 2rem;
	}
}

@media screen and (max-width: 767px) {
	#aboutUs #section4 .slideWrap .slideItem{
		width: 100%;
	}

	#aboutUs #section4 .slideWrap .slideItem .month{
		width: auto;
		margin-right: 1rem;
	}

	#aboutUs #section4 .slideWrap .slideItem .desc{
		width: auto;
	}
}


/********* section5 *********/
#aboutUs #section5 .secTitle,
#aboutUs #section5 .subTitle{
	text-align: center;
}

#aboutUs #section5 .orzChart{
	margin-top: 6.5rem;
}

#aboutUs #section5 .orzChart img{
	width: 120rem;
	margin: 0 auto;
	display: block;
}

#aboutUs #section5 .orzChart img.mobile{
	display: none;
}

@media screen and (max-width: 1279px) {
	#aboutUs #section5 .orzChart img{
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	#aboutUs #section5 .orzChart img{
		display: none;
	}

	#aboutUs #section5 .orzChart img.mobile{
		max-width: 38rem;
		display: block;
	}
}


/********* section6 *********/
#aboutUs #section6{
	background-color: #f8f8f8;
	padding-bottom: 0;
}

#aboutUs #section6 .secTitle{
	margin-top: 5rem;
	text-align: center;
}

#aboutUs #section6 .map{
	width: 100%;
	height: calc(100vh - 25.7rem);
	margin-top: 6.5rem;
	position: relative;
}

#aboutUs #section6 .map .btnWrap{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 5px;
}

#aboutUs #section6 #mapInfo{
	width: 22rem;
	padding: 0.5rem 2rem 0.5rem 0.5rem;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 2.1rem;
}


#aboutUs #section6 #mapInfo .icon{
	width: 3rem;
	height: 3rem;
	display: block;
	background: #fff url(../img/favicon/favicon_32.png) center center / 2rem no-repeat;
	border: 1px solid #e50a84;
	border-radius: 50%;
}

#aboutUs #section6 #mapInfo .address{
	font-size: 1.2rem;
	line-height: 1.2;
}

@media screen and (max-width: 1279px) {
	#aboutUs #section6{
		height: 100vh;
		padding-bottom: 10rem;
	}

	#aboutUs #section6 .map{
		height: calc(100vh - 15.7rem);
	}
}
/***************************************
*            //AboutUs.html            *
***************************************/



/***************************************
*            DesignDev.html            *
***************************************/

	/********* section1 *********/

		#designDev #section1{
			padding-top: 0;
			padding-bottom: 0;
		}

		#designDev #section1 .innerWrap{
			height: 100vh;
			position: relative;
		}

		#designDev #section1 .secTitle{
			width: 100%;
			margin-top: -6rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}

		#designDev #section1 .secTitle,
		#designDev #section1 .secTitle div{
			font-weight: 700;
			color: #494949;
		}

		#designDev #section1 .secTitle.title1{
			opacity: 0;
			animation-name: titleFirstMotion;
			animation-duration: 2.5s;
			animation-delay: 1s;
			animation-fill-mode: forwards;
		}
		#designDev #section1 .secTitle.title2{
			opacity: 0;
			animation-name: titleSecondMotion;
			animation-duration: 1s;
			animation-delay: 3.5s;
			animation-fill-mode: forwards;
		}

		#designDev #section1 .subTitle{
			width: 100%;
			margin-top: 12rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
		}
		
		#designDev #section1 .subTitle .title1{
			margin-bottom: 2rem;
			transform: translateY(500%);
			opacity: 0;
			font-size: 2.8rem;
			animation-name: titleTopMotion;
			animation-duration: 1s;
			animation-delay: 4s;
			animation-fill-mode: forwards;
			animation-timing-function: cubic-bezier(.9,0,.58,1);
		}

		#designDev #section1 .subTitle .title1 .fontOrange{
			margin-right: 2rem;
		}

		#designDev #section1 .subTitle .title2{
			margin-top: 1rem;
			transform: translateY(250%);
			opacity: 0;
			font-size: 2rem;
			animation-name: titleBottomMotion;
			animation-duration: 1s;
			animation-delay: 4.8s;
			animation-fill-mode: forwards;
			animation-timing-function: cubic-bezier(.9,0,.58,1);
		}

		@media screen and (max-width: 767px) {
			#designDev #section1 .secTitle,
			#designDev #section1 .secTitle div{
				line-height: 1.2;
				color: #494949;
			}

			#designDev #section1 .subTitle{
				padding-left: 2rem;
				padding-right: 2rem;
			}

			#designDev #section1 .subTitle .title1{
				font-size: 2rem;
				line-height: 1.2;
				word-break: keep-all;
			}

			#designDev #section1 .subTitle .title1 .fontOrange{
				margin-right: 0.5rem;
			}

			#designDev #section1 .subTitle .title2{
				font-size: 1.4rem;
				line-height: 1.2;
				word-break: keep-all;
			}
		}


	/********* section3 *********/

		#designDev #section3{
			background: #F8F8F8;
		}
		#designDev #section3 .secTitle,
		#designDev #section3 .subTitle{
			text-align: center;
		}

		#designDev #section3 .process{
			margin-top: 6.5rem;
		}

		#designDev #section3 .process img{
			width: 120rem;
			margin: 0 auto;
			display: block;
		}

		#designDev #section3 .process img.mobile{
			display: none;
		}

		@media screen and (max-width: 1279px) {
			#designDev #section3 .process img{
				width: 100%;
			}
		}

		@media screen and (max-width: 767px) {
			#designDev #section3 .process img{
				display: none;
			}

			#designDev #section3 .process img.mobile{
				max-width: 38rem;
				display: block;
			}
			#designDev #section3 .process img{
				width: 80%;
			}
		}


	/********* section4 *********/

		#designDev #section4 .innerWrap{
			position: relative;
		}

		#designDev #section4 .secTitle{
			padding-top: 7rem;
		}

		#designDev #section4 .secTitle div,
		#designDev #section4 .subTitle div{
			font-size: inherit;
		}

		#designDev #section4 .secTitle div{
			margin-bottom: 1rem;
		}
		#designDev #section4 .slide{
			width: 50%;
			margin-top: 8rem;
			margin-left: -1rem;
			margin-bottom: 0;
		}

		#designDev #section4 .slide .slideItem{
			width: 16.6667%;
			height: 24.7rem;
			margin: 0 1rem;
			position: relative;
			border-radius: 2rem;
			overflow: hidden;
		}

		#designDev #section4 .slide .slideItem img{
			width: 100%;
		}
		
		#designDev #section4 .slide .slideItem .hoverLink{
			width: 100%;
			height: 100%;
			display: none;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.5);
		}

		#designDev #section4 .slide .slideItem:hover .hoverLink{
			display: flex;
		}
		
		#designDev #section4 .slide .slideItem .hoverLink .itemTitle{
			margin-top: 8rem;
			font-size: 2rem;
			color: #fff;
		}

		#designDev #section4 .slide .slideItem .hoverLink .moreView{
			width: 2.4rem;
			height: 2.4rem;
			margin-bottom: 8rem;
			background: url(../img/icon_subDesignDev_btn.svg) top center no-repeat;
			background-size: contain;
			border: none;
		}

		#designDev #section4 .slide .slick-dots {
			position: absolute;
			top: -2.5rem;
			bottom: auto;
			left: 1rem;
			display: block;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
			text-align: left
		}

		#designDev #section4 .slide .slick-dots li{
			width: 0.6rem;
			height: 0.6rem;
		}

		#designDev #section4 .slide .slick-dots li button:before {
			content: '';
			width: 0.6rem;
			height: 0.6rem;
			background-color: #888;
			border-radius: 50%;
			opacity: 1;
		}

		#designDev #section4 .slide .slick-dots li button:hover:before,
		#designDev #section4 .slide .slick-dots li button:focus:before{
			background-color: #282828;
		}

		#designDev #section4 .slide .slick-dots li.slick-active button:before{
			opacity: 1;
			background-color: #ffb926;
		}

		#designDev #section4 .thumbnailVideo{
			width: 35rem;
			position: absolute;
			bottom: 0;
			right: 0;
			border-radius: 2rem;
			overflow: hidden;
		}

		#designDev #section4 .thumbnailVideo .slideItem{
			height: 60rem;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			border: none;
		}

		#designDev #section4 .thumbnailVideo .item1{background-image: url(../img/img_subDesignDev_vertical01.jpg);}
		#designDev #section4 .thumbnailVideo .item2{background-image: url(../img/img_subDesignDev_vertical02.jpg);}
		#designDev #section4 .thumbnailVideo .item3{background-image: url(../img/img_subDesignDev_vertical03.jpg);}
		#designDev #section4 .thumbnailVideo .item4{background-image: url(../img/img_subDesignDev_vertical04.jpg);}
		#designDev #section4 .thumbnailVideo .item5{background-image: url(../img/img_subDesignDev_vertical05.jpg);}
		#designDev #section4 .thumbnailVideo .item6{background-image: url(../img/img_subDesignDev_vertical06.jpg);}
		#designDev #section4 .thumbnailVideo .item7{background-image: url(../img/img_subDesignDev_vertical07.jpg);}
		#designDev #section4 .thumbnailVideo .item8{background-image: url(../img/img_subDesignDev_vertical08.jpg);}
		#designDev #section4 .thumbnailVideo .item9{background-image: url(../img/img_subDesignDev_vertical09.jpg);}


		@media screen and (max-width: 1366px) {
			
			#designDev #section4 .thumbnailVideo{
				width: 32rem;
			}

			#designDev #section4 .thumbnailVideo .slideItem{
				height: 58rem;
			}

		}


		@media screen and (max-width: 1279px) {
			#designDev #section4 .subTitle{
				width: 32rem;
			}

			#designDev #section4 .subTitle div{
				line-height: 1.2;
				word-break: keep-all;
			}

			#designDev #section4 .slide{
				width: 42rem;
			}

			#designDev #section4 .slide .slideItem{
				height: 16.8rem;
			}

			#designDev #section4 .slide .slideItem .hoverLink .itemTitle{
				margin-top: 5rem;
				word-break: keep-all;
				text-align: center;
				line-height: 1..2;
			}

			#designDev #section4 .slide .slideItem .hoverLink .moreView{
				margin-bottom: 5rem;
			}

			#designDev #section4 .thumbnailVideo{
				width: 30rem;
				height: 60rem;
				right: 2rem;
			}
		}

		@media screen and (max-width: 767px) {

			#designDev #section4 .secTitle,
			#designDev #section4 .subTitle{
				width: 100%;
				text-align: center;
			}

			#designDev #section4 .secTitle{
				margin: 0 auto;
			}

			#designDev #section4 .slide{
				width: 100%;
				margin-left: 0;
			}

			#designDev #section4 .slide .slideItem{
				height: 100%;
				margin: 0 0.5rem;
			}

			#designDev #section4 .slide .slideItem .hoverLink .itemTitle{
				margin-top: 3rem;
				font-size: 1.4rem;
				text-align: center;
				word-break: keep-all;
			}

			#designDev #section4 .slide .slideItem .hoverLink .moreView{
				margin-bottom: 3rem;
			}

			#designDev #section4 .thumbnailVideo{
				display: none;
			}
		}


	/********* section5 *********/
		#designDev #section5{
			background-color: #ffb926;
		}

		#designDev #section5 .secTitle div,
		#designDev #section5 .subTitle div{
			font-size: inherit;
			text-align: center;
			color: #fff;
		}

		#designDev #section5 .secTitle div{
			margin-bottom: 1rem;
		}

		#designDev #section5 .subTitle div{
			margin-bottom: 0.6rem;
		}

		#designDev #section5 .btnWrap{
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		#designDev #section5 .characterDesignBtn{
			width: 25%;
			background-color: transparent;
			border: none;
		}

		#designDev #section5 .characterDesignBtn img{
			width: 100%;
			transition: transform .3s;
		}

		#designDev #section5 .characterDesignBtn:hover img{
			transform: scale(1.05);
		}

		.veki { position: absolute; top:-4rem; right:20%; width:20% !important;}

		@media screen and (max-width: 767px) {

			#designDev #section5 .secTitle{
				font-size: 3.6rem;
			}

			#designDev #section5 .characterDesignBtn{
				width: 33.3333%;
			}

			#designDev #section5 .characterDesignBtn img{
				width: 100%;
			}
			.veki { 
				top:0;
			}
		}



	/********* Modal Pop-up Window *********/

		#popupWrap .popupFrame.on.characterDesignModal{
			width: 100rem;
			height: auto;
			padding: 0.6rem;
			background-color: #ffb926;
			border-radius: 4rem;
		}

		#popupWrap .popupFrame.on.characterDesignModal .flexWrap{
			flex-wrap: unset;
			align-items: stretch;
			gap: 6rem;
		}

		.characterDesignModal .leftBox{
			padding: 4rem;
		}

		.characterDesignModal .leftBox {
			text-align: center;
		}

		.characterDesignModal .leftBox .imgBox{
			width: 30rem;
			height: 30rem;
			background-size: cover;
		}

		.characterDesignModal .leftBox .charNm{
			margin-top: 2rem;
			font-size: 3.6rem;
			font-weight: 600;
			color: #fff;
		}

		.characterDesignModal .leftBox .charEngNm{
			margin-top: 1rem;
			font-size: 2.8rem;
			color: #fff;
		}

		.characterDesignModal .rightBox{
			padding: 5rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-radius: 0 3.4rem 3.4rem 0;
			background-color: #fff;
		}


		.characterDesignModal .rightBox .charDescTitle{
			margin-top: 2rem;
			font-size: 3.6rem;
			color: #ffb926;
		}

		.characterDesignModal .rightBox .charDescTitle:first-child{
			margin-top: 0;
		}

		.characterDesignModal .rightBox .charDescription{
			max-height: 10rem;
			margin-top: 1rem;
			font-size: 2rem;
			color: #888;
			line-height: 1.6;
			overflow-y: auto;
		}

		.characterDesignModal .rightBox .btnWrap{
			margin-top: 4rem;
			display: flex;
			justify-content: flex-start;
			gap: 1rem;
		}

		@media screen and (max-width: 1279px) {
			#popupWrap .popupFrame.on.characterDesignModal{
				width: 56rem;
				height: auto;
				padding: 0.6rem;
				background-color: #ffb926;
				border-radius: 4rem;
			}

			#popupWrap .popupFrame.on.characterDesignModal .flexWrap{
				align-items: center;
				flex-direction: column;
				gap: 2rem;
			}

			.characterDesignModal .leftBox{
				padding: 2rem;
			}
			
			.characterDesignModal .leftBox .imgBox{
				width: 20rem;
				height: 20rem;
			}
			
			.characterDesignModal .leftBox figure{
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 6rem;
			}

			.characterDesignModal .rightBox{
				border-radius: 0 0 3.7rem 3.7rem;
			}
		}

		@media screen and (max-width: 767px) {
			#popupWrap .popupFrame.on.characterDesignModal{
				width: 70%;
			}

			#popupWrap .popupFrame.on.characterDesignModal .flexWrap{
				gap: 0;
			}

			.characterDesignModal .leftBox{
				padding: 1rem;
			}
			
			.characterDesignModal .leftBox .imgBox{
				width: 12rem;
				height: 12rem;
			}
			
			.characterDesignModal .leftBox figure{
				gap: 1rem;
			}

			.characterDesignModal .leftBox .charNm{
				margin-top: 1rem;
				font-size: 2.4rem;
			}

			.characterDesignModal .leftBox .charNm{
				font-size: 1.8rem;
			}
			.characterDesignModal .rightBox{
				padding: 2rem;
			}

			.characterDesignModal .rightBox .charDescTitle{
				margin-top: 1rem;
				font-size: 2rem;	
			}

			.characterDesignModal .rightBox .charDescription{
				max-height: 7rem;
				margin-top: 0.5rem;
				font-size: 1.4rem;
				line-height: 1.2;
			}

			.characterDesignModal .rightBox .btnWrap{
				margin-top: 1rem;
				flex-direction: column;
			}

			#popupWrap .popupFrame .closePopupBtn{
				width: 2rem;
				height: 2rem;
				right: -3rem;
			}
		}

		#popupWrap #popupDealPageDesignModal{
			width: 86rem;
			height: 70rem;
			padding: 0;
			border-radius: 0;
		}

		#popupWrap #popupDealPageDesignModal .contWrap{
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			overflow-y: scroll;
			overflow-x: hidden;
		}
		#popupWrap #popupDealPageDesignModal .contWrap::-webkit-scrollbar{
			width: 1rem;
			background-color: #e1e1e1;
		}
		#popupWrap #popupDealPageDesignModal .contWrap::-webkit-scrollbar-thumb{
			background-color: #282828;
			border-radius: 1rem;
		}
		#popupWrap #popupDealPageDesignModal .contWrap::-webkit-scrollbar-track{
			background-color: #f0f0f0;
		}


		@media screen and (max-width: 1279px) {
			#popupWrap #popupDealPageDesignModal{
				width: 61rem;
				height: 70vh;
				padding: 0;
				border-radius: 0;
			}
		}

		@media screen and (max-width: 767px) {
			#popupWrap #popupDealPageDesignModal{
				width: 32rem;
			}

			#popupWrap #popupDealPageDesignModal .closePopupBtn{
				right: 1rem;
			}

			.dealPageDesignModal img{
				width: 100%;
			}
		}

/***************************************
*           //DesignDev.html           *
***************************************/


/***************************************
*            contentsBiz.html            *
***************************************/

	/********* section1 *********/

	#contentsBiz #section1{
		padding-top: 0;
		padding-bottom: 0;
		background-color: #fff;
	}

	#contentsBiz #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#contentsBiz #section1 .secTitle{
		width: 100%;
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	

	@media screen and (max-width: 767px) {

		#contentsBiz #section1 .subTitle{
			padding-left: 2rem;
			padding-right: 2rem;
		}

		#contentsBiz #section1 .subTitle .title1{
			font-size: 2rem;
			line-height: 1.2;
			word-break: keep-all;
		}

		#contentsBiz #section1 .subTitle .title1 .fontOrange{
			margin-right: 0.5rem;
		}

		#contentsBiz #section1 .subTitle .title2{
			font-size: 1.4rem;
			line-height: 1.2;
			word-break: keep-all;
		}
	}



/********* section2 *********/

	#contentsBiz #section2{
		background-color: #f8f8f8;
		padding-bottom: 0;
	}

	#contentsBiz #section2 .secTitle,
	#contentsBiz #section2 .subTitle{
		text-align: center;
	}

	#contentsBiz #section2 .flexWrap.grid{
		margin-top: 5rem;
	}

	#contentsBiz #section2 .conBox{
		position: relative;
		padding: calc(100% - 2rem) 2rem 2rem;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		border-radius: 3rem;
	}

	#contentsBiz #section2 .img1{
		background-image: url(../img/img_ContentsBiz_onlineMarketing.png);
	}

	#contentsBiz #section2 .img2{
		background-image: url(../img/img_ContentsBiz_VideoProduction.png);
	}

	#contentsBiz #section2 .img3{
		background-image: url(../img/img_ContentsBiz_LiveCommerce.png);
	}

	#contentsBiz #section2 .textBox{
		position: absolute;
		top: 50px;
		left: 50px;
	}

	#contentsBiz #section2 .caption{
		margin-bottom: 1.4rem;
		font-size: 2.4rem;
		color: #ffffff;
		font-weight: 500;
	}

	#contentsBiz #section2 .description{
		margin-bottom: 1rem;
		font-size: 1.6rem;
		color: #ffffff;
		word-break: keep-all;
		line-height: 1.2;
	}

	#contentsBiz #section2 .storyWrap{
		width: 100%;
		margin: 2rem auto 0;
		width: 60rem;
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border: 1px solid #e1e1e1;
		border-radius: 10rem;
	}

	#contentsBiz #section2 .storyWrap .contTitle{
		padding-left: 5.5rem;
		font-size: 2rem;
		color:#888;
		font-weight: 400;
	}
	
	#contentsBiz #section2 .storyWrap .btnTeamStroy .btnNm{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}
	
	#contentsBiz #section2 .storyWrap .btnTeamStroy .btnNm .icon{
		width: 3.2rem;
		height: 3.2rem;
		background: #00AFC3 url(../img/icon_subContentsBiz_planet.svg) center center / 3.3rem no-repeat;
		border-radius: 50%;
	}

	#contentsBiz #section2 .storyWrap .btnTeamStroy .btnNm .fa-instagram{
		width: 3rem;
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 2.6rem;
		color: #00AFC3;
	}

	#contentsBiz #section2 .storyWrap .btnTeamStroy:hover .btnNm .fa-instagram{
		color: #fff;
	}

	@media screen and (max-width: 1366px) {
		
		#contentsBiz #section2 .profile{
			padding: 1.5rem 2rem;
		}

		#contentsBiz #section2 .profile figcaption{
			height: 12rem;
		}

	}

	@media screen and (max-width: 1279px) {

		#contentsBiz #section2
.flexWrap.grid div:nth-child(1){order: 2;}
		#contentsBiz #section2
.flexWrap.grid div:nth-child(2){order: 1;}
		#contentsBiz #section2
.flexWrap.grid div:nth-child(3){order: 3;}
		#contentsBiz #section2
.flexWrap.grid div:nth-child(4){order: 4;}
		#contentsBiz #section2
.flexWrap.grid div:nth-child(5){order: 5;}
		#contentsBiz #section2
.flexWrap.grid div:nth-child(6){order: 6;}
	}

	@media screen and (max-width: 767px) {
		
		#contentsBiz #section2
{
			padding-top: 10rem;
			padding-bottom: 10rem;
		}				

		#contentsBiz #section2
.profile{
			padding: 2rem;
			gap: 1rem;
		}

		#contentsBiz #section2
.profile img{
			width: 10rem;
			height: 10rem;
		}

		#contentsBiz #section2
.profile figcaption{
			height: 12rem;
		}

		#contentsBiz #section2
.profile figcaption .description{
			font-size: 1.4rem;
		}

		#contentsBiz #section2
.storyWrap{
			width: 100%;
		}

		#contentsBiz #section2
.storyWrap .contTitle{
			width: 12.2rem;
			padding-left: 2rem;
			font-size: 1.4rem;
			text-align: center;
			line-height: 1.4;
			word-break: keep-all;
		}
	}
	


/********* section3 *********/

	#contentsBiz #section3 .secTitle,
	#contentsBiz #section3 .subTitle{
		text-align: center;
	}

	#contentsBiz #section3 .process{
		margin-top: 6.5rem;
	}

	#contentsBiz #section3 .process img{
		width: 120rem;
		margin: 0 auto;
		display: block;
	}

	#contentsBiz #section3 .process img.mobile{
		display: none;
	}

	@media screen and (max-width: 1279px) {
		#contentsBiz #section3 .process img{
			width: 100%;
		}
	}

	@media screen and (max-width: 767px) {
		#contentsBiz #section3 .process img{
			display: none;
		}

		#contentsBiz #section3 .process img.mobile{
			max-width: 38rem;
			display: block;
		}
		#contentsBiz #section3 .process img{
			width: 80%;
		}
	}



/********* section4 *********/

	#contentsBiz #section4,
	#contentsBiz #section6{
		background-color: #f0f0f0;
	}

	#contentsBiz #section4 .innerWrap,
	#contentsBiz #section5 .innerWrap,
	#contentsBiz #section6 .innerWrap{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#contentsBiz #section4 .innerWrap .secTitle div,
	#contentsBiz #section5 .innerWrap .secTitle div,
	#contentsBiz #section6 .innerWrap .secTitle div{
		margin-bottom: 1rem;
	}

	#contentsBiz #section4 .innerWrap .wrapper,
	#contentsBiz #section5 .innerWrap .wrapper,
	#contentsBiz #section6 .innerWrap .wrapper{
		width: 50%;
	}
	#contentsBiz #section4 .innerWrap .wrapper .btnWrap,
	#contentsBiz #section5 .innerWrap .wrapper .btnWrap,
	#contentsBiz #section6 .innerWrap .wrapper .btnWrap{
		display: flex;
		gap: 1rem;
	}

	#contentsBiz #section4 .secTitle,
	#contentsBiz #section5 .secTitle,
	#contentsBiz #section6 .secTitle{
		margin-top: 3rem;
	}

	#contentsBiz #section4 .slide,
	#contentsBiz #section5 .slide,
	#contentsBiz #section6 .slide{
		margin-top: 5rem;
	}

	#contentsBiz .slide .slideItem{
		width: 16.6667%;
		height: 24.7rem;
		margin: 0 1rem;
		position: relative;
		border-radius: 2rem;
		overflow: hidden;
	}

	#contentsBiz .slide .slideItem .imgBox{
		height: 26.8rem;
		background: center center / cover no-repeat;
	}

	#contentsBiz #section4 .slide .slideItem.item1 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio01.jpg);}
	#contentsBiz #section4 .slide .slideItem.item2 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio02.jpg);}
	#contentsBiz #section4 .slide .slideItem.item3 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio03.jpg);}
	
	#contentsBiz .slide .slideItem .hoverLink{
		width: 100%;
		height: 100%;
		display: none;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.5);
	}

	#contentsBiz .slide .slideItem:hover .hoverLink{
		display: flex;
	}
	
	#contentsBiz .slide .slideItem .hoverLink .itemTitle{
		margin-top: 8rem;
		font-size: 2rem;
		color: #fff;
	}

	#contentsBiz .slide .slideItem .hoverLink .moreView{
		width: 2.4rem;
		height: 2.4rem;
		margin-bottom: 8rem;
		background: url(../img/icon_subDesignDev_btn.svg) top center no-repeat;
		background-size: contain;
		border: none;
	}

	#contentsBiz .slide .slick-dots {
		position: absolute;
		top: -2.5rem;
		bottom: auto;
		left: 1rem;
		display: block;
		width: 100%;
		padding: 0;
		margin: 0;
		list-style: none;
		text-align: left
	}

	#contentsBiz .slide .slick-dots li{
		width: 0.6rem;
		height: 0.6rem;
	}

	#contentsBiz .slide .slick-dots li button:before {
		content: '';
		width: 0.6rem;
		height: 0.6rem;
		background-color: #888;
		border-radius: 50%;
		opacity: 1;
	}

	#contentsBiz .slide .slick-dots li button:hover:before,
	#contentsBiz .slide .slick-dots li button:focus:before{
		background-color: #282828;
	}

	#contentsBiz .slide .slick-dots li.slick-active button:before{
		opacity: 1;
		background-color: #00afc3;
	}

	#contentsBiz .video video{
		border-radius: 2rem;
		width: 40rem;
	}


	@media screen and (max-width: 1366px) {
		
		#contentsBiz .video video{
			width: 30rem;
		}

	}



	@media screen and (max-width: 1279px) {

		#contentsBiz .subTitle div{
			word-break: keep-all;
		}

		#contentsBiz #section4 .subTitle,
		#contentsBiz #section5 .subTitle,
		#contentsBiz #section6 .subTitle{
			font-size: 1.6rem;
		}

		#contentsBiz #section4 .innerWrap .wrapper,
		#contentsBiz #section5 .innerWrap .wrapper,
		#contentsBiz #section6 .innerWrap .wrapper{
			width: calc(100% - 32rem);
		}

		#contentsBiz .slide{
			width: 42rem;
		}

		#contentsBiz .slide .slideItem{
			height: 16.8rem;
		}

		#contentsBiz .slide .slideItem .hoverLink .itemTitle{
			margin-top: 5rem;
			word-break: keep-all;
			text-align: center;
			line-height: 1..2;
		}

		#contentsBiz .slide .slideItem .hoverLink .moreView{
			margin-bottom: 5rem;
		}

		#contentsBiz .thumbnailVideo{
			width: 30rem;
			height: 60rem;
			right: 2rem;
		}
	}

	@media screen and (max-width: 767px) {

		#contentsBiz #section4 .innerWrap .wrapper,
		#contentsBiz #section5 .innerWrap .wrapper,
		#contentsBiz #section6 .innerWrap .wrapper{
			width: 100%;
		}

		#contentsBiz .video video{
			display: none;
		}

		#contentsBiz .secTitle,
		#contentsBiz .subTitle{
			width: 100%;
			text-align: center;
		}

		#contentsBiz .secTitle{
			margin: 0 auto;
		}

		#contentsBiz #section4 .innerWrap .wrapper .btnWrap, 
		#contentsBiz #section5 .innerWrap .wrapper .btnWrap, 
		#contentsBiz #section6 .innerWrap .wrapper .btnWrap {
			justify-content: center;
		}

		#contentsBiz .slide{
			width: 100%;
			margin-left: 0;
		}

		#contentsBiz .slide .slideItem{
			height: 13.5rem;
			margin: 0 0.5rem;
		}
		
		#contentsBiz .slide .slideItem .imgBox{
			height: 14rem;
		}

		#contentsBiz .slide .slideItem .hoverLink .itemTitle{
			margin-top: 3rem;
			font-size: 1.4rem;
			text-align: center;
			word-break: keep-all;
		}

		#contentsBiz .slide .slideItem .hoverLink .moreView{
			margin-bottom: 3rem;
		}
	}

/********* section5 *********/

	#contentsBiz #section5{
		background-color: #fff;
	}

	#contentsBiz #section5 .slide .slideItem.item1 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio04.jpg);}
	#contentsBiz #section5 .slide .slideItem.item2 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio05.jpg);}
	#contentsBiz #section5 .slide .slideItem.item3 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio06.jpg);}


/********* section6 *********/

	#contentsBiz #section6 .slide .slideItem.item1 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio07.jpg);}
	#contentsBiz #section6 .slide .slideItem.item2 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio08.jpg);}
	#contentsBiz #section6 .slide .slideItem.item3 .imgBox{background-image: url(../img/img_ContentsBiz_portfolio09.jpg);}


/********* section7 *********/

	#contentsBiz #section7{
		width: 100%;
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}
	
	#contentsBiz #section7 .secTitle,
	#contentsBiz #section7 .subTitle{
		text-align: center;
	}

	#contentsBiz #section7 .subTitle + .subTitle{
		margin-top: 1rem;
	}

	#contentsBiz #section7 .logoPbb{
		display: block;
		width: 280px;
		height: 52px;
		background: url(../img/logo_photoBangBang.png) 0 0 no-repeat;
		margin: 12px auto;
	}
	
	#contentsBiz #section7 .VideoWrap{
		width: 80rem;
		height: auto;
		margin: 5rem auto 0;
		padding-top: 35.25%;
		position: relative;
	}

	#contentsBiz #section7 .VideoWrap iframe{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	@media screen and (max-width: 1279px) {
		#contentsBiz #section7 .subTitle{
			margin-top: 1rem;
		}

		#contentsBiz #section7 .VideoWrap{
			width: 100%;
			padding-top: 56.25%;
		}
	}

	@media screen and (max-width: 767px) {
		#contentsBiz #section7 .logoPbb{
			width: 220px;
			background-size: 100%;
		}
	}
	

	/********* Modal Pop-up Window *********/
		
	#popupWrap #popupMarketingPortfolioModal{
		width: 112.8rem;
		height: 70rem;
		padding: 0;
		border-radius: 0;
	}

	#popupWrap #popupMarketingPortfolioModal .contWrap{
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		overflow-y: auto;
	}
	#popupWrap #popupMarketingPortfolioModal .contWrap::-webkit-scrollbar{
		width: 1rem;
		background-color: #e1e1e1;
	}
	#popupWrap #popupMarketingPortfolioModal .contWrap::-webkit-scrollbar-thumb{
		background-color: #282828;
		border-radius: 1rem;
	}
	#popupWrap #popupMarketingPortfolioModal .contWrap::-webkit-scrollbar-track{
		background-color: #f0f0f0;
	}

	.marketingPortfolioModal img{
		height: 100%;
		margin: 0 auto;
	}

	@media screen and (max-width: 1279px) {
		#popupWrap #popupMarketingPortfolioModal{
			width: 80vw;
			height: auto;
			max-height: 70vh;
			padding: 0;
			border-radius: 0;
		}
	}

	@media screen and (max-width: 767px) {
		.marketingPortfolioModal img{
			width: 100%;
			height: auto;
		}
	}




/***************************************
*           //contentsBiz.html           *
***************************************/



/***************************************
*            Mobility.html             *
***************************************/

	/********* Section1 *********/
	#mobillity #section1{
		padding-top: 0;
		padding-bottom: 0;
	}

	#mobillity #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#mobillity #section1 .secTitle{
		width: 100%;
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	/********* // Section1 *********/



	/********* section2 *********/
	#mobillity #section2{
		background-color: #f8f8f8;
	}

	#mobillity #section2 .secTitle,
	#mobillity #section2 .subTitle{
		text-align: center;
	}

	#mobillity #section2 .secTitle{
		padding-top: 7rem;
	}

	#mobillity #section2 .secTitle div{
		margin-bottom: 1rem;
	}

	#mobillity #section2 .video_rentacar{
		height: 40rem;
	}

	#mobillity #section2 .rentcarWrap{
		width: 100%;
		margin: 2rem auto 0;
		width: 60rem;
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border: 1px solid #e1e1e1;
		border-radius: 10rem;
	}

	#mobillity #section2 .rentcarWrap .contTitle{
		padding-left: 2.5rem;
		font-size: 2rem;
		color: #888;
		font-weight: 400;
	}
	

	#mobillity #section2 .rentcarWrap .btnTeamStroy .btnNm{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}

	#mobillity #section2 .rentcarWrap .btnTeamStroy .btnNm .icon_car{
		width: 3.2rem;
		height: 3.2rem;
		position: relative;
		background: url(../img/icon_subMobility_car.svg) center center no-repeat;
		border: 1px solid #ffb926;
		border-radius: 50%;
	}

	#mobillity #section2 .rentcarWrap .btnTeamStroy:hover .btnNm .icon_car:after{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #ffb926;
		border-radius: 50%;
	}

	#mobillity #section2 .rentcarWrap .btnTeamStroy:hover .btnNm .icon_car{
		background: url(../img/icon_subMobility_car_on.svg) center center no-repeat;
	}


	@media screen and (max-width: 767px) {
		
		#mobillity #section2{
			padding-top: 10rem;
			padding-bottom: 10rem;
		}
		
		#mobillity #section2 video {
			width: 100%;
		}
		#mobillity #section2 .video_rentacar {
			height: 30rem;
		}

		#mobillity #section2 .rentcarWrap{
			width: 100%;
			margin: 0 auto;
			background-color: transparent;
			border: none;
		}

		#mobillity #section2 .rentcarWrap .contTitle{
			/* width: 12.2rem;
			padding-left: 2rem;
			font-size: 1.4rem;
			text-align: center;
			line-height: 1.4;
			word-break: keep-all; */
			display: none;
		}

		#mobillity #section2 .rentcarWrap .btnTeamStroy{
			display: block;
			margin: 0 auto; 
		}
	}
	/********* //Section2 *********/


	/********* Section3 *********/
	#mobillity #section3{
		background-color: #FFECC2;
		padding-top: 8.4rem;
	}

	#mobillity #section3 .innerWrap{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	#mobillity #section3 .secTitle{
		padding-top: 7rem;
	}

	#mobillity #section3 .secTitle div,
	#mobillity #section3 .subTitle div{
		font-size: inherit;
	}

	#mobillity #section3 .secTitle div{
		margin-bottom: 1rem;
	}

	#mobillity #section3 .btn{
		margin-top: 6rem;
		width: 20rem;
	}

	#mobillity #section3 .notReady:hover {
    cursor: not-allowed;
  }

	#mobillity #section3 .busWrap{
		width: 72rem;
		position: relative;
		overflow: hidden;
	}

	#mobillity #section3 .busWrap img { 
		width: 100%;
	}

	@media screen and (max-width: 1279px) {
		#mobillity #section3 .subTitle{
			width: 32rem;
		}

	}

	@media screen and (max-width: 767px) {

		#mobillity #section3 .innerWrap {
			position: relative;
			display: block;
		}

		#mobillity #section3 .secTitle,
		#mobillity #section3 .subTitle{
			width: 100%;
			text-align: center;
		}

		#mobillity #section3 .secTitle{
			margin: 0 auto;
		}

		#mobillity #section3 .wrapper {
			text-align: center;
		}

		#mobillity #section3 .btn{
			margin-top: 2rem;
		}

		#mobillity #section3 .busWrap{
			width: auto;
			margin-top: 6rem;
		}
	}
	/********* //Section3 *********/

	/********* Section4 *********/

	#mobillity #section4 {
		border-bottom: 1px solid #f2f2f2;
	}

	#mobillity #section4 .secTitle,
	#mobillity #section4 .subTitle{
		text-align: center;
	}

	#mobillity #section4 .contWrap{
		margin-top: 6rem;
		overflow: hidden;
	}

	#mobillity #section4 .contWrap .contentBox{
		height: 19rem;
		float: left;
		padding: 7rem 4.6rem;
		border-radius: 11rem;
		background-color: #fff;
	}

	#mobillity #section4 .contWrap .content1{
		background-color: #f8f8f8;
	}
	#mobillity #section4 .contWrap .content2{
		margin-left: -3rem;
		background-color: rgba(255, 185, 38, 0.5);
	}
	#mobillity #section4 .contWrap .content3{
		margin-left: -3rem;
		background-color: rgba(255, 185, 38, 0.9);
	}
	#mobillity #section4 .contWrap .content4{
		width: 19rem;
		margin-left: -3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #282828;
		border-radius: 50%;
	}

	#mobillity #section4 .contWrap .content4 .contTitle{
		color: #fff;
	}

	#mobillity #section4 .contWrap .contentBox .contTitle{
		font-size: 2rem;
		font-weight: 600;
	}
	#mobillity #section4 .contWrap .contentBox.content1 .contTitle{text-align: right;}
	#mobillity #section4 .contWrap .contentBox.content2 .contTitle{text-align: left;}
	#mobillity #section4 .contWrap .contentBox.content3 .contTitle{text-align: left;}
	#mobillity #section4 .contWrap .contentBox.content4 .contTitle{text-align: center;}

	#mobillity #section4 .contWrap .contentBox .contDesc{
		margin-top: 1.5rem;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#mobillity #section4 .contWrap .contentBox .contDesc .contText{
		margin: 0 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
		position: relative;
		font-size: 1.4rem;
	}

	#mobillity #section4 .contWrap .contentBox .contDesc .contText:first-child{
		padding-left: 0;
	}
	#mobillity #section4 .contWrap .contentBox .contDesc .contText:last-child{
		padding-right: 0;
	}

	#mobillity #section4 .contWrap .contentBox .contDesc .contText:first-child{
		margin-left: 0;
	}
	
	#mobillity #section4 .contWrap .contentBox .contDesc .contText:last-child{
		margin-right: 0;
	}

	#mobillity #section4 .contWrap .contentBox .contDesc .contText::before{
		content: '';
		width: 5px;
		height: 5px;
		position: absolute;
		top: 5px;
		left: -5px;
		border-radius: 50%;
		background-color: #282828;
	}

	#mobillity #section4 .contWrap .contentBox .contDesc .contText:first-child:before,
	#mobillity #section4 .contWrap .contentBox .contDesc .contText:last-child:after{
		content: none;
	}

	#mobillity #section4 .contWrap .contentBox .contDesc .contText::after{
		content: '';
		width: 4rem;
		height: 5px;
		position: absolute;
		top: 5px;
		right: -40px;
		background: url(../img/img_subDesignDev_line.png)center center no-repeat;
	}


	@media screen and (max-width: 1279px) {
		#mobillity #section4 .contWrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: center;
		}

		#mobillity #section4 .contWrap .contentBox{
			margin-top: 1rem;
		}
	}

	@media screen and (max-width: 794px) {
		#mobillity #section4 .contWrap .content2,
		#mobillity #section4 .contWrap .content3{
			margin-left: 0;
		}
	}

	@media screen and (max-width: 767px) {
		#mobillity #section4 .secTitle{
			width: 100%;
			line-height: 1.2;
		}

		#mobillity #section4 .contWrap .contentBox{
			height: 16rem;
			padding: 3rem;
			border-radius: 8rem;
		}

		#mobillity #section4 .contWrap .contentBox .contTitle{
			word-break: keep-all;
			line-height: 1.2;
		}

		#mobillity #section4 .contWrap .contentBox .contDesc .contText{
			padding-right: 0.2rem;
			word-break: keep-all;
		}

		#mobillity #section4 .contWrap .content4{
			width: 16rem;
		}

	}

	@media screen and (max-width: 567px) {
		#mobillity #section4 .contWrap .content4{
			margin-left: 0;
		}
	}
	/********* //Section4 *********/


/***************************************
*           //Mobility.html           *
***************************************/


/***************************************
*            systemDev.html            *
***************************************/

	/********* section1 *********/

	#systemDev #section1{
		padding-top: 0;
		padding-bottom: 0;
	}

	#systemDev #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#systemDev #section1 .secTitle{
		width: 100%;
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	#systemDev #section1 .secTitle,
	#systemDev #section1 .secTitle div{
		font-weight: 700;
		color: var(--gray1);
	}

	#systemDev #section1 .secTitle.title2{
		opacity: 0;
		animation-name: titleSecondMotion;
		animation-duration: 2.5s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	
	#systemDev #section1 .subTitle{
		width: 100%;
		margin-top: 12rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	#systemDev #section1 .subTitle .title1{
		margin-bottom: 2rem;
		transform: translateY(500%);
		opacity: 0;
		font-size: 2.8rem;
		font-weight: 600;
		color: var(--dark);
		animation-name: titleTopMotion;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}
	
	#systemDev #section1 .subTitle .title1 .fontColor{
		margin-right: 2rem;
	}

	#systemDev #section1 .subTitle .title2{
		margin-top: 1rem;
		transform: translateY(250%);
		opacity: 0;
		font-size: 2rem;
		animation-name: titleBottomMotion;
		animation-duration: 1s;
		animation-delay: 3.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	@media screen and (max-width: 767px) {
		#systemDev #section1 .secTitle,
		#systemDev #section1 .secTitle div{
			line-height: 1.2;
		}

		#systemDev #section1 .subTitle{
			padding-left: 2rem;
			padding-right: 2rem;
		}

		#systemDev #section1 .subTitle .title1{
			font-size: 2rem;
			line-height: 1.2;
		}

		#systemDev #section1 .subTitle .title1 .fontColor{
			margin-right: 0.5rem;
		}

		#systemDev #section1 .subTitle .title2{
			font-size: 1.4rem;
			line-height: 1.2;
		}
	}



/********* section2 *********/

	#systemDev #section2{
		background-color: var(--gray6);
	}

	#systemDev #section2 .secTitle,
	#systemDev #section2 .subTitle{
		text-align: center;
	}

	#systemDev #section2 .flexWrap.grid{
		margin-top: 5rem;
	}

	#systemDev #section2 .profile{
		padding: 2rem 2.5rem;
		display: flex;
		align-items: center;
		gap: 2rem;
		background-color: var(--white);
		border: 1px solid var(--gray4);
		border-radius: 2rem;
	}

	#systemDev #section2 .profile img{
		width: 12rem;
		height: 12rem;
	}

	#systemDev #section2 .profile figcaption{
		height: 15rem;
		padding-left: 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-left: 1px solid var(--gray5);
	}

	#systemDev #section2 .profile figcaption .caption{
		color: var(--dark);
		margin-top: .5rem;
		margin-bottom: 1.7rem;
		font-size: 2.4rem;
	}

	#systemDev #section2 .profile figcaption .description{
		margin-bottom: 0.4rem;
		font-size: 1.6rem;
		color: var(--gray2);
		line-height: 1;
	}

	@media screen and (max-width: 1366px) {
		
		#systemDev #section2 .profile{
			padding: 1.5rem 2rem;
		}

		#systemDev #section2 .profile figcaption{
			height: 12rem;
		}

	}

	@media screen and (max-width: 767px) {
		
		#systemDev #section2{
			padding-top: 10rem;
			padding-bottom: 10rem;
		}				

		#systemDev #section2 .profile{
			padding: 2rem;
			gap: 1rem;
		}

		#systemDev #section2 .profile img{
			width: 10rem;
			height: 10rem;
		}

		#systemDev #section2 .profile figcaption{
			height: 12rem;
		}

		#systemDev #section2 .profile figcaption .description{
			font-size: 1.4rem;
		}

		#systemDev #section2 .storyWrap{
			width: 100%;
		}

		#systemDev #section2 .storyWrap .contTitle{
			width: 12.2rem;
			padding-left: 2rem;
			font-size: 1.4rem;
			text-align: center;
			line-height: 1.4;
		}
	}
	


/********* section3 *********/

	#systemDev #section3 .secTitle,
	#systemDev #section3 .subTitle{
		text-align: center;
	}

	#systemDev #section3 .process{
		margin-top: 6.5rem;
	}

	#systemDev #section3 .process img{
		width: 120rem;
		margin: 0 auto;
		display: block;
	}

	#systemDev #section3 .process img.mobile{
		display: none;
	}

	@media screen and (max-width: 1279px) {
		#systemDev #section3 .process img{
			width: 100%;
		}
	}

	@media screen and (max-width: 767px) {
		#systemDev #section3 .process img{
			display: none;
		}

		#systemDev #section3 .process img.mobile{
			max-width: 38rem;
			display: block;
		}
		#systemDev #section3 .process img{
			width: 80%;
		}
	}



/********* section4 *********/

	#systemDev #section4{
		background-color: var(--gray5);
		padding-top: 0;
		padding-bottom: 0;
	}

	#systemDev #section4 .innerWrap{
		height: 100vh;
		padding-top: 9rem;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	#systemDev #section4 .wrapper{
		width: 50%;
	}

	#systemDev #section4 .secTitle{
		line-height: 1.2;
	}

	#systemDev #section4 .innerWrap .swiperWrapper{
		width: 40rem;
		height: 71rem;
		align-self: flex-end;
		position: relative;
		padding: 66px 53px 0 53px ;
		overflow: hidden;
	}

	#systemDev #section4 .innerWrap .swiperWrapper::before{
		content: '';
		width: 100%;
		height: calc(100% + 1px);
		position: absolute;
		top: 0;
		right: 0;
		background: url("../img/dev/dev_kiosk_frame.png") no-repeat center/cover;
		z-index: 10;
	}

	#systemDev #section4 .innerWrap .swiperWrapper .swiperItem{
		width: 100%;
		height: 52.2rem;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	#systemDev #section4 .innerWrap .swiperWrapper .item1{background-image: url(../img/dev/dev_kiosk_swiper_01.png);}
	#systemDev #section4 .innerWrap .swiperWrapper .item2{background-image: url(../img/dev/dev_kiosk_swiper_02.png);}
	#systemDev #section4 .innerWrap .swiperWrapper .item3{background-image: url(../img/dev/dev_kiosk_swiper_03.png);}
	#systemDev #section4 .innerWrap .swiperWrapper .item4{background-image: url(../img/dev/dev_kiosk_swiper_04.png);}
	#systemDev #section4 .innerWrap .swiperWrapper .item5{background-image: url(../img/dev/dev_kiosk_swiper_05.png);}


	@media screen and (max-width: 1279px) {

		#systemDev #section4 .wrapper{
			width: 44%;
		}
		#systemDev #section4 .subTitle div{
			line-height: 1.2;
		}

	}

	@media screen and (max-width: 767px) {
		
		#systemDev #section4 .innerWrap{
			height: auto;
			display: flex;
			flex-direction: column;
		}
		#systemDev #section4 .wrapper{
			width: 100%;
			text-align: center;
		}
		#systemDev #section4 .subTitle div{
			line-height: 1.2;
		}
		#systemDev #section4 .innerWrap .swiperWrapper{
			width: 30rem;
			height: 53.2rem;	
			padding: 49px 39px 0 39px ;
			margin: 7rem auto 0;
		}
		#systemDev #section4 .innerWrap .swiperWrapper .swiperItem{
			width: 100%;
			height: 39.1rem;
		}
		
	}
/***************************************
*           //systemDev.html           *
***************************************/



/***************************************
*            TourpassPln.html            *
***************************************/

	/********* section1 *********/

	#tourpassPln #section1{
		padding-top: 0;
		padding-bottom: 0;
	}

	#tourpassPln #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#tourpassPln #section1 .secTitle{
		width: 100%;
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	#tourpassPln #section1 .secTitle{
		opacity: 0;
		animation-name: titleSecondMotion;
		animation-duration: 1s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	
	#tourpassPln #section1 .subTitle .title1{
		margin-bottom: 2rem;
		transform: translateY(500%);
		opacity: 0;
		font-size: 2.8rem;
		animation-name: titleTopMotion;
		animation-duration: 1s;
		animation-delay: 2s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	#tourpassPln #section1 .subTitle .title1 .fontOrange{
		margin-right: 2rem;
	}

	#tourpassPln #section1 .subTitle .title2{
		margin-top: 1rem;
		transform: translateY(250%);
		opacity: 0;
		font-size: 2rem;
		animation-name: titleBottomMotion;
		animation-duration: 1s;
		animation-delay: 2.8s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	@media screen and (max-width: 1279px) {

	}
	
	@media screen and (max-width: 767px) {

		#tourpassPln #section1 .subTitle .title1{
			font-size: 2rem;
			line-height: 1.2;
			word-break: keep-all;
		}

		#tourpassPln #section1 .subTitle .title1 .fontOrange{
			margin-right: 0.5rem;
		}

		#tourpassPln #section1 .subTitle .title2{
			font-size: 1.4rem;
			line-height: 1.2;
			word-break: keep-all;
		}
	}



	/********* section2 *********/

	#tourpassPln #section2{
		background: #F8F8F8;
	}
	#tourpassPln #section2 .secTitle,
	#tourpassPln #section2 .subTitle{
		text-align: center;
	}
	
	#tourpassPln #section2 .secTitle div{
		margin-bottom: 1rem;
	}

	#tourpassPln #section2 .process{
		margin-top: 6.5rem;
	}

	#tourpassPln #section2 .process img{
		width: 120rem;
		margin: 0 auto;
		display: block;
	}

	#tourpassPln #section2 .process img.mobile{
		display: none;
	}

	@media screen and (max-width: 1279px) {
		#tourpassPln #section2 .process img{
			width: 100%;
		}
	}

	@media screen and (max-width: 767px) {
		#tourpassPln #section2 .process img{
			display: none;
		}

		#tourpassPln #section2 .process img.mobile{
			max-width: 38rem;
			display: block;
		}
		#tourpassPln #section2 .process img{
			width: 80%;
		}
	}


	/********* tourpass map *********/

	#tourpassPln #tourpass_map .secTitle,
	#tourpassPln #tourpass_map .subTitle{
		text-align: center;
	}
	
	#tourpassPln #tourpass_map .secTitle div{
		margin-bottom: 1rem;
	}

	#tourpassPln #tourpass_map .map{
		margin-top: 6.5rem;
	}

	#tourpassPln #tourpass_map .map img{
		width: 64rem;
		margin: 0 auto;
		display: block;
	}

	#tourpassPln #tourpass_map .map .tourpassMapBtn{
		cursor: pointer
	}


	@media screen and (max-width: 1279px) {
		#tourpassPln #tourpass_map .map img{
			width: 100%;
		}
	}


	/********* Modal Pop-up Window *********/

	#popupWrap .popupFrame.on.CharacterTourpassModal{
		width: 40rem;
		height: auto;
		padding: 0.6rem;
		background-color: #ffb926;
		border-radius: 4rem;
	}

	#popupWrap .popupFrame.on.CharacterTourpassModal .flexWrap{
		flex-wrap: unset;
		align-items: stretch;
		gap: 6rem;
	}

	.CharacterTourpassModal .leftBox{
		padding: 4rem;
		justify-items: center;
	}

	.CharacterTourpassModal .leftBox .imgBox{
		width: 30rem;
		height: 30rem;
		background-size: cover;
	}

	.CharacterTourpassModal .leftBox .charNm{
		margin-top: 2rem;
		font-size: 3.6rem;
		color: #fff;
	}

	.CharacterTourpassModal .leftBox .charEngNm{
		margin-top: 1rem;
		font-size: 2.8rem;
		font-weight: 600;
		color: #fff;
	}


	@media screen and (max-width: 1279px) {
		#popupWrap .popupFrame.on.CharacterTourpassModal{
			width: 40rem;
			height: auto;
			padding: 0.6rem;
			background-color: #ffb926;
			border-radius: 4rem;
		}

		#popupWrap .popupFrame.on.CharacterTourpassModal .flexWrap{
			align-items: center;
			flex-direction: column;
			gap: 2rem;
		}

		.CharacterTourpassModal .leftBox{
			padding: 2rem;
			align-items: center;
			text-align: center;
		}
		
		.CharacterTourpassModal .leftBox .imgBox{
			width: 20rem;
			height: 20rem;
			align-items: center;
			text-align: center;
		}
		
		.CharacterTourpassModal .leftBox figure{
			display: flex;
			flex-direction: row;
			gap: 6rem;
			align-items: center;
			text-align: center;
		}

		.CharacterTourpassModal .rightBox{
			border-radius: 0 0 3.7rem 3.7rem;
		}
	}

	@media screen and (max-width: 767px) {
		#popupWrap .popupFrame.on.CharacterTourpassModal{
			width: 70%;
		}

		#popupWrap .popupFrame.on.CharacterTourpassModal .flexWrap{
			gap: 0;
			align-items: center;
			text-align: center;
		}

		.CharacterTourpassModal .leftBox{
			padding: 1rem;
			align-items: center;
			text-align: center;
		}
		
		.CharacterTourpassModal .leftBox .imgBox{
			width: 12rem;
			height: 12rem;
		}
		
		.CharacterTourpassModal .leftBox figure{
			gap: 1rem;
		}

		.CharacterTourpassModal .leftBox .charNm{
			margin-top: 1rem;
			font-size: 2.5rem;
		}
		.CharacterTourpassModal .leftBox .charEngNm{
			font-size: 1.8rem;
		}
		#popupWrap .popupFrame .closePopupBtn{
			width: 2rem;
			height: 2rem;
			right: -3rem;
		}
	}



	/********* section3 *********/

	#tourpassPln #section3{
		position: relative;
	}
	#tourpassPln #section3 .innerWrap{
		padding-top: 9rem;
		display: flex;
		justify-content: space-between;
	}
	#tourpassPln #section3 .innerWrap .titWrap{
		margin-top: 8rem;
	}
	#tourpassPln #section3 .innerWrap .titWrap .secTitle div{
		margin-top: 1rem;
	}

	#tourpassPln #section3 .innerWrap img{
		width: 316px;
	}

	@media screen and (max-width: 1279px) {
		#tourpassPln #section3 .innerWrap{
			flex-direction: column;
			align-items: center;
			padding-top: 0;
		}
		#tourpassPln #section3 .innerWrap .titWrap{
			margin-top: 0;
			margin-bottom: 4rem;
			text-align: center;
		}
		#tourpassPln #section3 .innerWrap img{
			width: 260px;
		}
	}



	/********* section4 *********/

	#tourpassPln #section4{
		position: relative;
	}
	#tourpassPln #section4 .innerWrap{
		padding-top: 9rem;
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	#tourpassPln #section4 .innerWrap .titWrap{
		margin-top: 8rem;
	}
	#tourpassPln #section4 .innerWrap .titWrap .secTitle div{
		margin-top: 1rem;
	}

	#tourpassPln #section4 .innerWrap img{
		width: 316px;
	}
	
	@media screen and (max-width: 1279px) {
		#tourpassPln #section4 .innerWrap{
			flex-direction: column;
			align-items: center;
			padding-top: 0;
		}
		#tourpassPln #section4 .innerWrap .titWrap{
			margin-top: 0;
			margin-bottom: 4rem;
			text-align: center;
		}
		#tourpassPln #section4 .innerWrap img{
			width: 260px;
		}
	}



	/********* section5 *********/

	#tourpassPln #section5{
		position: relative;
	}

	#tourpassPln #section5 .innerWrap{
		padding-top: 9rem;
		display: flex;
		justify-content: space-between;
	}

	#tourpassPln #section5 .innerWrap .titWrap{
		margin-top: 8rem;
	}

	#tourpassPln #section5 .innerWrap .titWrap .secTitle div,
	#tourpassPln #section5 .innerWrap .titWrap .secTitle span{
		margin-top: 1rem;
	}

	#tourpassPln #section5 .innerWrap .titWrap .infoTxt{
		font-size: 1.6rem;
		margin-top: 2rem;
		color: #888;
	}
	
	#tourpassPln #section5 .innerWrap img{
		width: 316px;
	}
		
	@media screen and (max-width: 1279px) {
		#tourpassPln #section5 .innerWrap{
			flex-direction: column;
			align-items: center;
			padding-top: 0;
		}
		#tourpassPln #section5 .innerWrap .titWrap{
			margin-top: 0;
			margin-bottom: 4rem;
			text-align: center;
		}
		#tourpassPln #section5 .innerWrap .titWrap .secTitle{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			gap: 1rem;
		}
		#tourpassPln #section5 .innerWrap .titWrap .infoTxt{
			font-size: 1.6rem;
			margin-top: 1rem;
		}
		#tourpassPln #section5 .innerWrap img{
			width: 260px;
		}
	}
	@media screen and (max-width: 767px) {
		#tourpassPln #section5 .innerWrap .titWrap .infoTxt{
			font-size: 1.2rem;
			margin-top: 1rem;
		}
	}



	/********* section6 *********/
	#tourpassPln #section6{
		background-color: #FAFAFA;
	}
	#tourpassPln #section6 .innerWrap{
		padding-top: 4rem;
	}
	#tourpassPln #section6 .secTitle,
	#tourpassPln #section6 .subTitle{
		text-align: center;
	}
	#tourpassPln #section6 .secTitle span{
		margin-top: 1rem;
	}

	#tourpassPln #section6 #tourpassPlnSwiper{
		margin-top: 6rem;
		overflow: visible;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li{
		width: 320px;
		text-align: center;
		padding: 20px 20px 50px 20px;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
		border-radius: 20px;
		margin: 0 2.5rem;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li img{
		width: 100%;
		height: 180px;
		border-radius: 1.2rem 1.2rem 0 0;
		object-fit: cover;
		object-position: center center;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li h3{
		font-weight: 700;
		font-size: 3.6rem;
		margin-top: 3.5rem;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle p{
		font-weight: 400;
		font-size: 2rem;
		color: #494949;
		margin-top: 2rem;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle p:last-child{
		margin-top: 0.4rem;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle2{
		font-weight: 400;
		font-size: 1.6rem;
		color: #888;
		margin-top: 1.5rem;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle3{
		font-weight: 400;
		font-size: 1.2rem;
		color: #bdbdbd;
		margin-top: 1rem;
		margin-bottom: 3.5rem;
	}
	#tourpassPln #section6 #tourpassPlnSwiper li .btn.btn4{
		padding: 1rem 5rem;
		position: relative;
		background-color: #fff;
		border: 1px solid #ffb926;
		border-radius: 10rem;
		color: #ffb926;
		overflow: hidden;
	}
	#tourpassPln #section6 #tourpassPlnSwiper .slick-list{
		overflow: hidden;
		padding: 1rem 0;
	}
	#tourpassPln #section6 #tourpassPlnSwiper .slick-next{
		right: -2rem;
		z-index: 10;
	}
	#tourpassPln #section6 #tourpassPlnSwiper .slick-next::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowNext.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}
	#tourpassPln #section6 #tourpassPlnSwiper .slick-prev{
		left: -2rem;
		z-index: 10;
	}
	#tourpassPln #section6 #tourpassPlnSwiper .slick-prev::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowPrev.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}

	@media screen and (max-width: 1279px) {
		#tourpassPln #section6 #tourpassPlnSwiper .slick-list{
			overflow: visible;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li{
			margin: 0 3.5rem;
			padding: 16px 16px 36px 16px;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li img{
			height: 160px;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li h3{
			font-weight: 700;
			font-size: 3rem;
			margin-top: 3rem;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle p{
			font-weight: 700;
			font-size: 2rem;
			color: #494949;
			margin-top: 1.5rem;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle p:last-child{
			margin-top: 1rem;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle2{
			font-weight: 400;
			font-size: 1.2rem;
			color: #888;
			margin-top: 1.5rem;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle3{
			font-weight: 400;
			font-size: 1rem;
			color: #bdbdbd;
			margin-top: 1rem;
			margin-bottom: 3rem;
		}
	}

	@media screen and (max-width: 767px) {
		#tourpassPln #section6 #tourpassPlnSwiper li h3{
			font-size: 2.6rem;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle p{
			font-weight: 700;
			font-size: 1.6rem;
			color: #494949;
			margin-top: 1.5rem;
		}
		#tourpassPln #section6 #tourpassPlnSwiper li .slideSubTitle p:last-child{
			margin-top: 0.5rem;
		}
	}
	/********* section6 *********/

	/********* sns1 *********/
	#tourpassPln #sns1{
		background-color: #FAFAFA;
		padding-top: 0;
		padding-bottom: 4rem;
		height: 0vh;
	}
	#tourpassPln #sns1 .innerWrap{
		padding-top: 4rem;
	}
	#tourpassPln #sns1 .secTitle,
	#tourpassPln #sns1 .subTitle{
		text-align: center;
	}
	#tourpassPln #sns1 .secTitle div{
		margin-top: 1rem;
	}
	#tourpassPln #sns1 #tourpassPlnSwiper1{
		margin-top: 4rem;
		margin-bottom: 2.5rem;
		overflow: visible;
	}
	#tourpassPln #sns1 #tourpassPlnSwiper1 li img{
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: center center;
	}
	#tourpassPln #sns1 #tourpassPlnSwiper1 .slick-next{
		right: -2rem;
		z-index: 10;
	}
	#tourpassPln #sns1 #tourpassPlnSwiper1 .slick-next::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowNext.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}
	#tourpassPln #sns1 #tourpassPlnSwiper1 .slick-prev{
		left: -2rem;
		z-index: 10;
	}
	#tourpassPln #sns1 #tourpassPlnSwiper1 .slick-prev::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowPrev.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}

	/********* sns2 *********/
	#tourpassPln #sns2{
		background-color: #FAFAFA;
		padding-top: 0;
		padding-bottom: 4rem;
		height: 0vh;
	}
	#tourpassPln #sns2 .innerWrap{
		padding-top: 4rem;
	}
	#tourpassPln #sns2 .secTitle,
	#tourpassPln #sns2 .subTitle{
		text-align: center;
	}
	#tourpassPln #sns2 .secTitle div{
		margin-top: 1rem;
	}
	#tourpassPln #sns2 #tourpassPlnSwiper2{
		margin-top: 4rem;
		margin-bottom: 2.5rem;
		overflow: visible;
	}
	#tourpassPln #sns2 #tourpassPlnSwiper2 li img{
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: center center;
	}
	#tourpassPln #sns2 #tourpassPlnSwiper2 .slick-next{
		right: -2rem;
		z-index: 10;
	}
	#tourpassPln #sns2 #tourpassPlnSwiper2 .slick-next::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowNext.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}
	#tourpassPln #sns2 #tourpassPlnSwiper2 .slick-prev{
		left: -2rem;
		z-index: 10;
	}
	#tourpassPln #sns2 #tourpassPlnSwiper2 .slick-prev::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowPrev.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}


	/* 버튼 */
	#tourpassPln #sns1 .tourpassPlnWrap,
	#tourpassPln #sns2 .tourpassPlnWrap{
		width: 100%;
		margin: 2rem auto 0;
		width: 60rem;
		padding: 1rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border: 1px solid #e1e1e1;
		border-radius: 10rem;
	}

	#tourpassPln #sns2 .tourpassPlnWrap .contTitle,
	#tourpassPln #sns1 .tourpassPlnWrap .contTitle{
		padding-left: 2.5rem;
		font-size: 2rem;
		color: #888;
		font-weight: 400;
	}


	#tourpassPln #sns1 .tourpassPlnWrap .btnTeamStroy .btnNm,
	#tourpassPln #sns2 .tourpassPlnWrap .btnTeamStroy .btnNm{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}

	#tourpassPln #sns1 .tourpassPlnWrap .btnTeamStroy .btnNm .icon_insta,
	#tourpassPln #sns2 .tourpassPlnWrap .btnTeamStroy .btnNm .icon_insta{
		width: 3.2rem;
		height: 3.2rem;
		position: relative;
		background: url(../img/icon_insta.svg) center center no-repeat;
		/* border: 1px solid #ffb926; */
		border-radius: 50%;
	}


	#tourpassPln #sns1 .tourpassPlnWrap .btnTeamStroy:hover .btnNm .icon_insta,
	#tourpassPln #sns2 .tourpassPlnWrap .btnTeamStroy:hover .btnNm .icon_insta{
		background: url(../img/icon_insta_on.svg) center center no-repeat;
	}

	@media screen and (max-width: 767px) {

		#tourpassPln #sns1 .tourpassPlnWrap,
		#tourpassPln #sns2 .tourpassPlnWrap{
			width: 100%;
			margin: 0 auto;
			background-color: transparent;
			border: none;
		}

		#tourpassPln #sns1 .tourpassPlnWrap .contTitle,
		#tourpassPln #sns2 .tourpassPlnWrap .contTitle{
			display: none;
		}

		#tourpassPln #sns1 .tourpassPlnWrap .btnTeamStroy,
		#tourpassPln #sns2 .tourpassPlnWrap .btnTeamStroy{
			display: block;
			margin: 0 auto; 
		}
	}


/***************************************
*            brandPln.html            *
***************************************/

	/********* section1 *********/
	#brandPln #section1{
		padding-top: 0;
		padding-bottom: 0;
	}

	#brandPln #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#brandPln #section1 .secTitle{
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	/********* //section1 *********/


	/********* section2 *********/

	#brandPln #section2{
		background: #F8F8F8;
	}
	#brandPln #section2 .secTitle,
	#brandPln #section2 .subTitle{
		text-align: center;
	}

	#brandPln #section2 .process{
		margin-top: 6.5rem;
	}

	#brandPln #section2 .process img{
		width: 120rem;
		margin: 0 auto;
		display: block;
	}

	#brandPln #section2 .process img.mobile{
		display: none;
	}

	@media screen and (max-width: 1279px) {
		#brandPln #section2 .process img{
			width: 100%;
		}
	}

	@media screen and (max-width: 767px) {
		#brandPln #section2 .process img{
			display: none;
		}

		#brandPln #section2 .process img.mobile{
			max-width: 38rem;
			display: block;
		}
		#brandPln #section2 .process img{
			width: 80%;
		}
	}
		

	/********* section3 *********/

	#brandPln #section3{
		background-color: #fff;
		padding-bottom: 12rem;
		height: auto;
	}

	#brandPln #section3 .secTitle,
	#brandPln #section3 .subTitle{
		text-align: center;
	}

	#brandPln #section3 .flexWrap.grid{
		margin-top: 5rem;
	}

	#brandPln #section3 .conBox{
		position: relative;
		padding: calc(100% - 2rem) 2rem 2rem;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		border-radius: 3rem;
	}

	#brandPln #section3 .img1{
		background-image: url(../img/brand/Brand_art.png);
	}

	#brandPln #section3 .img2{
		background-image: url(../img/brand/Brand_deliver.png);
	}

	#brandPln #section3 .img3{
		background-image: url(../img/brand/Brand_consulting.png);
	}

	#brandPln #section3 .textBox{
		position: absolute;
		top: 50px;
		left: 50px;
	}

	#brandPln #section3 .caption{
		margin-bottom: 1.4rem;
		font-size: 2.4rem;
		color: #ffffff;
		font-weight: 500;
	}

	#brandPln #section3 .description{
		margin-bottom: 1rem;
		font-size: 1.6rem;
		color: #ffffff;
		word-break: keep-all;
		line-height: 1.2;
	}

	@media screen and (max-width: 1366px) {
		
		#brandPln #section3 .profile{
			padding: 1.5rem 2rem;
		}

		#brandPln #section3 .profile figcaption{
			height: 12rem;
		}

	}

	@media screen and (max-width: 1279px) {

		#brandPln #section3 .flexWrap.grid div:nth-child(1){order: 2;}
		#brandPln #section3 .flexWrap.grid div:nth-child(2){order: 1;}
		#brandPln #section3 .flexWrap.grid div:nth-child(3){order: 3;}
		#brandPln #section3 .flexWrap.grid div:nth-child(4){order: 4;}
		#brandPln #section3 .flexWrap.grid div:nth-child(5){order: 5;}
		#brandPln #section3 .flexWrap.grid div:nth-child(6){order: 6;}
	}

	@media screen and (max-width: 767px) {

    #brandPln #section3{padding-top: 10rem; padding-bottom: 10rem;}				
    #brandPln #section3 .profile{padding: 2rem;gap: 1rem;}
		#brandPln #section3 .profile img{width: 10rem;height: 10rem;}
    #brandPln #section3 .profile figcaption{height: 12rem;}
    #brandPln #section3 .profile figcaption .description{font-size: 1.4rem;}
	}

/********* section4 *********/

	#brandPln #section4{
		background: url(../img/brand/brand_bg.jpg) center / cover no-repeat fixed;
	}
	#brandPln #section4 .secTitle,
	#brandPln #section4 .subTitle{
		text-align: center;
	}
	#brandPln #section4 .secTitle{color: rgba(255, 255, 255, 1); margin-bottom: 1rem; font-size: 56px; line-height: 1.3;}
	#brandPln #section4 .subTitle{color: rgba(255, 255, 255, 0.8); line-height: 1.6; font-weight: 400; letter-spacing: -0.8px;}

	@media screen and (max-width: 767px) {
		#brandPln #section4 .secTitle{font-size: 30px;}
	  #brandPln #section4 .subTitle{font-size: 14px;}
	}


/********* section5 *********/

#brandPln #section5{
	background-color: var(--gray6);
}

#brandPln #section5 .secTitle,
#brandPln #section5 .subTitle{
	text-align: center;
}

#brandPln #section5 .secTitle .fontPurple{
	margin-bottom: 1rem;
}

#brandPln #section5 .flexWrap.grid{
	margin-top: 5rem;
}

#brandPln #section5 .profile{
	padding: 2rem 2.5rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	background-color: var(--white);
	border: 1px solid var(--gray4);
	border-radius: 2rem;
}

#brandPln #section5 .profile img{
	width: 12rem;
	height: 12rem;
}

#brandPln #section5 .profile figcaption{
	height: 15rem;
	padding-left: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left: 1px solid var(--gray5);
}
#brandPln #section5 .profile figcaption .caption .fontPurple{margin-bottom: 0.5rem;}
#brandPln #section5 .profile figcaption .caption{
	color: var(--dark);
	margin-top: .5rem;
	margin-bottom: 1.7rem;
	font-size: 2.4rem;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
}


#brandPln #section5 .profile figcaption .description{
	margin-bottom: 0.4rem;
	font-size: 1.6rem;
	color: var(--gray2);


	line-height: 1.3;

	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
}


#brandPln #section5 #point{
	height: 80px;
	border-radius: 30px;
	background-color: #6C2F99;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
}

#brandPln #section5 .keypoint{
	color: #fff;
	font-size: 28px;
	line-height: 1; 
	text-align: center;
	font-weight: 500;
	margin: 0;

	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
}


@media screen and (max-width: 1366px) {

	#brandPln #section5 .profile{
		padding: 1.5rem 2rem;
	}

	#brandPln #section5 .profile figcaption{
		height: 12rem;
	}
}


@media screen and (max-width: 767px) {

	#brandPln #section5{
		padding-top: 10rem;
		padding-bottom: 10rem;
	}

	#brandPln #section5 .profile{
		padding: 2rem;
		gap: 1rem;
		align-items: flex-start;
	}

	#brandPln #section5 .profile img{
		width: 10rem;
		height: 10rem;
		flex: 0 0 auto;
	}

	#brandPln #section5 .profile figcaption{
		height: auto;
		min-height: 10rem;
		justify-content: center;
		padding-left: 1.5rem;
	}

	#brandPln #section5 .profile figcaption .caption{
		font-size: 2rem;
		line-height: 1.25;
		margin-bottom: .8rem;
	}

	#brandPln #section5 .profile figcaption .description{
		font-size: 1.4rem;
		line-height: 1.3;
	}

	#brandPln #section5 #point{
		height: auto;
		padding: 14px 16px;
		border-radius: 20px;
	}

	#brandPln #section5 .keypoint{
		font-size: 17px;
		line-height: 1.35;
	}
}


	/********* section6 *********/

	#brandPln #section6{
		background-color: #ffffff;
	}
	#brandPln #section6 .secTitle,
	#brandPln #section6 .subTitle{
		text-align: center;
	}
	
	#brandPln #section6 .secTitle div{
		margin-bottom: 1rem;
	}

	#brandPln #section6 .category{
		margin-top: 6.5rem;
	}

	#brandPln #section6 .category img{
		width: 64rem;
		margin: 0 auto;
		display: block;
	}
	#brandPln #section6 .category area.characterBrandBtn{cursor: pointer;}
	#brandPln #section6 .category img.mobile{
		display: none;
	}

	@media screen and (max-width: 1279px) {
		#brandPln #section6 .category img{
			width: 100%;
		}
	}

	/********* section7 *********/
	#brandPln #section7{
		background-color: #FAFAFA;
		padding-top: 0;
		/* padding-bottom: 4rem; */
		padding-bottom: 12rem;
		height: auto;
		/* height: 100vh; */
	}
	#brandPln #section7 .innerWrap{
		/* padding-top: 4rem; */
		padding-top: 12rem;
	}
	#brandPln #section7 .secTitle,
	#brandPln #section7 .subTitle{
		text-align: center;
	}
	#brandPln #section7 .secTitle div{
		margin-top: 1rem;
	}
	#brandPln #section7 #brandPlnSwiper1{
		margin-top: 4rem;
		margin-bottom: 2.5rem;
		overflow: visible;
	}
	#brandPln #section7 #brandPlnSwiper1 li img{
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		object-position: center center;
	}
	#brandPln #section7 #brandPlnSwiper1 li a{cursor: default;}
	#brandPln #section7 #brandPlnSwiper1 .slick-next{
		right: -2rem;
		z-index: 10;
	}
	#brandPln #section7 #brandPlnSwiper1 .slick-next::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowNext.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}
	#brandPln #section7 #brandPlnSwiper1 .slick-prev{
		left: -2rem;
		z-index: 10;
	}
	#brandPln #section7 #brandPlnSwiper1 .slick-prev::before{
		content: "";
		display: block;
		background: url("../img/tourpassPln_sec6_arrowPrev.svg") no-repeat center;
		width: 20px;
		height: 20px;
	}

	#brandPln #section3 .sec3Btn,
	#brandPln #section7 .sec7Btn{text-align: center; margin-top: 60px;}
	#brandPln #section3 .sec3Btn a,
	#brandPln #section7 .sec7Btn a{display: inline-block; width: auto;}
	#brandPln #section3 .sec3Btn a img,
	#brandPln #section7 .sec7Btn a img{height: 70px; display: block;}

	@media screen and (max-width: 767px) {
	#brandPln #section3 .sec3Btn,
	#brandPln #section7 .sec7Btn{margin-top: 48px;}
	#brandPln #section3 .sec3Btn a img,
	#brandPln #section7 .sec7Btn a img{height: 54px;}
	}

	/********* Modal Pop-up Window *********/

	#popupWrap .popupFrame.on.characterBrandModal{
		width: 100rem;
		height: auto;
		padding: 0.6rem;
		background-color: #6C2F99;
		border-radius: 4rem;
	}

	#popupWrap .popupFrame.on.characterBrandModal .flexWrap{
		flex-wrap: unset;
		align-items: stretch;
		gap: 6rem;
	}

	.characterBrandModal .leftBox{
		padding: 4rem;
	}

	.characterBrandModal .leftBox figure{
		text-align: center;
	}
	.characterBrandModal .leftBox .imgBox{
		width: 30rem;
		height: 30rem;
    background-color: #fff;
    background-position: center;
    background-size: 30rem;
    background-repeat: no-repeat;
    border-radius: 50%;
	}

	.characterBrandModal .leftBox .charNm{
		margin-top: 2rem;
		font-size: 3.6rem;
		font-weight: 600;
		color: #fff;
		text-align: center;
	}
	.characterBrandModal .leftBox .charEngNm{
		margin-top: 1rem;
		font-size: 2.8rem;
		color: #fff;
		text-align: center;
	}

	.characterBrandModal .rightBox{
		padding: 5rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-radius: 0 3.4rem 3.4rem 0;
		background-color: #fff;
		width: 100%;
	}

	.characterBrandModal .rightBox .charDescTitle{
		margin-top: 2rem;
		font-size: 3.6rem;
		color: #6C2F99;
	}

	.characterBrandModal .rightBox .charDescTitle:first-child{
		margin-top: 0;
	}

	.characterBrandModal .rightBox .charDescription{
		/* max-height: 10rem; */
		margin-top: 1rem;
		font-size: 2rem;
		color: #888;
		line-height: 1.6;
		overflow-y: auto;
		margin-bottom: 1.5rem;
	}

	.characterBrandModal .rightBox .infoWrap{
		margin-top: 4rem;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 1rem;
	}

	.characterBrandModal .rightBox .infoWrap .charInfo{
		padding: 1rem 2rem;
		border: 1px solid #6C2F99;
		border-radius: 2rem;
		font-size: 1.6rem;
		color: #6C2F99;
	}

	.characterBrandModal .rightBox .infoWrap .infoDesc{
		font-size: inherit;
	}

	@media screen and (max-width: 1279px) {
		#popupWrap .popupFrame.on.characterBrandModal{
			width: 56rem;
			height: auto;
			padding: 0.6rem;
			background-color: #6C2F99;
			border-radius: 4rem;
		}

		#popupWrap .popupFrame.on.characterBrandModal .flexWrap{
			align-items: center;
			flex-direction: column;
			gap: 2rem;
		}

		.characterBrandModal .leftBox{
			padding: 2rem;
		}
		
		.characterBrandModal .leftBox .imgBox{
			width: 20rem;
			height: 20rem;
			background-size: 20rem;
		}
		
		.characterBrandModal .leftBox figure{
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 6rem;
		}

		.characterBrandModal .rightBox{
			border-radius: 0 0 3.7rem 3.7rem;
		}
	}

	@media screen and (max-width: 767px) {
		#popupWrap .popupFrame.on.characterBrandModal{
			width: 70%;
		}
		#popupWrap .popupFrame.on.characterBrandModal {padding: 0.2rem;}
		#popupWrap .popupFrame.on.characterBrandModal .flexWrap{
			gap: 0;
		}

		.characterBrandModal .leftBox{
			padding: 1rem;
		}
		
		.characterBrandModal .leftBox .imgBox{
			width: 12rem;
			height: 12rem;
			background-size: 12rem;
		}
		
		.characterBrandModal .leftBox figure{
			gap: 1rem;
		}

		.characterBrandModal .leftBox .charNm{
			font-size: 1.8rem; margin-top: 0.85rem;
		}

		.characterBrandModal .leftBox .charEngNm{font-size: 12px; margin-top: 0.25rem; }
		.characterBrandModal .rightBox{
			padding: 2rem;
		}

		.characterBrandModal .rightBox .charDescTitle{
			margin-top: 1rem;
			font-size: 2rem;	
		}

		.characterBrandModal .rightBox .charDescription{
			/* max-height: 6rem; */
			margin-top: 0.5rem;
			font-size: 1.4rem;
			line-height: 1.2;
		}

		.characterBrandModal .rightBox .btnWrap{
			margin-top: 1rem;
			flex-direction: column;
		}

		.characterBrandModal .rightBox .infoWrap .charInfo{
			width: 100%;
		}

		#popupWrap .popupFrame .closePopupBtn{
			width: 2rem;
			height: 2rem;
			right: 0;
		}
	}

	
	
/***************************************
*            partner.html            *
***************************************/

	/********* section1 *********/

	#partner #section1{
		padding-top: 0;
		padding-bottom: 0;
	}

	#partner #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#partner #section1 .secTitle{
		width: 100%;
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	#partner #section1 .secTitle,
	#partner #section1 .secTitle div{
		font-weight: 700;
		color: var(--gray1);
	}

	#partner #section1 .secTitle.title2{
		opacity: 0;
		animation-name: titleSecondMotion;
		animation-duration: 2.5s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	
	#partner #section1 .subTitle{
		width: 100%;
		margin-top: 12rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	#partner #section1 .subTitle .title1{
		margin-bottom: 2rem;
		transform: translateY(500%);
		opacity: 0;
		font-size: 2.8rem;
		font-weight: 600;
		color: var(--dark);
		animation-name: titleTopMotion;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}
	
	#partner #section1 .subTitle .title1 .fontColor{
		margin-right: 2rem;
	}

	#partner #section1 .subTitle .title2{
		margin-top: 1rem;
		transform: translateY(250%);
		opacity: 0;
		font-size: 2rem;
		animation-name: titleBottomMotion;
		animation-duration: 1s;
		animation-delay: 3.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	@media screen and (max-width: 767px) {
		#partner #section1 .secTitle,
		#partner #section1 .secTitle div{
			line-height: 1.2;
		}

		#partner #section1 .subTitle{
			padding-left: 2rem;
			padding-right: 2rem;
		}

		#partner #section1 .subTitle .title1{
			font-size: 2rem;
			line-height: 1.2;
		}

		#partner #section1 .subTitle .title1 .fontColor{
			margin-right: 0.5rem;
		}

		#partner #section1 .subTitle .title2{
			font-size: 1.4rem;
			line-height: 1.2;
		}
	}



/********* section_logo *********/

	#partner #section_logo{
		background-color: var(--gray6);
	}

	#partner #section_logo .secTitle,
	#partner #section_logo .subTitle{
		text-align: center;
	}

	#partner #section_logo .flexWrap.grid{
		margin-top: 5rem;
	}

	#partner #section_logo .logo{
		padding: 2rem 2.5rem;
		display: flex;
		align-items: center;
		gap: 2rem;
		background-color: var(--white);
		border: 1px solid var(--gray4);
		border-radius: 2rem;
	}

	#partner #section_logo .logo img{
		width: 15rem;
	}

	#partner #section_logo .logo figcaption{
		height: 15rem;
		padding-left: 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-left: 1px solid var(--gray5);
	}

	#partner #section_logo .logo figcaption .caption{
		color: var(--dark);
		margin-top: .5rem;
		margin-bottom: 1.7rem;
		font-size: 2.4rem;
	}

	#partner #section_logo .logo figcaption .description{
		margin-bottom: 0.4rem;
		font-size: 1.6rem;
		color: var(--gray2);
		line-height: 1;
	}

	@media screen and (max-width: 1366px) {
		
		#partner #section_logo .logo{
			padding: 1.5rem 2rem;
		}

		#partner #section_logo .logo figcaption{
			height: 12rem;
		}

	}


	@media screen and (max-width: 767px) {
		
		#partner #section_logo{
			padding-top: 10rem;
			padding-bottom: 10rem;
		}				

		#partner #section_logo .logo{
			padding: 0.8rem;
			gap: 0.2rem;
		}

		#partner #section_logo .logo img{
			width: 10rem;
		}

		#partner #section_logo .logo figcaption{
			height: 12rem;
		}

		#partner #section_logo .logo figcaption .description{
			font-size: 1.4rem;
		}

		#partner #section_logo .storyWrap{
			width: 100%;
		}

		#partner #section_logo .storyWrap .contTitle{
			width: 12.2rem;
			padding-left: 2rem;
			font-size: 1.4rem;
			text-align: center;
			line-height: 1.4;
		}
	}
	

/***************************************
*           //partner.html           *
***************************************/




/***************************************
*            agency.html            *
***************************************/

	/********* section1 *********/

	#agency #section1{
		padding-top: 0;
		padding-bottom: 0;
	}

	#agency #section1 .innerWrap{
		height: 100vh;
		position: relative;
	}

	#agency #section1 .secTitle{
		width: 100%;
		margin-top: -6rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	#agency #section1 .secTitle,
	#agency #section1 .secTitle div{
		font-weight: 700;
		color: var(--gray1);
	}

	#agency #section1 .secTitle.title2{
		opacity: 0;
		animation-name: titleSecondMotion;
		animation-duration: 2.5s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
	}
	
	#agency #section1 .subTitle{
		width: 100%;
		margin-top: 12rem;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}
	
	#agency #section1 .subTitle .title1{
		margin-bottom: 2rem;
		transform: translateY(500%);
		opacity: 0;
		font-size: 2.8rem;
		font-weight: 600;
		color: var(--dark);
		animation-name: titleTopMotion;
		animation-duration: 1s;
		animation-delay: 2.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}
	
	#agency #section1 .subTitle .title1 .fontColor{
		margin-right: 2rem;
	}

	#agency #section1 .subTitle .title2{
		margin-top: 1rem;
		transform: translateY(250%);
		opacity: 0;
		font-size: 2rem;
		animation-name: titleBottomMotion;
		animation-duration: 1s;
		animation-delay: 3.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.9,0,.58,1);
	}

	@media screen and (max-width: 767px) {
		#agency #section1 .secTitle,
		#agency #section1 .secTitle div{
			line-height: 1.2;
		}

		#agency #section1 .subTitle{
			padding-left: 2rem;
			padding-right: 2rem;
		}

		#agency #section1 .subTitle .title1{
			font-size: 2rem;
			line-height: 1.2;
		}

		#agency #section1 .subTitle .title1 .fontColor{
			margin-right: 0.5rem;
		}

		#agency #section1 .subTitle .title2{
			font-size: 1.4rem;
			line-height: 1.2;
		}
	}



/********* section2 *********/

	#agency #section2{
		background-color: var(--gray6);
	}

	#agency #section2 .secTitle,
	#agency #section2 .subTitle{
		text-align: center;
	}

	#agency #section2 .flexWrap.grid{
		margin-top: 5rem;
	}

	#agency #section2 .profile{
		padding: 2rem 2.5rem;
		display: flex;
		align-items: center;
		gap: 2rem;
		background-color: var(--white);
		border: 1px solid var(--gray4);
		border-radius: 2rem;
	}

	#agency #section2 .profile img{
		width: 12rem;
		height: 12rem;
	}

	#agency #section2 .profile figcaption{
		height: 15rem;
		padding-left: 2rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		border-left: 1px solid var(--gray5);
	}

	#agency #section2 .profile figcaption .caption{
		color: var(--dark);
		margin-top: .5rem;
		margin-bottom: 1.7rem;
		font-size: 2.4rem;
	}

	#agency #section2 .profile figcaption .description{
		margin-bottom: 0.4rem;
		font-size: 1.6rem;
		color: var(--gray2);
		line-height: 1;
	}

	@media screen and (max-width: 1366px) {
		
		#agency #section2 .profile{
			padding: 1.5rem 2rem;
		}

		#agency #section2 .profile figcaption{
			height: 12rem;
		}

	}

	@media screen and (max-width: 767px) {
		
		#agency #section2{
			padding-top: 10rem;
			padding-bottom: 10rem;
		}				

		#agency #section2 .profile{
			padding: 2rem;
			gap: 1rem;
		}

		#agency #section2 .profile img{
			width: 10rem;
			height: 10rem;
		}

		#agency #section2 .profile figcaption{
			height: 12rem;
		}

		#agency #section2 .profile figcaption .description{
			font-size: 1.4rem;
		}

		#agency #section2 .storyWrap{
			width: 100%;
		}

		#agency #section2 .storyWrap .contTitle{
			width: 12.2rem;
			padding-left: 2rem;
			font-size: 1.4rem;
			text-align: center;
			line-height: 1.4;
		}
	}



	/********* category *********/

	#agency #section3{
		background-color: #ffffff;
		border-bottom: 1px solid #f0f0f0;
	}
	#agency #section3 .secTitle,
	#agency #section3 .subTitle{
		text-align: center;
	}
	
	#agency #section3 .secTitle div{
		margin-bottom: 1rem;
	}

	#agency #section3 .category{
		margin-top: 6.5rem;
	}

	#agency #section3 .category img{
		width: 64rem;
		margin: 0 auto;
		display: block;
	}

	#agency #section3 .category img.mobile{
		display: none;
	}

	@media screen and (max-width: 1279px) {
		#agency #section3 .category img{
			width: 100%;
		}
	}
/***************************************
*            //agency.html            *
***************************************/