/* nav */
#fp-nav {
	left: 40px;
	text-transform: uppercase;
	pointer-events: none;
}

#fp-nav ul,
.fp-slidesNav ul {
	width: fit-content;
	display: flex;
	flex-direction: column;
	margin-bottom: -20px;
}

#fp-nav ul li,
.fp-slidesNav ul li {
	display: inline-block;
	width: auto;
	height: auto;
	margin-bottom: 20px;
	pointer-events: auto;
}

#fp-nav ul li:last-of-type,
.fp-slidesNav ul li:last-of-type {
	display: none;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	width: auto;
	height: auto;
}

#fp-nav ul li a::before,
.fp-slidesNav ul li a::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #ffffff;
	border-radius: 50%;
	transition: all 0.5s;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
	width: auto;
	height: auto;
	background: none;
	position: static;
	margin-bottom: 9px;
	display: none;
}

#fp-nav ul li span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0;
	transition: all 0.5s;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
	display: block;
	width: auto;
	height: auto;
	background: none;
	margin: 0;
	margin-bottom: 9px;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
	width: auto;
	height: auto;
	background: none;
	margin: 0;
	margin-bottom: 9px;
}

#fp-nav ul li a.active::before,
.fp-slidesNav ul li a.active::before,
#fp-nav ul li:hover a.active::before,
.fp-slidesNav ul li:hover a.active::before {
	width: 15px;
	height: 15px;
	background: none;
	border: 1px solid #ffffff;
}

/* nav - color */
#fp-nav.color ul li a::before,
.fp-slidesNav.color ul li a::before {
	background: var(--mainColor);
}

#fp-nav.color ul li a.active::before,
.fp-slidesNav.color ul li a.active::before,
#fp-nav.color ul li:hover a.active::before,
.fp-slidesNav.color ul li:hover a.active::before {
	width: 15px;
	height: 15px;
	background: none;
	border: 1px solid var(--mainColor);
}

#fp-nav.color ul li a span,
.fp-slidesNav.color ul li a span {
	color: var(--mainColor);
}

@media screen and (max-width: 1715px) {
	#fp-nav {
		left: 10px;
	}
}

@media screen and (max-height: 800px) {

	#header.on {
		background: none;
	}
}
#main {position: relative;}
/* title-box */
.title-box span {
	font-family: var(--baseFont);
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--mainColor);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.title-box h3 {
	font-size: 3.75rem;
	font-weight: 700;
	color: #111;
	line-height: 1.2142;
	margin: 30px 0 20px;
}

.title-box p {
	font-size: 2rem;
	font-weight: 500;
	color: #222;
	line-height: 1.5909;
}

.title-box .link-box {
	margin-top: 110px;
}

.title-box .link-box a {
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	background: var(--mainColor);
	padding: 22px 50px;
	border-radius: 90px;
}

@media screen and (max-width: 1820px) {
	#main .w1600 {
		padding: 0 100px;
	}
}

@media screen and (max-width: 1715px) {
	#main .w1600 {
		padding: 0 75px;
	}
}

@media screen and (max-width: 1700px) {
	#main .w1600.padding {
		padding-right: 120px;
	}

	.title-box h3 {
		font-size: 3rem;
	}

	.title-box p {
		font-size: 2rem;
	}

	.title-box .link-box a {
		padding: 20px 35px;
	}
}

@media screen and (max-width: 1650px) {
	#main .w1500 {
		padding: 0 75px;
	}
}

@media screen and (max-width: 1300px) {
	#main .w1600 {
		padding-right: 40px;
	}

	#main .w1600.padding {
		padding-right: 40px;
	}
}

@media screen and (max-width: 1200px) {
	#main {
		overflow: hidden;
	}

	#main .w1600 {
		padding-left: 20px;
		padding-right: 20px;
	}

	#main .w1500 {
		padding: 0 20px;
	}

	#main .w1600.padding {
		padding-right: 20px;
	}

	.title-box h3 {
		font-size: 4.5rem;
	}

	.title-box p {
		font-size: 1.7rem;
	}

	.title-box .link-box {
		margin-top: 80px;
	}
}

@media screen and (max-width: 1000px) {
	.title-box .link-box {
		margin-top: 20px;
	}
}

@media screen and (max-width: 650px) {
	.title-box h3 {
		font-size: 3rem;
	}
}
/* MainSlide */
#MainSlide {
	position: relative; margin-top:110px;
}

#MainSlide .visual {
	
}

#MainSlide .bg {
	position: relative;
	background: url(/assets/images/seminar/mainVisual_bg01.png) no-repeat top; 
}

#MainSlide .visual .bg01 {}

#MainSlide .visual .bg02 {}

#MainSlide .visual .bg03 {}

#MainSlide .btn-wrap {
	position: absolute;
	bottom: 10%;
	right: 5%;
}

#MainSlide .content-box {
	position: relative;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	align-items: center;
	padding: 90px 0 0 0;
}

#MainSlide .content-box .drimg {
	position: relative;
	bottom: 0;
	width: 580px;
}

#MainSlide .content-box .drimg img {
	width: 580px;
	height: 604px;
}

#MainSlide .content-box .txtbox {
	width: 650px;
	margin-top: -70px;
	color: #fff;
}

#MainSlide .content-box .txtbox h2 {
	font-size: 70px;
	font-weight: 800;
	color: #fff;
	line-height: 1.125;
	margin-top: 20px;
}

#MainSlide .content-box .txtbox h5 {
	position: relative;
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.04em;
	padding: 8px 22px;
	background: var(--CBlack);
	width: max-content;
	border-radius: 50px;
}

#MainSlide .content-box .txtbox h2 span {
	display: inline-block;
	transform: rotateY(90deg);
	perspective: 1000px;
	opacity: 0;
	will-change: transform, opacity;
}

#MainSlide .content-box .txtbox p {
	font-size: 18px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0;
	margin-top: 20px;
	overflow: hidden;
}

#MainSlide .content-box .txtbox p span {
	padding-right: 15px;
	display: inline-block;
	font-weight: 500;
}

#MainSlide .visual.animated .bg {
	transform: scale(1);
	transition: all 2.5s;
}

#MainSlide .content-box.animated h2 span {
	animation: flip 1.3s 1s forwards;
}

#MainSlide .content-box.animated p span {
	animation: up 1.3s 1s forwards;
}

#MainSlide .content-box .drProfile {
	margin-top: 40px;
	display: flex;
	align-items: center;
}

#MainSlide .content-box .drProfile img {
	width: 86px;
	height: 86px;
	background: #ffffff;
	border-radius: 50%;
}

#MainSlide .content-box .drProfile dl {
	margin-left: 20px;
	color: #ffffff;
}

#MainSlide .content-box .drProfile dt {
	font-size: 20px;
	font-weight: 600;
}

#MainSlide .content-box .drProfile dd {
	font-size: 16px;
	font-weight: 300;
}

#MainSlide .button {
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	position: relative;
	margin-top: 100px;
	width: auto;
}

#MainSlide .button::after {
	content: "";
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
}

#MainSlide button {
	width: 85px;
	height: 70px;
	background: none;
	border: none;
	pointer-events: auto;
}

#MainSlide .txtbox .button-list {
	display: flex;
	justify-content:flex-start;
	margin-top: 53px;
}

#MainSlide .txtbox .button-list button.ctBtn {
	width: 200px;
	height: 44px;
	justify-content: center;
	background: #ffffff;
	border-radius: 6px;
	text-align: center;
	padding:10px 20px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--CBlack);
}

#MainSlide .txtbox .button-list button.ctBtnLine {
	width: 200px;
	height: 44px;
	justify-content: center;
	background: none;
	border: 1px solid #ffffff;
	border-radius: 6px;
	text-align: center;
	padding:10px 20px;
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
}

#MainSlide .scroll-box {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 50;
	transform: translateX(-50%);
	text-align: center;
}

#MainSlide .scroll-box>span {
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0;
	margin-bottom: 10px;
}

#MainSlide .scroll-box .bar {
	width: 1px;
	height: 90px;
	background: rgba(255, 255, 255, 0.38);
	margin: 0 auto;
	position: relative;
}

#MainSlide .scroll-box .bar span {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	animation: scroll 2.5s linear infinite;
	will-change: top;
}

@media screen and (max-width: 1600px) {
	#MainSlide .content-box {
		margin-top: 0%;
		padding: 90px 30px 0 30px;
	}

	#MainSlide .content-box .txtbox h2 {
		font-size: 4rem;
		margin-top: 20px;
	}

	#MainSlide .content-box h2 {
		font-size: 6rem;
	}

	#MainSlide .content-box p {
		font-size: 1.5rem;
		margin-top: 20px;
	}

	#MainSlide .button {
		margin-top: 70px;
	}

	#MainSlide button {
		width: 70px;
		height: 65px;
	}
}

@media screen and (max-width: 1200px) {
	#MainSlide .visual .bg {
		height: 100%;
		padding-bottom: 70%;
	}

	/* #MainSlide .content-box h2{ font-size: 5rem; } */
	#MainSlide .scroll-box>span {
		font-size: 1.5rem;
	}

	#MainSlide .content-box {
		flex-direction: column;
		margin-top: 0%;
		padding: 50px 0 0 0;
	}
	
	#MainSlide .content-box .drimg { display: none;}

	#MainSlide .content-box .txtbox {
		width: 96%;
		margin: 0px 0 40px;
		color: #fff;
	}
	#MainSlide .txtbox .button-list {
		margin-top: 30px;
	}
	#MainSlide .content-box .txtbox h5 {
		font-size: 1.4rem;
	}
	#MainSlide .content-box .drProfile {
		margin-top: 30px;
	}
	#MainSlide .content-box .drProfile img {
		width: 76px;
		height: 76px;
	}

}

@media screen and (max-width: 850px) {
	#MainSlide .visual .bg {
		padding-bottom: 119%;
	}

	#MainSlide .visual .bg01 {
		background: url("/img/main/main_visual01_m.jpg") no-repeat center center / cover;
	}

	#MainSlide .visual .bg02 {
		background: url("/img/main/main_visual02_m.jpg") no-repeat center center / cover;
	}

	#MainSlide .visual .bg03 {
		background: url("/img/main/main_visual03_m.jpg") no-repeat center center / cover;
	}
	#MainSlide .content-box .txtbox h5 {
		font-size: 1.25rem;
	}
	#MainSlide .content-box .txtbox h2 {
		font-size: 3.375rem;
	}

	#MainSlide .content-box .txtbox p {
		font-size: 1.25rem;
	}
	#MainSlide .btn-wrap { display: none;}
}

@media screen and (max-height: 800px) {
	#MainSlide .visual-wrap {
		padding: 50px 0;
		min-height: 950px;
	}
}

@media screen and (max-width: 750px) {
	#MainSlide .content-box {
		margin-top: 0%;
		padding: 30px 0 0 0;}
	#MainSlide .button {
		margin-top: 50px;
	}

	#MainSlide button {
		width: 60px;
		height: 55px;
	}
}

