@charset "utf-8";

#contents	{min-width:1275px;}
#contents.main	{padding-top:52px}
#contents.main .cont_center	{width:1160px; margin:0 auto; overflow:hidden;}


/*메인슬라이드*/
.main #vis {height: 750px}
.main #vis .swiper-slide {overflow: hidden}
.main .main_wrap {width: 1275px;margin: 0 auto}

.main #vis .wrap {position: relative;width: 1210px;margin: 0 auto}
.main #vis .sw_a {position: absolute}
.main #vis .sw1 {background: url('../../images/main/visual/vis01_bg.jpg') no-repeat center;background-size:cover;height: 750px}
.main #vis .sw1 .sw_a1 {top: 0;left: 286px;opacity: 0;animation:none}

.main #vis .sw1 .sw_a2 {top: 522px;left: 381px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_1 { top: 522px;left: 412px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_2 {top: 522px;left: 448px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_3 {top: 522px;left: 503px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_4 {top: 522px;left: 536px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_5 {top: 522px;left: 571px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_6 {top: 522px;left: 607px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_7 {top: 522px;left: 663px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_8 {top: 522px;left: 697px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_9 {top: 522px;left: 728px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_10 {top: 522px;left: 761px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_11 {top: 522px;left: 793px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a2_12 {top: 522px;left: 827px;color:#767672;animation:none;font-size:20px;opacity:0}
.main #vis .sw1 .sw_a3 {top: 209px;left: 482px;animation:none;opacity:0;width:237px;height:69px}
.main #vis .sw1 .sw_a4 {top: 263px;left:331px;animation:none;opacity:0;width:560px;height:104px}
.main #vis .sw1 .sw_a5 {top: 450px;left:343px;animation:none;opacity:0;width:524px;height:47px;background-color:#5f5fa7}
.main #vis .sw1 .sw_a6 {top: 460px;left:375px;animation:none;opacity:0;font-size:18px;color:#fff;font-weight:300;letter-spacing:-1px}
.main #vis .sw1 .sw_a6_1 {top: 460px;left:511px;animation:none;opacity:0;font-size:18px;color:#fff;font-weight:300;letter-spacing:-1px}
.main #vis .sw1 .sw_a6_2 {top: 460px;left:673px;animation:none;opacity:0;font-size:18px;color:#fff;font-weight:300;letter-spacing:-1px}
.main #vis .sw1 .sw_a7 {top: 72px;left:20px;animation:none;opacity:0;width:110px;height:316px}
.main #vis .sw1 .sw_a8 {top: 320px;right:180px;animation:none;opacity:0;width:38px;height:175px}
.main #vis .sw1 .sw_a9 {top:647px;left:-113px;animation:none;opacity:0;width:225px;height:55px}
.main #vis .sw1 .sw_a10 {top:647px;right:-160px;animation:none;opacity:0;width:235px;height:55px}

.main #vis .sw1.on .sw_a1 {animation: vis_ani1_1 .7s .5s 1 ease forwards;}
.main #vis .sw1.on .sw_a2 {animation: vis_ani2 .7s .8s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_1 {animation: vis_ani2_1 .7s 1s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_2 {animation: vis_ani2_2 .7s 1.1s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_3 {animation: vis_ani2_3 .7s 1.2s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_4 {animation: vis_ani2_4 .7s 1.3s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_5 {animation: vis_ani2_5 .7s 1.4s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_6 {animation: vis_ani2_6 .7s 1.5s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_7 {animation: vis_ani2_7 .7s 1.6s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_8 {animation: vis_ani2_8 .7s 1.7s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_9 {animation: vis_ani2_9 .7s 1.8s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_10 {animation: vis_ani2_10 .7s 1.9s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_11 {animation: vis_ani2_11 .7s 2s 1 ease forwards;}
.main #vis .sw1.on .sw_a2_12 {animation: vis_ani2_12 .7s 2.1s 1 ease forwards;}
.main #vis .sw1.on .sw_a3 {animation: vis_ani3 .5s 2.6s 1 ease forwards;}
.main #vis .sw1.on .sw_a4 {animation: vis_ani4 .5s 3s 1 ease forwards;}
.main #vis .sw1.on .sw_a5 {animation: vis_ani5 .7s 3.5s 1 ease forwards;}
.main #vis .sw1.on .sw_a6 {animation: vis_ani6 .7s 4s 1 ease forwards;}
.main #vis .sw1.on .sw_a6_1 {animation: vis_ani6 .7s 4.3s 1 ease forwards;}
.main #vis .sw1.on .sw_a6_2 {animation: vis_ani6 .7s 4.6s 1 ease forwards;}
.main #vis .sw1.on .sw_a7 {animation: vis_ani7 1s 5s 1 ease forwards;}
.main #vis .sw1.on .sw_a8 {animation: vis_ani8 1s 5.3s 1 ease forwards;}
.main #vis .sw1.on .sw_a9 {animation: vis_ani9 .7s 5.8s 1 ease forwards;}
.main #vis .sw1.on .sw_a10 {animation: vis_ani9 .7s 5.8s 1 ease forwards;}

