@charset "utf-8";

@keyframes mtxt1 {
	0%{opacity: 0; transform: rotate(-8deg) translate3d(0, -50%, 0);}
	100%{opacity: 1;  transform: rotate(-8deg) translate3d(0, 0%, 0);}
}
@keyframes mtxt2 {
	0%{opacity: 0; transform: translate3d(0, -50%, 0) translateY(-50%);}
	100%{opacity: 1;  transform:  translate3d(0, 0%, 0) translateY(-50%);}
}
@keyframes mtxt3 {
	0%{opacity: 0; transform: translate3d(50%, 0, 0);}
	100%{opacity: 1;  transform:  translate3d(0, 0%, 0);}
}
@keyframes light {
    0% { opacity: 0.15; transform: translate3d(-20%, -10%, 0); }
    10% { transform: translate3d(-30%, -30%, 0); }
    20% { transform: translate3d(0%, -20%, 0); }
    30% { opacity: 0.1; transform: translate3d(30%, 0%, 0); }
    40% { transform: translate3d(20%, 20%, 0); }
    50% { transform: translate3d(0%, 30%, 0);}
    60% { transform: translate3d(-20%, 20%, 0); }
    70% { opacity: 0.12; transform: translate3d(-30%, 0%, 0); }
    80% { transform: translate3d(-20%, -20%, 0); }
    90% { transform: translate3d(-10%, -30%, 0); }
    100% { opacity: 0.15; transform: translate3d(-20%, -10%, 0); }
}

#fullpage{position: relative;}
#fullpage .section{position: absolute; width: 100%; height: 100%; z-index: 0; transition: .5s; opacity: 0;overflow: hidden;}
#fullpage .section .fp-scroller{height: 100%;}
#fullpage .section .inner{height: 100%;}
#fullpage .section.active{z-index: 1; opacity: 1; transition: 1.25s;}
#fullpage .section .cursor{position: absolute; width: 300px; height: 300px; display: flex; justify-content: center; align-items: center; transform: translate(-50%, -50%);}
#fullpage .section .cursor a{color: #fff; font-size: 15px; font-weight: 600; visibility: hidden; opacity: 0; transition: .4s;}
#fullpage .section .cursor:hover a{visibility: visible; opacity: 1; text-shadow: 1px 3px 2px rgba(0,0,0,0.1); animation: mtxt3 .4s ease-in-out;}
#fullpage .section .cursor a::before{content: '●'; margin-right: 5px; font-size: 12px;}
#fullpage .section .light_box{opacity: 0.15; position: absolute; filter: blur(10px); transform: translate3d(-1000%, -1000%, 0); mix-blend-mode: plus-lighter; transition: 1s; top: -200% !important;}
#fullpage .section.active .light_box{animation: light 6s infinite linear;}
#fullpage .section .light_box .light{ width: 7vw; height: 7vw; background-color: #f5f5f3; border-radius: 100%;}

@media all and (max-width:976px){
	#fullpage .section .cursor,
	#fullpage .section .light_box{display: none !important;}
}

