#fullpage{}
.section {overflow: hidden;}

header{}
.side_navigation{}

/* 커서 */
._cursor {position: fixed; z-index: 999;margin-left: 10px; margin-top: 10px;display: flex; align-items: flex-start; justify-content: flex-start;pointer-events: none; }
html.mo ._cursor{display: none;}
._cursor > div {color: var(--yellow); padding: 7px 16px;background-color: #ef5c267a;position: absolute;opacity: 0; transform: scale(0); transform-origin: left top;transition: opacity 0.5s,transform 0.5s; }
._cursor.scroll .scroll { opacity: 1; transform: scale(1); }
._cursor.view .view { opacity: 1; transform: scale(1); }
._cursor.drag .drag { opacity: 1; transform: scale(1); }
._cursor.click .click { opacity: 1; transform: scale(1); }
._cursor > div p { }


/* 네비게이션 */
.side_navigation {position: fixed; top: 50%; transform: translateY(-50%); right: 63px;display: flex; flex-direction: column; align-items: center; justify-content: center;gap: 26px; color: var(--gray); font-size: 20px; font-weight: 700; font-size: 18px; color: var(--gray); transition: color 0.5s,opacity 0.5s;}
.side_navigation .now {}
.side_navigation .line {width: 1em; height: 1px; background-color: var(--gray); transform: rotate(-45deg); opacity: 0.5; transition: background-color 0.5s;}
.side_navigation .all { opacity: 0.5; }

.side_navigation.hide{opacity: 0;}
.side_navigation.yellow{color: var(--yellow);}
.side_navigation.yellow .line{background-color: var(--yellow);}

/* 작은 버튼 공통 */
._btn{}
._btn a{
	display: inline-block;
	font-size: 18px; color: #fff; padding: 8px 18px;
	background-color: var(--brown);
}
._btn a:hover{background-color: #444;}

@media screen and (max-width:1600px) {
	.side_navigation{top: unset; transform: unset; bottom: 20px; right: 20px; flex-direction: row; gap: 0;}
	.side_navigation .line{transform: rotate(-70deg);}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	html{overflow: hidden !important;}
	.side_navigation{display: none;}
	.section{height: auto !important;}
	.fp-tableCell{height: auto !important; box-sizing: border-box;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}








/* 인트로 */
._intro {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; z-index: 99999;background-image: url(/asset/img/main/bg_green.jpg); background-size: cover; background-position: center center;display: flex; align-items: center; justify-content: center; }
._intro .center {position: absolute; width: calc(640/1920*100vw);display: flex; align-items: center; justify-content: center; }
._intro .side {position: absolute;width: 1px; height: 1px;display: flex; align-items: center; justify-content: center; }
._intro .side.n1 { left: 0; transform: rotate(90deg); }
._intro .side.n2 { right: 0; transform: rotate(-90deg); }
._intro .side .marquee { display: flex; align-items: center; justify-content: center; }
._intro .side .marquee .inner {font-size: calc(1/1920*100vw);display: flex; align-items: center; justify-content: center; gap: 100em; padding: 0 50em;animation: marquee forwards infinite 5s linear; }
._intro .side .marquee .inner p { font-size: max(16em,16px); color: var(--yellow); }
._intro .num {color: var(--yellow); font-size: calc(240/1920*100vw); font-weight: 200; }
._intro .num * { transition-duration: 3s !important; }
._intro .imgArea {position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: calc(1/1920*100vw);display: flex; align-items: center; justify-content: space-between; }
._intro .imgArea > div {height: 100%; box-sizing: border-box;width: calc((100% - calc(680/1920*100vw)) / 2); position: relative; }
._intro .imgArea .imgBx {position: absolute; width: 1px; height: 1px;display: flex; align-items: center; }
._intro .imgArea .left .imgBx { justify-content: flex-end; }
._intro .imgArea .right .imgBx { justify-content: flex-start; }
._intro .imgArea .imgBx img {max-width: unset; flex-shrink: 0; width: 230em;}

/* 이미지 위치 */
._intro .imgArea .left .imgBx:nth-child(1){right: 4%;top: 52%;}
._intro .imgArea .left .imgBx:nth-child(2){right: 65%;top: 65%;}
._intro .imgArea .left .imgBx:nth-child(3){right: 20%;top: 80%;}
._intro .imgArea .left .imgBx:nth-child(4){right: 50%;top: 100%;}
._intro .imgArea .left .imgBx:nth-child(5){right: 7%;top: 105%;}

._intro .imgArea .right .imgBx:nth-child(1){left: 4%;top: 50%;}
._intro .imgArea .right .imgBx:nth-child(2){left: 40%;top: 58%;}
._intro .imgArea .right .imgBx:nth-child(3){left: 18%;top: 77%;}
._intro .imgArea .right .imgBx:nth-child(4){left: 5%;top: 100%;}
._intro .imgArea .right .imgBx:nth-child(5){left: 60%;top: 90%;}

/* 모션 셋팅 */
._intro .imgArea .imgBx .img{ opacity: 0; }
._intro .num { opacity: 0; transform: translateY(60px); }
._intro .side.n1 .marquee { opacity: 0; transform: translateY(80px); }
._intro .side.n2 .marquee { opacity: 0; transform: translateY(80px); }

/* 가로가 길경우 */
@media (orientation: landscape) {}
@media (orientation: landscape) and (max-height:900px){}
@media (orientation: landscape) and (max-height:800px){}
@media (orientation: landscape) and (max-height:700px){}
@media (orientation: landscape) and (max-height:600px){
	._intro .side .marquee .inner p {font-size: 14px; }
	._intro .imgArea > div {width: calc((100% - calc(700/1920*100vw)) / 2);}
}
@media (orientation: landscape) and (max-height:500px){}
@media (orientation: landscape) and (max-height:400px){}
@media (orientation: landscape) and (max-height:300px){}
/* 세로가 길경우 */
@media (orientation: Portrait) {
	._intro .center{width: 100%; height: 100%;}
	._intro .side.n1{top: 5%; transform: unset;}
	._intro .side.n2{bottom: 5%; transform: unset;}
	._intro .side.n2 .marquee .inner{animation-direction: reverse;}

	/* 이미지 위치 */
	._intro .imgArea .left .imgBx:nth-child(1){right: -4%;top: 42%;}
	._intro .imgArea .left .imgBx:nth-child(2){right: 30%;top: 58%;}
	._intro .imgArea .left .imgBx:nth-child(3){right: 0%;top: 71%;}
	._intro .imgArea .left .imgBx:nth-child(4){right: 28%;top: 84%;}
	._intro .imgArea .left .imgBx:nth-child(5){right: 7%;top: 96%;}

	._intro .imgArea .right .imgBx:nth-child(1){left: -1%;top: 39%;}
	._intro .imgArea .right .imgBx:nth-child(2){left: 30%;top: 54%;}
	._intro .imgArea .right .imgBx:nth-child(3){left: 7%;top: 66%;}
	._intro .imgArea .right .imgBx:nth-child(4){left: 5%;top: 77%;}
	._intro .imgArea .right .imgBx:nth-child(5){left: 29%;top: 90%;}
}
@media (orientation: Portrait) and (max-width:1440px) {}
@media (orientation: Portrait) and (max-width:1280px) {}
@media (orientation: Portrait) and (max-width:1024px) {}
@media (orientation: Portrait) and (max-width:820px) {
	._intro .imgArea{font-size: min(calc(1/820*100vw),2px); }
	._intro .num {font-size: calc(180/820*100vw);}
	._intro .imgArea > div {width: calc((100% - calc(600/1920*100vw)) / 2);}
}
@media (orientation: Portrait) and (max-width:500px) {}
@media (orientation: Portrait) and (max-width:320px) {}



/* s1 */
.s1 { position: relative; }
.s1 > div {}
.s1 .yellow { width: 100%; height: 100%; clip-path:inset(0 50%); position: relative;}
.s1 .yellow .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: brightness(0.8);}
.s1 .yellow .bg div{width: 100%; height: 100%; background-size: cover; background-position: 80% center;}
.s1 .yellow .scroll-down {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 55;
}
.s1 .yellow .scroll-down .arr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.s1 .yellow .scroll-down .arr i:first-child {
    margin-top: 0;
}
.s1 .yellow .scroll-down .arr i {
    margin-top: -7px;
    font-size: 14px;
    color: #fff;
}
.s1 .yellow .scroll-down p {
    color: #bbbcc1;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    margin-top: 1em;
    font-size: 14px;
}

@media screen and (max-width: 820px) {
    .scroll-down {
        bottom: 30px;
    }
    .scroll-down p {
        display: none;
    }
}
.s1 .green { width: 100%; height: 100%; background-image: url(/asset/img/main/bg_green.jpg); background-size: cover; background-position: center center; position: absolute; left: 0; top: 0; }
.s1 .wrap {display: flex; align-items: center; justify-content: center; height: 100%;max-width: 860px; }
.s1 .wrap .txtBx { width: 100%; }
.s1 .wrap .txtBx > * { width: 100%; }
.s1 .txtBx .small {display: block;color: var(--orange); font-size: 25px; font-weight: 500; overflow: hidden;}
.s1 .txtBx h2 { font-size: 80px; font-weight: 700; line-height: 1.3; margin-top: max(calc(30/80*1em),30px);}
/* .s1 .yellow .txtBx h2 { color: var(--green); } */
.s1 .yellow .txtBx h2 { color: var(--yellow); }
.s1 .green .txtBx h2 { color: var(--yellow); }
.s1 .txtBx h2 div {overflow: hidden;}
.s1 .txtBx h2 div:nth-child(2) { text-align: right; margin-top: 0.2em; }
.s1 .txtBx h2 div p { }
/* 모션 셋팅 */
.s1 .txtBx p{ transform: translateY(110%);}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s1{height: calc(var(--vh) * 100) !important;}
    .s1 .txtBx .small {
        font-size: clamp(16px, 25/1024*100vw, 25px);
    }
	.s1 .txtBx h2{font-size: calc(80/1024*100vw); }
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s1 .wrap{align-items: flex-end; padding-bottom: calc(var(--vh) * 24); box-sizing: border-box;}
	.s1 .txtBx .small{font-size: clamp(14px, 16/500*100vw, 16px); text-align: center; color: var(--orange);}
	.s1 .txtBx h2{font-size: min(calc(50/500*100vw),40px); padding-top: calc(240/40*1em);}
	.s1 .txtBx h2 div{text-align: center !important;}
}
@media screen and (max-width:320px) {}



/* s2 */
.s2{
	background-image: url(/asset/img/main/bg_yellow_line.jpg);
	background-size: cover; background-position: center center;
	font-size: min(min(calc(1/1920*100vw),calc(0.9/920*var(--vh100))),1px);
}
.s2 .wrap{
	position: relative; display: flex; align-items: center; justify-content: center;
}
.s2 .wrap .flexBx{display: flex; align-items: center; justify-content: space-between; width: 100%;}
.s2 .leftArea{position: relative;}
.s2 .leftArea h2{
	font-size: 166em; color: var(--green); font-weight: 700;
	transform: translateX(-0.05em); position: relative;
	display: flex; align-items: center; justify-content: center;
}
.s2 .leftArea h2 div{overflow: hidden;}
.s2 .leftArea .imgArea{position: relative;}
.s2 .leftArea .imgArea .imgBx{overflow: hidden;}
.s2 .leftArea .imgArea .imgBx img{width: 100%; height: 100%; object-fit: cover;}
.s2 .leftArea .imgArea .imgBx.n1{width: 481em;}
.s2 .leftArea .imgArea .imgBx.n2{position: absolute; left: 76%; bottom: -4%; width: 244em;}
.s2 .leftArea .imgArea .imgBx.n2::before {content:''; display: block; padding-bottom: calc(352/244*100%);}
.s2 .leftArea .imgArea .imgBx.n2 img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.s2 .leftArea .circle{position: absolute; right: -73%; top: -11%;}
.s2 .leftArea .circle > div{}
.s2 .leftArea .circle > div > div{
	width: 600em; height: 600em; border-radius: 50%;
	background: radial-gradient(circle,rgba(239, 91, 38, 0.3) 30%, rgba(239, 91, 38, 0) 70%);
}
.s2 .rightArea{position: relative;}
.s2 .rightArea .imgBx{overflow: hidden;}
.s2 .rightArea .imgBx.n1{width: 317em; position: absolute; left: -106%; bottom: 5%; z-index: 2;}
.s2 .rightArea .imgBx.n1::before {content:''; display: block; padding-bottom: calc(247/317*100%);}
.s2 .rightArea .imgBx.n1 img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.s2 .rightArea .imgBx.n2{width: 200em;}
.s2 .txtArea{position: absolute; left: 40%;}
.s2 .txtArea .small{font-size: 16px;  color: var(--orange); font-weight: 500; margin-bottom: 16px;}
.s2 .txtArea p{font-size: 24px; line-height: 1.4; font-weight: 700; color: var(--gray);}
.s2 .txtArea ._btn{text-align: center; margin-top: 80px;}

/* ._intro{display: none !important;}
.s1{display: none !important;} */

@media screen and (max-height:900px){}
@media screen and (max-height:800px){}
@media screen and (max-height:700px){
	.s2{padding-top: 40px; box-sizing: border-box;}
}
@media screen and (max-height:600px){}
@media screen and (max-height:500px){}
@media screen and (max-height:400px){}
@media screen and (max-height:300px){}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	.s2 .txtArea{left: 34%;}
}
@media screen and (max-width:1024px) {
	.s2{font-size: calc(0.6/1024*100vw); padding: 100px 0;}
	.s2 .txtArea p{font-size: 20px; }
}
@media screen and (max-width:820px) {
	.s2{font-size: min(calc(0.8/820*100vw),0.7px); }
	.s2 .wrap{flex-direction: column; gap: 130em;}
	.s2 .wrap .flexBx{justify-content: center; gap: 40em; align-items: flex-end;}
	.s2 .leftArea .imgArea .imgBx.n2{left: -11%;}
	.s2 .rightArea .imgBx.n2{position: relative;}
	.s2 .rightArea .imgBx.n2::before {content:''; display: block; padding-bottom: calc(575/200*100%); }
	.s2 .rightArea .imgBx.n2 img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
	.s2 .rightArea .imgBx.n1{left: -90%; bottom: -4%;}

	.s2 .txtArea{position: unset; text-align: center;}
	.s2 .txtArea ._btn{margin-top: 60px;}
}
@media screen and (max-width:500px) {
	.s2{padding: 80px 0;}
	.s2 .txtArea{max-width: 360px;}
	.s2 .txtArea .small{font-size: 14px; }
	.s2 .txtArea p{font-size: 18px;}
	.s2 .txtArea p br{display: none;}
	.s2 .txtArea ._btn{margin-top: 40px;}
}
@media screen and (max-width:320px) {}




