@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

@media all and (min-width:1281px){
	.main-wrap #header.black {top: 0;}
}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage #mainVisual{height:100vh}
@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#fff }
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative; border-radius:  0 0 10rem 0; overflow: hidden;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}

/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%;}
.background-video:before {position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: 0;  background: rgba(0,0,0,0.3); z-index: 1;}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80);}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
}
.main-visual-txt-box{
	position: relative;
	display:flex;
	align-items:center;
	height:100%;
}

.main-visual-txt-inner {padding-left: 16rem; position: relative; }

.main-visual-txt-box .main-visual-txt1 .txt01,
.main-visual-txt-box .main-visual-txt1 .txt02,
.main-visual-txt-box .main-visual-txt2 {
	opacity:0; 
}

.main-visual-txt-box .main-visual-txt1{position: relative;font-size: 8.6rem; font-weight: 600; font-style: italic; letter-spacing: -0.025em; line-height: 1.1em; color: #fff; text-align: left; overflow: visible;}
.main-visual-txt-box .main-visual-txt1.cm-word-split-JS.splitting .word {overflow: visible;}
.main-visual-txt-box .main-visual-txt1.cm-word-split-JS.splitting .char {opacity: 1;}
.main-visual-txt-box .main-visual-txt1 .txt01,
.main-visual-txt-box .main-visual-txt1 .txt02 {position: relative; display: inline-block;}
.main-visual-txt-box .main-visual-txt1 .txt01 {left: -5.2rem;}
.main-visual-txt-box .main-visual-txt2{font-size:1.9rem; font-weight: 400; line-height: 1.47em; letter-spacing:-0.05em; color:#fff; margin-top: 2.5rem;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1 .txt01,
.active-item .main-visual-txt1 .txt02 {
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt2 {
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.active-item .main-visual-txt1 .txt01 {animation-delay:0.1s;}
.active-item .main-visual-txt1 .txt02 {animation-delay:0.3s;}
.active-item .main-visual-txt2  {animation-delay:0.5s;}

/* .active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:0.3s;}
.active-item .main-visual-txt3{animation-delay:0.5s;}
.active-item .main-visual-more-btn{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;} */

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-70px); 
		transform: translateX(-70px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-dots{opacity: 0; position:absolute; left: 0; top: 50%; margin-top: 18rem; width:100%; text-align:left; z-index:11; }
.main-visual-dots .slick-dots{display: flex; align-items: center; width: 100%; max-width: var(--area-box-width); margin: 0 auto; padding-left: 16rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.main-visual-dots .slick-dots li{margin-left:1rem; width:8px; transition:var(--transition-custom);}
.main-visual-dots .slick-dots li:first-child{margin-left:0}
.main-visual-dots .slick-dots li button{position: relative; cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:100%; height:8px; background-color:rgba(255,255,255,0.3); font-size:0; border-radius:8px; }

.main-visual-dots .slick-dots li button:before{position: absolute; content:''; top:0; left:-1px; width:0; height:100%; background:#ffffff; border-radius:8px; transition:width 0s;}
.main-visual-dots .slick-dots li.slick-active {width: 10rem;}

.main-visual-dots.active-dots .slick-dots li.slick-active button:before{width:calc(100% + 2px); transition:width 8s;}
.main-visual-dots.active-dots.first-progress .slick-dots li.slick-active button:before{transition:width 6.5s;}

.active .main-visual-dots {opacity: 1; animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay:0.7s;}

/* 메인 비주얼 :: 롤링텍스트 */
.main-rolling-txt {position: absolute; top: 50%; left: 50%; margin-left: -33.85rem; margin-top: -33.85rem; width: 67.7rem; height: 67.7rem; z-index: 1;}
.main-rolling-txt:before {position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-image: url(/images/main/main_rolling_txt.webp); animation: rotateItem 20s linear infinite; transition: all 1.5s 0.5s cubic-bezier(0.4, 0, 0.2, 1);}

@keyframes rotateItem {
	0% {
		transform:  rotate(0deg);
	}
	100% {
		transform:  rotate(360deg);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{display: flex; flex-direction: column; align-items: center; position:absolute; bottom:11rem; right: 10rem; z-index:9;}
.main-scroll-icon .scroll-txt {font-size: 1.2rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; writing-mode: tb;}
.main-scroll-icon .scroll-dot {margin-top: 10px;}
.main-scroll-icon .scroll-dot em {display: block; width: 6px; height: 6px; border-radius: 6px; margin: 5px auto; background: #fff; animation: scroll-icon 1.5s linear infinite; opacity:0.1; transition:var(--transition-custom);}
.main-scroll-icon .scroll-dot em.dot1 {animation-delay:0s;}
.main-scroll-icon .scroll-dot em.dot2 {animation-delay:0.2s;}
.main-scroll-icon .scroll-dot em.dot3{animation-delay:0.3s;}
@keyframes scroll-icon {
	10% {opacity: 0.1;}
	20% {opacity: 0.6;}
	30% {opacity: 1;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{position: relative;}
.main-tit-box .main-tit{display: block; font-size: 2.6rem; font-style: italic; font-weight: 700; line-height: 1.2em; color: var(--main-color);}
.main-tit-box .main-txt01 {font-size: 4.6rem; font-weight: 700; letter-spacing: -0.05em; color: #111111; line-height: 1.3em; padding-top: 2.5rem;}
.main-tit-box .main-txt02 {font-size: 2rem; font-weight: 400; letter-spacing: -0.05em; color: #555555; line-height: 1.6em; padding-top: 3.5rem;}
.main-tit-box .main-tit-rolling-txt {position: absolute; width: 17.1rem; height: 17.1rem; top: -8.55rem; left: -5.15rem;}
.main-tit-box .main-tit-rolling-txt:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; animation: rotateItem 10s linear infinite; z-index: -1;}
 
/* 공통 :: 버튼 */
.main-view-btn {display: flex; align-items: center; justify-content: center; width: 7rem; height: 7rem; border-radius: 50%; background: #152a52; transition: all 0.4s;}
.main-view-btn.white {background: #fff;}
.main-view-btn i {color: #fff; font-size: 3.2rem; transition: all 0.4s;}
.main-view-btn.white i {color: #555555;}
.main-view-btn:hover {background: var(--main-color);}
.main-view-btn:hover i {color: #fff;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Product) -------- */
/* .main-product-con {display: flex; align-items: center; position: relative;}
.main-product-con .main-product-left {position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); } 
.main-product-left .main-tit-box {width: 60rem;  padding-left: 3.4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.main-product-btn {padding: 3rem 0; margin-left: -1.5rem;}
.main-product-btn button {font-size: 3.7rem; color: #888888; cursor: pointer; opacity: 0.5; margin: 0 0.5rem;}
.main-product-btn .btn-pause {font-size: 3rem; position: relative; top: -0.3rem; margin: 0;}
.main-product-btn .btn-pause .xi-play {display: none;} 
.main-product-btn .btn-pause.on .xi-play {display: inline-block;} 
.main-product-btn .btn-pause.on .xi-pause {display: none;}
.main-product-con .main-product-right {position: relative; margin: 0 0 0 auto ; width: calc(100% - (60rem + ((100% - 1720px) / 2))); overflow: hidden;}
.main-product-list-wrap { width: 100%; padding-left: 86rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.main-product-list .slick-list { margin: 0 -2rem; overflow: visible;}
.main-product-list .slick-slide {margin: 0 2rem;}
.main-product-list .list-item {position: relative; }
.main-product-list .list-item .list-item-box {position: relative; padding: 2rem 0; height: 34.5rem;}
.main-product-list .list-item .list-item-box a {position: relative; display: block; width: 100%; height: 100%; padding: 3.5rem 2.5rem; border-radius: 3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; margin-left: -50rem; transition: var(--transition-custom);}
.main-product-list .list-item .list-item-box:first-child a {margin-left: -71rem;}
.main-product-list .list-item.prev-slide .list-item-box a {margin-left: -100rem;}
.main-product-list .list-item .list-item-box a .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; border-radius: 3rem; transition: var(--transition-custom)}
.main-product-list .list-item .list-item-box a .inner {position: relative; width: 100%; height: 100%;  display: flex; flex-direction: column; align-items: center; justify-content: space-between;  z-index: 2; text-align: center;}
.main-product-list .list-item .list-item-box a .main-product-img {display: flex; align-items: center; justify-content: center; width: 100%; height: 22.5rem;}
.main-product-list .list-item .list-item-box a .main-product-tit {display: block; font-size: 2.6rem; font-weight: 500; color: #333; line-height: 1.2em; }

@media all and (min-width:801px){
	.main-product-list .list-item.slick-current .list-item-box.active a .bg {transform: scale(1.05,1.05); background: #1ba692; box-shadow: 0 0 4rem rgba(21,42,82,0.1);}
	.main-product-list .list-item.slick-current .list-item-box.active a .main-product-tit {color: #fff;}
}  */

#mainProduct {}
.main-product-con {width: 100%; height: 100vh; display: flex; position: relative;}
.main-product-left {position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); /* z-index: 10; */} 
.main-product-left .main-tit-box {width: 70rem; padding: 0 3.4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.main-product-left .main-tit-box .main-tit-rolling-txt:before {background: url(/images/main/main_prd_rolling_txt.webp)no-repeat center/cover;}
.main-product-btn {padding: 3rem 0; margin-left: -1.5rem;}
.main-product-btn button {font-size: 3.7rem; color: #888888; cursor: pointer; opacity: 0.5; margin: 0 0.5rem;}
.main-product-btn .btn-pause {font-size: 3rem; position: relative; top: -0.3rem; margin: 0;}
.main-product-btn .btn-pause .xi-play {display: none;} 
.main-product-btn .btn-pause.on .xi-play {display: inline-block;} 
.main-product-btn .btn-pause.on .xi-pause {display: none;}

.main-product-right {position: relative; margin: 0 0 0 auto ; width: calc(100% - (72rem + ((100% - 1720px) / 2))); overflow: hidden;}
.main-product-list-wrap {position: relative; width: 100%; height: 100%; margin-left: auto; margin-right: auto; padding: 8rem 8rem 8rem 62rem  !important; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.main-product-list-wrap .swiper-wrapper {     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);}
.main-product-list-item { width: 100%; height: 50% !important; padding: 2rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; transition: var(--transition-custom);}
.main-product-list-item a {position: relative; display: block; width: 100%; height: 100%; padding: 4rem 2rem; border-radius: 3rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box; transition: var(--transition-custom);}
.main-product-list .swiper-slide .main-product-list-item:first-child a {margin-left: -21rem;} 

.main-product-list-item a .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #f5f5f5; border-radius: 3rem; transition: var(--transition-custom)}
.main-product-list-item a .inner {position: relative; width: 100%; height: 100%;  display: flex; flex-direction: column; align-items: center; justify-content: space-between;  z-index: 2; text-align: center;}
.main-product-list-item a .main-product-img {display: flex; align-items: center; justify-content: center; width: 100%; height: 22.5rem;}
.main-product-list-item a .main-product-img img {max-width: 100%; max-height: 100%;}
.main-product-list-item a .main-product-tit {display: block; font-size: 2.6rem; font-weight: 600; color: #333; letter-spacing: -0.025em; line-height: 1.2em; transition: var(--transition-custom);}
.main-product-list-item a .more-btn {position: absolute; bottom: -6rem; left: 50%; margin-left: -4.75rem; opacity:0; text-align:center; border-radius:50%; -webkit-transition:all 0.3s; z-index:10; width: 9.5rem; height: 9.5rem; background: var(--main-color); transition:all 0.3s;}
.main-about-list li a .inner .more-btn:before {position: absolute; content: ''; top: -2.1rem; left: -2.1rem; width: 13.7rem; height: 13.7rem; background: url(/images/main/view_rolling_txt.webp)no-repeat center/100%; animation: rotateItem 10s linear infinite;}
.main-about-list li a .inner .more-btn i {font-size:3.2rem; line-height: 9.5rem; color: #fff; transform: rotate(45deg); transition:all 0.3s;}

@media all and (min-width:1921px){
.main-product-list-wrap {padding: 11rem 8rem 11rem 56%  !important;}
}

@media all and (min-width:801px){
	.main-product-list-item.off a {opacity: 0; margin-left: -21rem;}
	.main-product-list-item.active a {padding: 4rem 2rem 2.9rem; }
	.main-product-list-item.active a .bg {transform: scale(1.05,1.05); background: #1ba692; box-shadow: 0 0 4rem rgba(21,42,82,0.1);}
	.main-product-list-item.active a .main-product-tit {font-size: 2.8rem; color: #fff;}
	/* .main-product-list-item a:hover {padding: 4rem 2rem 2.8rem; }
	.main-product-list-item a:hover .bg {transform: scale(1.05,1.05); background: #1ba692; box-shadow: 0 0 4rem rgba(21,42,82,0.1);}
	.main-product-list-item a:hover .main-product-tit {font-size: 2.8rem; color: #fff;} */
}
.main-product-con .bottom-txt-wrap {position: absolute; bottom: 2rem; left:0; font-size: 15rem; font-weight: 700; font-style: italic; color: #f1f1f1; transition: left 0.6s linear, transform 1.5s ease;  transform: translateX(-100%);}
.main-product-con .bottom-txt-wrap .bottom-txt:last-child {margin-left: 9rem; line-height: 0.8em;}
.main-product-con.animated .bottom-txt-wrap {    transform: translate(0);}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Newsroom) -------- */
.main-news-con {position: relative; padding: 10rem 0 11rem; overflow: hidden;}
.main-news-con:before{position: absolute; top: 0;  left: 0; width: 94.79%; height: 100%; content: ''; background-color: #e7e9ed; border-radius: 0 10rem 10rem 0; z-index: -2;}
.main-news-con .inner {padding: 0 8rem 0 3.4rem; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.main-news-rolling-txt {position: absolute; top: 50%; right: -29%; margin-top: -64.15rem; width: 128.3rem; height: 128.3rem; z-index: -1;}
.main-news-rolling-txt:before {position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: 0; background: url(/images/main/main_news_rolling_txt.webp)no-repeat center/cover; animation: rotateItem 32s linear infinite; transition: all 1.5s 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.main-news-con-top {display: flex; align-items: end; justify-content: space-between; margin-bottom: 5.7rem;}
.main-news-control-box {display: flex; align-items: center;}
.main-news-btn {position: relative; margin-right: 2rem;}
.main-news-btn button {font-size: 4.2rem; color: #888888; cursor: pointer; opacity: 0.5; margin: 0 0.5rem;}
.main-news-list {position: relative;}
.main-news-list .slick-list {margin: 0 -1.4rem;}
.main-news-list .slick-slide {margin: 0 1.4rem;}
.main-news-list a {display: block; position: relative; border-radius: 0 3rem 3rem 3rem; overflow: hidden;}
.main-news-list a:before {position: absolute; content: ''; top: 5rem; left: 0; width: 2.5rem; height: 2.5rem; background: #e7e9ed; z-index: 1;}
.main-news-list a:after {position: absolute; content: ''; top: 5rem; left: 0; width: 2.5rem; height: 2.5rem; background: #fff; z-index: 2; border-radius: 3rem 0 0 0;}
.main-news-list a .gallery-info-box {position: relative; padding: 8rem 3.5rem 3.5rem; background: #fff;}
.main-news-list a .gallery-info-box:before {position: absolute; content: ''; top: 0; left: 10rem; width: 2.5rem; height: 2.5rem; background: #e7e9ed; z-index: 1;}
.main-news-list a .gallery-info-box:after {position: absolute; content: ''; top: 0; left: 10rem; width: 2.5rem; height: 2.5rem; background: #fff; z-index: 2; border-radius: 3rem 0 0 0;}
.main-news-list a .gallery-info-box .xi-new {position: absolute; top: 2rem; right: 2.5rem; color: var(--main-color); font-size: 3.2rem;}
.main-news-list a .gallery-info-box .news-category {position: absolute; top: 0; left: 0; width: 10rem; height: 5rem; background: #e7e9ed; border-radius: 0 0 3rem 0;}
.main-news-list a .gallery-info-box .news-category span {display: block; width: 8.5rem; height: 3.5rem; line-height: 3.5rem; border-radius: 1.7rem; text-align: center; background: #152a52; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.025em; color: #fff; text-transform: uppercase;}
.main-news-list a .gallery-info-box .gal-tit {font-size: 2rem; font-weight: 500; letter-spacing: -0.05em; color: #000000; line-height: 1.5em; overflow:hidden;
	display:block; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 3em;} 
.main-news-list a .gallery-info-box .gal-day {font-size: 1.4rem; font-weight: 400; letter-spacing: -0.05em; color: #999999; display: block; margin-top: 2rem;}
.main-news-list a .gallery-thumb-box { position: relative;display: block;padding-top: 0; overflow: visible; z-index: 5;}
.main-news-list a .gallery-thumb-box .gallery-thumb {transition: all 0.5s; position: relative;  display: block;width: 100%; padding-top: 65.62%;}
.main-news-list a .gallery-thumb-box .gallery-thumb img {position: absolute;top: 0;  left: 0; right: 0;bottom: 0;width: 100%;  height: 100%; transition: all 0.5s;}
.main-news-list a .gallery-more-btn {position:absolute; left:50%; top:50%; color:#222; opacity:0; text-align:center; border-radius:50%; -webkit-transform:translate(-50%, -50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); transform:translate(-50%, -50%); -webkit-transition:all 0.3s; transition:all 0.3s; z-index:10; width: 9.5rem; height: 9.5rem; background: var(--main-color);}
.main-news-list a .gallery-more-btn:before {position: absolute; content: ''; top: -2.1rem; left: -2.1rem; width: 13.7rem; height: 13.7rem; background: url(/images/main/view_rolling_txt.webp)no-repeat center/100%; animation: rotateItem 10s linear infinite;}
.main-news-list a .gallery-more-btn i {font-size:3.2rem; line-height: 9.5rem; color: #fff; transform: rotate(45deg); transition:all 0.3s;}

@media all and (min-width:801px){
	.main-news-list a:hover .gallery-thumb-box img {
		-webkit-transform: scale(1.1) rotate(0.002deg); 
		-moz-transform: scale(1.1) rotate(0.002deg);
		-ms-transform: scale(1.1) rotate(0.002deg);
		-o-transform: scale(1.1) rotate(0.002deg); 
		transform: scale(1.1) rotate(0.002deg);
	}
	.main-news-list a:hover .gallery-more-btn{opacity:1.0;}
	.main-news-list a:hover {background-color: #fff;}
	.main-news-list a:hover .gallery-thumb-box .gallery-thumb {filter: blur(10px);}
}

@media all and ( min-width: 801px ) and (max-height:860px) {
	.main-news-con-top {padding-top: 2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(About ROTP) -------- */
.main-about-con {padding-top: 5rem; }
.main-about-con .main-tit-box {padding: 0 3.4rem;}
.main-about-con .main-tit-box .main-tit-rolling-txt:before {background: url(/images/main/main_about_rolling_txt.webp)no-repeat center/cover;}

.main-about-list {display: flex; height: 55rem; margin-top: 5rem;}
.main-about-list li {width: 33.33%; height: 100%; overflow: hidden; transition:all 0.3s;}
.main-about-list li:first-child {border-radius: 0 0 0 10rem;}
.main-about-list li:last-child {border-radius: 0 10rem 0 0;}
.main-about-list li a {position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.main-about-list li a .bg {position: absolute; width: 100%; height: 100%; transform: scale(1.01,1.01) rotate(0deg); transition: all 0.8s;}
.main-about-list li:first-child a .bg {background: url(/images/main/main_about_img01.webp)no-repeat center/cover;}
.main-about-list li:nth-child(2) a .bg {background: url(/images/main/main_about_img02.webp)no-repeat center/cover;}
.main-about-list li:last-child a .bg {background: url(/images/main/main_about_img03.webp)no-repeat center/cover;}
.main-about-list li a .inner {position: relative;z-index: 1; text-align: center;}
.main-about-list li a .inner .main-about-tit {font-size: 3.6rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; line-height: 1.1em; margin-top: 0; transition: all 0.3s;}
.main-about-list li a .inner .main-about-txt {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; color: #ffffff; line-height: 1.55em; padding-top: 2rem; transition: all 0.3s;}
.main-about-list li a .inner .more-btn {position: absolute; bottom: -6rem; left: 50%; margin-left: -4.75rem; opacity:0; text-align:center; border-radius:50%; -webkit-transition:all 0.3s; z-index:10; width: 9.5rem; height: 9.5rem; background: var(--main-color); transition:all 0.3s;}
.main-about-list li a .inner .more-btn:before {position: absolute; content: ''; top: -2.1rem; left: -2.1rem; width: 13.7rem; height: 13.7rem; background: url(/images/main/view_rolling_txt.png)no-repeat center/100%; animation: rotateItem 10s linear infinite;}
.main-about-list li a .inner .more-btn i {font-size:3.2rem; line-height: 9.5rem; color: #fff; transform: rotate(45deg); transition:all 0.3s;}

@media all and ( min-width: 801px ){
	/* hover */
	.main-about-list li:hover {box-shadow: 2rem 2rem 3rem rgba(0,0,0,0.3);}
	.main-about-list li:hover a .bg {transform: scale(1.08,1.08) rotate(0.002deg);}
	.main-about-list li:hover a .inner .main-about-tit {font-size: 4.2rem; margin-top: -5rem;}
	.main-about-list li:hover a .inner .main-about-txt {opacity: 0;}
	.main-about-list li:hover a .inner .more-btn {opacity: 1;}
}

@media all and ( min-width: 801px ) and (max-height:860px) {
	.main-about-list {height: 48rem; margin-top: 3.5rem;}
}
@media all and ( min-width: 801px ) and (max-height:760px) {
	.main-about-list {height: 45rem; }
}

/* 마우스포인트 */
.mouse-pointer{position:fixed; top:0px; left:0px; z-index:9999999; pointer-events:none;}
.is-mobile .mouse-pointer{visibility: hidden; opacity: 0;}
/* circle */
.mouse-pointer .pointer-circle{position:absolute; top:50%; left:50%; width:0; height:0; transform:translate(-50%,-50%) scale(0); background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); opacity:0; transition:var(--transition-custom);  border-radius:50%; display: flex; align-items: cneter; justify-content: center; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.mouse-pointer .pointer-circle i {font-size:3.2rem; line-height: 9.5rem; color: #fff; transform: rotate(45deg); transition:all 0.3s;}
.mouse-pointer .pointer-circle:before {position: absolute; content: ''; top: -2.1rem; left: -2.1rem; width: 13.7rem; height: 13.7rem; background: url(/images/main/view_rolling_txt_w.png)no-repeat center/100%; animation: rotateItem 10s linear infinite;}
.mouse-pointer.hover .pointer-circle{width:9.5rem; height:9.5rem; transform:translate(-50%,-50%) scale(1); opacity:1;}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
#rightBar{
	position:fixed; 
	top:55%; right:2%; 
	z-index:99; 
	margin-top:-142px;
	opacity:0;
	visibility:hidden;
	transition:var(--transition-custom2);
}
#rightBar.fixed{visibility:visible; opacity:1.0; top:50%;}
#rightBar > ul {width:56px;}
#rightBar > ul > li{border-top:1px solid #7f7f7f;}
#rightBar > ul > li:first-child{border-top:0;}
#rightBar > ul > li > a{display:block; width:56px; height:56px; background-color:#000; text-align:center; line-height:56px; color:#fff; transition:var(--transition-custom);}
#rightBar > ul > li > a:hover{background-color:#7f7f7f}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:4rem;
    opacity: 1;
    transform: translate3d(0,0,0);
}
#fp-nav ul li{position:relative; width:12px; margin:24px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:10px; height:10px; box-sizing:border-box; background: transparent; border: 2px solid rgba(255,255,255,0.3); border-radius:50%; margin: 0 1px; }
#fp-nav ul li a span{display:block; position: absolute; top: -3px; left: -3px; width:12px; height:12px; background-color:#fff; border-radius:50%; opacity: 0;}
#fp-nav ul li .fp-tooltip{display: none;}
#fp-nav ul li a.active span{opacity:1.0;}

/* Black Style */
#fp-nav.black ul li a {border: 2px solid rgba(0,0,0,0.3);}
#fp-nav.black ul li a span{background-color:#000}