html {background-image: url(../img/background.jpg); font-size: 10px;}
.wrap {max-width: 1230px; width: 90%; margin: 0 auto;}

@media screen and (max-width:768px){
    html {font-size: 8px;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.visual {height: 100vh; background-image: url(../img/visual_bg.jpg); background-repeat: no-repeat; background-position: center; position: relative; background-size: cover; background-attachment: fixed; overflow: hidden;}
.visual h2 {font-size: 7rem; color: #fff; line-height: 1.3; font-family: 'yg-jalnan'; position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; width: 90%; display: flex; height: 100%; align-items: flex-end; padding-bottom: 5%; box-sizing: border-box;}
.visual .img {position:absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); border-radius: 50px; overflow: hidden; background-image: url(../img/visual_pc.jpg); background-position: top center; background-repeat: no-repeat; border-radius: 20px; background-size: cover; width: 90%; max-width: 1280px; animation: visual_img 1s infinite alternate;}
.visual .img::after {content: ''; display: block; padding-top: 56.25%;}

@media screen and (max-width:1600px){
    .visual h2 {font-size: 6vw;}
}

@media screen and (max-width:768px){
    .visual {background-attachment:scroll;}
    .visual h2 {font-size: 8vw;}
    .visual .img {top: 50%; background-image: url(../img/visual_mobile.jpg); max-width: 480px; width: 60%;}
    .visual .img::after {padding-top: calc(1360/768 * 100%);}
}

/* @keyframes visual_img {
    0%{
        transform: translate(-50%,-50%) scaleY(1);
    }
    100%{
        transform: translate(-50%,-50%) scaleY(0.9);
    }
} */

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se01 {padding-top: 100px;}
.se01 .tp {display: flex; max-width: 1280px; width: 90%; margin: 0 auto; position: relative; padding-bottom: 300px;}
.se01 .abdl {margin-right: 90px; position: relative; top: -40px;}
.se01 .textbox a {display: flex; border: 3px solid #000; background: #fff; font-family: 'Cafe24Ssurround'; font-size: 2.4rem; margin-top: 40px; text-align: center; border-radius: 1000px; padding: 10px 0; max-width: 260px; box-shadow: 6px 6px 0 0 #000; align-items: center; justify-content: center; transition:.3s; transition-property: background,color;}
.se01 .textbox a:hover {background: #000; color: #fff;}
.se01 .tit1 {font-size: 2.2rem; font-family: 'Cafe24Ssurround'; color: #f1b806; max-width: 1280px; width: 90%; margin: 0 auto; margin-bottom: 15px;}
.se01 .tit2 {font-size: 5rem; font-family: 'yg-jalnan'; text-shadow: 4px 4px 0 #f1b806; margin-right: 90px; white-space: nowrap;}
.se01 .abul {display: flex; flex-wrap: wrap; margin: -20px 0;}
.se01 .abul li {flex: 1 ; margin: 20px 0; margin-right: 60px;}
.se01 .abul li:nth-of-type(3) {margin-right: 0;}
.se01 .abul li:last-child {flex: 0 0 100%; margin-right: 0;}
.se01 .abul dt {font-size: 3rem; margin-bottom: 15px; font-family: 'Cafe24Ssurround';}
.se01 .abul dd {font-size: 2rem; color: #666666; line-height: 1.4; font-weight: 400;}
.se01 .abul li:nth-of-type(-n+3) dd {white-space: nowrap;}

.se01 .won {position: absolute; bottom: 0; width: 100%; left: 0;max-width: 860px; left: 50%; transform: translateX(-50%) translateY(35%);}
.se01 .won li {width: calc(110%/3); background: #ffd75e; border-radius: 100%; position: relative; border: 3px solid #000; box-shadow: 5px 10px 0 #000;}
.se01 .won li:nth-of-type(2) {background: #fff; position: absolute; left: 31%; top: 0; } 
.se01 .won li:nth-of-type(3) {position: absolute; top: 0; right: 0;}
.se01 .won li .text {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem;flex-direction:column; font-family: 'Cafe24Ssurround';}
.se01 .won li .text span {font-size: 2.8rem;}
.se01 .won li::before {padding-top: 100%; display: block; content: '';}
.se01 .bt {height: 580px; background-image: url(../img/se01_img01.jpg); background-repeat: no-repeat; background-position: bottom; background-size: cover; background-attachment: fixed; position: relative; z-index: -1;}
.se01 .bt .img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50%; text-align: center;}

@media screen and (max-width:900px){
    .se01 .tit2 {margin-right: 10%; font-size: 5vw;}
    .se01 .textbox a {font-size: 2.5vw; padding: 0.5em 1em; display: inline-flex; white-space: nowrap;}
}

@media screen and (max-width:768px){
    .se01 {padding-top: 10%;}
    .se01 .tp {display: block; padding-bottom: 30%;}
    .se01 .tit2 {margin-right: 0; margin-bottom: 15px; font-size: 6vw;}
    .se01 .abul li {margin: 10px 0; margin-right: 5%;}
    .se01 .abul li:nth-of-type(-n+3) dd {white-space: normal;}
    .se01 .abul dt {font-size: 2.5rem;}
    .se01 .won li .text {font-size: 4vw;}
    .se01 .won li .text span {font-size: 3.5vw;}
    .se01 .bt {height: auto; padding-top: 65%; background-attachment:scroll;}
    .se01 .abul {margin: -10px 0;}
    .se01 .textbox {margin-bottom: 35px;}
    .se01 .textbox a {margin-top: 0; font-size: 3.5vw; padding: 0.5em 2em; max-width: none;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*숫자 이벤트*/
.se02 .numbers {position: fixed; top: 50%; right: 0; font-size: 50vw; font-family: 'Cafe24Ssurround'; letter-spacing: -0.15em; line-height: 0.9;transform-origin: 0% 125%; visibility: hidden; transform: translateY(-50%);}
.se02 .numbers span {position: absolute; top: 0; left: 0; color: #f1b806; z-index: -1; transform-origin: 0% 100%; opacity: 0.5;}

.se02 .numbers.animation {animation: number_animation .4s ease-in-out alternate;}
.se02 .numbers.animation span {animation: number_animationSpan .4s ease-in alternate;}

.se02 .numbers.path {visibility: visible;}

.se02 .numberCopy {position: absolute; top: 0; right: 0; font-size: 50vw; font-family: 'Cafe24Ssurround'; letter-spacing: -0.15em; line-height: 0.9;}
.se02 .numberCopy.hidden {visibility: hidden;}
.se02 .page > li:nth-of-type(3) .numberCopy {top: auto; bottom: 0; visibility: hidden;}
.se02 .page > li:nth-of-type(3) .numberCopy.path {visibility: visible;}


.se02 {position: relative; overflow: hidden; padding-top: 20%;}
.se02 .page > li {margin-bottom: 320px; position: relative;}
.se02 .page > li:nth-of-type(2) {margin-bottom: 440px;}
.se02 .page > li:last-child {padding-bottom: 20%; margin-bottom: 0;}
.se02 .page > li .box {max-width: 1280px; margin: 0 auto; width: 90%;}
.se02 .page > li .number {position:absolute; right: -10%; top: 70%; transform: translateY(-50%); font-size: 50vw; font-family: 'Cafe24Ssurround'; line-height: 1;}
.se02 .page > li dt {font-size: 2.2rem; margin-bottom: 20px; font-family: 'Cafe24Ssurround'; letter-spacing: 2.5px;}
.se02 .page > li dd  {font-size: 5rem; padding-bottom: 30px; position: relative; display: inline-block; font-family: 'yg-jalnan';}
.se02 .page > li dd::after {position:absolute; bottom: 0; width: 60%; height: 4px; background: #000; content: ''; left: 0;}
.se02 .page > li p {font-size: 2rem; margin-top: 40px; line-height: 1.4; color: #666666;}
.se02 .page > li ul {display: flex; flex-wrap: wrap; margin-top: 40px; margin-right: 350px;}
.se02 .page > li ul li {width: calc(99.9%/4 - 90px/4); margin-bottom: 30px; background: #acf; margin-right: 30px; box-shadow: 12px 12px 0 3px #000; border-radius: 20px; background-size:cover; background-position: center; background-repeat: no-repeat;}
.se02 .page > li ul li::after {content: ''; display: block; padding-bottom: 100%;}

/*폰트 새도우 색상 , 색상*/
.se02 .page > li:nth-of-type(1) dt {color: #ff6b76;}
.se02 .page > li:nth-of-type(1) dd {text-shadow: 4px 4px 0 #ff6b76;}
.se02 .page > li:nth-of-type(2) dt {color: #f9902a;}
.se02 .page > li:nth-of-type(2) dd {text-shadow: 4px 4px 0 #f9902a;}
.se02 .page > li:nth-of-type(3) dt {color: #96d1bc;}
.se02 .page > li:nth-of-type(3) dd {text-shadow: 4px 4px 0 #96d1bc;}

/*se02 object*/
.se02 .object img {position: absolute;}
.se02 .object1 img:nth-of-type(1) {left: calc(150/1920 * 100%); right: calc(1650/1920 * 100%); top: calc(190/3400 * 100%); width: 3.5vw; height: 3.5vw;}
.se02 .object1 img:nth-of-type(2) {left: calc(55/1920 * 100%); right: calc(1700/1920 * 100%); top: calc(340/3400 * 100%); transform: rotate(-15deg); max-width: 150px; width: 8.2vw; height: 7.2vw;}
.se02 .object1 img:nth-of-type(3) {left: calc(1410/1920 * 100%); right: calc(306/1920 * 100%); width: 8.2vw; height: 7.2vw;}
.se02 .object1 img:nth-of-type(4) {left: calc(1275/1920 * 100%); right: calc(575/1920 * 100%); top: calc(345/3400 * 100%); width: 2.9vw; height: 2.9vw;}
.se02 .object1 img:nth-of-type(5) {left: calc(1323/1920 * 100%); right: calc(455/1920 * 100%); top: calc(540/3400 * 100%); width: 5.8vw; height: 5.8vw;}

.se02 .object2 img:nth-of-type(1) {top: calc(1310/3400 * 100%); left: calc(165/1920 * 100%); right: calc(1700/1920 * 100%); width: 2.2vw; height: 2.2vw;}
.se02 .object2 img:nth-of-type(2) {top: calc(1410/3400 * 100%); left: calc(100/1920 * 100%); right: calc(1715/1920 * 100%); width: 4.3vw; height: 4.3vw;}
.se02 .object2 img:nth-of-type(3) {top: calc(1320/3400 * 100%); left: calc(1170/1920 * 100%); right: calc(670/1920 * 100%); width: 3.4vw; height: 3.4vw;}
.se02 .object2 img:nth-of-type(4) {left: calc(1040/1920 * 100%); right: calc(770/1920 * 100%); top: calc(1440/3400 * 100%); width: 5.5vw; height: 5.5vw;}
.se02 .object2 img:nth-of-type(5) {left: calc(1220/1920 * 100%); right: calc(510/1920 * 100%); top: calc(1580/3400 * 100%); width: 9.5vw; height: 9.7vw;}

.se02 .object3 img:nth-of-type(1) {left: calc(70/1920 * 100%); right: calc(1670/1920 * 100%); top: calc(2350/3400 * 100%); width: 9vw; height: 7.4vw;}
.se02 .object3 img:nth-of-type(2) {top: calc(2233/3400 * 100%); right: calc(590/1920 * 100%); left: calc(1215/1920 * 100%); width: 5.7vw; height: 5.7vw;}
.se02 .object3 img:nth-of-type(3) {top: calc(2440/3400 * 100%); left: calc(1050/1920 * 100%); right: calc(650/1920 * 100%); transform: rotate(110deg); width: 11vw; height: 10.1vw;}
.se02 .object3 img:nth-of-type(4) {top: calc(2570/3400 * 100%); left: calc(1310/1920 * 100%); right: calc(480/1920 * 100%); width: 6.5vw; height: 5.8vw;}

@media screen and (min-width:769px){
    .se02 .page > li ul li:nth-of-type(4n) {margin-right: 0;}
}

@media screen and (max-width:1300px){
    .se02 .page > li {margin-bottom: 20%; padding-right: 25%; box-sizing: border-box;}
    .se02 .page > li:nth-of-type(2) {margin-bottom: 25%;}
    .se02 .page > li ul {margin-right: 0;}
    .se02 .page > li ul li {border-radius: 10px; box-shadow: 6px 6px 0 3px #000;}
    .se02 .page > li .number {top: 50%;}
}

@media screen and (max-width:768px){
    .se02 .page > li ul li {width: calc(99.9%/3 - 10%/3); margin-right: 5%;}
    .se02 .page > li ul li:nth-of-type(3n) {margin-right: 0;}
    .se02 .page > li dd {font-size: 7vw;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se03 {height: 2050px; background-image: url(../img/se03_Background.png); background-repeat: no-repeat; background-position: center; background-size: cover; position: relative;}
.se03 h2 {font-size: 7rem; font-family: 'yg-jalnan'; padding-top: 18%; line-height: 1.2;}
.se03 .videobox {position: absolute; top: 0; border-radius: 80px; border: 5px solid #000; overflow: hidden; max-width: 1280px; left: 50%; width: 45%; transition: .3s; transition-timing-function: both;}
.se03 .videobox video {width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1.2);}
.se03 .videobox::after {padding-top: calc(524/819 * 100%); content: ''; display: block;}

/*모션*/
.se03 .videobox.fixed {position: fixed; top: 50px; bottom: auto;}
.se03 .videobox.poa {bottom: 0; top: auto;}

@media screen and (max-width:1600px){
    .se03 h2 {font-size: 4.5vw; padding-top: 15%;}
    .se03 .videobox {border-radius: 40px;}
}

@media screen and (max-width:768px){
    .se03 {height: 120vh;}
    .se03 h2 {font-size: 4vw;}
    .se03 .videobox {border-radius: 30px; border-width: 3px; background-image: url(../img/submain.jpg); background-size: cover;}
    .se03 .videobox video {display: none;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se04 {padding: 200px 0 230px; position: relative;}
.se04 .boxList {display: flex; align-items: center;}
.se04 .boxList > li:first-child {margin-right: 120px; position: relative; }
.se04 .boxList > li:first-child .bgimg{border-radius: 50px; box-shadow: 12px 12px 0 3px #000; border: 7px solid #000; overflow: hidden;}
.se04 .boxList > li:first-child .img {position: absolute; left: -25%; top: 10%; right: 10%; width: 25vw; height: 25vw; background-image: url(../img/se04_LeftBoxOn.png); background-repeat: no-repeat; background-size: contain; transition: .3s; transition-property: background-image; background-position: center;}

.se04 .boxList > li:last-child .img {position: relative; width: 80%; margin: 20px auto;}
.se04 .boxList > li:last-child .img img {visibility: hidden; width: 100%;}
.se04 .boxList > li:last-child .img img:first-child {position: relative;}
.se04 .boxList > li:last-child .img img:last-child {position:absolute; top: 0; left: 0; visibility: hidden;}
.se04 .boxList > li:last-child .img img.active {z-index: 3; visibility:visible;}


.se04 .boxList h2 {font-size: 2.2rem; margin-bottom: 20px; font-family: 'Cafe24Ssurround'; letter-spacing: 2.5px; color: #68b9f2;}
.se04 .boxList dl {line-height: 1.4;}
.se04 .boxList dt {font-size: 5rem; margin-bottom: 30px; font-family: 'yg-jalnan'; text-shadow: 4px 4px 0 #68b9f2;}
.se04 .boxList dd {font-size: 2rem; line-height: 1.4; color: #666666;}
.se04 .boxList > li:last-child ul {display: flex; margin-top: 70px;}
.se04 .boxList > li:last-child ul li {flex: 1; background-color: #fff; margin-right: 40px; border-radius: 30px; box-shadow: 12px 12px 0 3px #000; cursor: pointer; position: relative; transition-duration: background-color, transform; animation: characterplay 5s linear 1s infinite; transition: .5s;}
.se04 .boxList > li:last-child ul li::after {content: ''; display: block; padding-bottom: 100%;}
.se04 .boxList > li:last-child ul li:last-child {margin-right: 0;}
.se04 .boxList > li:last-child ul li img {position: absolute; bottom: 0; max-width: none; width: 110%;}
.se04 .boxList > li:last-child ul li:nth-of-type(1) img {width: 100%;}
.se04 .boxList > li:last-child ul li:nth-of-type(2) img {left: 50%; transform: translateX(-50%);}
.se04 .boxList > li:last-child ul li:nth-of-type(3) img {right: 0;}

/*se04 over*/
.se04 .boxList > li:last-child ul li:nth-of-type(1):hover {background: #68b9f2;}
.se04 .boxList > li:last-child ul li:nth-of-type(2):hover {background: #ff798e;}
.se04 .boxList > li:last-child ul li:nth-of-type(3):hover {background: #ffd75e;}

/*se04 active*/
.se04 .boxList > li:last-child ul li:nth-of-type(1).active {background: #68b9f2;}
.se04 .boxList > li:last-child ul li:nth-of-type(2).active {background: #ff798e;}
.se04 .boxList > li:last-child ul li:nth-of-type(3).active {background: #ffd75e;}

/*se04 object*/
.se04 .object img {position: absolute;}
.se04 .object img:nth-of-type(1) {top: calc(155/1164 * 100%); left: calc(110/1920 * 100%); right: calc(1700/1920 * 100%); width: 5.5vw; height: 5.1vw;}
.se04 .object img:nth-of-type(2) {top: calc(285/1164 * 100%); left: calc(55/1920 * 100%); right: calc(1780/1920 * 100%); width: 4.3vw; height: 4.3vw;}
.se04 .object img:nth-of-type(3) {top: calc(730/1164 * 100%); left: calc(140/1920 * 100%); right: calc(1720/1920 * 100%); width: 3vw; height: 3vw;}
.se04 .object img:nth-of-type(4) {top: calc(170/1164 * 100%); right: calc(110/1920 * 100%); left: calc(1750/1920 * 100%); width: 3vw; height: 3vw;}
.se04 .object img:nth-of-type(5) {top: calc(253/1164 * 100%); right: calc(290/1920 * 100%); left: calc(1510/1920 * 100%); width: 6vw; height: 6vw;}
.se04 .object img:nth-of-type(6) {top: calc(420/1164 * 100%); left: calc(1636/1920 * 100%); right: calc(131/1920 * 100%); width: 7.7vw; height: 7.8vw;}
.se04 .object img:nth-of-type(7) {top: calc(727/1164 * 100%); left: calc(1700/1920 * 100%); right: calc(100/1920 * 100%); width: 6vw; height: 5.6vw;}

@media screen and (max-width:1045px){
    .se04 .boxList dt {font-size: 4.5vw;}
    .se04 .boxList > li:first-child {margin-right: 10%;}
}

@media screen and (max-width:768px){
    .se04 {padding: 20% 0 25%;}
    .se04 .boxList h2 {margin-bottom: 10px;}
    .se04 .boxList dt {font-size: 7vw; margin-bottom: 20px;}
    .se04 .boxList > li:first-child .bgimg {border-radius: 20px;}
    .se04 .boxList > li:last-child ul {margin-top: 10%;}
    .se04 .boxList > li:last-child ul li {border-radius: 10px; margin-right: 5%; box-shadow: 8px 8px 0 0 #000;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se05 {padding-bottom: 260px; overflow: hidden;}
.se05 .tit {line-height: 1.4;}
.se05 .tit dt{font-size: 7rem; margin-bottom: 35px; font-family: 'yg-jalnan';}
.se05 .tit dd {font-size: 2rem; color: #666;}
.se05 ul {display: flex; flex-wrap: wrap; max-width: 770px; margin: 0 auto;  margin-top: 120px;}
.se05 ul li {width: calc(99.9%/3 - 60px/3); border-radius: 1000px; background: #fff; position: relative; margin-right: 30px; margin-bottom: 30px; box-shadow: 12px 12px 0 3px #000; box-sizing: border-box; border: 3px solid #000; transition: .3s; transition-property: background;}
.se05 ul li::after {content: ''; display: block; padding-bottom: 100%;}
.se05 ul li dl {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
.se05 ul li dl dt {font-size: 4rem; color: #fff;}
.se05 ul li dl dd {font-size: 2.4rem; font-family: 'Cafe24Ssurround'; line-height: 1.2; margin-top: 10px;}



/*색상변경*/
.se05 ul li:nth-of-type(1) {background-color: #ffd75e;}
.se05 ul li:nth-of-type(2) {background-color: #68b9f2;}
.se05 ul li:nth-of-type(3) {background-color: #f8b5ba;}
.se05 ul li:nth-of-type(4) {background-color: #96d1bc;}
.se05 ul li:nth-of-type(5) {background-color: #f7902c;}
.se05 ul li:nth-of-type(6) {background-color: #e34346;}

/*오버 이미지 변경*/
.se05 ul li:hover {background-repeat: no-repeat; background-position: center; background-size: cover; background-color: transparent;}
.se05 ul li:hover dl {display: none;}
.se05 ul li:nth-of-type(1):hover {background-image: url(../img/se05_event01.png);}
.se05 ul li:nth-of-type(2):hover {background-image: url(../img/se05_event02.png);}
.se05 ul li:nth-of-type(3):hover {background-image: url(../img/se05_event03.png);}
.se05 ul li:nth-of-type(4):hover {background-image: url(../img/se05_event04.png);}
.se05 ul li:nth-of-type(5):hover {background-image: url(../img/se05_event05.png);}
.se05 ul li:nth-of-type(6):hover {background-image: url(../img/se05_event06.png);}

@media screen and (min-width:769px){
    .se05 ul li:nth-of-type(3n) {margin-right: 0;}
    .se05 ul li:nth-last-child(-n+3) {margin-bottom: 0;}
}

@media screen and (max-width:768px){
    .se05 {padding-bottom: 20%;}
    .se05 .tit dt {font-size: 7vw; margin-bottom: 30px;}
    .se05 ul {margin-top: 15%;}
    .se05 ul li {width: calc(99.9%/2 - 5%/2); margin-right: 5%; margin-bottom: 5%; box-shadow: 2px 3px 0 1px #000;}
    .se05 ul li dl dt {width: 30%; line-height: 0;}
    .se05 ul li dl dd {font-size: 3vw; margin-top: 0.5em;}
    .se05 ul li:nth-of-type(2n) {margin-right: 0;}
    .se05 ul li:nth-last-child(-n+2) {margin-bottom: 0;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se06 {background-image: url(../img/se06_Background.jpg); background-position: center; background-repeat: no-repeat; padding: 10% 0 15%; background-size: cover;}
.se06 .wrap {height: 100%; display: flex; flex-direction: column; justify-content: center;}
.se06 .tit {margin-bottom: 70px;}
.se06 .tit dt {font-size: 2.2rem; color: #fff; margin-bottom: 10px; font-family: 'Cafe24Ssurround'; letter-spacing: 2.5px;}
.se06 .tit dd {font-size: 5rem; color: #000; font-family: 'yg-jalnan'; text-shadow: 4px 4px 0 #fff; line-height: 1.3;}

.se06 .se06Slide {width: 100%; overflow:visible;}
.se06 .cardul {display: flex; width: 100%; position: relative; min-height: 350px;} 
.se06 .cardul > li {width: calc(115%/3); box-sizing: border-box; padding: 25px; box-shadow: 12px 12px 0 3px #000; border: 3px solid #000; border-radius: 20px; transform: rotate(-10deg); transition: .3s; position: absolute; background-repeat: no-repeat; background-position: right bottom; background-size: 40% auto; overflow: hidden;}

.se06 .cardul > li dt {font-size: 3rem; margin-bottom: 10px; font-family: 'Cafe24Ssurround'; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;  }
.se06 .cardul > li dd {font-size: 2rem; line-height: 1.3;}
.se06 .cardul > li .img {position: absolute; right: -10%; top: 70%; transform: translateY(-50%); z-index: -1; opacity: 0.5; transition: .3s;}

.se06 .cardul > li.slide01 {background-color: #68b9f2; left: 0; background-image: url(../img/se06_admin01.png);}
.se06 .cardul > li.slide02 {background-color: #96d1bc; left:50%; transform: translateX(-50%) rotate(-10deg); background-image: url(../img/se06_admin02.png);}
.se06 .cardul > li.slide03 {background-color: #ffd75e; right: 0; background-image: url(../img/se06_admin03.png);}

.se06 .overbox {background: #fff; margin-top: 15%; border-radius: 20px; position: relative; box-sizing: border-box; padding: 5%;     visibility: hidden; opacity: 0; transition: .3s;}
.se06 .overbox h2 {text-transform: uppercase;  position: absolute; top: 0; transform: translateY(-50%); font-size: 30px; font-family: 'Cafe24Ssurround'; margin-left: 5%; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; display: inline-block;}
.se06 .overbox h2 span {position: absolute; left: 0; top: 0; color: #68b9f2; transform: translate(1%,15%); z-index: -1; text-shadow: none; font-size: 30.2px; white-space: nowrap;}
.se06 .overbox ul li {display: flex; margin-bottom: 15px; font-size: 2rem; color: #444;}
.se06 .overbox ul li:last-child {margin-bottom: 0;}
.se06 .overbox ul li .number {border: 3px solid #000; border-radius: 1000px; background-position: center; background-size: 60% auto; background-repeat: no-repeat; margin-right: 10px; flex: 0 0 35px; box-shadow: 2px 2px 0 0 #000; max-height: 35px;}
.se06 .overbox ul li .number::after {content: ''; display: block; padding-bottom: 100%;}
.se06 .overbox ul li div:not(.number) {display: flex; align-items: center; line-height: 1.3;}

.se06 .cardul > li.slide01 .overbox h2 span {color: #68b9f2;}
.se06 .cardul > li.slide02 .overbox h2 span {color: #96d1bc;}
.se06 .cardul > li.slide03 .overbox h2 span {color: #ffd75e;}

.se06 .page {display: flex; justify-content: center; margin-top: 25px;}
.se06 .page li {width: 13px; height: 13px; border-radius: 1000px; background: #fff;margin-right: 3%; opacity: 1; transition: .3s;}
.se06 .page li:last-child {margin-right: 0;}

.se06 .page li.swiper-pagination-bullet-active {width: 50px;}

@media screen and (min-width:769px){
    .se06 .cardul > li {height: 80%;}
    /*se06 over*/
    .se06 .cardul > li:hover {transform: rotate(0); padding-bottom: 0; z-index: 2; height: 140%;}
    .se06 .cardul > li:hover .img {opacity: 1; right: 0; top: 35%;}
    .se06 .cardul > li:hover .overbox {visibility: visible; opacity: 1;}
    .se06 .cardul > li.slide02:hover {transform: translateX(-50%) rotate(0);}
}

@media screen and (max-width:1200px){
    .se06 .cardul > li dt {font-size: 2vw;}
    .se06 .cardul > li dd {font-size: 1.5vw;}
    .se06 .cardul > li {padding-bottom: 15%;}

    .se06 .overbox h2 {font-size: 2.5vw; margin-left: 3%;}
    .se06 .overbox h2 span {font-size: 2.55vw;}
    .se06 .overbox ul li {margin-bottom: 10px; padding: 5%;}
    .se06 .overbox ul li .number {margin-right: 5%;}
    .se06 .overbox ul li div:not(.number) {font-size: 1.6rem;}
}

@media screen and (max-width:768px){
    .se06 {height: auto; padding: 15% 0;}
    .se06 .tit {margin-bottom: 30px;}
    .se06 .tit dd {font-size: 6vw;}
    .se06 .se06Slide {overflow: hidden;}
    .se06 .cardul {min-height: 0; padding-top: 0;}
    .se06 .cardul > li {top: 0; padding:5%; position: static; width: auto; transform: none; box-shadow: none;}
    .se06 .cardul > li.slide02 {transform: none; left: auto;}
    .se06 .cardul > li dt {font-size: 6vw;}
    .se06 .cardul > li dd {font-size: 1.6rem;}
    .se06 .overbox {opacity: 1; visibility: visible; margin-top: 25px;}
    .se06 .overbox h2 {font-size: 5vw;}
    .se06 .overbox h2 span {font-size: 5.2vw;}
    .se06 .overbox ul li {padding: 0;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/

/*애니메이션 모음*/

@keyframes characterplay {
    0% {
        top :0;
        left: 0;
        box-shadow: 12px 12px 0 3px #000;
    }
    2% {
        top :4px;
        left: 4px;
        box-shadow: 0 0 0 0 #000;
    }
    4% {
        top :0;
        left: 0;
        box-shadow: 12px 12px 0 3px #000;
    }
    8% {
        top :4px;
        left: 4px;
        box-shadow: 0 0 0 0 #000;
    }
    10% {
        top :0;
        left: 0;
        box-shadow: 12px 12px 0 3px #000;
    }
    100% {
        top :0;
        left: 0;
        box-shadow: 12px 12px 0 3px #000;
    }
}

.donut {animation: donut 1s infinite alternate; transform-origin: center;}
.donut[setting="delay1"] {animation-duration: 1.5s;}
.bar {animation: bar 1s infinite alternate;}
.bar[setting="delay1"] {animation-duration: 1.5s;}
.fishcake {animation: fishcake 5s infinite;}
.fishcake[setting="delay1"] {animation-duration: 5.5s;}
.cloud {animation: cloud 2s infinite alternate;}
.lightning {animation: lightning 2s infinite alternate;}

@keyframes cloud {
    0%{
        transform: scaleY(0.5) skewX(0);
    }
    100%{
        transform: scaleY(1) skewX(5deg);
    }
}

@keyframes lightning{
    0%{
        -webkit-transform:scaleX(1);transform:scaleX(1)
    }
    10%,20%{
        -webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);
        transform:scale3d(.9,.9,.9) rotate(-3deg)
    }
    30%,50%,70%,90%{
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);
        transform:scale3d(1.1,1.1,1.1) rotate(3deg)
    }
    40%,60%,80%{
        -webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);
        transform:scale3d(1.1,1.1,1.1) rotate(-3deg)
    }
    to{
        -webkit-transform:scaleX(1);transform:scaleX(1)
    }
}

@keyframes donut {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(1.25, 0.75, 1);
    }
    40% {
        transform: scale3d(0.75, 1.25, 1);
    }
    50% {
        transform: scale3d(1.15, 0.85, 1);
    }
    65% {
        transform: scale3d(0.95, 1.05, 1);
    }
    75% {
        transform: scale3d(1.05, 0.95, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bar {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(25deg);
    }
}

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

@keyframes number_animationSpan {
    0%{
        transform: rotate(0);
    }
    50% {
        transform: rotate(25deg);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes number_animation {
    0%{
        transform: translate(0,-50%) rotate(0);
    }
    50%{
        transform: translate(80%,-50%) rotate(25deg);
    }
    100%{
        transform: translate(0,-50%) rotate(0);
    }
}

/*IE FIXED*/
@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    .se01 .abul li {flex: 1 0 auto;}
    br {visibility: hidden; opacity: 0;}
    html {overflow-x: hidden;}
}

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) and (max-width:800px) {
    
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.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;}
}