@media screen and (max-width: 650px) {
	#MainSlide .visual .bg {
		padding-bottom: 119%;
	}

	#MainSlide .visual .bg01 {
		background: url("/img/main/main_visual01_m.jpg") no-repeat center center / cover;
	}

	/* #MainSlide .visual .bg02{ background: url("/img/main/main_visual02_m.jpg") no-repeat center center / cover; } */
	#MainSlide .visual .bg02 {
		background: url("/img/main/main_visual04_m.jpg") no-repeat center center / cover;
	}

	#MainSlide .visual .bg03 {
		background: url("/img/main/main_visual03_m.jpg") no-repeat center center / cover;
	}
	
	#MainSlide .content-box .txtbox h2 {
		font-size: 3rem;
	}
	#MainSlide .content-box .txtbox h5 {
		font-size: 1rem;
	}
	#MainSlide .content-box .txtbox p {
		font-size: 1rem;
	}


}

/* visual */
#home {
	position: relative;
}

#home .visual {
	overflow: hidden;
}
#home .visual .filter {
	position: absolute;
	width: 100%;
	height: 100vh;
	background: rgba(59, 51, 97, 0.3);
	z-index: 9;
}
#home .visual .bg {
	width: 100%;
	height: 100vh;
	/*transform: scale(1.25);*/
	object-fit: cover;
}
#home .visual .bg video {width: 100%; height: 100%; object-fit: cover;}

#home .visual .bg01 {
	background: url("/assets/images/main/mainVisual_bg.png") no-repeat center center / cover;
}

#home .visual .bg02 {
	background: url("/assets/images/main/mainVisual_bg.png") no-repeat center center / cover;
}

#home .visual .bg03 {
	background: url("/assets/images/main/mainVisual_bg.png") no-repeat center center / cover;
}

#home .content-box {
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	z-index: 50;
	transform: translateY(-50%);
	pointer-events: none;
	text-align: center;
}

#home .content-box h2 {
	font-size: 75px;
	font-weight: 800;
	font-family: "Montserrat";
	color: #fff;
	line-height: 1.2631;
	margin-top: 20px;
	letter-spacing: 0em;
	overflow: hidden;
}

#home .content-box h2 span{
	display: inline-block;
	transform: translateY(100%);
	will-change: transform;
}
#home .content-box h2 span img {vertical-align: middle;}

#home .content-box p {
	font-family: "Montserrat";
	font-size: 44px;
	font-weight: 200;
	color: #ffffff;
	letter-spacing: 0;
	margin-top: 10px;
	overflow: hidden;
}

#home .content-box p span {
	display: inline-block;
	transform: translateY(100%);
	will-change: transform;
}

#home .content-box button.playbtn { display: flex; align-items: center; background: transparent; margin: 30px auto; width: fit-content; padding:0px 20px; height: 45px; font-size: 16px; color: #ffffff; border-radius: 50px; border: 1px solid #fff;}
#home .content-box button.playbtn span.txt {padding-left: 10px;}
#home .content-box button.playbtn:hover { background: #ffffff; transition: all .3s ease; color: #111;}

#home .content-box .videoBox { margin: 0 auto; width: 900px; height: 506px; -webkit-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -moz-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25); 
    -ms-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -o-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);}

#home .visual.animated .bg {
	transform: scale(1);
	transition: all 2.5s;
}

#home .content-box.animated h2 span {
	animation: up 1.3s 1s forwards;
}

#home .content-box.animated p span {
	animation: up 1.3s 1s forwards;
}

#home .content-box .button {
	width: auto;
	display: inline-block;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50px;
	position: relative;
	margin-top: 100px;
}

#home .content-box .button::after {
	content: "";
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
}

#home .content-box button {
	width: 85px;
	height: 70px;
	background: none;
	border: none;
	pointer-events: auto;
}

#home .scroll-box {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 50;
	transform: translateX(-50%);
	text-align: center;
}

#home .scroll-box>span {
	display: inline-block;
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: 0;
	margin-bottom: 10px;
}

#home .scroll-box .bar {
	width: 1px;
	height: 90px;
	background: rgba(255, 255, 255, 0.38);
	margin: 0 auto;
	position: relative;
}

#home .scroll-box .bar span {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	animation: scroll 2.5s linear infinite;
	will-change: top;
}

@keyframes size {
	0% {
		transform: scale(1.25);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes flip {
	0% {
		transform: rotateY(90deg);
		opacity: 0;
	}

	100% {
		transform: rotateY(0deg);
		opacity: 1;
	}
}

@keyframes up {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		top: 0;
	}

	50% {
		top: calc(100% - 8px);
	}

	100% {
		top: 0;
	}
}

@media screen and (max-width: 1600px) {
	#home .content-box h2 {
		font-size: 4rem;
	}

	#home .content-box p {
		font-size: 1.5rem;
		margin-top: 20px;
	}

	#home .content-box .button {
		margin-top: 70px;
	}

	#home .content-box button {
		width: 70px;
		height: 65px;
	}
}

@media screen and (max-width: 1200px) {
	#home .visual .bg {height: 100vh; overflow: hidden;}
	#home .visual .bg video {width: 100%; height: 100vh; object-fit: cover;}

	/* #home .content-box h2{ font-size: 5rem; } */
	#home .scroll-box>span {
		font-size: 1rem;
	}
}
@media screen and (max-height: 440px) {
	#home .content-box h2 {font-size: 3rem;}
}
@media screen and (max-width: 850px) {
	
}

@media screen and (max-width: 750px) {
	#home .content-box h2 {
		font-size: 3rem;
		line-height: 1.2142;
	}

	#home .content-box p {
		font-size: 1.125rem;
	}

	#home .content-box .button {
		margin-top: 50px;
		height: auto;
	}

	#home .content-box button {
		width: 60px;
		height: 55px;
	}
}

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

/*CF*/
#CF {position: relative; overflow: hidden;}
#CF .visual {overflow: hidden;}
#CF .visual .bg {
	width: 100%;
	height: 100vh;
}
#CF .visual .bg01 {
	background: url("/assets/images/main/mainVisual_bg.png") no-repeat center center / cover;
}

#CF .content-box {
	position: absolute;
	top: 45%;
	left: 0;
	right: 0;
	z-index: 50;
	transform: translateY(-50%);
	pointer-events: none;
}
#CF .content-box .txtWrap {position: relative; max-width: 900px; width: 100%; margin: 0px auto; padding: 100px 0 50px 0; display: flex; align-items: center; justify-content: space-between;}

#CF .content-box .textBox {width: 70%; }
#CF .content-box h2 {
	font-size: 50px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2631;
	margin-top: 20px;
	letter-spacing: 0em;
	overflow: hidden;
}

#CF .content-box h2 span{
	display: inline-block;
	transform: translateY(100%);
	will-change: transform;
}

#CF .content-box p {
	font-size: 50px;
	font-weight: 200;
	color: #ffffff;
	letter-spacing: 0;
	margin-top: 0px;
	overflow: hidden;
}

#CF .content-box p span {
	display: inline-block;
	transform: translateY(100%);
	will-change: transform;
}

#CF .content-box button.playbtn { display: flex; align-items: center; background: var(--CBlue500); margin-top: 20px; width: 180px; padding:0px 16px; height: 45px; font-size: 16px; color: #ffffff; border-radius: 50px;}
#CF .content-box button.playbtn span.txt {padding: 3px 0 0 10px;}
#CF .content-box button.playbtn:hover { background: #ffffff; transition: all .3s ease; color: #111;}
#CF .content-box button.playbtn.b02 { background: #00A4A7;}
#CF .content-box button.playbtn.b02:hover { background: #ffffff;}

#CF .content-box .videoBox { border-radius: 20px; margin: 0 auto; width: 100%; max-width: 900px; height:100%; max-height: 506px;}
#CF .content-box .videoBox video { border-radius: 20px; object-fit: cover;  border: 1px solid rgba(255, 255, 255, 0.1); -webkit-box-shadow: 0 50px -24px rgba(0,0,0,0.6), 0 50px -24px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 19px 38px rgba(0,0,0,0.6), 0 15px 12px rgba(0,0,0,0.6); 
    -ms-box-shadow: 0 19px 38px rgba(0,0,0,0.6), 0 15px 12px rgba(0,0,0,0.6);
    -o-box-shadow: 0 19px 38px rgba(0,0,0,0.6), 0 15px 12px rgba(0,0,0,0.6);
    box-shadow: 0 19px 38px rgba(0,0,0,0.6), 0 15px 12px rgba(0,0,0,0.6);}
#CF .visual.animated .bg {
	transform: scale(1);
	transition: all 2.5s;
}

#CF .content-box.animated h2 span {
	animation: up 1.3s 1s forwards;
}

#CF .content-box.animated p span {
	animation: up 1.3s 1s forwards;
}

#CF .content-box button {
	width: 85px;
	height: 70px;
	background: none;
	border: none;
	pointer-events: auto;
}

@keyframes size {
	0% {
		transform: scale(1.25);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes flip {
	0% {
		transform: rotateY(90deg);
		opacity: 0;
	}

	100% {
		transform: rotateY(0deg);
		opacity: 1;
	}
}

@keyframes up {
	0% {
		transform: translateY(100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes scroll {
	0% {
		top: 0;
	}

	50% {
		top: calc(100% - 8px);
	}

	100% {
		top: 0;
	}
}

@media screen and (max-width: 1600px) {
	#CF .content-box h2 {
		font-size: 3rem;
	}

	#CF .content-box p {
		font-size: 3rem;
	}

	#CF .content-box .button {
		margin-top: 70px;
	}

	#CF .content-box button {
		width: 70px;
		height: 65px;
	}
}

@media screen and (max-width: 1200px) {
	#CF .visual .bg {height: 100vh; overflow: hidden;}

	/* #CF .content-box h2{ font-size: 5rem; } */
	#CF .scroll-box>span {
		font-size: 1rem;
	}
	#CF .content-box .txtWrap { max-width: 900px; width: 90%; }

}


@media screen and (max-width: 750px) {
	#CF .content-box .txtWrap { display: block;}
	#CF .content-box .textBox { width: 100%; }
	#CF .content-box h2 {font-size: 3rem; line-height: 1.2142;}
	#CF .content-box p {font-size: 3rem;}
	#CF .content-box .btnBox {display:flex; align-item:center; gap:20px;}
	#CF .content-box button.playbtn {margin-top: 20px;font-size: 16px;}
}