@keyframes vis_ani1_1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2 {
    0% {top: 400px;left:320px;opacity: 0}
    100% {top: 522px;left:381px;opacity: 1}
}
@keyframes vis_ani2_1 {
    0% {top: 600px;left:400px;opacity: 0}
    100% {top: 522px;left:412px;opacity: 1}
}
@keyframes vis_ani2_2 {
    0% {top: 480px;left:520px;opacity: 0}
    100% {top: 522px;left:448px;opacity: 1}
}
@keyframes vis_ani2_3 {
    0% {top: 600px;left:580px;opacity: 0}
    100% {top: 522px;left:503px;opacity: 1}
}
@keyframes vis_ani2_4 {
    0% {top: 480px;left:500px;opacity: 0}
    100% {top: 522px;left:536px;opacity: 1}
}
@keyframes vis_ani2_5 {
    0% {top: 580px;left:550px;opacity: 0}
    100% {top: 522px;left:571px;opacity: 1}
}
@keyframes vis_ani2_6 {
    0% {top: 470px;left:700px;opacity: 0}
    100% {top: 522px;left:607px;opacity: 1}
}
@keyframes vis_ani2_7 {
    0% {top: 470px;left:650px;opacity: 0}
    100% {top: 522px;left:663px;opacity: 1}
}
@keyframes vis_ani2_8 {
    0% {top: 580px;left:800px;opacity: 0}
    100% {top: 522px;left:697px;opacity: 1}
}
@keyframes vis_ani2_9 {
    0% {top: 480px;left:750px;opacity: 0}
    100% {top: 522px;left:728px;opacity: 1}
}
@keyframes vis_ani2_10 {
    0% {top: 560px;left:840px;opacity: 0}
    100% {top: 522px;left:761px;opacity: 1}
}
@keyframes vis_ani2_11 {
    0% {top: 600px;left:750px;opacity: 0}
    100% {top: 522px;left:793px;opacity: 1}
}
@keyframes vis_ani2_12 {
    0% {top: 480px;left:900px;opacity: 0}
    100% {top: 522px;left:827px;opacity: 1}
}
@keyframes vis_ani3 {
    0% {top: 209px;left:313px;opacity: 0}
    100% {top: 209px;left:482px;opacity: 1}
}
@keyframes vis_ani4 {
    0% {top: 300px;left:600px;opacity: 0}
    100% {top: 300px;left:331px;opacity: 1}
}
@keyframes vis_ani5 {
    0% {width:0;opacity: 0}
    100% {width:524px;opacity: 1}
}
@keyframes vis_ani6 {
    0% {top:500px;opacity: 0}
    100% {top:460px;opacity: 1}
}
@keyframes vis_ani7 {
    0% {height:0;opacity: 0}
    100% {height:313px;opacity: 1}
}
@keyframes vis_ani8 {
    0% {height:0;opacity: 0}
    100% {height:175px;opacity: 1}
}
@keyframes vis_ani9 {
    0% {top:600px;opacity: 0}
    100% {top:647px;opacity: 1}
}


