@charset "utf-8";

html {background: #fff;}

img {max-width:100%;}

#wrap {overflow:hidden;}

#vis {height:100vh;position:relative;background:url(../images/main.jpg) no-repeat 50% 50%;background-size:cover;position:relative;}
#vis:before {content:"";display:block;height:110px;position:absolute;left:13%;bottom:0;width:87%;background:#fff;}
#vis .title {position:absolute;bottom:110px;right:20px;width:66.77%;}
#vis .title img {display:block;}
#vis .title i {position:absolute;left:0;bottom:0;width:100%;height:0;background:url(../images/vis-txt2.png) no-repeat 0 100%;background-size:100% auto;transition:2.5s;}
#vis.active .title i {height:100%;}

@media all and (max-width:1024px){
	#vis {height:auto;padding-top:80.25%;}
	#vis:before {height:17%;left:17%;width:83%;}
	#vis .title {bottom:17%;right:5px;width:68%;}
}

#footer {background:#333;padding:50px 15px;color:#fff;font-size:14px;line-height:1.5em;font-family:'Noto Sans KR',sans-serif;}
#footer .inner {max-width:1300px;margin:0 auto;}
#footer address span {display:inline-block;margin-right:15px;}
#footer address span:last-child {margin-right:0;}
#footer .copy {margin-top:15px;}

@media all and (max-width:1024px){
	#footer {padding:25px 15px;font-size:13px;}
}





.txt {color:#000;position:relative;z-index:10;}
.txt h1 {padding-bottom:20px;margin-bottom:25px;position:relative;}
.txt h1:before {content:"";display:block;height:6px;position:absolute;bottom:0;width:200%;background:#aee300;}
.txt h1 span {display:inline-block;position:relative;font-size:50px;letter-spacing:0.05em;padding-right:17px;}
.txt h1 span:before {content:"";display:block;width:10px;height:10px;position:absolute;right:0;top:-2px;background:#aee300;border-radius:50%;}
.txt h2 {font-size:40px;font-weight:bold;color:#000;margin-bottom:15px;}
.txt .info dl ~ dl {margin-top:35px;}
.txt .info dl dt {font-size:30px;font-weight:bold;margin-bottom:10px;line-height:1.3em;letter-spacing:-0.05em;}
.txt .info dl dd,
.txt .info p {font-size:20px;line-height:1.8em;letter-spacing:-0.05em;}
.slogan {font-family:'Poppins',sans-serif;font-size:122px;line-height:0.9em;color:transparent;font-weight:600;-webkit-text-stroke-width:3px;-webkit-text-stroke-color:#dafa00;letter-spacing:0.05em;}

#about {padding:345px 15px 185px;position:relative;}
#about .inner {max-width:1700px;margin:0 auto;position:relative;}
#about .img {position:absolute;left:50%;top:-50px;margin-left:-160px;}
#about .img span {display:block;position:relative;}
#about .txt {width:40%;}
#about .txt h1:before {right:0;width:1000%;}
#about .slogan {position:absolute;right:0;bottom:5%;white-space:nowrap;}
#about .slogan .in {width:0;transition:2s;overflow:hidden;transform:translate3d(-20px,0,0);transition-delay:0.6s;}
#about .slogan.aos-animate .in {width:100%;transform:translate3d(0,0,0);}

@media all and (max-width:1024px){
	.txt h1 {padding-bottom:15px;margin-bottom:15px;}
	.txt h1:before {height:3px;}
	.txt h1 span {font-size:6.25vw;padding-right:2vw;}
	.txt h1 span:before {width:1.25vw;height:1.25vw;}
	.txt h2 {font-size:5vw;margin-bottom:10px;}
	.txt .info dl ~ dl {margin-top:20px;}
	.txt .info dl dt {font-size:3.75vw;margin-bottom:5px;}
	.txt .info dl dd,
	.txt .info p {font-size:2.5vw;line-height:1.8em;}

	#about {padding:0 15px 50px;}
	#about .head {position:relative;margin-bottom:15px;}
	#about .img {position:relative;left:0;top:0;margin:0;padding:0 60px;}
	#about .txt {width:auto;}
	#about .slogan {font-size:8.75vw;right:3vw;white-space:nowrap;text-align:right;-webkit-text-stroke-width:2px;}
	#about .slogan p {width:50vw;}
}




#menu {background:#fffcf4;position:relative;}
#menu .inner {position:relative;z-index:10;}
#menu .txt h1:before {left:0;width:calc(100% + 130px);background:#fbca5a;}
#menu .txt h1 span:before {background:#fbca5a;}
#menu .area {height:810px;padding-left:50%;position:relative;}
#menu .area .img {position:absolute;left:50%;margin-left:-823px;top:0;width:1646px;}
#menu .area .cont {padding:260px 0 0 65px;position:relative;z-index:10;}
#menu	.prev,
#menu	.next {border:none;background:none;position:absolute;top:50%;margin-top:-0.5em;line-height:1em;font-size:25px;font-weight:bold;color:#000;z-index:50;letter-spacing:-0.05em;}
#menu	.prev {left:40px;padding-left:40px;background:url(../images/menu-prev.png) no-repeat 0 50%;background-size:11px auto;}
#menu	.next {right:40px;padding-right:40px;background:url(../images/menu-next.png) no-repeat 100% 50%;background-size:11px auto;}

@media all and (max-width:1024px){
	#menu {background:#fff;}
	#menu:before {content:"";display:block;position:absolute;left:0;bottom:0;width:100%;height:62%;background:linear-gradient(to bottom, #fffcf4 0%,#fff 100%);}
	#menu .txt h1:before {width:200%;}
	#menu .area {height:auto;padding-left:0;}
	#menu .area .img {position:relative;left:0;margin-left:0;width:auto;}
	#menu .area .cont {padding:0 30px;}
	#menu .head {position:relative;}
	#menu .prev,
	#menu .next {top:50%;margin-top:-40px;font-size:0;text-indent:-9999px;width:60px;height:80px;}
	#menu .prev {left:0;padding-left:0;background-image:url(../images/menu-prev-m.png);background-size:11.5px auto;background-position:50% 50%;}
	#menu .next {right:0;padding-right:0;background-image:url(../images/menu-next-m.png);background-size:11.5px auto;background-position:50% 50%;}
	#menu .txt .info p {min-height:18em;}
}





#color {padding:245px 15px 0;height:1220px;position:relative;}
#color .inner {max-width:1700px;margin:0 auto;}
#color .img {position:absolute;right:50%;top:112px;margin-right:-72px;width:calc(50% + 72px);height:867px;background:url(../images/color.png) no-repeat 100% 0;}
#color .img:before {content:"";display:block;background:#47e1bf;height:290px;position:absolute;left:100%;top:423px;width:1000%;}
#color .img img {display:none;}
#color .img p {font-size:24px;font-weight:300;font-family:'Poppins',sans-serif;position:absolute;color:#fff;width:5em;visibility:hidden;}
#color .img .code1 {right:275px;top:28px;}
#color .img .code2 {right:30px;top:174px;}
#color .img .code3 {left:30px;top:294px;}
#color .img .code4 {right:386px;top:580px;}
#color .img .code5 {left:3 0px;top:690px;}
#color .img .code6 {right:306px;top:730px;}
#color .txt {margin-left:50%;padding-left:130px;position:relative;z-index:10;}
#color .txt h1:before {left:0;background:#47e1bf;}
#color .txt h1 span:before {background:#47e1bf;}

@media all and (max-width:1024px){
	#color {padding:0;height:auto;}
	#color .img {position:relative;right:0;top:0;margin-right:15.625%;width:84.375%;height:auto;background:none;}
	#color .img:before {left:100%;top:18.1%;height:200%;}
	#color .img img {display:block;width:100%;}
	#color .img p {font-size:2vw;width:5em;}
	#color .img .code1 {right:27%;top:5%;}
	#color .img .code2 {right:8%;top:24%;}
	#color .img .code3 {left:3%;top:31%;}
	#color .img .code4 {right:38%;top:67%;}
	#color .img .code5 {left:3%;top:81%;}
	#color .img .code6 {right:29%;top:85%;}
	#color .txt {margin:0;padding:50px 0 0 30px;}
}



#main {background:#fbf8ff;padding:200px 15px 0;height:1035px;position:relative;}
#main .inner {max-width:1700px;margin:0 auto;}
#main .browser {position:absolute;left:50%;margin-left:-250px;top:-84px;width:1211px;font-size:0;box-shadow:0 10px 20px rgb(0,0,0,0.2);}
#main .browser .con {height:818px;overflow:hidden;}
#main .browser .con img {display:block;}
#main .browser .con.active img {animation:browser 6s linear infinite;}
#main .txt h1 {width:480px;}
#main .txt h1:before {right:0;background:#653b93;}
#main .txt h1 span:before {background:#653b93;}
#main .slogan {text-align:right;-webkit-text-stroke-color:#653b93;position:absolute;right:50%;margin-right:-50px;top:680px;}
#main .slogan .in {width:0;transition:2s;overflow:hidden;transform:translate3d(-20px,0,0);transition-delay:0.6s;white-space:nowrap;}
#main .slogan .in p {width:685px;}
#main .slogan.aos-animate .in {width:100%;transform:translate3d(0,0,0);}

@keyframes browser {
	0 {transform:translate3d(0,0,0);}
	50% {transform:translate3d(0,-87px,0);}
	100% {transform:translate3d(0,0,0);}
}

@media all and (max-width:1024px){
	#main {margin-top:20vw;height:auto;padding:0;}
	#main .sec {position:relative;padding-left:11vw;top:-6.25vw;}
	#main .browser {position:relative;left:0;margin:0;top:0;width:93.75vw;}
	#main .browser .con {height:60.875vw;}
	#main .slogan {right:0;left:auto;margin-right:0;top:92%;z-index:20;font-size:7.75vw;-webkit-text-stroke-width:2px;}
	#main .slogan .in {width:0;transition:2s;overflow:hidden;transform:translate3d(-20px,0,0);transition-delay:0.6s;white-space:nowrap;}
	#main .slogan .in p {width:5.7em;}
	#main .slogan.aos-animate .in {width:100%;transform:translate3d(0,0,0);}
	#main .txt {padding:60px 30px;}
	#main .txt h1 {width:55vw;}

	@keyframes browser {
		0 {transform:translate3d(0,0,0);}
		50% {transform:translate3d(0,-9.5vw,0);}
		100% {transform:translate3d(0,0,0);}
	}
}



#mobile {padding:150px 0 0;height:1465px;}
#mobile .inner {max-width:1700px;margin:0 auto;padding:45px 0 0 574px;position:relative;}
#mobile .big {width:559px;height:1125px;background:url(../images/mobile-phone.png) no-repeat;padding:37px 38px 35px 37px;position:absolute;left:15px;top:0;box-shadow:0 0 30px rgba(0,0,0,0.2);border-radius:85px;z-index:100;}
#mobile .big .img {border-radius:50px;height:1053px;overflow:auto;}
#mobile .thm .area {overflow:visible;}
#mobile .thm .head {position:relative;padding-left:185px;margin-bottom:40px;}
#mobile .thm .head h4 {left:0;top:50%;margin-top:-0.5em;line-height:1em;font-size:14px;color:#e7325b;width:185px;text-align:right;padding-right:20px;position:absolute;}
#mobile .thm .head .scr {height:8px;position:relative;}
#mobile .thm .head .scr:before {content:"";display:block;height:2px;background:#e6e6e6;position:absolute;left:0;top:50%;margin-top:-1px;width:100%;}
#mobile .thm .head .scr .swiper-scrollbar-drag {background:#e7325b;}
#mobile .thm .head .page span {display:block;position:absolute;right:15px;font-size:12px;color:#e7325b;}
#mobile .thm .head .page .num {bottom:100%;margin-bottom:8px;}
#mobile .thm .head .page .all {top:100%;margin-top:8px;}
#mobile .thm .box {width:490px;}
#mobile .thm .box .in {position:relative;background:#000;display:block;}
#mobile .thm .box .in img {opacity:0.38;display:block;position:relative;transition:0.3s;}
#mobile .thm .box .in .flt {position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;font-size:0;white-space:nowrap;transition:0.3s;}
#mobile .thm .box .in .flt:after {content:'';display:inline-block;width:0;height:100%;vertical-align:middle;}
#mobile .thm .box .in .flt dl {display:inline-block;vertical-align:middle;white-space:normal;width:100%;color:#fff;}
#mobile .thm .box .in .flt dl dt {font-size:25px;font-weight:bold;line-height:1.4em;}
#mobile .thm .box .in .flt dl dd {font-size:20px;margin-top:5px;line-height:1.4em;}
#mobile .thm .box.active .in img {opacity:1;}
#mobile .thm .box.active .in .flt {opacity:0;}
#mobile .txt {position:absolute;left:685px;top:750px;}
#mobile .txt h1:before {left:0;background:#e6315a;}
#mobile .txt h1 span:before {background:#e6315a;}

@media all and (max-width:1024px){
	#mobile {padding:80px 0 0;height:auto;}
	#mobile .inner {padding:0;}
	#mobile .big {position:relative;left:0;top:0;border-radius:10vw;z-index:100;width:65vw;height:130vw;padding:4.375vw;margin:0 auto;background-size:100% 100%;}
	#mobile .big .img {border-radius:5vw;height:121.25vw;overflow:auto;}

	#mobile .thm {margin-top:30px;}
	#mobile .thm .head {padding-left:13vw;margin-bottom:10px;}
	#mobile .thm .head h4 {left:10px;top:50%;margin-top:-0.5em;line-height:1em;font-size:2vw;width:10vw;padding-right:10px;}
	#mobile .thm .box {width:34vw;}
	#mobile .thm .box .in .flt dl dt {font-size:3vw;}
	#mobile .thm .box .in .flt dl dd {font-size:2.5vw;}

	#mobile .txt {position:relative;left:0;top:0;padding:0 30px 30px;}
}




#event {background:#faffff;padding:0 15px 0;height:1085px;position:relative;box-shadow:inset 0 -525px 0 #00b2bb;}
#event .inner {max-width:1700px;margin:0 auto;position:relative;z-index:10;padding-top:175px;}

#event .txt {width:560px;}
#event .txt h1:before {right:0;background:#00b2bb;}
#event .txt h1 span:before {background:#00b2bb;}

#event .big {position:absolute;left:50%;top:110px;margin-left:-35px;width:999px;}

#event .thm {margin:60px 0 0;white-space:nowrap;font-size:0;}
#event .thm li {display:inline-block;vertical-align:top;position:relative;margin-right:30px;}
#event .thm li a {display:block;position:relative;background:#000;}
#event .thm li a img {transition:0.3s;opacity:0.42;}
#event .thm li.active a img {opacity:1;}

@media all and (max-width:1024px){
	#event {padding:0 30px 80px;height:auto;position:relative;box-shadow:none;}
	#event:before {content:"";display:block;position:absolute;left:0;bottom:0;width:100%;height:60%;background:#00b2bb;}
	#event .inner {padding-top:80px;}
	#event .txt {width:auto;}
	#event .txt h1 {width:69.25vw;}
	#event .big {position:relative;left:0;top:0;margin:25px -30px 0 0;width:auto;}
	#event .thm {margin:25px -14px 0;}
	#event .thm li {margin:0;padding:0 14px;width:33.33333%;}
}



#what {background:#f2f2f2;padding:0 50px;text-align:center;}
#what .inner {max-width:1700px;margin:0 auto;background:#fff;padding:130px;border-radius:100px 100px 0 0;margin-top:-72px;position:relative;}
#what .txt h1:before {left:50%;width:620px;margin-left:-310px;background:#00b2bb;}
#what .txt h1 span:before {background:#00b2bb;}
#what .txt .info dl dd span {display:block;color:#00b2bb;font-size:25px;margin-top:3px;}

#what .slogan {position:absolute;right:45px;top:-100px;white-space:nowrap;-webkit-text-stroke-color:#43c9d5;font-size:238px;z-index:100;}
#what .slogan .in {width:0;transition:2s;overflow:hidden;transform:translate3d(-20px,0,0);transition-delay:0.6s;}
#what .slogan.aos-animate .in {width:100%;transform:translate3d(0,0,0);}
#what .area {text-align:center;font-size:0;padding:0 0 140px;margin:0 -30px;white-space:nowrap;}
#what .area .box {display:inline-block;vertical-align:top;width:25%;position:relative;transition:0.3s;border-radius:0 0 100px 100px;overflow:hidden;}
#what .area .box ~ .box {margin-left:-10.9%;}
#what .area .box img {display:block;width:100%;}
#what .area .box .flt {position:absolute;left:0;bottom:0;width:100%;transition:0.3s;overflow:hidden;border-radius:100px 100px 0 0;}
#what .area .box .flt dl {position:absolute;left:0;top:0;width:100%;height:100%;padding:35% 15px 0;color:#fff;white-space:normal;}
#what .area .box .flt dl dt span {display:inline-block;position:relative;width:280px;border-bottom:6px solid #ffaa00;padding-bottom:17px;font-size:36px;font-weight:bold;}
#what .area .box .flt dl dt span strong {display:inline-block;position:relative;}
#what .area .box .flt dl dt span strong:before {content:"";display:block;position:absolute;left:100%;top:-10px;margin-left:10px;width:10px;height:10px;background:#ffaa00;border-radius:50%;}
#what .area .box .flt dl .txt {font-size:26px;line-height:1.4em;color:#fff;margin-top:20px;letter-spacing:-0.05em;}
#what .area .box .flt dl .sum {font-size:21px;line-height:1.5em;color:#fff;margin-top:15px;letter-spacing:-0.05em;}
#what .area .box6 {z-index:6;}
#what .area .box5 {z-index:5;}
#what .area .box4 {z-index:4;}
#what .area .box3 {z-index:3;}
#what .area .box2 {z-index:2;}
#what .area .box1 {z-index:1;}

#what .area .box2 .flt dl dt span {border-bottom-color:#75f9ff;}
#what .area .box2 .flt dl dt span strong:before {background:#75f9ff;}
#what .area .box3 .flt dl dt span {border-bottom-color:#ff959d;}
#what .area .box3 .flt dl dt span strong:before {background:#ff959d;}
#what .area .box4 .flt dl dt span {border-bottom-color:#dec0ff;}
#what .area .box4 .flt dl dt span strong:before {background:#dec0ff;}
#what .area .box5 .flt dl dt span {border-bottom-color:#bae5ff;}
#what .area .box5 .flt dl dt span strong:before {background:#bae5ff;}
#what .area .box6 .flt dl dt span {border-bottom-color:#faffc9;}
#what .area .box6 .flt dl dt span strong:before {background:#faffc9;}

#what .area .box:hover {box-shadow:0 0 20px rgba(0,0,0,0.3);z-index:10;}
#what .area .box:hover .flt {box-shadow:0 0 20px rgba(0,0,0,0.3);}

@media all and (max-width:1600px){
	#what .area .box .flt dl {padding:25% 15px 0;}
	#what .area .box .flt dl dt span {font-size:30px;width:240px;}
	#what .area .box .flt dl .txt {font-size:22px;}
	#what .area .box .flt dl .sum {font-size:18px;}
}

@media all and (max-width:1240px){
	#what .area .box .flt dl {padding:20% 15px 0;}
	#what .area .box .flt dl dt span {font-size:28px;width:220px;}
	#what .area .box .flt dl .txt {font-size:22px;}
	#what .area .box .flt dl .sum {font-size:16px;}
}

@media all and (max-width:1024px){
	#what {padding:0 0 70px;background:none;position:relative;}
	#what:before {content:"";display:block;position:absolute;left:0;bottom:0;width:100%;height:45%;background:#f2f2f2;}
	#what .inner {padding:80px 30px 0;border-radius:0;margin-top:0;position:relative;z-index:10;}
	#what .txt h1:before {left:0;width:100%;margin-left:0;}
	#what .txt .info dl dd span {font-size:1.3em;}
	#what .slogan {right:0;top:-12vw;font-size:26vw;z-index:100;-webkit-text-stroke-width:2px;}

	#what .area {padding:0;margin:20px 0 0;background:none;position:relative;z-index:10;}
	#what .area .slick-slide > div {width:64.75vw;margin:0 auto;}
	#what .area .box {display:block;width:auto;border-radius:0 0 13vw 13vw;}
	#what .area .box .flt {border-radius:13vw 13vw 0 0;}
	#what .area .box .flt dl {padding:25vw 15px 0;}
	#what .area .box .flt dl dt span {width:35vw;border-bottom:3px solid #ffaa00;padding-bottom:10px;font-size:4.5vw;}
	#what .area .box .flt dl dt span strong:before {margin-left:10px;width:1.5vw;height:1.5vw;}
	#what .area .box .flt dl .txt {font-size:3.25vw;line-height:1.4em;margin-top:15px;}
	#what .area .box .flt dl .sum {font-size:2.625vw;line-height:1.5em;margin-top:10px;}

	#what .area .box:hover {box-shadow:none;}
	#what .area .box:hover .flt {box-shadow:none;}
	#what .slick-dots {margin-top:40px;text-align:center;}
	#what .slick-dots li {display:inline-block;vertical-align:top;margin:0 6px;}
	#what .slick-dots li button {box-sizing:border-box;width:12px;height:12px;border-radius:50%;background:none;border:2px solid #a6a6a6;text-indent:-9999px;}
	#what .slick-dots .slick-active button {background:#00b2bb;border-color:#00b2bb;}
}




#next {display:block;position:relative;background:url(/img/pt_next/media_1_ptView.jpg) no-repeat 50% 50%;background-size:cover;padding:0 15px;}
#next .inner {max-width:1200px;margin:0 auto;position:relative;height:560px;}
#next dl {color:#fff;position:absolute;left:0;top:150px;}
#next dl dt {font-family:'Poppins',sans-serif;font-size:20px;letter-spacing:0;}
#next dl dd {font-family:'Noto Sans KR',sans-serif;font-size:60px;font-weight:bold;margin-top:10px;letter-spacing:0.025em;}

@media all and (max-width:1024px){
	#next {padding:70px 30px;}
	#next .inner {height:auto;}
	#next dl {position:relative;top:0;}
	#next dl dt {font-size:3vw;}
	#next dl dd {font-size:6vw;}

}




/* IE ONLY */
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){
	#about .slogan {font-weight:normal;color:#fff;text-shadow:-3px -3px 0 #dafa00,3px -3px 0 #dafa00,-3px 3px 0 #dafa00,3px 3px 0 #dafa00;}
	#main .slogan {font-weight:normal;color:#fff;text-shadow:-3px -3px 0 #653b93,3px -3px 0 #653b93,-3px 3px 0 #653b93,3px 3px 0 #653b93;}
	#what .slogan {font-weight:normal;color:#fff;text-shadow:-3px -3px 0 #43c9d5,3px -3px 0 #43c9d5,-3px 3px 0 #43c9d5,3px 3px 0 #43c9d5;}
}

/*추가*/
.inner .txt h1 a {position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 18px; color: #aee300;}

#menu .prev {animation: nextplay 1s infinite alternate-reverse;}
#menu .next {animation: nextplay 1s infinite alternate;}


@keyframes nextplay{
    0%{
        transform: translateX(-10px);
    }
    100%{
        transform: translateX(10px);
    }
}

#mobile .thm .box {overflow: hidden;}
#mobile .thm .box span {background:#aee300; position: absolute; z-index: 5;}
#mobile .thm .box span:nth-of-type(1) {width: 100%; height: 5px; top: 0; left: 0;transform: scaleX(0); transform-origin: left;}
#mobile .thm .box span:nth-of-type(2) {height: 100%; width: 5px; right: 0; transform: scaleY(0); transform-origin: top;}
#mobile .thm .box span:nth-of-type(3) {height: 5px; width: 100%; bottom: 0; right: 0; transform: scaleX(0); transform-origin: right;}
#mobile .thm .box span:nth-of-type(4) {height: 100%; width: 5px; left: 0; bottom: 0; transform: scaleY(0); transform-origin: bottom;}
#mobile .thm .box.active span:nth-of-type(1) {animation: spanleft 3s infinite linear;}
#mobile .thm .box.active span:nth-of-type(2) {animation: spanTop 3s infinite linear; animation-delay: 1.5s;}
#mobile .thm .box.active span:nth-of-type(3) {animation: spanright 3s infinite linear; animation-delay: 3s;}
#mobile .thm .box.active span:nth-of-type(4) {animation: spanBt 3s infinite linear; animation-delay: 4.5s;}

#event .thm li {overflow: hidden;}
#event .thm li span {background:#aee300; position: absolute; z-index: 5;}
#event .thm li span:nth-of-type(1) {width: 100%; height: 5px; top: 0; left: 0;transform: scaleX(0); transform-origin: left;}
#event .thm li span:nth-of-type(2) {height: 100%; width: 5px; right: 0; transform: scaleY(0); transform-origin: top;}
#event .thm li span:nth-of-type(3) {height: 5px; width: 100%; bottom: 0; right: 0; transform: scaleX(0); transform-origin: right;}
#event .thm li span:nth-of-type(4) {height: 100%; width: 5px; left: 0; bottom: 0; transform: scaleY(0); transform-origin: bottom;}
#event .thm li.active span:nth-of-type(1) {animation: spanleft 3s infinite linear;}
#event .thm li.active span:nth-of-type(2) {animation: spanTop 3s infinite linear; animation-delay: 1.5s;}
#event .thm li.active span:nth-of-type(3) {animation: spanright 3s infinite linear; animation-delay: 3s;}
#event .thm li.active span:nth-of-type(4) {animation: spanBt 3s infinite linear; animation-delay: 4.5s;}

@keyframes spanleft {
    0%{
        transform: scaleX(0);
        transform-origin: left;
    }
    50%{
        transform: scaleX(1);
        transform-origin: left;
    }
    50.1%{
        transform: scaleX(1);
        transform-origin: right;
    }
    100%{
        transform: scaleX(0);
        transform-origin: right;
    }
}

@keyframes spanright {
    0%{
        transform: scaleX(0);
        transform-origin: right;
    }
    50%{
        transform: scaleX(1);
        transform-origin: right;
    }
    50.1%{
        transform: scaleX(1);
        transform-origin: left;
    }
    100%{
        transform: scaleX(0);
        transform-origin: left;
    }
}

@keyframes spanBt {
    0%{
        transform: scaleY(0);
        transform-origin: bottom;
    }
    50%{
        transform: scaleY(1);
        transform-origin: bottom;
    }
    50.1%{
        transform: scaleY(1);
        transform-origin: top;
    }
    100%{
        transform: scaleY(0);
        transform-origin: top;
    }
}

@keyframes spanTop {
    0%{
        transform: scaleY(0);
        transform-origin: top;
    }
    50%{
        transform: scaleY(1);
        transform-origin: top;
    }
    50.1%{
        transform: scaleY(1);
        transform-origin: bottom;
    }
    100%{
        transform: scaleY(0);
        transform-origin: bottom;
    }
}

#what .area .box:hover {transform: translateY(-50px);}
#mobile .thm .area {margin-top: 40px;}
#mobile .thm .head {display: none !important;}