@media screen and (max-width: 650px) {
	#CF .content-box {top: 35%;}
}
@media screen and (max-height: 853px) { 
	#CF .content-box .videoBox {
    border-radius: 20px;
    margin: 0 auto;
    width: 100%;
    max-width: 550px;
    height: 100%;
    max-height: 506px;}
    #CF .content-box .txtWrap {padding: 50px 0 30px 0;}
    #CF .content-box h2 {font-size: 2.5rem;}
    #CF .content-box p {font-size: 2.5rem;}
}
@media screen and (max-height: 440px) {
	#CF .visual .bg01 {
		background: url(/assets/images/main/mainVisual_bg.png) no-repeat center center / cover;
		background-size: cover cover;
	}
	#CF .content-box {
		position: relative;
		top: 25%;
		left: 0;
		right: 0;
		z-index: 50;
		transform: translateY(-50%);
		pointer-events: none;
	}
	#CF .content-box .videoBox {
        max-width: 700px;
        height: 100%;
        max-height: 506px;
    }
	
}
@media screen and (max-width: 480px) {
	#CF .content-box h2 { text-align: center;
		font-size: 2.5rem;
		line-height: 1.2142;
	}
	#CF .content-box p { text-align: center;
		font-size: 2.5rem;
	}
	#CF .content-box button.playbtn {margin: 40px auto 0 auto; font-size: 14px; text-align: center; justify-content:center;}
	#CF .content-box button.playbtn span.txt{padding: 0px 10px; text-align: center;}
	#CF .content-box button.playbtn span.material-symbols-outlined {display:none;}
}

/*CI*/
#CI .flexWrap {display: flex; justify-content: center; align-items: center;}
#CI .leftBox { width: 50%; height: 100vh; background: url(/assets/images/main/ci_bg.jpg) no-repeat center;}
#CI .leftBox .titArea { margin-top: 134px; display: flex; align-items: center; justify-content: flex-end;}
#CI .leftBox .titArea h2{ font-size: 75px; color: var(--CBlack); font-weight: 700; font-family: "Montserrat";}
#CI .leftBox .titArea .line{ margin-left: 32px; width: 152px; height: 1px; background: var(--CBlack);}
#CI .leftBox p{ display: flex; justify-content: flex-end; font-size: 18px; color: var(--CDarkGrey300); font-weight: 400; margin: 33px 214px 0 0;}
#CI .ciWrap { position: relative; width: 748px; height: 458px; margin: 84px auto 0 auto; background: url(/assets/images/main/CI_IMG.png) no-repeat center center;}
#CI .ciWrap .txtBox1 { position: absolute; top: 50%; z-index: 3;}
#CI .ciWrap .txtBox1 .dotLine1 { width: 200px; height: 1px; background: var(--CMain); }
#CI .ciWrap .txtBox1 .dotLine1::after { content: ""; display: block; position: absolute; top: -4px; right: 0px; width: 9px; height: 9px; border-radius: 50px; background: var(--CMain); }
#CI .ciWrap .txtBox1 h5 { padding: 10px 0 0 0; font-size: 18px; color:var(--CMain); font-weight: 400;}
#CI .ciWrap .txtBox2 { position: absolute; left:49.5%;  z-index: 1;}
#CI .ciWrap .txtBox2 .dotLine2 { display: inline-block; width: 1px; height: 158px;background: var(--CMain); }
#CI .ciWrap .txtBox2 .dotLine2::after { content: ""; display: block; margin: -8px 0 0 -4px; width: 9px; height: 9px; border-radius: 50px; background: var(--CMain); }
#CI .ciWrap .txtBox2 h5 {display: inline-block; vertical-align: top; margin-left: 10px; font-size:18px; color:var(--CMain); font-weight: 400;}
#CI .ciWrap .txtBox3 { position: absolute; top: 67%; left: 63%;  z-index: 2;}
#CI .ciWrap .txtBox3 .dotLine3 { display: inline-block; width: 1px; height: 158px; background: var(--CMain); }
#CI .ciWrap .txtBox3 .dotLine3::after { content: ""; display: block; margin: -8px 0 0 -4px; width: 9px; height: 9px; border-radius: 50px; background: var(--CMain); }
#CI .ciWrap .txtBox3 h5 {display: inline-block; margin-left: 10px; font-size: 18px; color:var(--CMain); font-weight: 400;}

#CI .rightBox { width: 50%; height: 100vh; background: var(--CMain);}
#CI .rightBox .titArea { margin-top: 134px; display: flex; align-items: center; justify-content: flex-start;}
#CI .rightBox .titArea h2{ font-size: 75px; color: #ffffff; font-weight: 700; font-family: "Montserrat";}
#CI .rightBox .titArea .line{ margin-right: 32px; width: 152px; height: 1px; background: #ffffff;}
#CI .rightBox .ciColorWrap { margin: 107px auto 52px auto; width: 70%;}
#CI .rightBox .ciColorWrap .symbol { width: 390px; height: 450px; margin: 0 auto; background: url(/assets/images/main/dioSymbol.png) no-repeat center;}
#CI .rightBox .ciColorWrap .symbol dl { font-size: 16px; color: #ffffff; width: 332px; margin: 0 auto; padding:120px 50px; vertical-align: middle; }
#CI .rightBox .ciColorWrap .symbol dt { font-size: 20px; color: #ffffff; font-weight: 600; margin-bottom: 10px;}
#CI .rightBox .ciColorWrap .symbol dd span { width: 160px; margin-right: 20px;}

/*Surface*/
#Surface { position: relative; width: 100%; overflow: hidden; width: 100%; height: 100%;}
#Surface .surfaceWrap {height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#Surface .contentBox {padding: 50px 0; display: flex; align-items: center; gap: 3%;}
#Surface .contentBox .implantImg { margin-top: 6%;}
#Surface .contentBox .implantImg img{vertical-align: middle; }
#Surface .contentBox .textBox { margin: 5% 0 0 5%; }
#Surface .contentBox .textBox h3 { font-size: 84px; font-family: "Montserrat"; letter-spacing: -0.02em; font-weight: 400; color: var(--CBlack); line-height: 105%;}
#Surface .contentBox .textBox h5 { font-size: 32px; font-weight: 700; color: var(--CMain); margin-top: 53px;}
#Surface .contentBox .textBox p { font-size: 22px; font-weight: 300; color: var(--CBlack); margin: 23px 0 33px 0;}
#Surface .contentBox .textBox p span { font-weight: 600;}
#Surface .contentBox .flex-box { display: flex; align-items: center; gap: 30px;}
#Surface .contentBox .imgArea {display: flex; padding: 30px 0 50px 0;}
#Surface .contentBox .imgBox {margin-right: 20px; background: var(--CBlack); border-radius: 10px;}
#Surface .contentBox .imgBox.accent {background: var(--CMain); -webkit-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -moz-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25); 
    -ms-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -o-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    box-shadow: 0 18px 18px rgba(170,176,188,0.25), 0 18px 12px rgba(170,176,188,0.25);}
#Surface .contentBox .imgBox p {font-size: 16px; font-weight: 500; color: #ffffff; text-align: center; margin: 10px 0;}
#Surface .contentBox .videoArea { margin-top: -30px;}
#Surface .contentBox .videoArea .video{ width: 600px; height: 326px; border-radius: 16px;}
#Surface .contentBox .videoArea .video video{ object-fit: cover !important; border-radius: 16px !important; -webkit-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -moz-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25); 
    -ms-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -o-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    box-shadow: 0 18px 18px rgba(170,176,188,0.25), 0 18px 12px rgba(170,176,188,0.25);}
#Surface .contentBox .videoArea .btnArea { display: flex; justify-content: flex-end; margin-top: 160px;}
#Surface .contentBox .videoArea .btnArea .arrowBtn{ width: 150px; color: var(--CBlack); font-size: 18px; font-weight: 500; background: url(/assets/images/main/arrowBtn.png) no-repeat bottom; padding-bottom: 10px;}
#Surface .contentBox .mobileimg { display: none; width: 100%; height: 100%;}
#Surface .contentBox .mobileimg img{ border-radius: 10px;}

@media screen and (max-width: 1600px) {
	#Surface .contentBox {padding: 50px 30px 50px 0; max-width: 1500px; width: 100%;}
	#Surface .contentBox .implantImg { width: 30%;}
	#Surface .contentBox .textBox { margin: 5% 0 0 0%;}
	#Surface .contentBox .textBox h3 { font-size: 4.5rem;}
	#Surface .contentBox .textBox h3 br { display: none;}
	#Surface .contentBox .textBox h5 { font-size: 2rem; margin-top: 40px;}
	#Surface .contentBox .textBox p { font-size: 1.25rem; }
	#Surface .contentBox .imgBox p {font-size: 1rem;}
	#Surface .contentBox .videoArea { width: 50%;}
	#Surface .contentBox .videoArea .video{ width: 100%; height: 100%;}
	#Surface .contentBox .videoArea .btnArea { margin-top: 100px;}
}

@media screen and (max-width: 1200px) {
	#Surface .surfaceWrap {height: 100%; display: block; }
	#Surface .contentBox { padding: 100px 30px 50px 0; align-items: flex-start;}
	#Surface .contentBox .implantImg { width: 30%; margin-top: 0%;}
	#Surface .contentBox .implantImg img{ width: 100%;}
	#Surface .contentBox .textBox {width: 70%; margin: 0% 0 0 0%;}
	#Surface .contentBox .textBox h3 {font-size: 4rem;}
	#Surface .contentBox .textBox h5 { font-size: 2rem; margin-top: 40px;}
	#Surface .contentBox .textBox p { font-size: 1.25rem; }
	#Surface .contentBox .textBox p br{ display: none; }
	#Surface .contentBox .flex-box { display: block;}
	#Surface .contentBox .imgArea {padding: 0px 0 50px 0;}
	#Surface .contentBox .imgBox p {font-size: 0.9rem;}
	#Surface .contentBox .videoArea { width: 100%; margin: 2% auto 0 auto; padding-left: 0px;}
	#Surface .contentBox .videoArea .btnArea { margin-top: 50px;}
}
@media screen and (max-width: 1024px) {
	#Surface .contentBox { padding: 100px 30px 100px 0;}
	#Surface .contentBox .textBox {width: 65%;}
	#Surface .contentBox .textBox h5 { font-size: 2.5rem;}
}

@media screen and (max-width: 900px) {
	#Surface .contentBox .implantImg {width: 20%;}
	#Surface .contentBox .implantImg img{ width: 90%;}
	#Surface .contentBox .textBox { width: 70%;}
	#Surface .contentBox .textBox h3 { font-weight: 400; }
	#Surface .contentBox .textBox h3 br { display: none;}
	#Surface .contentBox .textBox h5 { font-size: 1.7rem; margin-top: 30px;}
	#Surface .contentBox .videoArea .btnArea { margin-top: 50px;}
}
@media screen and (max-width: 768px) {
	#Surface .contentBox {display: block; padding: 100px 30px;}
	#Surface .contentBox .mobileimg {margin: 0 auto 50px auto; text-align: center; display: block; width: 100%; height: 100%; border-radius: 30px; object-fit: cover;}
	#Surface .contentBox .mobileimg img{ border-radius: 30px; object-fit: cover;}
	#Surface .contentBox .implantImg {display: none;}
	#Surface .contentBox .textBox {left: 5%; width: 100%; margin: 30px auto 0 auto;}
	#Surface .contentBox .textBox h3 {display: block; font-weight: 800; left: 50%; width: 100%; font-size: 3rem;}
	#Surface .contentBox .textBox h5 { font-size: 2rem; margin-top: 30px;}
	#Surface .contentBox .videoArea { width: 100%; margin: 2% auto 0 auto;}
}