/* s3 */
.s3{
	background-image: url(/asset/img/main/bg_green_line.jpg);
	background-size: cover; background-position: center center;
	font-size: 1px;
}
.s3 .wrap{
	display: flex; align-items: center; justify-content: center; position: relative;
    margin-top: 10vh;
}
.s3 .txt, .s3 .txt_2{
	position: absolute; z-index: 2;
	top: 100%; transform: translateY(55%);
	/* top: 50%; transform: translateY(-50%); */
}
.s3 .txt_2 {text-align: right;}
.s3 .txt.mo{display: none;}
.s3 .txt_2.top {top: auto; bottom: 100%; transform: translateY(0%); padding-bottom: 8vh;}
.s3 .txt.top {bottom: 100%; top: auto; padding-bottom: 8.5vh; transform: translateY(0%); }
.s3 .txt.left{left: 0;}
.s3 .txt.right {right: 0;}
.s3 .txt_2.right {right: 0;}
.s3 .txt .small {font-size: max(18em,12px); font-weight: 500; color: #c6e4d2;}
.s3 .txt_2 .small {line-height: 1.5; font-size: max(16em,12px); font-weight: 400; color: #c6e4d2;}
.s3 .txt .small:nth-child(3){text-align: right;}
.s3 .txt .small.orange{color: var(--orange);}
.s3 .bottomTxt .small{text-align: center; line-height: 1.4;}
.s3 .txt h3, .s3 .txt_2 h3{font-size: max(80em,36px); font-weight: 600; color: #f1eed9; margin: 10px 0;}
.s3 .txt_2 h3 {font-size: max(60em,26px); margin-bottom: 20px;}
.s3 .txt.mo .desc {text-align: center; line-height: 1.5; font-size: max(16em,12px); font-weight: 400; color: #c6e4d2; margin-top: calc(15/14*1em);}
.s3 .swiperBx{display: flex; align-items: center; justify-content: center; position: relative;}
.s3 .swiperBx .swiper{width: 500em; overflow: visible;}
.s3 .swiperBx .swiper-wrapper{}
.s3 .swiperBx .swiper-slide.active-custom{z-index: 5;}
.s3 .swiperBx .swiper-slide.prev-1{z-index: 4;}
.s3 .swiperBx .swiper-slide.prev-2{z-index: 3;}
.s3 .swiperBx .swiper-slide.prev-3{z-index: 2;}
.s3 .swiperBx .swiper-slide.prev-4{z-index: 1;}
.s3 .swiperBx .swiper-slide.next-1{z-index: 4;}
.s3 .swiperBx .swiper-slide.next-2{z-index: 3;}
.s3 .swiperBx .swiper-slide.next-3{z-index: 2;}
.s3 .swiperBx .swiper-slide.prev-4{z-index: 1;}
.s3 .swiperBx .swiper-slide.active-custom .inner{transform: scale(0.9);}
.s3 .swiperBx .swiper-slide.prev-1 .inner{transform: translate(70%,0%) scale(0.7); opacity: 0.8;}
.s3 .swiperBx .swiper-slide.prev-2 .inner{transform: translate(145%,0%) scale(0.5); opacity: 0.6;}
.s3 .swiperBx .swiper-slide.prev-3 .inner{transform: translate(225%,0%) scale(0.3); opacity: 0.4;}
.s3 .swiperBx .swiper-slide.prev-4 .inner{transform: translate(310%,0%) scale(0.1); opacity: 0.2;}
.s3 .swiperBx .swiper-slide.next-1 .inner{transform: translate(-70%,0%) scale(0.7); opacity: 0.8;}
.s3 .swiperBx .swiper-slide.next-2 .inner{transform: translate(-145%,0%) scale(0.5); opacity: 0.6;}
.s3 .swiperBx .swiper-slide.next-3 .inner{transform: translate(-225%,0%) scale(0.3); opacity: 0.4;}
.s3 .swiperBx .swiper-slide.next-4 .inner{transform: translate(-310%,0%) scale(0.1); opacity: 0.2;}
.s3 .swiperBx .swiper-slide .inner{position: relative;}
.s3 .swiperBx .swiper-slide .imgBx{width: 100%; position: relative;}
.s3 .swiperBx .swiper-slide .imgBx::before {
	content:''; display: block; padding-bottom: calc(446/610*100%);
}
.s3 .swiperBx .swiper-slide .imgBx img{position: absolute; left: 0; top: 0; width: 100%; height: 100%;  object-fit: cover; filter: brightness(0.4); transition: filter 0.5s;}
.s3 .swiperBx .swiper-slide-active .imgBx img{filter: brightness(1);}
.s3 .swiperBx .swiper-slide .top{
	position: absolute; bottom: 100%; left: 0; width: 100%;
	display: flex; align-items: flex-end; justify-content: space-between;
	margin-bottom: 10px; color: var(--yellow); padding: 0 10px; box-sizing: border-box;
}
.s3 .swiperBx .swiper-slide .top *{transition: opacity 0.5s; opacity: 0.5;}
.s3 .swiperBx .swiper-slide-active .top *{opacity: 1;}
.s3 .swiperBx .swiper-slide small{font-size: max(14em,12px); font-weight: 500;}
.s3 .swiperBx .swiper-slide p{font-size: max(25em,14px); font-weight: 500;}

.s3 .swiperBx ._btn{
	position: absolute; top: 100%; margin-top: 100px;
}
.s3 ._btn.mo{display: none;}
@media screen and (max-height:900px) and (min-width:1025px){
	.s3{font-size: min(calc(1/1920*100vw),calc(1/900*var(--vh100))); }
}

@media screen and (max-width:1700px) {
    .s3 .txt_2.right {right: 5vw;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s3{padding: 100px 0; font-size: min(calc(1/1024*100vw),0.8px); }
	.s3 .wrap{flex-direction: column; gap: 0px;}
	.s3 .txt.pc{display: none;}
	.s3 .txt_2.pc{display: none;}
	.s3 .txt.mo{display: block; margin-bottom: 60px;}
	.s3 .txt{position: unset; transform: unset;}
	.s3 .swiperBx{flex-direction: column;}
	.s3 .swiperBx .swiper-slide .top{position: unset;}
	.s3 .swiperBx ._btn{position: unset;}
    .s3 .txt.bottomTxt {display: block; order: 1; margin-top: 60px;}
    .s3 .swiperBx ._btn {display: none;}
    .s3 ._btn.mo {display: block; order: 2; margin-top: 20px;}
}
@media screen and (max-width:820px) {
	.s3 .txt h3{font-size: max(50em,36px);}
}
@media screen and (max-width:500px) {
	.s3{padding: 80px 0; font-size: calc(0.7/500*100vw); }
	.s3 .txt h3{margin: 6px 0;}
}
@media screen and (max-width:320px) {}



/* s4 */
.s4{
	background-image: url(/asset/img/main/bg_yellow_line.jpg);
	background-size: cover; background-position: center center;
	font-size: min(1px,min(calc(1/1920*100vw),calc(1/920*var(--vh100))));
}
.s4 .wrap{
	height: 100%; display: flex; align-items: center; justify-content: space-between;
	padding-top: 80px; box-sizing: border-box;
}
.s4 .left{}
.s4 .left h2{font-size: max(80em,36px); font-weight: 600; padding-bottom: calc(20/80*1em);}
.s4 .left h3{color: #3a3a3a; opacity: 0.1; font-size: 90em; overflow: hidden; font-weight: 700; line-height: 1.3;}
.s4 .left h4{
	font-size: 25em; color: var(--orange); overflow: hidden; font-weight: 600; line-height: 1.3;
	margin-bottom: max(calc(60/50*1em),20px);
}
.s4 .left > p{
	color: var(--gray); line-height: calc(40/24); font-weight: 500;
	font-size: max(24em,12px); margin-bottom: max(2em,14px);
}
.s4 .left > p span{display: inline-block;}
.s4 .right{
	position: relative;
	display: flex; align-items: flex-end; justify-content: center;
}
.s4 .right .imgBx{position: relative; z-index: 2;}
.s4 .right .imgBx img{width: 406em; min-width: 406em;}
.s4 .right .txt{
	position: relative; z-index: 2;
	bottom: 30px; margin-left: 12px; font-size: 14px;
	color: var(--orange); white-space: nowrap; font-weight: 700;
}
.s4 .right .txt p{
	width: 0; height: 0; transform: rotate(90deg); transform-origin: right center;
	display: flex; align-items: flex-end; justify-content: flex-end;
}
.s4 .right .bottomTxt{
    position: absolute; top: 100%; padding-top: calc(20/14*1em);
    font-size: max(18em,14px); white-space: nowrap; font-weight: 500;
}
.s4 .right .circleBx{
	position: absolute; width: 1px; height: 1px; top: 50%;
	display: flex; align-items: center; justify-content: center;
	box-sizing: border-box;
}
.s4 .right .circleBx .circle{
	position: absolute;
	width: 30em; height: 30em;
	animation: rotate forwards infinite 6s linear;
}
.s4 .right .circleBx .circle.n1{margin-left: -100em;margin-top: -120em;}
.s4 .right .circleBx .circle.n2{margin-left: 70em;margin-top: 0em;animation-delay: 0.4s;animation-duration: 5.5s;}
.s4 .right .circleBx .circle.n3{margin-left: 70em;margin-top: -10em;animation-delay: 0.8s;animation-duration: 5.8s;}
.s4 .right .circleBx .circle > div{position: absolute; width: 1px; height: 1px; display: flex; align-items: center; justify-content: center;}
.s4 .right .circleBx .circle.n1 > div{top: 0; right: 0;}
.s4 .right .circleBx .circle.n2 > div{bottom: 0; right: 0;}
.s4 .right .circleBx .circle.n3 > div{top: 0; left: 0;}

.s4 .right .circleBx .color{
	width: 560em; height: 560em; border-radius: 50%;
	background-color: var(--orange); opacity: 0.2; flex-shrink: 0;
}
.s4 .right .circleBx .line{
	width: 530em; height: 530em; box-sizing: border-box; border-radius: 50%;
	flex-shrink: 0;
}
.s4 .right .circleBx .circle.n2 .line{border: 1px solid rgba(0,0,0,0.3);}
.s4 .right .circleBx .circle.n3 .line{border: 1px solid rgba(0,0,0,0.1);}
@media screen and (max-height:900px) and (min-width:1025px){
	.s4 .wrap{justify-content: center; gap: 60em;}
}
@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s4{padding: 100px 0; font-size: calc(0.7/1024*100vw); }
	.s4 .wrap{padding-top: 0; gap: 80em;}
}
@media screen and (max-width:820px) {
	.s4 .left{max-width: 330px;}
	.s4 .left > p span br{display: none;}
}
@media screen and (max-width:500px) {
	.s4{padding: 80px 0; font-size: calc(0.56/500*100vw); }
	.s4 .wrap{flex-direction: column-reverse;}
	.s4 .left{max-width: unset;}
	.s4 .left > p{font-size: 14px; }
    .s4 .right {
        flex-direction: column; align-items: center; justify-content: flex-end;
    }
    .s4 .right .txt {
        position: absolute;
        left: 100%; bottom: calc(40/14*1em);
    }
    .s4 .right .bottomTxt {
        position: relative;
        font-size: max(18em, 16px);
        padding-top: calc(10/14*1em);
    }
}
@media screen and (max-width:320px) {}




/* s5 */
.s5{position: relative; font-size: 1px; }
.s5 .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	overflow: hidden;
}
.s5 .bg div{
	width: 100%; height: 100%; background-size: cover; background-position: center center;
}
.s5 .wrap{
	height: 100%; position: relative; box-sizing: border-box;
	padding-left: 70px; display: flex; align-items: center; justify-content: space-between;
}
.s5 .bookArea{
	display: flex; align-items: center; justify-content: center;
	gap: 40em;
}
.s5 .bookArea .book{width: 269em; filter: grayscale(1); display: flex; flex-direction: column; align-items: center;}
.s5 .bookArea .book:hover{filter: grayscale(0);}
.s5 .bookArea .book img{width: 100%; object-fit: cover;}
.s5 .bookArea .book span{font-size: max(16em,12px); color: var(--gray); font-weight: 700; margin-top: calc(20/16*1em);}
.s5 .txtArea{text-align: right;}
.s5 .txtArea h3{
	font-size: 100em; font-weight: 700; color: var(--gray);
}
.s5 .txtArea .orange{
	font-size: max(16em,12px);
	color: var(--orange); font-weight: 700;
	margin-top: calc(20/16*1em); margin-bottom: calc(40/16*1em);
}
.s5 .txtArea p{
	font-size: max(20em,14px); font-weight: 600; line-height: calc(34/20);
	color: var(--gray); margin-bottom: 1em;
}
.s5 .txtArea ._btn{}

@media screen and (max-height:600px) and (min-width:1025px){
	.s5{font-size: min(calc(1/1920*100vw),calc(1/600*var(--vh100))); }
}

@media screen and (max-width:1800px) {
	.s5 .wrap{justify-content: center; gap: 50em;}
}
@media screen and (max-width:1600px) {
	.s5 .wrap{padding-left: 0;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	.s5{font-size: calc(0.8/1024*100vw); padding: 100px 0;}
	.s5 .wrap{flex-direction: column-reverse; gap: 60px;}
	.s5 .txtArea{text-align: center;}
	.s5 .txtArea h3{font-size: max(100em,44px); }
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	.s5{padding: 80px 0;}
	.s5 .bookArea .book{width: 350em;}
}
@media screen and (max-width:320px) {}



/* s6 */
.s6{
	display: flex; align-items: center; justify-content: center;
}
.s6 .fp-tableCell{width: 100%; display: flex; align-items: center; justify-content: center;}
.s6 .thumb{z-index: 2; position: absolute; right: 10vw; top: 50%; transform: translateY(-50%); width: calc(700/1920*100vw);}
.s6 .thumb::before {content:''; display: block; padding-bottom: calc(980/1920*100%);}
.s6 .thumb > div{ filter: brightness(0.5); position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center center;}
.s6 .thumb a {z-index: 1; width: 100%; height: 100%;}
.s6 .thumb span{width: 100%; text-align: center; position: absolute; left: 50%; top: 100%; transform: translate(-50%,0%); font-size: clamp(16px,24/1920*100vw,24px); color: #fff; font-weight: 700; z-index: 5; padding-top: calc(20/24*1em);}
.s6 .playIco{
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center; z-index: 4; cursor: pointer;
	transition: opacity 0.5s;
}
.s6 .playIco.hide{opacity: 0;}
.s6 .playIco div{
	width: calc(110/70*1em); height: calc(110/70*1em); border-radius: 50%;
	background-color: rgba(255,255,255,0.5); border: 1px solid #fff; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; color: #fff; font-size: 70px;
}
/* .s6 .playIco:hover div{background-color: rgba(0,0,0,0.5);} */
.s6 .playIco div i{position: absolute;}
.s6 .playIco div i.xi-play{transform: translateX(5%);}
.s6 .playIco div i:nth-child(2){opacity: 0;}
.s6 .playIco.play div i:nth-child(1){opacity: 0;}
.s6 .playIco.play div i:nth-child(2){opacity: 1;}
.s6 .videoBx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000;}
.s6 .videoBx iframe{width: 100%; height: 100%; object-fit: cover; pointer-events: none;}

.s6 .swiper{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; filter: brightness(0.5);
}
.s6 .swiper-wrapper{}
.s6 .swiper-slide{}
.s6 .swiper-slide img{}

.s6 .txtBx{
	position: absolute;
	top: 40%;
    z-index: 2;
    max-width: 90vw;
    margin: 0 auto;
    left: 10vw;
}
.s6 .txtBx h3{
    font-size: 42px;
    line-height: 1.4;
    color: #fff;
    margin-bottom: calc(50/42*1em);
    font-weight: 700;
    width: calc(600/42*1em);
}
/* .s6 .txtBx h3 span{color: var(--green);} */
.s6 .txtBx ._btn a{background-color: var(--green);}
.s6 .txtBx ._btn a:hover{background-color: var(--orange);}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {
	.s6 .txtBx h3{font-size: 34px; }
}
@media screen and (max-width:1280px) {
    .s5 .bookArea .book {width: 230em;}
    .s6 .txtBx h3 {font-size: 30px;}
}
@media screen and (max-width:1024px) {
    .s6 .fp-tableCell {flex-direction: column-reverse; padding: 80px 0;}
    .s6 .thumb {position: relative; right: unset; top: unset; transform: unset; width: 85%; max-width: 820px;}
	.s6 .swiper{position: absolute; height: 100%;}
    .s6 .swiper img {max-width: unset; width: 100%; height: 100%; object-fit: cover;}

	.s6 .txtBx{margin: 0; margin-bottom: 60px; width: 85%; max-width: 820px; position: relative; top: unset; left: unset; transform: unset; display: flex; flex-direction: column; justify-content: center;}
	.s6 .txtBx h3{font-size: 28px; }

	.s6 .videoBx{position: relative;}
	.s6 .videoBx::before {content:''; display: block; padding-bottom: calc(9/16*100%);}
	.s6 .videoBx iframe{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
	.s6 .playIco div{font-size: 50px; }
    .s6 .thumb span{font-size: 18px;}
}
@media screen and (max-width:820px) {
    .s6 .fp-tableCell {padding: 80px 0 60px;}
    /* .s6 .thumb {position: relative; top: unset; left: unset; transform: unset; width: 100%;} */
    /* .s6 .thumb::after {content: ''; display: block; padding-top: calc(980/1920*100%);} */
    /* .s6 .thumb > div {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} */
    /* .s6 .playIco {width: 100%; height: 100%;} */
	.s6 .playIco div{font-size: 40px; }
    .s6 .thumb span{font-size: clamp(14px,18/820*100vw,18px);}

	/* .s6 .txtBx{text-align: center; max-width: 600px; left: 50%; transform: translateX(-50%); width: 100%; padding: 0 5vw; box-sizing: border-box;} */
	.s6 .txtBx h3{font-size: calc(30/820*100vw); }
	.s6 .txtBx h3 br{display: none;}
}
@media screen and (max-width:500px) {
	.s6 .playIco div{font-size: 30px; }

	.s6 .txtBx{max-width: 820px; width: 85%;}
	.s6 .txtBx h3{font-size: 18px; max-width: 100%; }
}
@media screen and (max-width:320px) {

}



/* 페이징 */
.paging {
    width: 1px;
    height: calc(100vh - 270px);
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray);
    z-index: 5555;
}

.paging .dot-base {
    border-radius: 1000%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: var(--gray);
}
.paging.hide {opacity: 0;}
.paging.yellow {background: var(--yellow);}
.paging.yellow .dot-base {color: var(--yellow);}
.paging.yellow .dot-base .dot-wrapper .dot {background: var(--yellow);}
.paging.yellow .dot-base .dot-wrapper > img {filter: brightness(1);}

.paging .dot-base p {
    position: absolute;
    right: 100%;
    margin-right: 5px;
    top: 50%;
    transform: translate(100%, -50%);
    opacity: 0;
    transition: 0.4s;
    transition-property: opacity, transform;
}

.paging .dot-base .dot-wrapper {
    position: relative;
    width: 29px;
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paging .dot-base .dot-wrapper img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: brightness(0);
    transition: 0.4s;;
}

.paging .dot-base .dot-wrapper .dot {
    width: 4.81px;
    height: 4.81px;
    background: var(--gray);
    border-radius: 1000%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.paging .dot-base.act p {
    transform: translate(0, -50%);
    opacity: 1;
}

.paging .dot-base.act .dot-wrapper > img {
    animation: dot-wrapper 5s infinite linear;
    opacity: 1;
}

@media screen and (max-width: 1024px) {
    .paging {
        display: none;
    }
}
  
@keyframes dot-wrapper {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}