@charset "utf-8";


#wrap *{word-break:keep-all;}
#main01{position:relative; width:100%; height:100vh; overflow:hidden;}
#main01 .dimm{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:1;}
.mainSlide{position:relative; color:#fff; overflow:hidden;}
.mainSlide .slick-slide{position:relative; float:left; height:100vh; overflow:hidden;}
.mainSlide .slick-slide video{width:100%; height:100%; object-fit:cover; position:absolute; left:50%; transform:translateX(-50%);}
.mainSlide strong{position:absolute; z-index:3; text-align:center; font-size:10em; font-weight:900; text-transform:uppercase; letter-spacing:0; line-height:1em; left:50%; top:50%; transform:translate(-50%, -50%);}
.mainSlide p{position:absolute; left:60px; bottom:60px; font-size:2em; z-index:3; line-height:1.4;}

.mainCon .tit{display:block; font-size:7.5em; font-weight:900; color:#191919; }
.mainCon .bigText{font-size:17em; font-weight:900; text-transform:uppercase; letter-spacing:0; text-shadow: -2px 0 #191919, 0 2px #191919, 2px 0 #191919, 0 -2px #191919; color:#fff; position: absolute; white-space: nowrap; will-change: transform; animation: textMove 15s linear infinite;}
.mainCon .text{font-size:2.5em; color:#191919; font-weight:700; line-height:1.4;}

@keyframes textMove{
	0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(-100%);
  }
}


/* */
#main02{padding:10% 0; position:relative; overflow:hidden;}
#main02 > div{width:80%;  margin:10% auto 0; display:flex; position:relative;}
#main02 .textBox{background:#ff9833; padding:5% 7% 10%; width:55%; margin-top:5%;}
#main02 .tit, #main03 .tit{padding-bottom:5%;}
#main02 img{width:55%; position:absolute; top:0; right:0; object-fit:cover;}
#main02 .scroll{position:absolute; left:3%; bottom:10%; text-transform:uppercase; font-size:1.5em; color:#191919; letter-spacing:0; font-weight:bold; transform:rotate(-90deg);}
#main02 .scroll:before{content:''; position:absolute; left:0; bottom:-20px; border-bottom:1px solid #191919; height:1px; width:180px;}
#main02 .scroll:after{content:''; position:absolute; height:5px; width:20px; background:#191919; left:160px; bottom:-22px; animation:drop 2s infinite;}

@keyframes drop{
	0{left:160px; opacity:1;}
	100%{left:0; opacity:0;}
}


/**/
#main03{display:flex; flex-wrap: wrap; align-items:center;}
#main03 .imgArea{width:65%; height:70vh; background:url('../img/main/main03_img.jpg') no-repeat 0 0 / cover; /*background-attachment: fixed;*/}
#main03 .textBox{width:35%; padding-left:5%;}

#main03 a, #main07 .textBox a{display:flex; align-items:center; justify-content:center; width:240px; height:60px; border-radius:30px; overflow:hidden; color:#fff; font-size:2em; font-weight:700; margin-top:50px; position:relative;}
#main03 a:before , #main07 .textBox a:before{content:''; position:absolute; width:100%; height:100%; left:50%; top:50%; transform:translate(-50%,-50%); background:#ff9833; z-index:-1;}
#main03 a:after, #main07 .textBox a:after{content:''; position:absolute; width:0px; height:0px; left:50%; top:50%; transform:translate(-50%,-50%); background:#191919; z-index:-1; transition:all 0.5s; border-radius:50%;}
#main03 a:hover:after, #main07 .textBox a:hover:after{width:100%; height:400%;}


/* 파트너 */
#main04{width:100%; padding:10% 0; overflow:hidden;}
#main04 .titArea{width:1400px; margin:0 auto;}
#main04 .titArea span, #main07 .textBox span{font-size:2.5em; color:#191919; letter-spacing:0; font-weight:700; display:block; padding-bottom:30px; text-transform:uppercase;}
.partnerSlide{width:3500px; position:relative; display:flex; padding-top:5%; animation: bannermove 10s linear infinite;}
.partnerSlide li{padding:0 3%; display:flex; align-items:center; justify-content:center; width:350px;}

@keyframes bannermove {
  0% {
      transform: translate(0, 0);
  }
  100% {
      transform: translate(-50%, 0);
  }
}



/* 포폴 */
#main05{padding:10% 0;}
#main05 .bigText{text-shadow:-2px 0 #e7973e, 0 2px #e7973e, 2px 0 #e7973e, 0 -2px #e7973e;}
.pfSlide {position:relative;}
.pfSlide .slick-slide{background:#f4f4f4; position:relative; height:600px; overflow:hidden; float:left; margin:0 25px;}
.pfSlide .slick-slide img{transform:translate(-10%, 30%);}
.pfSlide .textArea{width:70%; background:#fff; padding:40px 20px; position:absolute; left:0; bottom:0;}
.pfSlide .textArea strong{color:#ff9833; font-size:2em; font-weight:bold;}
.pfSlide .textArea p{font-size:3.5em; color:#191919; font-weight:bold; padding:30px 0 10px;}
.pfSlide .textArea span{color:#666; font-size:2em;}
.pfSlide .slick-arrow{position:absolute; right:40px; top:-140px; width:100px; height:100px; border-radius:50%; border:2px solid #c2c2c2; overflow:hidden; text-indent:-999px;}
.pfSlide .slick-prev{right:160px;}
.pfSlide .slick-arrow:after{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:55px; height:2px; background:#c2c2c2;}
.pfSlide .slick-prev:before{content:''; position:absolute; left:50%; top:50%; width:20px; height:2px; background:#c2c2c2; transform:translate(-30px,-8px) rotate(-45deg);}
.pfSlide .slick-next:before{content:''; position:absolute; left:50%; top:50%; width:20px; height:2px; background:#c2c2c2; transform:translate(10px,6px) rotate(-45deg);}


/**/
#main06 > ul{display:flex;}
#main06 > ul > li{width:33.33%; height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; cursor:pointer; }
#main06 > ul > li:before{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1; transition:all 0.5s;}
#main06 > ul > li > img{filter: grayscale(100%); width:100%; height:100%; object-fit: cover; transition:all 0.5s;}
#main06 .textBox{position:absolute; z-index:2; color:#fff; padding:0 10%;}
#main06 .textBox span{display:block; font-size:3em; padding-bottom:80px; letter-spacing:0; font-weight:bold;}
#main06 .textBox strong{display:block; font-size:7em;}
#main06 .textBox p{opacity:0; transform:translateY(30px); transition:all 0.5s; font-size:2em; line-height:1.6; padding-top:10%;}
#main06 .con04{justify-content:center;}
#main06 .con04:before{background:rgba(255,152,51,0.9);}
#main06 .con04 .textBox{text-align:center;}
#main06 .con04 .textBox p{display:block; font-size:2.5em; font-weight:bold; padding-top:15%;}

#main06 > ul > li:hover:before{opacity:0.4;}
#main06 > ul > li:hover p{opacity:1; transform:translateY(0);}
#main06 > ul > li:hover > img{filter: grayscale(0); transform:scale(1.2);}
#main06 .con04:hover:before{background:#ff9833; opacity:1;}
#main06 .con04 .textBox img{margin-bottom:15%;}


/**/
#main07{padding:5% 0; position:relative; display:flex;}
#main07 .textBox{width:35%; padding-left:10%;}
#main07 .boardBox{width:60%;}