@media screen and (max-width: 480px) {
	#Surface .contentBox .textBox h5 { font-size: 1.4rem; }
	#Surface .contentBox .imgArea {display: block; padding: 30px 0 50px 0;}
	#Surface .contentBox .imgBox { margin-right: 0; margin-bottom: 20px;}
	#Surface .contentBox .imgBox p {font-size: 1rem; padding: 10px 0; margin: 0;}
	#Surface .contentBox .imgArea img{ width: 100%; padding: 0px 0 0px 0;}
}
@media screen and (max-height: 853px) { 
	#Surface .contentBox .textBox h3 {
        font-size: 2.5rem;
    }
    #Surface .contentBox .textBox h5 {
        font-size: 1.5rem;
        margin-top: 20px;
    }
    #Surface .contentBox .textBox p {
        font-size: 1rem;
    }
}

/*VUV*/
#VUV {width: 100%; position: relative; overflow: hidden;}
#VUV .vuvWrap {height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#VUV .contentBox {padding: 50px 0; min-height: 885px; background: url(/assets/images/main/vuv_bg.png) no-repeat right center; }
#VUV .contentBox .cWrap {display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; margin: 0 auto 48px auto; }
#VUV .contentBox .textBox { margin: 50px 0 0 5%; text-align: right; }
#VUV .contentBox .textBox h3 { font-size: 90px; font-family: "Montserrat"; letter-spacing: -0.02em; font-weight: 400; color: var(--CBlack); line-height: 115%;}
#VUV .contentBox .textBox h4 { font-size: 40px; font-weight: 800; color: var(--CBlack); margin-top: 20px;}
#VUV .contentBox .textBox h5 { font-size: 32px; font-weight: 700; color: var(--CMain); margin-top: 48px;}
#VUV .contentBox .textBox p { font-size: 22px; font-weight: 300; color: var(--CBlack); margin: 23px 0;}
#VUV .contentBox .textBox p span { font-weight: 600;}
#VUV .contentBox .bannerdBox01 { padding: 50px; border-radius: 20px; -webkit-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -moz-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25); 
    -ms-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    -o-box-shadow: 0 19px 38px rgba(170,176,188,0.25), 0 15px 12px rgba(170,176,188,0.25);
    box-shadow: 0 18px 18px rgba(170,176,188,0.25), 0 18px 12px rgba(170,176,188,0.25);}
#VUV .contentBox .bannerdBox01.bg001 { width: 438px; height: 389px; margin-top: 40px; background: url(/assets/images/main/vuv_img01.png) no-repeat center;}
#VUV .contentBox .bannerdBox01.bg002 { width: 753px; height: 340px; margin-right: 48px; background: url(/assets/images/main/vuv_img02.png) no-repeat center;}
#VUV .contentBox .bannerdBox01.bg003 { width: 438px; height: 339px; background: url(/assets/images/main/vuv_img03.png) no-repeat center;}
#VUV .contentBox .bannerdBox01 h3 { font-size: 34px; font-weight: 600; line-height: 120%; color: #ffffff;}
#VUV .contentBox .bannerdBox01 p { font-size: 16px; font-weight: 400; line-height: 140%; margin-top: 30px; color: rgba(255, 255, 255, 0.8);}
#VUV .contentBox .videoArea .btnArea { display: flex; justify-content: flex-end; margin-top: 200px;}
#VUV .contentBox .videoArea .btnArea .arrowBtn{ width: 150px; color: var(--CBlack); font-size: 18px; font-weight: 500; background: url(/assets/images/main/arrowBtn.png) no-repeat bottom; padding-bottom: 10px;}

@media screen and (max-width: 1400px) {
	#VUV .contentBox {padding: 50px 30px;}
	#VUV .contentBox .textBox p br{ display: none; }
}

@media screen and (max-width: 1300px) {
	#VUV .vuvWrap {height: 100%; display: block; }
	#VUV .contentBox .textBox h3 { font-size: 4.5rem;}
	#VUV .contentBox .textBox h4 { font-size: 2rem;}
	#VUV .contentBox .textBox h5 { font-size: 1.7rem; margin-top: 10px;}
	#VUV .contentBox .textBox p { font-size: 1.25rem; }
	#VUV .contentBox .bannerdBox01.bg001 {height: 300px;}
	#VUV .contentBox .bannerdBox01 { padding: 40px; }
	#VUV .contentBox .bannerdBox01 h3 { font-size: 2rem;}
	#VUV .contentBox .bannerdBox01 p br { display: none; }
}
@media screen and (max-height: 853px) { 
	#VUV .vuvWrap { display: flex; height:100%;}
	#VUV .contentBox {
        padding: 50px 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: auto;
    
    }
	#VUV .contentBox .cWrap {margin: 0 auto 8px auto;}
	#VUV .contentBox .textBox h3 {
        font-size: 3rem;
    }
    #VUV .contentBox .textBox h5 {
        font-size: 1.5rem;
        margin-top: 10px;
    }
    #VUV .contentBox .textBox p {
        font-size: 1rem;
    }
    #VUV .contentBox .bannerdBox01 {
        padding: 30px;
    }
    #VUV .contentBox .bannerdBox01.bg001 {
        height: 220px;
    }
    #VUV .contentBox .bannerdBox01 h3 {
        font-size: 1.5rem;
    }
    #VUV .contentBox .bannerdBox01.bg002 {height: 220px;}
    #VUV .contentBox .bannerdBox01.bg003 {height: 220px;}
}

@media screen and (max-width: 1024px) {
	#VUV .contentBox .cWrap {display: flex; flex-direction: column-reverse; gap: 30px;}
	#VUV .contentBox .textBox { margin: 50px 0 0 0%; text-align: left;}
	#VUV .contentBox .textBox h3 { font-size: 4rem;}
	#VUV .contentBox .textBox h4 { font-size: 2rem;}
	#VUV .contentBox .textBox h5 { font-size: 1.7rem; margin-top: 10px;}
	#VUV .contentBox .textBox p { font-size: 1.4rem; }
	#VUV .contentBox .textBox p br{ display: none; }
	#VUV .contentBox .bannerdBox01.bg001 { width: 100%; height: 100%; min-height: 389px; background-size: cover;}
	#VUV .contentBox .bannerdBox01.bg002 { width: 100%; height: 100%; min-height: 340px; background-size: cover;}
	#VUV .contentBox .bannerdBox01.bg003 { width: 100%; height: 100%; min-height: 339px; background-size: cover;}
	#VUV .contentBox .bannerdBox01 { padding: 40px; }
	#VUV .contentBox .bannerdBox01 h3 { font-size: 2.5rem;}
	#VUV .contentBox .bannerdBox01 p { font-size: 1.5rem;}
	#VUV .contentBox .bannerdBox01 p br { display: none; }
	#VUV .contentBox .bannerdBox01.bg002 { margin-right: 0; }
}


@media screen and (max-width: 768px) {
	#VUV .contentBox {padding: 50px 30px;}
	#VUV .contentBox .bannerdBox01 h3 { font-size: 2rem;}
	#VUV .contentBox .textBox h5 { font-size: 1.5rem; margin-top: 15px;}
	#VUV .contentBox .bannerdBox01 p { font-size: 1.25rem;}
	#VUV .contentBox .bannerdBox01 p br { display: none; }
	#VUV .contentBox .bannerdBox01.bg002 h3 br { display: none; }
	#VUV .contentBox .textBox h3 { font-size: 3rem; font-weight: 700; line-height: 1;}
}



/*Product*/
#Product {width: 100%; position: relative; overflow: hidden;}
#Product .productWrap {height: 100vh; position: relative; overflow: hidden; background: var(--CDarkGrey600);}
#Product .productWrap .slides-container {height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#Product nav {
    position: relative;
    top: 100px;
    left: 0;
    width: 100%;
    z-index: 100;
}

#Product nav ul {
    list-style: none;
    text-align: center;
    margin-top: 30px;
}

#Product nav ul li {
    display: inline-block;
    margin-right: 48px;
}

#Product nav ul li:last-child {
    margin-right: 0;
}

#Product #back-to-tutorial {
    margin-left: 100px;
}

#Product nav a {
    padding: 10px 20px;
    font-weight: normal;
    font-size: 20px;
    text-align: center;
    border-radius: 4px;
    background-color: transparent;
    color: #ffffff;
	border-radius: 50px;
	border: 1px solid #ffffff;
	text-decoration: none;
	transition: all 0.4s ease;
}

#Product nav a.active {
    background-color: #ffffff;
    color: var(--CBlack);
	border-radius: 50px;
}
#Product nav a:hover { top:-4px; transition: all 0.4s ease; cursor: pointer;}

#Product .slides-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

#Product .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateX(100%);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    visibility: hidden;
}
#Product .slide .flex-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #000000;
	height: 100%;
}

#Product .slide.active {
    transform: translateX(0);
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#Product .slide.prev {
    transform: translateX(-100%);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#Product .slide.next {
    transform: translateX(100%);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#Product .slide .imgBox {
    width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
#Product .slide .imgBox img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom;
}
#Product .slide .textBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
    width: 50%;
	padding-left: 8%;
	height: 100vh;
	background: var(--CDarkGrey600);
}
#Product .slide .textBox .brand-logo {display: flex; align-items: baseline; gap: 10px;}
#Product .slide .textBox .brand-logo span { padding: 0 0 5px 20px; font-size: 18px; color: rgba(255, 255, 255, 0.6);}
#Product .slide .textBox h1 {
	color: #FFF;
	font-family: Montserrat;
	font-size: 32px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; 
	margin-bottom: 36px;/* 32px */
}

#Product .slide .textBox .diagonal-box {
	display: flex;
	align-items: center;
	margin-top: 89px;
}

#Product .slide .textBox .diagonal {
	width: 180px;
	height: 164px;
	background: linear-gradient(
	  to top left,
	  var(--CDarkGrey600) calc(50% - 1px),
	  rgba(255, 255, 255, 0.3),
	  var(--CDarkGrey600) calc(50% + 1px)
	);
}
#Product .slide .textBox p {   
    margin-left: 58px;
    font-size: 24px;
	color: #ffffff;
}
#Product .slide .textBox .diagonal-box .arrowBtn {
	margin-top: 50px;
	display: block;
	width: 100px;
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	background: url(/assets/images/main/iconLink.svg) no-repeat right center;
	padding-bottom: 0px;
}
#Product .slide .textBox .diagonal-box .arrowBtn:hover {
	color: var(--mainColor);
}

#Product #slide-1 {background: var(--CDarkGrey600);}
#Product #slide-2 {background: var(--CDarkGrey600);}
#Product #slide-3 {background: var(--CDarkGrey600);}
#Product #slide-4 {background: var(--CDarkGrey600);}