.main #vis .sw2 {background:#0090d9;height: 750px}
.main #vis .sw2 .sw_a_wrap {width:640px;height:400px;left:318px;top:60px}
.main #vis .sw2 .sw_a1 {top:0;left:0;width:262px;height:181px;animation:none;opacity:0}
.main #vis .sw2 .sw_a2 {top:8px;left:116px;width:362px;height:152px;animation:none;opacity:0}
.main #vis .sw2 .sw_a3 {top:177px;left:37px;width:248px;height:155px;animation:none;opacity:0}
.main #vis .sw2 .sw_a4 {top:210px;left:147px;width:492px;height:189px;animation:none;opacity:0}
.main #vis .sw2 .sw_a4_1 {top:20px;left:685px;width:705px;height:735px;animation:none;opacity:0}
.main #vis .sw2 .sw_a5 {top:500px;left:40px;width:200px;height:200px;animation:none;opacity:0}
.main #vis .sw2 .sw_a6 {top:500px;left:233px;width:200px;height:200px;animation:none;opacity:0}
.main #vis .sw2 .sw_a7 {top:500px;left:424px;width:200px;height:200px;animation:none;opacity:0}

.main #vis .sw2.on .sw_a1 {animation: vis2_ani1_1 .7s .5s 1 ease forwards;}
.main #vis .sw2.on .sw_a2 {animation: vis2_ani1_2 .7s .8s 1 ease forwards;}
.main #vis .sw2.on .sw_a3 {animation: vis2_ani1_3 .7s 1.1s 1 ease forwards;}
.main #vis .sw2.on .sw_a4 {animation: vis2_ani1_4 .7s 1.4s 1 ease forwards;}
.main #vis .sw2.on .sw_a_wrap {animation: vis2_ani1 .7s 2s 1 ease forwards;}
.main #vis .sw2.on .sw_a4_1 {animation: vis2_ani2 .7s 2.4s 1 ease-in-out forwards;} 
.main #vis .sw2.on .sw_a5 {animation: vis2_ani3 .7s 2.8s 1 ease forwards;}
.main #vis .sw2.on .sw_a6 {animation: vis2_ani3 .7s 3.1s 1 ease forwards;}
.main #vis .sw2.on .sw_a7 {animation: vis2_ani3_1 .7s 3.4s 1 ease forwards;}

