@import url(./reset.css);
@import url(../font/font.css);
html {font-size: 10px; letter-spacing: -0.025em; word-break: keep-all;}
body {line-height: normal !important;}

@media screen and (min-width: 769px) {
    .mob {display: none !important;}
}

@media screen and (max-width:768px){
    html {font-size: 7px;}
    .pc {display: none !important;}
}

.pfwrap {max-width: 1280px; width: 90%; margin: 0 auto; position: relative;}

.se00 {position: relative; width: 100%; background: #fff;}

.se00 .visualpc {height: 100vh; position: relative;}
.se00 .visualpc .logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5;}
.se00 .visualpc svg {position: absolute; top: 0; left: 0; width: 100%; height: 100vh;}

.se00 .visualmob {height: 100vh; background-image: url(../img/se00_visualM.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;}

.se00 .visualmob .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70%;}

@media screen and (min-width:769px){
    .visualmob {display: none;}
}

@media screen and (max-width:768px){
    .se00 .visualmob .logo { top: 35%;}
}



.se01 {padding: 110px 0 200px; background: #f4f0ed;}
.se01 ul {display: flex; flex-wrap: wrap; margin-top: -10px;}
.se01 ul li {flex: 1; margin-top: 10px;}
.se01 ul li dt {font-size: 2.4rem; margin-bottom: 20px; font-family: 'S-CoreDream-6Bold'; white-space: nowrap;}
.se01 ul li dd {font-size: 2rem; color: #666666;}
.se01 ul li dd a {color: #666666;}
.se01 ul:first-child li dd {white-space: nowrap;}

.se01 ul:last-child {margin-top: 50px;}
.se01 ul:last-child li:first-child dd {margin-right: 50px;}
.se01 ul:last-child > li ol {display: flex;}
.se01 ul:last-child > li ol li {border-radius: 1000px; position: relative; margin-right: 20px; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);}
.se01 ul:last-child > li ol li p {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Montserrat', sans-serif;}
.se01 ul:last-child > li ol li::after {content: ''; display: block; padding-bottom: 100%;}

.se01 ul:last-child > li ol li:nth-of-type(1) {background: #40e0aa;}
.se01 ul:last-child > li ol li:nth-of-type(2) {background: #ff8d00;}
.se01 ul:last-child > li ol li:nth-of-type(3) {background: #6132b8;}
.se01 ul:last-child > li ol li:nth-of-type(4) {background: #ff0b61;}


@media screen and (max-width:768px){
    .se01 {padding: 15% 0;}
    .se01 ul {margin-top: -25px;}
    .se01 ul li {flex: none; width: 50%; margin-top: 25px;}
    .se01 ul li dt {margin-bottom: 0.25em;}
    .se01 ul:first-child li dd {white-space:normal;}

    .se01 ul:last-child {margin-top: 0;}
    .se01 ul:last-child li {width: 100%;}
    .se01 ul:last-child > li ol li {width: calc(100%/4 - 9%/4); margin-right: 3%;}
    .se01 ul:last-child li:first-child dd {margin-right: 0;}
    .se01 ul:last-child > li ol li p {font-size: 3vw;}
}



.se02 {background:#6132b8; transition: .3s;}
.se02 ul {position: relative;}
.se02 ul li {height: 100vh; display: flex; align-items: center; justify-content: center;}

@media screen and (max-width:768px){
    .se02 ul {padding: 15% 0;}
    .se02 ul li {height: auto;}
    .se02 ul li + li {padding-top: 10%;}
}


.se03 {position: relative; background: #f4f0ed; padding-top: 200px; overflow: hidden;}
.se03 h1 {font-size: 11rem; text-transform: uppercase; padding-bottom: 350px; background-image: url(../img/se03h1Bg.png); background-repeat: no-repeat; background-position: right 80%; width: 50%; margin-right: auto; font-family: 'S-CoreDream-9Black'; line-height: 1; color: #333333; background-size: 80% auto;}
.se03 ul {display: flex; width: 50%; margin-left: auto; position: absolute; right: 0; height: calc(100% - 200px); bottom: 0; align-items: flex-end;}
.se03 ul li {position: relative; color: #fff; text-align: right; display: flex; flex-direction: column; justify-content: space-between; width: calc(100%/4); line-height: 1.2;}
.se03 ul li .img {box-sizing: border-box; padding: 15px;}
.se03 ul li .obj {position: absolute; top: 0; left: 55%; transform: translate(-50%,-50%); width: 80%;}
.se03 ul li .txb {position: relative;}
.se03 ul li .txb::after {content: ''; display: block; padding-bottom: 100%;}
.se03 ul li .txb dl {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.se03 ul li dt {font-size: 1.5vw; font-family: 'S-CoreDream-7ExtraBold'; text-transform: uppercase;}
.se03 ul li dd {font-size: 4vw; font-family: 'S-CoreDream-9Black'; letter-spacing: -1px;}

.se03 ul li:nth-of-type(1) {background: #6132b8; }
.se03 ul li:nth-of-type(2) {background: #40e0aa; }
.se03 ul li:nth-of-type(3) {background: #ff8d00; }
.se03 ul li:nth-of-type(4) {background: #ff0b61; }




@media screen and (max-width:1330px){
    .se03 h1 {font-size: 8vw;}
}

@media screen and (max-width:768px){
    .se03 {padding: 15% 0; background-image: url(../img/se03Bg.png); background-repeat: no-repeat; background-position: center right; background-size: 60% auto;}
    .se03 h1 {font-size: 10vw; padding-bottom: 0; width: auto; background: none;  padding-bottom: 50px;}
    .se03 ul {position: static; width: auto; height: auto; width: 90%; margin: 0 auto;}

    .se03 ul li .img {padding: 10%;}

    .se03 ul li:nth-of-type(1) .txb {margin-top: 30%;}
    .se03 ul li:nth-of-type(2) .txb {margin-top: 50%;}
    .se03 ul li:nth-of-type(3) .txb {margin-top: 80%;}
    .se03 ul li:nth-of-type(4) .txb {margin-top: 50%;}

    .se03 ul li .txb::after {padding-bottom: 100%;}
    .se03 ul li dt {font-size: 2.5vw;}
    .se03 ul li dd {font-size: 5vw;}
}

/*애니메이션 관련*/
.se03 ul li {height: 0; overflow: hidden; transition: .5s;}
.se03 ul li.anistart {overflow: visible;}


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

    .se03 ul li {height: auto; transform: scaleY(0); transform-origin: bottom;}

    .se03 ul li:nth-of-type(1).anistart {transition-delay: 0;}
    .se03 ul li:nth-of-type(2).anistart {transition-delay: 0.2s;}
    .se03 ul li:nth-of-type(3).anistart {transition-delay: 0.4s;}
    .se03 ul li:nth-of-type(4).anistart {transition-delay: 0.6s;}

    .se03 ul li:nth-of-type(1).anistart,
    .se03 ul li:nth-of-type(2).anistart,
    .se03 ul li:nth-of-type(3).anistart,
    .se03 ul li:nth-of-type(4).anistart {height: auto; transform: scaleY(1);}
}

@media screen and (min-width:769px) {
    .se03 ul li:hover {transform: scaleY(1.05); transform-origin: bottom;}
    .se03 ul li:nth-of-type(1).anistart {height: 80%; transition-delay: 0;}
    .se03 ul li:nth-of-type(2).anistart {height: 90%; transition-delay: 0.2s height;}
    .se03 ul li:nth-of-type(3).anistart {height: 100%; transition-delay: 0.4s height;}
    .se03 ul li:nth-of-type(4).anistart {height: 90%; transition-delay: 0.6s height;}
}



.se04 {padding: 130px 0; background-image: url(../img/se04bg.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; position: relative; background-position: center;}
.se04 ul {max-width: 1280px; width: 90%; margin: 0 auto;}
.se04 ul li {padding-bottom: 25px; border-bottom: 1px solid; border-image: linear-gradient(90deg, rgba(97,50,184,1) 0%, rgba(255,11,97,1) 100%); border-image-slice: 1;}
.se04 ul li + li {margin-top: 50px;}

.se04 ul li h2 {font-size: 7.8rem; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; line-height: 1; position: relative; display: inline-block;}
.se04 ul li h2 span {position: absolute; left: 0; top: 0; background: linear-gradient(90deg, rgba(97,50,184,1) 0%, rgba(255,11,97,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 0; height: 0; transition: .5s height; z-index: 2; overflow: hidden ; }

.se04 .img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none;}

@media screen and (min-width:769px){
    .se04 ul li:hover h2 {-webkit-text-stroke-width: 0;}
    .se04 ul li:hover h2 span {height: 100%;}    
    .se04 .slideimg {display: none !important; text-align: center;}
}

@media screen and (max-width:768px){
    .se04 {padding: 15% 0;}

    .se04 ul li {cursor: pointer; border: none;}
    .se04 ul li h2 {font-size: 7vw; -webkit-text-stroke-width: 0; border-bottom: 2px solid; border-image: linear-gradient(90deg, rgba(97,50,184,1) 0%, rgba(255,11,97,1) 100%); border-image-slice: 1; display: block; padding-bottom: 25px; margin-bottom: 15px; color: #fff;}
    .se04 ul li h2 span {display: none;}

    .se04 ul li.on h2 {background: linear-gradient(90deg, rgba(97,50,184,1) 0%, rgba(255,11,97,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

    .se04 ul li + li {margin-top: 25px;}

    .se04 ul li:first-child .slideimg {display: block;}

    .se04 ul li .slideimg {text-align: center; display: none;}

    

}


.se05 {background: #f4f0ed; padding: 250px 0;}
.se05 .tb {max-width: 1280px; width: 90%; margin: 0 auto 230px; background-image: url(../img/se05_textBg.png); background-repeat: no-repeat; background-position: 50% 40%; background-size: 38% auto;}
.se05 .tb dt {font-size: 3.8rem; margin-bottom: 25px; font-family: 'S-CoreDream-6Bold';}
.se05 .tb dt span {font-family: 'S-CoreDream-3Light';}
.se05 .tb dd {width: 60%;}
.se05 .tb p {font-size: 2rem; color: #666666; width: 60%; margin-left: auto; margin-top: 75px; line-height: 1.5;}

.se05 .fixedScroll {height: 100vh; position: relative;}
.se05 ul {width: 90%; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 1600px;}
.se05 ul li {display: flex; background-color: #fff; border-radius: 100px 100px 0 0; overflow: hidden; position: relative; width: 100%; top: 0; left: 0;}
.se05 ul li::after {content: ''; display: block; padding-bottom: 50%;}
.se05 ul li + li {position: absolute; height: 100%;}
.se05 ul li > div {width: 50%; position: absolute; top: 0; height: 100%;}
.se05 ul li .lt {box-sizing: border-box; padding: 5% 5% 0;}
.se05 ul li .lt p.num {font-size: 3rem; color: #6132b8; font-family: 'S-CoreDream-4Regular';}
.se05 ul li .lt h2 {font-size: 5.8rem; margin: 20px 0 35px; font-family: 'S-CoreDream-7ExtraBold';}
.se05 ul li .lt p.cp {font-size: 2.4rem; word-break: keep-all; color: #666666; line-height: 1.5;}
.se05 ul li .rg {background-repeat: no-repeat; background-position: center; background-size: cover; right: 0;}
.se05 ul li:nth-of-type(even) .rg {right: auto; left: 0;}

@media screen and (min-width:769px) {
    .se05 ul li:nth-of-type(even) {flex-direction: row-reverse;}
}


@media screen and (max-width:1700px){
    .se05 ul li .lt h2 {font-size: 3vw;}
    .se05 ul li .lt p.cp {font-size: 1.5vw;}
}

@media screen and (max-width:1000px){
    .se05 .tb dt {font-size: 4vw;}
}

@media screen and (max-width:768px){
    .se05 {padding: 15% 0;}
    .se05 .tb {margin-bottom: 10%;}
    .se05 .tb dt {margin-bottom: 1em; font-size: 4vw;}
    .se05 .tb p {margin-top: 2em; width: 100%;}

    .se05 .fixedScroll {height: auto;}
    .se05 ul {position: static; transform: none;}
    .se05 ul li {border-radius: 15px 15px 0 0; flex-direction: column; position: static;}
    .se05 ul li::after {display: none;}
    .se05 ul li + li {margin-top: 25px; position: static; height: auto;}
    .se05 ul li > div {position: static; width: 100%;}
    .se05 ul li .lt h2 {margin: 0.5em 0 1em;}
    .se05 ul li .lt p.cp {font-size: 1.6rem;}
    
    .se05 ul li .lt {padding: 5%;}
    .se05 ul li .rg {padding-top: 36.25%;}

}




.se06 {padding: 0 0 415px; background-image: url(../img/se06_Bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;}
.se06 .title {position: absolute; left: 50%; transform: translateX(-50%); width: 100%;  padding-top: 100px;}
.se06 h1 {font-size: 23rem; text-align: center; font-family: 'S-CoreDream-9Black'; color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #6132b8;  line-height: 1; position: relative;}

.se06 .title.fixed {position: fixed; top: 0; bottom: auto;}
.se06 .title.poa {position: absolute; bottom: 0; top: auto;}

.se06 h1 span {position: absolute; left: 0; top: 0; width: 100%; height: 0; color: #6132b8; -webkit-text-stroke-width: 1px; z-index: 5; overflow: hidden;}

.se06 ul {max-width: 620px; width: 50%; margin: 0 auto; padding-top: 20%; padding-bottom: 80px;}
.se06 ul li {background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;}
.se06 ul li::after {content: ''; padding-bottom: 100%; display: block;}
.se06 ul li:nth-of-type(1) {transform: rotate(15deg); z-index: 4;}
.se06 ul li:nth-of-type(2) {transform: rotate(-15deg);}
.se06 ul li:nth-of-type(3) {transform: rotate(15deg);}
.se06 ul li:nth-of-type(4) {transform: rotate(-15deg);}

@media screen and (max-width:1610px){
    .se06 h1 {font-size: 13vw;}
}

@media screen and (max-width:768px){
    .se06 {padding: 0 0 30%;}

    .se06 .title {padding-top: 10%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.pf_next {height: 560px; position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #000;}
.pf_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}
.pf_next .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); background-repeat: no-repeat; background-position: center; background-size: cover;}
.pf_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.pf_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.pf_next .textbox dl dd {font-size: 60px; font-weight: bold; margin-top: 10px;}
@media screen and (max-width: 768px) {
    .pf_next {height: 250px;} 
    .pf_next .textbox {top: 50px;}
    .pf_next .textbox dl dd {font-size: 30px;}
}
.pf_link {padding: 60px 0 60px; text-align: center; background: #f3f4f6;}
.pf_link a {color: #333; font-size: 30px; font-weight: 600;}
.pf_link span {position: relative; top: -5px; margin-right: 20px;}
.pf_link img {vertical-align: middle;}
@media screen and (max-width: 768px) {
    .pf_link {padding: 30px 0 30px;}
    .pf_link a {font-size: 20px;}
}