#Product .go-prev, .go-next {
	display: none;
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}

#Product .fp-controlArrow {
	display: none;
}
@media screen and (max-width: 1400px) {
	#Product .slide .textBox h1 {font-size: 2rem;}
	#Product .slide .textBox .brand-logo img{ width: 50%;}
	#Product .slide .textBox .diagonal-box {margin-top: 50px;}
	#Product .slide .textBox .diagonal-box .diagonal {width: 100px; height: 84px;}
	#Product .slide .textBox .diagonal-box .arrowBtn {margin-top: 30px;}
	#Product #slide-2 .imgBox {height: 100%;}
	#Product #slide-2 .imgBox img{ object-fit: cover;}
	
}
@media screen and (max-width: 1200px) {
	#Product nav {top: 50px;}
	#Product .product-container {height: 100%;}
	#Product .productWrap .slides-container {
		height: 100%}
	#Product .slide.active {
		opacity: 1;
		visibility: visible;
	}
	#Product .slide .flex-box { height: auto;}
	#Product .slide .imgBox {
		opacity: 1;
		visibility: visible;
	}
	
	#Product .slide .textBox {
		padding-left: 5%;
	}
	#Product .slide .textBox h1 {
		font-size: 1.25rem;
		margin-bottom: 20px;
	}
	#Product .slide .textBox .diagonal-box {
		margin-top: 50px;
	}
	#Product .slide .textBox .diagonal-box .diagonal {
		width: 100px;
		height: 84px;
	}
	#Product .slide .textBox .brand-logo img { width: 50%;}
	#Product .slide .textBox .diagonal-box .arrowBtn {
		margin-top: 20px;
		font-size: 14px;
	}
	#Product .slide .textBox p {   
		margin-left: 48px;
		font-size: 18px;
	}
}

@media screen and (max-width: 1024px) {
	#Product .productWrap {
		background: #000000;
	}
	#Product nav {top: 80px;}
	#Product nav ul {margin: 0 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
	#Product nav ul li { margin-right: 0; display: block; }
	#Product nav a { font-size: 1rem; }
	#Product .slide .flex-box { flex-direction: column; height: 100%;}
	#Product .slide .imgBox {width: 100%; height: 60%; justify-content: center;}
	#Product #slide-2 .imgBox {height: 60%;}
	#Product .slide .imgBox img{ object-fit:cover;}
	#Product .slide .textBox {width: 100%; height: 40%; margin: 0% auto 0 auto; padding:15% 5%;}
	#Product .slide .textBox .diagonal-box {margin-top: 40px;}
	#Product .slide .textBox .diagonal {display: none;}
	#Product .slide .textBox p {margin-left: 0px;font-size: 24px;}
	#Product .slide .textBox p br { display: none; }
	#Product #slide-1 .textBox p br, #Product #slide-2 .textBox p br { display: block; }

	#Product .productWrap .slides-container { display: block; height: 100%;}

	#Product .slide {
		width: 100%;
		height: 100%;
		opacity: 0;
		overflow: hidden;
		visibility: hidden;
	}
	
	#Product .slide.active {
		z-index: 2;
		transform: none !important;
		opacity:1;
	}
}
@media screen and (max-width: 768px) {
	#Product nav {top: 50px;}
	#Product nav ul { gap: 10px;}
	#Product nav ul li {
		display: block;
		margin-right: 0px;
	}
	#Product nav a {
		display: block;
		padding: 10px;
		font-size: 1rem;
		width: 150px;
	}
	#Product .slide .textBox {
		width: 100%;
		padding: 10%;
	}
}
@media screen and (max-height: 853px) { 
	#Product .slide .textBox h1 {
        font-size: 1rem;
        margin-bottom:10px
    }
    #Product nav ul {margin-top: 0px;}
    #Product .slide .textBox .diagonal-box {
        margin-top: 30px;
    }
}
@media screen and (max-height: 440px) {
	#Product .slide .flex-box {
        flex-direction: row;
        height: 100%;
    }
	#Product nav {
        top: 30px;
    }
	#Product .slide .imgBox {
        width: 100%;
        height: 100%;
        justify-content: center;
    }
	#Product .slide .textBox {
        width: 100%;
        height: 100%;
        margin: 0% auto 0 auto;
        padding: 15% 5%;
    }
	#Product .slide .textBox h1 {
        margin-top: 30px;
    }
	#Product .slide .textBox .diagonal-box {
        margin-top: 10px;
    }
}

/*DIOnavi*/
#DIOnavi { background: #252525; position: relative; overflow: hidden;}
#DIOnavi .dionaviWrap { padding-top: 200px;}
#DIOnavi .title-box { text-align: center;}
#DIOnavi .title-box h2{ font-size: 60px; margin-bottom: 20px; font-family: "Montserrat"; line-height: 1; color: #fff; font-weight: 100; }
#DIOnavi .title-box .txtArea{ display: flex; align-items: center; margin:30px 0; justify-content: center; }
#DIOnavi .title-box p{ font-size: 26px; color: var(--CGrey400); font-weight: 400; }
#DIOnavi .title-box .txtArea .wline { width: 64px; margin: 0 16px; height: 1px; background: rgba(255, 255, 255, 0.7);}
#DIOnavi .title-box button.mainBtn{ margin-bottom: 60px; font-size: 16px; color: #fff; font-weight: 500; background: var(--mainColor); padding:10px 30px; border: 0; border-radius: 50px;}
#flowBox {
	overflow:hidden;
	position:relative;
	width:100%; 
	height:158px;
	margin-top: 30px;
 }
 .flowImg {
	width:3840px; /* 보여야 하는 이미지 + 클론이미지 전체 합 */
	height:100%;
	display:flex;
	flex-wrap:nowrap;
	animation: bannermove 40s linear infinite;
 }
 .flowImg > div {
	flex:0 0 auto;
	height:158px;
	line-height:158px;
	vertical-align:top;
	text-align:center;
	margin-right: 20px;
 }
 .flowImg > .clone {opacity:1;}
 .flowImg2 {
	width:3840px; /* 보여야 하는 이미지 + 클론이미지 전체 합 */
	height:100%;
	display:flex;
	flex-wrap:nowrap;
	animation: bannermove 40s linear infinite reverse;
 }
 .flowImg2 > div {
	flex:0 0 auto;
	height:158px;
	line-height:158px;
	vertical-align:top;
	text-align:center;
	margin-right: 20px;
 }
 .flowImg2 > .clone {opacity:1;}
 @keyframes bannermove {
   0% {
	   transform: translate(0, 0);
   }
   100% {
	   transform: translate(-50%, 0);
   }
 }


@media screen and (max-width: 1400px) { 
	#DIOnavi .w1280 { padding: 0 30px;}

}

@media screen and (max-width: 1300px) { 
	#DIOnavi .w1280 { padding: 0 40px;}

}
@media screen and (max-width: 1100px) { 
	#ApplySeminar .attendInfo .inline_form li.formInput {width: 100%;}
	#RegistSeminar .attendInfo .inline_form li.formInput {width: 100%;}
}


@media screen and (max-width: 1000px) { 
	#DIOnavi { padding: 30px 0 80px 0; }
	#DIOnavi .w1280 {  flex-direction: column; padding: 0 30px;}
	#DIOnavi .title-box { text-align: center;}
	#DIOnavi .title-box h2{ text-align: center; letter-spacing: 0.04em;}
	#DIOnavi .title-box h2 br{ display: none;}
	#DIOnavi .title-box p{ text-align: center; margin:20px 0 50px 0; font-size: 1.25rem;}
	#DIOnavi .title-box p br { display: none; }
	#DIOnavi .title-box button.outline{ font-size: 1.25rem; padding:14px 30px;}

}