@keyframes vis2_ani1_1 {
    0% {left:-100px;opacity: 0}
    100% {left:0;opacity: 1}
}
@keyframes vis2_ani1_2 {
    0% {left:250px;opacity:0}
    100% {left:116px;opacity: 1}
}
@keyframes vis2_ani1_3 {
    0% {left:-105px;opacity:0}
    100% {left:37px;opacity: 1}
}
@keyframes vis2_ani1_4 {
    0% {left:220px;opacity:0}
    100% {left:147px;opacity: 1}
}
@keyframes vis2_ani1 {
    0% {left:318px;}
    100% {left:40px;}
}
@keyframes vis2_ani2 {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes vis2_ani3 {
    0% {top:600px;opacity:0}
    100% {top:500px;opacity:1}
}
@keyframes vis2_ani3_1 {
    0% {top:600px;opacity:0}
    100% {top:499px;opacity:1}
}

.swiper-container .swiper-button-prev, .swiper-container .swiper-button-next {width:51px;height:100px;background-size:100%}
.swiper-container .swiper-button-prev {background-image:url('../../images/main/visual/visual_prev.png');left:100px}
.swiper-container .swiper-button-next {background-image:url('../../images/main/visual/visual_next.png');right:100px}

.notice_wrap {height:80px;background-color:#fff;border-bottom:1px solid #cfcfcf;line-height:80px}
.notice_wrap h3 {font-size:22px;display:inline-block;margin-right:20px;font-weight:300;color:#5d5d5d;}
.notice_wrap span {display:inline-block;height:32px;width:1px;background-color:#cfcfcf;margin-right:20px}
.notice_wrap p {display:inline-block;font-size:18px;color:#333}

.cate_btnArea {padding:80px 0}
.cate_btnArea > div {position:relative;width:378px;height:478px;float:left;margin-right:68px;color:#222;letter-spacing:-1px;box-shadow:5px 10px 18px 2px #bbb;}
.cate_btnArea > div a {text-decoration:none}
.cate_btnArea > div:hover {background-size:110%;}
.cate_btnArea .cate_btn3 {margin-right:0}
.cate_btnArea > div span {font-size:15px;opacity:0.5;font-weight:300;letter-spacing: 2px;padding-left: 2px;}
.cate_btnArea > div h2 {font-size:38px;font-weight:500;margin-bottom:18px;color:#333}
.cate_btnArea > div h4 {font-size:22px;font-weight:400;line-height:1.2;margin-bottom:70px;color:#444}
.cate_btnArea > div .more {font-size:16px;color:#444;font-weight:400;opacity:1;letter-spacing:0;padding:5px 10px;border:2px solid #444}
.cate_btnArea > div > a > div {position:absolute;top:60px;left:40px}
.cate_btnArea > div > a  img { -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scale(1.0, 1.0); -ms-transform: scale(1.0, 1.0); transform: scale(1.0, 1.0); }
.cate_btnArea > div:hover img { -webkit-transform: scale(1.05, 1.05); -ms-transform: scale(1.05, 1.05); transform: scale(1.05, 1.05); }
.cate_btnArea > div:hover span, .cate_btnArea > div:hover h2, .cate_btnArea > div:hover h4 {color:#fff;transition:.2s}
.cate_btnArea > div:hover .more {border-color:#fff;transition:.2s}

.videoArea {background:url('../../images/main/video_bg.jpg') no-repeat center center;background-size:cover;height:742px;width:100%;padding:111px 0 0;box-sizing:border-box}
.videoArea .video_wrap {position:relative;width:800px;height:520px;background-color:#222}
.videoArea .video_wrap img {position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}

.cate_slideArea {background-color:#efefef;padding:80px 0;position:relative}
.cate_slideArea .swiper-container {height:800px;}
.cate_slideArea .swiper-container .swiper-pagination {text-align:left}
.cate_slideArea .swiper-container .swiper-pagination .swiper-pagination-bullet {border-radius:0;width:10px;height:10px}
.cate_slideArea > img:first-child {position:absolute;left:25px;top:130px;animation:float 2s infinite ease-in-out;}
.cate_slideArea > img:nth-child(2) {position:absolute;right:50px;top:350px;animation:float2 2s infinite ease-in-out;}

@keyframes float {
    0%,100% {top:110px}
    50% {top:130px}
}
@keyframes float2 {
    0%,100% {top:340px}
    50% {top:320px}
}


.selfieArea {padding:80px 0}
.selfieArea .selfie_title {margin-bottom:50px;text-align:center}
.selfieArea .selfie_title p {font-size:17px;color:#333;font-weight:400;letter-spacing:-0.5px;padding-top:15px}
.selfieArea .selfie_title p span {font-weight:600}
.selfieArea .selfie_wrap > a {float:left;width:20%;height:255px;overflow:hidden}
.selfieArea .selfie_wrap > a img {width:100%;height:100%;}
.selfieArea .selfie_wrap > a:hover img {width:105%;height:105%;transition:.5s}

.cmArea {padding:80px 0;background:url('../../images/main/cm_bg.jpg') no-repeat center center;background-size:cover;height:660px;width:100%;)}
.cmArea #event_slide {width:657px;float:left}
.cmArea #event_slide .swiper-pagination-bullet {background-color:#fff;width:10px;height:10px}
.cmArea #event_slide .swiper-pagination-bullet-active {background-color:#fe9d33}
.cmArea .cm_right {float:right}
.cmArea .cm_right div:first-child {margin-bottom:20px}




.ft_wrap {background-color:#443f3b;height:190px;animation: quickTimeset3 .7s 5s linear forwards;}