/* sec1 */
@keyframes opa {
	0%{opacity: 1;}
	30%{opacity: 0;}
	70%{opacity: 1;}
}
@keyframes rot {
	0%{transform: rotate(0)}
	100%{transform: rotate(360deg)}
}
@keyframes updowns {
    0%{transform: translateY(-20px);}
    100%{transform: translateY(0px);}
}
.sec1{background: url(/images/main/sec1.webp) no-repeat center center / cover; position: relative; overflow: hidden; opacity: 0; visibility: hidden; transition: 1s; position: relative !important;}
.sec1 .fp-scroller{height: 100% !important;}
.sec1.active{opacity: 1; visibility: visible;}
.sec1 .light{position: absolute; top: 0; right: 0; mix-blend-mode: screen; animation: opa infinite 5s ease-in-out;}
.sec1 .txt{position: relative; display: inline-block; top: 62%; transform: translateY(-50%);}
.active.sec1 .txt{animation: mtxt2 1s ease-in-out;}
.sec1 .txt h4{font-family: 'Barlow', sans-serif; font-size: 18px; color: #d6cabb; font-weight: 400; position: absolute; right: 0; top: 25px;}
.sec1 .txt h3{font-family: 'Smooch', cursive; font-size: 130px; color: #db715c; font-weight: 400;}
.sec1 .scroll{width: 130px; height: 130px; display: flex; justify-content: center; align-items: center; position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); z-index: 99;}
.sec1 .scroll .circle{position: absolute; z-index: 0; /*animation: rot infinite 4s linear;*/}
.sec1 .scroll .arrow{margin-bottom: 30px; animation: updowns infinite 1s both;}

@media all and (max-width:1280px){
	.sec1 .txt{top: 66%;}
	.sec1 .txt h4{top: 10px;}
	.sec1 .txt h3{font-size: 100px;}
	.sec1 .scroll .circle img{max-width: 120px;}
	.sec1 .scroll .arrow img{max-width: 24px;}
}
@media all and (max-width:976px){
	.sec1 .txt{top: 68%;}
	.sec1 .txt h4{font-size: 17px; top: 5px;}
	.sec1 .txt h3{font-size: 80px;}
	.sec1 .scroll{bottom: 45px;}
	.sec1 .scroll .circle img{max-width: 110px;}
	.sec1 .scroll .arrow img{max-width: 22px;}
}
@media all and (max-width:640px){
	.sec1{background-position: center right -100vw;}
	.sec1 .txt{top: 70%;}
	.sec1 .txt h4{font-size: 16px; top: 3px;}
	.sec1 .txt h3{font-size: 68px;}
	.sec1 .scroll{bottom: 38px; width: 105px; height: 105px;}
	.sec1 .scroll .circle img{max-width: 105px;}
	.sec1 .scroll .arrow img{max-width: 21px;}
}
@media all and (max-width:480px){
	.sec1 .txt{top: 67%;}
	.sec1 .txt h4{top: -5px; font-size: 3.75vw;}
	.sec1 .txt h3{font-size: 15vw;}
	.sec1 .scroll{bottom: 25px; width: 90px; height: 90px;}
	.sec1 .scroll .circle img{max-width: 90px;}
	.sec1 .scroll .arrow img{max-width: 20px;}
}



/* m_txt */

.m_txt{color: #6454aa; display: inline-block; text-align: center; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); width: 575px;}
.m_txt h3{font-family: 'Smooch', cursive; font-weight: 400; font-size: 160px; transform: rotate(-8deg); line-height: .7em;}
.active .m_txt h3{animation: mtxt1 1s ease-in-out;}
.m_txt h3.big{font-size: 200px;}
.m_txt h4{font-family: 'OneMobileTitle'; font-weight: 400; font-size: 20px; margin-bottom: 25px; margin-top: 40px;}
.m_txt h4.mo{display: none;}
.m_txt p{font-size: 16px; font-weight: 500; line-height: 1.6em;}
.m_txt p.mo{display: none;}
.m_txt .plus{font-size: 32px;font-weight: 100; opacity: 0.5; margin: 20px 0;}
.m_txt ul{display: flex; gap:15px 0; flex-direction: column;}
.m_txt ul li{}
.m_txt ul li.mo{display: none;}
.m_txt ul li a{font-weight: 600; font-size: 15px; color: #6454aa;}
.m_txt ul li a:hover{text-decoration: underline; text-underline-position: under;}
.m_txt ol{margin-top: 45px; text-align: center;display: inline-block;}
.m_txt ol li{}
.m_txt ol li+li{margin-top: 12px;}
.m_txt ol li a{font-weight: 600; font-size: 17px; color: #6454aa; position: relative;}
.m_txt ol li a::after{content: ''; width: 0%; display: block; height: 2px; background-color: #6454aa; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); transition: .4s;}
.m_txt ol li a:hover::after{width: 100%;}

@media all and (max-width:1600px){
	.m_txt{width: 525px;}
	.m_txt h3{font-size: 120px;}
	.m_txt h3.big{font-size: 150px;}
	.m_txt h4{font-size: 19px;}
}
@media all and (max-width:1280px){
	.m_txt{width: 430px;}
	.m_txt h3{font-size: 100px;}
	.m_txt h3.big{font-size: 130px;}
	.m_txt h4{font-size: 19px; margin-bottom: 20px; margin-top: 35px;}
	.m_txt ol li a{font-size: 16px;}
	.m_txt .plus{font-size: 28px; margin: 15px 0;}
}
@media all and (max-width:976px){
	.m_txt{text-align: left; top: 120px !important; transform: translateY(0);}
	.m_txt h3{font-size: 72px; margin-bottom: 50px;}
	.m_txt h3.big{font-size: 96px;}
	.m_txt h4{font-size: 18px; margin-bottom: 15px; margin-top: 30px;}
	.m_txt h4.mo{display: block;}
	.m_txt p{font-size: 15px;}
	.m_txt p.mo{display: block;}
	.m_txt .plus{display: none;}
	.m_txt ol{display: none;}
	.m_txt ul{display: flex; gap:0 30px; flex-direction: row; margin-top: 25px;}
	.m_txt ul li.mo{display: block;}
	.m_txt ul li a{font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-position: under;}
}
@media all and (max-width:640px){
	.m_txt{top: 90px !important;}
	.m_txt h3{font-size: 56px; margin-bottom: 50px;}
	.m_txt h3 br{display: none;}
	.m_txt h3.big{font-size: 72px;}
	.m_txt h4{font-size: 17px; margin-bottom: 12px; margin-top: 25px;}
	.m_txt p{font-size: 14px;}
	.m_txt ul{gap:0 25px;  margin-top: 15px;}
	.m_txt ul li a{font-size: 13px;}
}
@media all and (max-width:480px){
	.m_txt{top: 80px !important;}
	.m_txt h3{font-size: 48px; margin-bottom: 40px;}
	.m_txt h3.big{font-size: 64px;}
}


/* sec2 */
.sec2{background: url(/images/main/sec2.webp?v=2) no-repeat center center / cover;}

@media all and (max-width:976px){
	.sec2{background: url(/images/main/sec2_mo.webp?v=2) no-repeat center center / cover;}
}
@media all and (max-width:480px){
	.sec2 .m_txt p br:nth-child(3){display: none;}
}

/* sec3 */
.sec3{background: url(/images/main/sec3.webp?v=2) no-repeat center center / cover;}
.sec3 .cursor{top: 50%; left: 50%;}
#fullpage .section.sec3.active .light_box{top: 45% !important; left: 43%;}

@media all and (max-width:976px){
	.sec3{background: url(/images/main/sec3_mo.webp?v=2) no-repeat center center / cover;}
}

/* sec4 */
.sec4{background: url(/images/main/sec4.webp?v=2) no-repeat center center / cover;}
.sec4 .m_txt ol{margin-top: 100px;}
.sec4 .dr_say{width: 630px;}
.sec4 .cursor{top: 32.5%; left: 51%;}
#fullpage .section.sec4.active .light_box{top: 26% !important; left: 41%;}

@media all and (max-width:976px){
	.sec4{background: url(/images/main/sec4_mo.webp?v=2) no-repeat center center / cover;}
}

/* sec5 */
.sec5{background: url(/images/main/sec5.webp?v=2) no-repeat center center / cover;}
.sec5 .dr_say{width: 530px;}
.sec5 .cursor{top: 36.5%; left: 39%;}
#fullpage .section.sec5.active .light_box{top: 31% !important; left: 32%;}

@media all and (max-width:976px){
	.sec5{background: url(/images/main/sec5_mo.webp?v=2) no-repeat center center / cover;}
}

/* sec6 */
.sec6{background: url(/images/main/sec6.webp?v=2) no-repeat center center / cover;}
.sec6 .dr_say{width: 680px; bottom: 245px;}
.sec6 .cursor{top: 37.5%; left: 54%;}
#fullpage .section.sec6.active .light_box{top: 31% !important; left: 49%;}

@media all and (max-width:976px){
	.sec6{background: url(/images/main/sec6_mo.webp?v=2) no-repeat center center / cover;}
}

/* sec7 */
.sec7{background: url(/images/main/sec7.webp?v=2) no-repeat center center / cover;}
.sec7 .m_txt ol{margin-top: 100px;}
.sec7 .dr_say{width: 600px; bottom: 160px;}
.sec7 .cursor{top: 45.5%; left: 51%;}
#fullpage .section.sec7.active .light_box{top: 39% !important; left: 43%;}

@media all and (max-width:976px){
	.sec7{background: url(/images/main/sec7_mo.webp?v=2) no-repeat center center / cover;}
}

/* sec8 */
.sec8{background: url(/images/main/sec8.webp?v=1) no-repeat center center / cover;}
.sec8 .m_txt ol{margin-top: 100px;}
.sec8 .dr_say{width: 634px; bottom: 245px;}
.sec8 .cursor{top: 57.5%; left: 54%;}
#fullpage .section.sec8.active .light_box{top: 53% !important; left: 47%;}

@media all and (max-width:976px){
	.sec8{background: url(/images/main/sec8_mo.webp?v=1) no-repeat center center / cover;}
}

/* sec9 */
.sec9{background: url(/images/main/sec9.webp?v=2) no-repeat center center / cover;}
.sec9 .dr_say{width: 540px; bottom: 180px;}
.sec9 .cursor{top: 41.5%; left: 61%;}
#fullpage .section.sec9.active .light_box{top: 37% !important; left: 54%;}

@media all and (max-width:976px){
	.sec9{background: url(/images/main/sec9_mo.webp?v=2) no-repeat center center / cover;}
}

/* sec10 */
.sec10{background: url(/images/main/sec10.webp?v=1) no-repeat center center / cover;}
.sec10 .m_txt{top: 42%;}
.sec10 .m_txt ol{margin-top: 80px;}
.sec10 .dr_say{width: 566px; bottom: 115px;}
.sec10 .cursor{top: 45.5%; left: 63%;}
#fullpage .section.sec10.active .light_box{top: 42% !important; left: 55%;}

@media all and (max-width:976px){
	.sec10{background: url(/images/main/sec10_mo.webp?v=1) no-repeat center center / cover;}
}

/* sec11 */
.sec11{background: url(/images/main/sec11.webp?v=1) no-repeat center center / cover;}
.sec11 .m_txt{top: 45%;}
.sec11 .m_txt ol{margin-top: 100px;}
.sec11 .dr_say{width: 628px; bottom: 170px;}
.sec11 .cursor{top: 56.5%; left: 41%;}
#fullpage .section.sec11.active .light_box{top: 51% !important; left: 35%;}

@media all and (max-width:976px){
	.sec11{background: url(/images/main/sec11_mo.webp?v=1) no-repeat center center / cover;}
}

/* sec12 */
.sec12{background: url(/images/main/sec12.webp) no-repeat center center / cover; position: relative !important;}
.sec12.on{opacity: 1 !important;}
.sec12 .tit{max-width: 1920px; margin: 0 auto; padding: 0 160px;display: flex; align-items: flex-end; justify-content: space-between;}
.sec12 .tit h3{font-family: 'Smooch', cursive; font-weight: 400; font-size: 170px; transform: rotate(-8deg); line-height: .7em; color: #6454aa; position: relative; z-index: 2; top: 50px;}
.active.sec12 .tit h3{animation: mtxt1 1s ease-in-out;}
.sec12 .arrow{display: flex;}
.sec12 .arrow > div{font-family: 'Noto Sans KR', sans-serif; color: #222374; cursor: pointer; font-size: 24px; font-weight: 100; line-height: 10px;}
.sec12 .arrow > .prev{margin-right: 45px; padding-right: 45px; border-right: 1px solid #b9b1cc;}
.sec12 .arrow > .next{}
.sec12 .cont{padding-left: 260px; margin-top: 35px;}
.sec12 .cont .box{padding: 20px; background-color: #fff; margin-right: 20px; height: auto;}
.sec12 .cont .box .images{}
.sec12 .cont .box .images img{max-width: 100%;}
.sec12 .cont .box p{font-family: /*'Smooch',*/'SUIT', sans-serif; font-size: 28px; color: #6454aa; margin-top: 20px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.sec12 .cont2{padding-left: 260px; margin-top: 35px;}
.sec12 .cont2 .box{padding: 20px; background-color: #fff; margin-right: 20px; height: auto; width: 370px;}
.sec12 .cont2 .box .images{position: relative; overflow: hidden; height: 390px;}
.sec12 .cont2 .box .images img:not(.hrt){max-width:100%; filter: blur(8px); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sec12 .cont2 .box .images .overwrap{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); color: #fff;}
.sec12 .cont2 .box .images .overwrap .view{position: absolute; left: 8px; top: 8px; display: flex; font-size: 13px; align-items: center;}
.sec12 .cont2 .box .images .overwrap .view img{}
.sec12 .cont2 .box .images .overwrap .writer{position: absolute; right: 8px ;top: 8px;}
.sec12 .cont2 .box .images .overwrap .desc{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; font-size: 13px;}
.sec12 .cont2 .box .images .overwrap .desc span{display: inline-block; margin-top: 10px; padding: 2px 2em; border:1px solid #ffffff99; font-size: 12px;}
.sec12 .cont2 .box .txt .keywords{margin-top: 15px; font-size: 15px; font-weight: 500; color: #555;}
.sec12 .cont2 .box .txt .keywords span{margin-right: 4px;}
.sec12 .cont2 .box p.t1{font-family: /*'Smooch',*/'SUIT', sans-serif; font-size: 22px; color: #6454aa; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

@media all and (max-width:1600px){
	.sec12 .tit h3{font-size: 140px;}
	.sec12 .cont .box{max-width: 340px;}
	.sec12 .cont2 .box{max-width: 340px;}
}
@media all and (max-width:1280px){
	.sec4 .m_txt ol{margin-top: 80px;}
	.sec7 .m_txt ol{margin-top: 60px;}
	.sec8 .m_txt ol{margin-top: 60px;}
	.sec10 .m_txt ol{margin-top: 50px;}
	.sec11 .m_txt ol{margin-top: 80px;}
	.sec12 .tit{padding: 0 80px;}
	.sec12 .cont{padding-left: 150px;}
	.sec12 .cont2{padding-left: 150px;}
	.sec12 .tit h3{font-size: 120px;}
	.sec12 .cont .box{max-width: 300px; padding: 15px;}
	.sec12 .cont2 .box{max-width: 300px; padding: 15px;}
	.sec12 .cont .box p{font-size: 25px; margin-top: 15px; line-height: 1em;}
	.sec12 .cont2 .box p.t1{font-size: 25px; margin-top: 15px; line-height: 1em;}
	.sec12 .arrow > .prev{margin-right: 35px; padding-right: 35px;}
	.sec12 .arrow > div{font-size: 22px;}

    .sec12 .cont2 .box .images{height: 300px;}
}
@media all and (max-width:976px){
	.sec12 .tit{padding: 0 40px;}
	.sec12 .tit h3{font-size: 96px;}
	.sec12 .cont{padding-left: 90px;}
	.sec12 .cont .box{max-width: 270px;}
	.sec12 .cont .box p{font-size: 23px; margin-top: 13px;}

    .sec12 .cont2{padding-left: 90px;}
	.sec12 .cont2 .box{max-width: 270px;}
	.sec12 .cont2 .box p.t1{font-size: 23px; margin-top: 13px;}
    .sec12 .cont2 .box .images .overwrap .desc{font-size: 12px;}
}
@media all and (max-width:640px){
	.sec12 .tit{padding: 0 3%;}
	.sec12 .tit h3{font-size: 72px; top: 30px;}
	.sec12 .cont{padding-left: 50px; margin-top: 20px;}
	.sec12 .cont .box{max-width: 230px;}
	.sec12 .cont .box p{font-size: 21px; margin-top: 10px;}
	.sec12 .arrow > .prev{margin-right: 22px; padding-right: 22px;}
	.sec12 .arrow > div{font-size: 18px;}

    .sec12 .cont2{padding-left: 50px; margin-top: 20px;}
	.sec12 .cont2 .box{max-width: 230px;}
	.sec12 .cont2 .box p.t1{font-size: 21px; margin-top: 10px;}
    .sec12 .cont2 .box .images{height: 240px;}
    .sec12 .cont2 .box .images img:not(.hrt){width: 230px !important;}
    .sec12 .cont2 .box .images .overwrap .view{font-size: 12px;}
    .sec12 .cont2 .box .images .overwrap .desc{white-space: initial; font-size: 10px;}
    .sec12 .cont2 .box .txt .keywords{font-size: 12px;}
}
@media all and (max-width:480px){
	.sec12 .tit h3{font-size: 56px; top: 20px;}
	.sec12 .arrow > div{font-size: 17px;}
	.sec12 .cont{padding-left: 40px;}
	.sec12 .cont .box{max-width: 210px; margin-right: 10px;}
	.sec12 .cont .box p{font-size: 18px; margin-top: 10px;}

    .sec12 .cont2{padding-left: 40px;}
	.sec12 .cont2 .box{max-width: 210px; margin-right: 10px;}
	.sec12 .cont2 .box p.t1{font-size: 18px; margin-top: 10px;}
    .sec12 .cont2 .box .images{height: 210px;}
    .sec12 .cont2 .box .images img:not(.hrt){width: 210px !important;}
}


/* dr_say */
.dr_say{width: 580px; position: absolute; bottom: 170px; right: 0;}
.dr_say .label{background-color: #6454aa; font-family: 'Barlow', sans-serif; color: #fff; font-weight: 500; font-size: 16px; line-height: 38px; width: 220px; text-align: right; padding: 0 30px; margin-bottom: 45px;}
.dr_say .txt{padding-left: 160px; color: #6454aa;}
.dr_say .txt h4{font-family: 'OneMobileTitle'; font-size: 20px; font-weight: 400; margin-bottom: 20px;}
.dr_say .txt p{font-size: 16px; font-weight: 500; line-height: 1.6em;}

@media all and (max-width:1600px){
	.dr_say{width: 480px !important; bottom: 80px !important;}
	.dr_say .label{width: 190px;}
	.dr_say .txt{padding-left: 100px;}
}
@media all and (max-width:1280px){
	.dr_say{width: 440px !important;}
	.dr_say .label{margin-bottom: 25px; padding: 0 20px; width: 170px;}
	.dr_say .txt{padding-left: 80px;}
	.dr_say .txt h4{font-size: 19px; margin-bottom: 15px;}
}
@media all and (max-width:976px){
	.dr_say{display: none;}
}