/*Global*/
#Global { background: var(--CMain); width: 100%; position: relative; overflow: hidden;}
#Global .globalWrap {height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#Global .global-Container { max-width: 1500px; width: 100%; margin: 50px auto; height: 100%; }
#Global .textBox { padding: 0px 0 0px 0; text-align:center;}
#Global .textBox h1{ font-size: 90px; color: #ffffff; font-weight: 800; font-family: "Montserrat"; letter-spacing: -0.01em;}
#Global .textBox p{ margin:20px 0 30px 0; font-size: 24px; color: rgba(255, 255, 255, 0.8); font-weight: 400; line-height: 1.5;}
#Global .globalMap { width: 100%; max-width: 1280px; margin: 0 auto; min-height: 576px;}
#Global .textBox .diagonal {
	width: 90px;
	height: 54px;
	background: linear-gradient(
	  to top left,
	  var(--CMain) calc(50% - 1px),
	  rgba(255, 255, 255, 0.5),
	  var(--CMain) calc(50% + 1px)
	);
}
#Global .globalMap .mobileMap { display: none;}
.globalMap .map-container { 
	padding: 10px;  
	position: relative; 
	top: 20%;
	display: inline-block; 
	} 
   .globalMap .map-container img { 
	width: 100%; 
	} 
   .globalMap .map-container .point { 
	cursor: pointer; 
	position: absolute; 
	width: 0.8rem; 
	height: 0.8rem; 
	background-color: var(--CMain); 
	border-radius: 50%; 
	transition: all 0.3s ease; 
	will-change: transform, box-shadow; 
	transform: translate(-50%, -50%); 
	box-shadow: 0 0 0 rgba(0, 172, 193, 0.4); 
	animation: pulse2 3s infinite; 
	} 
   .globalMap .map-container .point_b { 
	cursor: pointer; 
	position: absolute; 
	width: 0.8rem; 
	height: 0.8rem; 
	background-color: #564899; 
	border-radius: 50%; 
	transition: all 0.3s ease; 
	will-change: transform, box-shadow; 
	transform: translate(-50%, -50%); 
	box-shadow: 0 0 0 rgba(0, 172, 193, 0.4); 
	animation: pulse2 3s infinite; 
	} 
   .globalMap .map-container .point:hover { 
	animation: none; 
	transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1); 
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
	} 
   .globalMap .map-container .point_b:hover { 
	animation: none; 
	transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1); 
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); 
	} 
   
   .globalMap .map-container .map-popup { 
	position: absolute; 
	left: 50%; 
	top: 50%; 
	z-index: 99; 
	width: 50%; 
	padding: 2rem; 
	background-color: #fff; 
	transition: all 300ms ease-in; 
	transform: translate(-50%,-50%); 
	box-shadow: 0 0 24px rgba(0,0,0,0.22); 
	opacity: 0; 
	visibility: hidden; 
	border-radius: 20px;
	} 
	.globalMap .map-item {padding-left:10px}
   .globalMap .map-container .map-popup ul { margin: 0; padding: 10px 20px; } 
   .globalMap .map-container .map-popup li { list-style-type: disc; margin: 0 0 0.5rem 0; font-size: 14px; color: #828282; line-height: 1.2; } 
   .globalMap .map-container .map-popup li:last-child { margin: 0; } 
   .globalMap .map-container .map-popup li.company { font-weight: 600; color: var(--CMain); } 
   .globalMap .map-container .map-popup li span { font-weight: 600; color: #828282; } 
   .globalMap .map-container .map-popup li a { color: #828282; text-decoration: underline; } 
   
   .globalMap .map-container .map-popup > *:first-child { margin-top: 0; } 
   .globalMap .map-container .map-popup > *:last-child { margin-bottom: 0; } 
   .globalMap .map-container .map-popup.open { opacity: 1; visibility: visible; } 
   .globalMap .map-container .marker { 
	position: absolute; 
	margin-left:47px; 
	margin-top:35px; 
	padding:0; 
	z-index: 1; 
	display: inline-block; 
	width: 0.5rem; 
	height: 0.5rem; 
	color: #fff; 
	line-height: 0.8rem; 
	text-align: center; 
	text-decoration: none; 
	border-radius: 50%; 
	background-color: #ffffff; 
	transition: all 300ms; 
	animation: pulse2 3s infinite; 
	} 
	 
   .globalMap .map-container .mk_blue { background-color: #4430a7 } 
   .globalMap .map-container .marker span { display: block; padding-top: -10px; padding-left: 10px; font-size: 11px; font-weight: 300; color: rgba(255, 255, 255, 0.5); }
   .globalMap .map-container .korea { top: 40%; left: 40%; width: 1rem; height: 1rem; background-color: #25DAC4 } 
   .globalMap .map-container .korea span { padding-top: 16px; font-size: 14px; color: #25DAC4 }
   .globalMap .map-container .taiwan { top: 45%; left: 38%;} 
   .globalMap .map-container .canada { top: 25%; left: 75%; } 
   .globalMap .map-container .india { top: 49%; left: 26.5%; } 
   .globalMap .map-container .thailand { top: 52%; left: 33%; } 
   .globalMap .map-container .vietnam { top: 54%; left: 35%; } 
   .globalMap .map-container .mexico { top: 45%; left: 76%; } 
   .globalMap .map-container .usa { top: 38%; left: 72%; } 
   .globalMap .map-container .italy { top: 36.5%; left: 9%; } 
   .globalMap .map-container .portugal { top: 37%; left: 3%; } 
   .globalMap .map-container .ukraine { top: 28%; left: 15%; } 
   .globalMap .map-container .czech { top: 33%; left: 12%; } 
   .globalMap .map-container .hungary { top: 35.5%; left: 13%; } 
   .globalMap .map-container .france { top: 33%; left: 6%; } 
   .globalMap .map-container .germany { top: 31%; left: 8%; } 
   .globalMap .map-container .poland { top: 28.5%; left: 10%; } 
   .globalMap .map-container .turkey { top: 38%; left: 15%; } 
   .globalMap .map-container .russia { top: 22%; left: 37%; } 
   .globalMap .map-container .china { top: 37%; left: 36%; } 
   .globalMap .map-container .japan { top: 39%; left: 44%; } 
   .globalMap .map-container .australia { top: 75%; left: 46.5%; }
   .globalMap .map-container .iran { top: 45%; left: 21%; }
   .globalMap .map-container .iraq { top: 44%; left: 17%; } 
   .globalMap .map-container .uzbekistan { top: 37%; left: 20%; }
   .globalMap .map-container .kazakhstan { top: 30%; left: 24%; }
   .globalMap .map-container .kyrgyzstan { top: 37%; left: 26%; } 
   .globalMap .map-container .nepal { top: 45%; left: 28%; }
   .globalMap .map-container .malaysia { top: 57%; left: 33%; }
   .globalMap .map-container .mongolia { top: 30%; left: 36%; } 
   .globalMap .map-container .singapore { top: 59%; left: 33.6%;} 
   .globalMap .map-container .cambodia { top: 55%; left: 33%; } 
   .globalMap .map-container .indonasia { top: 61%; left: 38.5%;} 
   .globalMap .map-container .marker.indonasia span { display: block; padding-top: 10px; padding-left: 0px; }
   .globalMap .map-container .myanmar { top: 49%; left: 32%; } 
   .globalMap .map-container .moldova { top: 31.2%; left: 14%; }
   .globalMap .map-container .netherlands { top: 30%; left: 7%; } 
   .globalMap .map-container .netherlands span { position:absolute; left: -74px; } 
   .globalMap .map-container .latvia { top: 25%; left: 12%; }
   .globalMap .map-container .latvia span{ width:100px; }
   .globalMap .map-container .romania { top: 31%; left: 12%; }
   .globalMap .map-container .moldova span{width:100px;}
   .globalMap .map-container .lithuania { top: 27%; left: 11%; }
   .globalMap .map-container .denmark { top: 27%; left: 8%; }
   .globalMap .map-container .denmark span { position:absolute; left: -56px; } 
   .globalMap .map-container .cyprus { top: 41.5%; left: 14.5%; }
   .globalMap .map-container .swiss { top: 34.5%; left: 8%; }
   .globalMap .map-container .albania { top: 38%; left: 11%; }
   .globalMap .map-container .uk { top: 28.5%; left: 4.5%; }
   .globalMap .map-container .austria { top: 33.5%; left: 11.5%; }
   .globalMap .map-container .austria span{ width:82px; }
   .globalMap .map-container .jordan { top: 45%; left: 15.5%; }
   .globalMap .map-container .lebanon { top: 44%; left: 14.5%; }
   .globalMap .map-container .lebanon span { position:absolute; left: -56px; } 
   .globalMap .map-container .colombia { top: 56%; left: 84.5%; } 
   .globalMap .map-container .colombia span { position:absolute; left: -60px; } 
   .globalMap .map-container .peru { top: 64%; left: 83.5%; } 
   .globalMap .map-container .venezuela { top: 56%; left: 87.5%; } 
   .globalMap .map-container .ecuador { top: 60%; left: 83%; }
   .globalMap .map-container .chile { top: 74%; left: 85.5%; }
   .globalMap .map-container .egypt { top: 46.5%; left: 13%; }
   .globalMap .map-container .tunisia { top: 41%; left: 8%; }
   .globalMap .map-container .morocco { top: 43%; left: 4%; }
   
   
   @keyframes pulse2 { 
	0% { 
	box-shadow: 0 0 0 0 rgba(0, 172, 193, 0.5); 
	} 
	70% { 
	box-shadow: 0 0 0 25px rgba(0, 172, 193, 0); 
	} 
	100% { 
	box-shadow: 0 0 0 0 rgba(0, 172, 193, 0); 
	} 
	} 

@media screen and (max-width: 1600px) {
	#Global .global-Container { max-width: 1280px;}
	#Global .textBox h1{ font-size: 5rem; line-height: 1; margin-bottom: 20px;} 
	#Global .textBox p{ margin:20px 0 30px 0; font-size: 1.25rem;}
	#Global .globalMap .map-container { top: 10%;}
}

@media screen and (max-width: 1300px) {
	#Global .globalMap .map-container {top: 0%;}
	#Global .globalWrap {display: block; height: 100%;}
	#Global .global-Container {display: block; max-width: 1200px; padding: 50px;}
	#Global .textBox {text-align: center; padding: 0px 0 0px 0;}
	#Global .textBox h1 {font-size: 5rem;}
	#Global .textBox p {font-size: 1.5rem;}
	#Global .textBox p br {display: none;}
	#Global .textBox .diagonal {margin: 0 auto;}
}	
@media screen and (max-width: 1024px) {
	#Global .global-Container {padding: 0px;}
	#Global .globalMap {max-width: 100%; min-height: 100%;}
	#Global .globalMap .mobileMap { display: block;}
	#Global .globalMap .mobileMap img { width: 100%;}
	#Global .globalMap .map-container { display: none;}
}

@media screen and (max-width: 768px) {
	#Global .global-Container {padding: 20px;}
	#Global .globalMap {max-width: 100%; min-height: 100%;}
	#Global .textBox h1 {font-size: 4rem;}
}
@media screen and (max-height: 853px) { 
	#Global .global-Container {
        padding: 10px 50px;
    }
	#Global .textBox h1 {
        font-size: 3rem;
    }
    #Global .textBox p {
        font-size: 1rem;
        margin: 10px 0 0px 0;
    }
    #Global .globalMap .mobileMap { display: block; text-align:center;}
	#Global .globalMap .mobileMap img { width: 80%; margin: 0 auto;}
	#Global .globalMap .map-container { display: none;}
	#Global .textBox {
        text-align: center;
        padding: 15px 0 0px 0;
    }
}

/*Value*/
#Value { background: #F6F8FF; width: 100%; position: relative; overflow: hidden;}
#Value .value-Container {height: 100vh; display: flex; flex-direction: column; justify-content: center;}
#Value .valueWrap {max-width: 1280px; width: 100%; margin: 50px auto;}
#Value .textBox { padding: 80px 0 100px 0; text-align: center;}
#Value .textBox h3{ font-size: 50px; color: var(--CBlack); font-weight: 600; letter-spacing: -0.01em;}
#Value .textBox h5{ margin:0px 0 30px 0; font-size: 30px; color: var(--CMain); font-family: "Montserrat"; font-weight: 600; }
#Value .textBox button.white{ font-size: 16px; color: var(--CBlack); font-weight: 500; background: #fff; padding:15px 30px; border: 0px; border-radius: 4px;}
#Value .flipWrap { display: flex; justify-content: space-between;}
#Value .flipWrap .flipBox { position: relative;}
#Value .panel {height: 120%;}

#Value .panel .front,
#Value .panel .back {
	text-align: center;
	height: 120%;
}
	
#Value .panel .front {
	z-index: 900;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}

#Value .panel .back {
	
	position: absolute;
	top: 0;
	z-index: 1000;
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}
#Value .panel.flip .front {
	height: 403px;
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
#Value .panel.flip .back {
	height: 403px;
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}
#Value .box1{
	width: 326px;
	height: 403px;
	margin: 0 auto;
	padding: 20px;
}
#Value .box1.bg01{
	background: url(/assets/images/main/value_img01.png) no-repeat center;
	width: 326px;
	height: 403px;
}
#Value .box1.bg02{
	background: url(/assets/images/main/value_img02.png) no-repeat center;
	width: 326px;
	height: 403px;
}
#Value .box1.bg03{
	background: url(/assets/images/main/value_img03.png) no-repeat center;
	width: 326px;
	height: 403px;
}
#Value .box1 p{ margin-top: 130px; color: #ffffff; font-size: 36px; font-weight: 700; line-height: 1.2; }
#Value .box2{
	background:url(/assets/images/main/value_bg.png) no-repeat center;
	width: 326px;
	height: 403px;
	margin: 0 auto;
	padding: 20px;
	color: #ffffff;
}
#Value .box2 p{ margin-top: 100px; color: #ffffff; font-size: 18px; font-weight: 400; }


