@charset "euc-kr";

/* swiper */
.swiper-button-prev:after,
.swiper-button-next:after{display:none;}

/* °ψΕλ */
#wrapper {overflow: hidden; min-width: 1200px; width: auto; margin: 0 auto; text-align: center; }
#wrapper .mask{width:1200px; margin:0 auto; display:flex; flex-wrap: wrap; justify-content:center; position: relative;}
#wrapper .thumb{}
#wrapper .con_box{position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

/* visual */
.visual {background:#0a0815; }
.visual .thumb {}
.visual .tit_top {opacity:0; transition:.5s 1.2s; position: absolute;top: 63px;left: 50%;margin-left: -366px;}
.visual .light {opacity:0; transition:.5s 2.2s; position: absolute;top: 84px;left: 50%;margin-left: -77px;z-index: 1; animation: blink_effect 1s 3s ease-in-out infinite alternate;}
.visual .tit1 {opacity:0;position: absolute;top: 192px;left: 50%;margin-left: -322px;}
.visual .tit2 {opacity:0; transition:1s 1.8s;  position: absolute;bottom: 242px;left: 50%;margin-left: 75px;}
.visual .tit_btm {opacity:0; transition:.5s 2.1s; position: absolute; bottom: 94px;left: 50%;margin-left: -424px;}
@keyframes blink_effect {
	0% {opacity: 1;}
	100% {opacity: 0;}
}	
@keyframes dropBounce {
	0% {
        transform: translateY(-200px) scaleX(0.8);
        opacity: 0;
    }

    30% {
        transform: translateY(30px) scaleX(1.1);
        opacity: 1;
    }

    60% {
        transform: translateY(30px) scaleX(1.1);
        opacity: 1;
    }
    80% {
        transform: translateY(-10px) scaleX(0.95);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scaleX(1);
        opacity: 1;
    }
}
.visual.on .tit_top {opacity:1;}
.visual.on .light {opacity:1;}
.visual.on .tit1 {animation: dropBounce .3s 1.6s ease-out forwards;}
.visual.on .tit2 {opacity:1;}
.visual.on .tit_btm {opacity:1;}

/* different */
.different {background: #e6e3ff;}
.different .thumb {}
.different .con_box { padding-top: 78px; }
.different .tit {}
.different .con {margin-top: 54px;position: relative;background: #fff;border-radius: 50px;padding: 50px;}
.different .con .txt {z-index: 1;position: relative;}
.different .con .img {position: absolute;bottom: 21px;left: 50%;margin-left: -560px;}

/* real */
.real {background: #ffedea;}
.real .thumb {}
.real .con_box {padding-top: 106px;}
.real .tit {}
.real .real_slide {}
.real .real_slide {padding-top: 60px;}
.real .real_slide .tab { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;}
.real .real_slide .tab span { position: relative; width: 500px; height: 100px; border-radius: 50px; background: #080926; color: #6E6F94; font-size: 35px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: -2px;}
.real .real_slide .tab span.bubble {}
.real .real_slide .tab span.bubble::after {content:'';width: 178px;height: 53px;background: url(img/real_bubble_off.png) no-repeat;position: absolute;top: -28px;left: 0;right: 0;margin: 0 auto;}
.real .real_slide .tab span.bubble.on::after {background-image: url(img/real_bubble_on.png);}
.real .real_slide .tab span.on { background: #ff1d21;  color: #fff;}
.real .real_slide .swiper-pagination {  position: absolute; top: 61px; left: 0; right: 0; bottom: auto;}
.real .real_slide .swiper-pagination .swiper-pagination-bullet { margin: 0 10px; width: 500px; height: 100px; border-radius: 50px;opacity: 0;}

/* howto */
.howto { background: #03084c;}
.howto .thumb {}
.howto .con_box {padding-top: 104px;}
.howto .tit {}
.howto .howto_slide { margin-top: 45px;}
.howto .howto_slide .swiper-wrapper > .swiper-slide {text-align:left;}
.howto .howto_slide .swiper-wrapper > .swiper-slide .bg {}
.howto .howto_slide > .swiper-pagination { bottom: auto; top: 0; left: 0; right: 0; display: flex;}
.howto .howto_slide > .swiper-pagination .swiper-pagination-bullet { width: 100%; border-radius: 0; height: 90px; margin: 0; opacity: 0;}
.howto .howto_slide .swiper-container {position: absolute;top: 120px;left: 330px;right: 0;margin: 0;}
.howto .howto_slide .swiper-container .swiper-pagination {bottom: auto;top: 36px;left: auto;right: 51px;text-align: right; }
.howto .howto_slide .swiper-container .swiper-pagination .swiper-pagination-bullet { width: 20px; height: 20px; background: #D9D9D9; opacity: 1; margin: 0 5px;}
.howto .howto_slide .swiper-container .swiper-pagination .swiper-pagination-bullet-active { background: #4137D6;}

/* experience */
.experience {background: linear-gradient(to bottom, #FF6A45, #F20018);height: 426px;padding: 16px 0 0;}
.experience .mask {flex-direction: column;align-items: center; height: 100%; }
.experience .tit {}
.experience .btns { display: flex; justify-content: center; gap: 20px; margin-top: 52px;}
.experience .btns a { position: relative; width: 520px; height: 140px; display: block; font-size: 0;}
.experience .btns a::after {content:'';background: url(img/click_icon.png) no-repeat;width: 71px;height: 100px;display: block;position: absolute;bottom: -30px;right: 0;animation: blink_effect .7s ease-in-out infinite alternate;}
.experience .btns a.btn1 { background: url(img/experience_btn1.png) no-repeat;}
.experience .btns a.btn2 { background: url(img/experience_btn2.png) no-repeat;}



/* lectureList */
#lectureList{width:1200px; margin:0 auto;}