@media screen and (max-width: 1400px) { 
	#Value .value-Container {height: 100%; /*display: block;*/ }
	#Value .valueWrap {max-width: 100%; width: 90%;}
	#Value .title-box { padding: 110px 30px;}
	#Value .title-box p{ margin:20px 0 40px 0; font-size: 1.25rem; }
}
@media screen and (max-width: 1100px) {
	#Value .valueWrap {max-width: 100%; }
	#Value .title-box h2{ font-size: 3.75rem;}
	#Value .title-box p{ margin:20px 0 40px 0; font-size: 1rem; }
	#Value .flipWrap {display: block;}
	#Value .flipWrap .flipBox {margin-bottom: 30px; }
	#Value .flipWrap .flipBox .hover.panel{ display: flex; align-items: center; transform: none;}
	#Value .flipWrap .flipBox .hover.panel .back{ top: 7%; left: 50%; transform: none; height: 100% !important; }
	#Value .box2{ width: 100%; height: 70%; border-radius: 50px; background: var(--CNavy500); display: flex; align-items: center;} 
	#Value .box2 p{ margin-top: 0px; font-size: 1.75rem; padding: 20px;}
	#Value .flipWrap .flipBox .hover.panel.flip { transform: none !important; }
	#Value .flipWrap .flipBox .hover.panel .front { transform: none !important; }
	#Value .flipWrap .flipBox .hover.panel .back { transform: none !important; transition: none !important; }
}
@media screen and (max-width: 840px) {
	#Value .textBox h3{ font-size: 2.5rem;}
	#Value .textBox h5{ font-size: 2rem;} 
	#Value .flipWrap .flipBox .hover.panel .back {top: 12%;}
	#Value .box2 p{ margin-top: 0px; font-size: 1.5rem; padding: 20px;}
	#Value .box1.bg01 {
		background-size: 80%;
	}
	#Value .box1.bg02 {
		background-size: 80%;
	}
	#Value .box1.bg03 {
		background-size: 80%;
	}
}
@media screen and (max-width: 768px) {
	#Value .textBox h3{ font-size: 2.5rem;}
	#Value .textBox h5{ font-size: 2rem;} 
	#Value .flipWrap {padding-bottom: 50px;}
	#Value .flipWrap .flipBox .hover.panel{ display: block;}
	#Value .flipWrap .flipBox .hover.panel .back{ position: relative; top: 7%; left: 0%; }
	#Value .box2{ width: 80%; height: 70%; border-radius: 30px; } 
}
@media screen and (max-height: 853px) { 
	#Value .textBox {
    padding: 40px 0 20px 0;}
	#Value .textBox h3 {font-size: 2rem;}
	#Value .textBox h3 br{display:none;}
	#Value .textBox h5 {
    margin: 0px 0 10px 0;
    font-size: 1.5rem;}
}
@media screen and (max-width: 480px) {
	#Value .textBox {padding: 80px 0 50px 0;}
	#Value .textBox h3{ font-size: 1.75rem;}
	#Value .textBox h3 br{ display: none;}
	#Value .textBox h5{ font-size: 1.5rem;} 
	#Value .flipWrap .flipBox {
        margin-bottom: 50px;
    }
	#Value .box2{ width: 100%; height: 70%; border-radius: 30px; } 
	#Value .box1.bg01 {
		background-size: 100%;
	}
	#Value .box1.bg02 {
		background-size: 100%;
	}
	#Value .box1.bg03 {
		background-size: 100%;
	}
}


/* Contact */
#Contact {
	position: relative;
	background: url(/assets/images/main/contact_bg.png) no-repeat;
	background-size: cover;
}
#Contact .contact-Container {
    height: 100vh;
	display: flex; flex-direction: column; justify-content: center; }
#Contact .contactWrap { width: 100%; max-width: 1440px; margin: 80px auto;}
#Contact .flex-box {
	display: flex;
	justify-content: center;
}
#Contact .titBox {width: 45%; margin-top: 15%;}
#Contact .titBox h2 {font-family: "Montserrat"; font-size: 80px; line-height: 80px; color: #ffffff; font-weight: 700; padding: 0 0 5px 40px; background: url(/assets/images/main/contact_tit_icon.png) no-repeat;}
#Contact .titBox p {font-size: 24px; color: #fff; margin-top: 64px;}
#Contact .form-box {
	width: 55%;
	height: 100%;
	padding: 5%;
}

#Contact .form-box .check {
	margin-top: 35px;
}

#Contact .form-box .check input {
	display: none;
}

#Contact .form-box .check label {
	display: inline-block;
	font-size: 1.125rem;
	font-weight: 400;
	color: #fff;
	padding: 10px 25px;
	position: relative;
	cursor: pointer;
}

#Contact .form-box .check label::before {
	content: "";
	width: 15px;
	height: 15px;
	border: 1px solid #828282;
	border-radius: 3px;
	position: absolute;
	top: 12px;
	left: 0;
}

#Contact .form-box .check input:checked+label::after {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--mainColor);
	border-radius: 3px;
	position: absolute;
	top: 17px;
	left: 5px;
}

#Contact .form-box .check .btn-xs {
	padding: 5px 12px;
	color: #ffffff;
	background: var(--CGrey500);
	border-radius: 50px;
	border: 0;
}

#Contact.active .img-box::before {
	transform: scaleX(0);
	opacity: 0;
}

#Contact .form-table ul {
	margin-top: 30px;
}

#Contact .form-table li {
	margin-top: 30px;
	border-bottom: 1px solid var(--CGrey300);
}
#Contact .form-table li.bd0 {
	border-bottom: 0px solid var(--CGrey300);
}
#Contact .form-table li.bd0 dt{ padding-bottom: 10px;}
#Contact .form-table li input {
	border: 0;
	margin-left: 20px;
	min-height: 50px;
	width: 100%;
	background: transparent;
	font-size: 1rem;
	color: #fff;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

#Contact .form-table li select {
	border: 2px solid var(--CGrey300);
	min-height: 50px;
	font-size: 1rem;
	color: #fff;
	border-radius: 4px;
	background: url("/assets/images/common/dropdown_arrow.png") no-repeat center right 20px;
}
#Contact .form-table li select option {color: #111;}
#Contact .form-table li textarea {
	border: 2px solid var(--CGrey300);
	font-size: 1rem;
	background: transparent;
}

#Contact .form-table dt {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	margin-bottom: 0px;
}

#Contact .form-table dl.inline-label {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--CDarkGrey300);
}

#Contact .form-table dl.inline-label dt {
	width: 12%;
}

#Contact .form-table dl.inline-label dd {
	width: 80%;
}

#Contact .form-table .hyphen input {
	width: 140px;
}

#Contact .form-table textarea {
	height:100%;
	min-height: 150px;
	border-radius: 4px;
	color: #fff;
}

#Contact .max320 {
	max-width: 320px;
}

#Contact .form-table button,
#Contact .form-table .file label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 65px;
	border: none;
	background: #333;
	font-size: 1.125rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
}

#Contact .form-table .file {
	margin: 0 10px;
}

#Contact .form-table .file input {
	display: none;
}

#Contact .form-table .file label {
	background: var(--mainColor);
}
#Contact .form-table input:-webkit-autofill,
#Contact .form-table input:-webkit-autofill:hover,
#Contact .form-table input:-webkit-autofill:focus,
#Contact .form-table input:-webkit-autofill:active {
	-webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}
#Contact .form-table input:autofill,
#Contact .form-table input:autofill:hover,
#Contact .form-table input:autofill:focus,
#Contact .form-table input:autofill:active {
	-webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}


#Contact .contact-btn {
	margin: 20px auto;
	float: right;
}
#Contact .contact-btn .button {
	height: 45px;
	border-radius: 50px;
}


@media screen and (max-width: 1820px) {
	#Contact .w1600 {
		padding-right: 0;
	}

	#Contact .half {
		width: calc(50% - 200px);
	}
}

@media screen and (max-width: 1600px) {
	#Contact .titBox {
		width: 45%;
		margin-top: 15%;
		margin-left: 5%;
	}

	#Contact .form-table dt {
		font-size: 1.125rem;
		margin-bottom: 0px;
	}

	#Contact .link-list li {
		padding: 15px;
	}

	#Contact .link-list li p {
		font-size: 1.8rem;
		left: 15px;
	}

	#Contact .link-list li a {
		font-size: 1.5rem;
		padding: 15px;
	}

	#Contact .link-list li a::before {
		right: 15px;
	}

	#Contact .link-list li.on p {
		font-size: 2rem;
	}
}

@media screen and (max-width: 1200px) {
	#Contact {
		padding: 150px 0 200px 0;
	}
	#Contact .titBox h2 {
		font-size: 4rem;
		line-height: 1;
		padding: 0 0 5px 40px;
	}
	#Contact .titBox p {
		font-size: 1.25rem;
		margin-top: 30px;
	}
	#Contact .form-box {
		position: relative;
		width: 100%;
	}

	#Contact .form-table button,
	#Contact .form-table .file label {
		width: 150px;
		height: 60px;
	}
}



@media screen and (max-height: 853px){
	#Contact .titBox {
        width: 25%;
        margin-top: 20%;
        margin-left: 8%;
    }
    #Contact .titBox h2 {font-size: 3rem;line-height: 1.2;padding: 0 0 5px 30px;background-size: 5%; }
    #Contact .titBox p {font-size: 1.2rem;margin-top: 24px;}
    #Contact .form-box {
        position: relative;
        width: 60%;
    }
    #Contact .form-table ul {
    margin-top: 0px;
	}
	#Contact .form-table li {
		margin-top: 5px;
	}
	#Contact .form-table dt {
        font-size: 1rem;
        margin-bottom: 0px;
    }
    #Contact .form-table textarea {
    min-height: 50px;
	}
	#Contact .form-table li select {min-height: 40px;font-size: 1rem;
    }
    #Contact .form-box .check label {font-size: 1rem;}
    #Contact .form-box .check .btn-xs {padding: 2px 12px; font-size:1rem;}
    #Contact .form-table li input {
    border: 0;
    margin-left: 20px;
    min-height: 40px;}
}
@media screen and (max-width: 1000px) {
	#Contact .w1600 {
		padding-right: 20px;
	}
	
	#Contact .flex-box {
		flex-direction: column;
	}
	#Contact .titBox {
        width: 100%;
    }
    #Contact .form-box {
        position: relative;
        width: 100%;
    }
    #Contact .titBox h2 {
        font-size: 4rem;
        line-height: 1;
        padding: 0 0 5px 40px;
        background-size: 3%;
    }
	#Contact .titBox p br{ display: none;}
	#Contact .link-list {
		margin-top: 30px;
	}

	#Contact .img-box::before {
		width: calc(100% + 40px);
		left: -20px;
	}

	#Contact .img-box {
		width: 100%;
		position: relative;
		padding-bottom: 74%;
		margin-top: 20px;
	}

	#Contact .img-box figure {
		width: calc(100% + 40px);
		left: -20px;
	}

	#Contact .form-table {
		overflow: hidden;
	}

	#Contact .form-table th {
		width: 100%;
		padding: 10px 20px;
		text-align: left;
	}

	#Contact .form-table td {
		width: 100%;
	}
}
@media screen and (max-width: 850px) {
	#Contact .img-box {
		background: url(/assets/images/main/contact-bg.jpg) no-repeat center;
	}

	#Contact .link-list li {
		padding: 13px 15px;
	}

	#Contact .form-table button,
	#Contact .form-table .file label {
		width: 120px;
		height: 50px;
		font-size: 1.125rem;
	}
}
@media screen and (max-width: 650px) {
	#Contact {
		padding: 100px 0;
	}
	#Contact .contact-Container {
		height: 100%;
		display: block;}
	#Contact .titBox {margin-top: 0%; margin-left: 5%;}
	#Contact .titBox h2 {
        font-size: 3rem;
        line-height: 1;
        padding: 0 0 5px 30px;
        background-size: 3%;
    }
	#Contact .form-table .hyphen input {
		width: calc((100% - 40px) / 3);
	}

	#Contact .form-table .wrap {flex-wrap: wrap;}
	#Contact .max320 {max-width: 100%;}
	#Contact .form-table li {margin-top: 15px;}
	#Contact .form-table button,
	#Contact .form-table .file label {width: 100px;height: 45px;margin-top: 10px;}
	#Contact .form-table .file {margin-left: 0;}
	#Contact .form-table textarea {min-height: 150px; padding: 10px;}
	#Contact .form-table li select {min-height: 50px;font-size: 1rem;}
    #Contact .form-box .check label {font-size: 1rem;}
    #Contact .form-box .check .btn-xs {padding: 2px 12px; font-size:1rem;}
    #Contact .form-table li input {border: 0;margin-left: 20px;min-height: 50px;}
}
@media screen and (max-width: 480px) {
	#Contact .titBox {
        width: 100%;
        margin-top: 10%;
        margin-left: 8%;
    }
	#Contact .titBox h2 {
        font-size: 3rem;
        line-height: 1;
        padding: 0 0 3px 20px;
        background-size: 4%;
    }
    #Contact .titBox p {
        font-size: 1rem;
        margin: 30px 10px 0 0px;
    }
    #Contact .titBox p br{ display:block;}
}

@media screen and (max-height: 440px) {
	#Contact .form-table {
        overflow: visible;
    }
	#Contact .flex-box {
        flex-direction: row;
    }
	#Contact .titBox {
        width: 30%;
    }
	#Contact .titBox h2 {
        font-size: 2rem;
        line-height: 1;
        padding: 0 0 5px 20px;
        background-size: 5%;
    }
	#Contact .form-box {
        position: relative;
        width: 70%;
    }
	#Contact .form-table li {
		margin-top: 10px;
	}
	
}

/* news */
#news {
	position: relative;
	overflow: hidden;
	background: url("/assets/images/main/news-bg.jpg") no-repeat center;
}

#news .flex-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#news .title-box {
	width: 550px;
	margin-top: -100px;
	position: relative;
}

#news .title-box::before {
	content: "";
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: calc(50% + 50px);
	right: 0;
	z-index: -5;
	transform: translateY(-50%);
}

#news .news-box {
	width: calc(100% - 640px);
}

#news .news-box ul li {
	padding: 30px 50px 34px;
	border-bottom: 1px solid #DADADA;
	position: relative;
}

#news .news-box ul li:first-of-type {
	border-top: 1px solid var(--mainColor);
}

#news .news-box ul li h6,
#news .news-box ul li p {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#news .news-box ul li h6 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #222;
	line-height: 1.4;
	transition: color 0.5s;
}

#news .news-box ul li p {
	font-size: 1.125rem;
	font-weight: 300;
	color: #333;
	line-height: 1.4;
	margin: 3px 0 15px;
}

#news .news-box ul li span {
	font-size: 1.125rem;
	font-weight: 300;
	color: #666;
}

#news .news-box ul li span::before {
	content: "";
	display: inline-block;
	margin-right: 3px;
	position: relative;
	top: 2px;
}

#news .news-box ul li a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}

#news .news-box ul li:hover h6 {
	color: var(--mainColor);
}

#news.active::before {
	transform: translate(0, 0) rotate(0);
	opacity: 1;
}

@media screen and (max-height: 800px) {
	#news {
		padding: 100px 0;
	}

	#news .title-box::before {
		height: calc(100vh + 200px);
	}
}

@media screen and (max-width: 1600px) {
	#news .news-box ul li {
		padding: 30px 30px 34px;
	}

	#news .news-box ul li h6 {
		font-size: 2rem;
	}
}

@media screen and (max-width: 1500px) {
	#news .title-box {
		width: 400px;
	}

	#news .news-box {
		width: calc(100% - 490px);
	}
}

@media screen and (max-width: 1300px) {
	#news .news-box {
		width: calc(100% - 440px);
	}
}

@media screen and (max-width: 1200px) {
	#news {
		padding: 100px 0;
	}

	#news .title-box {
		width: 350px;
	}

	#news .news-box {
		width: calc(100% - 370px);
	}

	#news .news-box ul li {
		padding: 20px 20px 24px;
	}

	#news .news-box ul li h6 {
		font-size: 1.5rem;
	}

	#news .news-box ul li p {
		font-size: 1rem;
	}
}

@media screen and (max-width: 1000px) {
	#news {
		background-size: cover;
	}

	#news br {
		display: none;
	}

	#news .flex-box {
		flex-direction: column;
	}

	#news .title-box {
		width: 100%;
		margin-top: 0;
		padding-bottom: 20px;
	}

	#news .title-box::before {
		display: none;
	}

	#news .title-box .link-box {
		text-align: right;
		margin-top: 50px;
	}

	#news .news-box {
		width: 100%;
	}
}


/* data */
#data {
	position: relative;
	background: rgba(0, 101, 87, 0.11);
}

#data .title-box {
	text-align: center;
}

#data ul {
	display: flex;
	justify-content: space-between;
	margin-top: 70px;
}

#data ul li {
	width: calc((100% - 81px) / 3);
}

#data ul li .box {
	position: relative;
	top: 0;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
	padding-bottom: 124%;
	transition: all 0.5s;
}

#data ul li .box::before {
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 0.5s;
}

#data ul li .box>img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

#data ul li a {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}

#data ul li .position {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: end;
	padding: 45px 35px;
}

#data ul li .relative {
	width: 100%;
	position: relative;
}

#data ul li .absolute {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transition: all 0.5s;
	will-change: top, transform;
}

#data ul li h6 {
	font-size: 2.2rem;
	font-weight: 600;
}

#data ul li .relative>h6 {
	opacity: 0;
}

#data ul li p {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 18px;
	opacity: 0;
	transition: all 0.5s;
	letter-spacing: 0;
}

#data ul li:hover .box {
	top: -20px;
}

#data ul li .box:hover::before {
	opacity: 1;
}

#data ul li:hover .absolute {
	top: 100%;
	transform: translateY(-100%);
}

#data ul li:hover p {
	opacity: 1;
}

@media screen and (max-height: 800px) {
	#data {
		padding: 100px 0;
	}
}

@media screen and (max-width: 1600px) {
	#data ul li .box {
		padding-bottom: 160%;
	}
}

@media screen and (max-width: 1350px) {
	#data br {
		display: none;
	}

	#data ul li .box {
		padding-bottom: 180%;
	}

	#data ul li .position {
		padding: 30px;
	}
}

@media screen and (max-width: 1200px) {
	#data {
		padding: 100px 0;
	}

	#data ul {
		margin-top: 50px;
	}

	#data ul li {
		width: calc((100% - 60px) / 4);
	}

	#data ul li h6 {
		font-size: 2rem;
	}

	#data ul li p {
		font-size: 1.7rem;
	}
}

@media screen and (max-width: 1000px) {
	#data ul {
		flex-wrap: wrap;
		margin-bottom: -20px;
	}

	#data ul li {
		width: calc((100% - 20px) / 2);
		margin-bottom: 20px;
	}

	#data ul li .box {
		padding-bottom: 60%;
	}

	#data ul li .box>img {
		transition: transform 0.5s;
	}

	#data ul li:hover .box>img {
		transform: translate(-50%, -50%) scale(1.1);
	}

	#data ul li:hover .box {
		top: 0;
	}
}

@media screen and (max-width: 800px) {
	#data ul li {
		width: 100%;
	}

	#data ul li .box {
		height: 250px;
		padding-bottom: 0;
	}
}

@media screen and (max-width: 600px) {
	#data ul li .box {
		height: 200px;
	}
}

/* 기본 반응형 설정 */
@media screen and (max-width: 1920px) {
    :root {
        --baseFontSize: 16px;
    }
}

@media screen and (max-width: 1600px) {
    :root {
        --baseFontSize: 15px;
    }
}

@media screen and (max-width: 1200px) {
    :root {
        --baseFontSize: 14px;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --baseFontSize: 13px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --baseFontSize: 12px;
    }
}

/* 모바일 최적화 */
@media screen and (max-width: 768px) {
    #fp-nav {
        display: none;
    }
    
    .title-box h3 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    .title-box p {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    
    #MainSlide .content-box {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    #MainSlide .content-box .drimg {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    #MainSlide .content-box .txtbox {
        width: 100%;
        margin-top: 30px;
    }
}

/* 태블릿 최적화 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #fp-nav {
        left: 20px;
    }
    
    .title-box h3 {
        font-size: 3rem;
    }
    
    #MainSlide .content-box {
        padding: 50px 40px;
    }
    
    #MainSlide .content-box .drimg {
        width: 45%;
    }
    
    #MainSlide .content-box .txtbox {
        width: 50%;
    }
}

/* 데스크탑 최적화 */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    #fp-nav {
        left: 30px;
    }
    
    .title-box h3 {
        font-size: 3.5rem;
    }
    
    #MainSlide .content-box {
        padding: 70px 60px;
    }
}

/* 대형 스크린 최적화 */
@media screen and (min-width: 1441px) {
    #fp-nav {
        left: 40px;
    }
    
    .title-box h3 {
        font-size: 4rem;
    }
    
    #MainSlide .content-box {
        padding: 90px 80px;
    }
}

/* 터치 디바이스 최적화 */
@media (hover: none) {
    #fp-nav ul li:hover a span,
    .fp-slidesNav ul li:hover a span {
        display: none;
    }
    
    .title-box .link-box a {
        padding: 15px 30px;
    }
}

/* 고해상도 디스플레이 최적화 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #MainSlide .visual .bg,
    #home .visual .bg,
    #CF .visual .bg {
        background-size: cover;
        image-rendering: -webkit-optimize-contrast;
    }
}

/*LayerPopup*/
.layerpopup {position:absolute; left:10px; top:70px; width:461px;}
.layerpopup img {width:100%;}
.layerpopup .btn2 img {width:17px; height:13px;}
@media screen and (max-width: 991px) { 
.layerpopup {width:94%;}

}