@charset "EUC-KR";

/* °øÅë */
#wrapper {
    overflow: hidden;
    min-width: 1300px;
    width: auto;
    margin: 0 auto;
    text-align: center;
}

#wrapper > div > img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

#wrapper > div > .inner {
    width: 1200px;
    margin: 0 auto;
}


/* visual */
.visual {
    position: relative;
}

.visual .inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
}

.visual .visual_tit {
    position: absolute;
    top: 115px;
    left: 0;
    z-index: 1;
}

.visual .visual_icon01 {
    position: absolute;
    bottom: 125px;
    left: 0;
    z-index: 1;
}

.visual .visual_icon02 {
    position: absolute;
    bottom: 65px;
    right: 107px;
    z-index: 1;
}

/* gap */
.gap {
    position: relative;
}

.gap .inner {
    position: absolute;
    top: 286px;
    left: 50%;
    transform: translateX(-50%);
}

/* review */
.review {
    position: relative;
    background: #0A1012;
}

.review .bg {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -980px;
}

.review .slider {
    position: absolute;
    top: 340px;
    left: 50%;
    transform: translateX(-50%);
    width: 1860px;
    height: 400px;
}

/* con_tit */
.con_tit {
    display: flex;
    align-items: center;
    position: relative;
    text-align: inherit;
    z-index: 15;
}

.con_tit.tit1 {
    height: 213px;
    background: linear-gradient(90deg, rgba(0, 189, 84, 1) 0%, rgba(23, 54, 135, 1) 100%);
}

.con_tit.tit2 {
    height: 196px;
    background: linear-gradient(90deg, rgba(41, 118, 241, 1) 0%, rgba(23, 54, 135, 1) 100%);
}

.con_tit.tit3 {
    height: 196px;
    background: #2E2A45;
}

/* reason1 */
.reason1 {
    position: relative;
}

.reason1:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 2560px;
    height: 98px;
    background: url(img/con_tit_shadow.png) center top no-repeat;
    z-index: 5;
    mix-blend-mode: multiply;
}

.reason1 .inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 62px 0 101px;
}

.reason1 .inner .slider .swiper-pagination span {
    display: block;
    width: 22px;
    height: 22px;
    margin: 6px 0;
    background: #D9D9D9;
    opacity: 1;
}

.reason1 .inner .slider .swiper-pagination span.swiper-pagination-bullet-active {
    background: #00BD54;
}

.reason1 .inner .con1 {
    position: relative;
    margin: 33px 0 15px;
}

.reason1 .inner .con1 .slider .swiper-container {
    position: absolute;
    top: 87px;
    right: 95px;
    height: 360px;
}

.reason1 .inner .con1 .slider .swiper-container .swiper-slide .video {
    overflow: hidden;
    position: absolute;
    top: 16px;
    left: 60px;
    width: 357px;
    height: 201px;
    border-radius: 3px;
}

.reason1 .inner .con1 .slider .swiper-container .swiper-slide .video video {
    width: 100%;
}

.reason1 .inner .con1 .slider .swiper-pagination {
    position: absolute;
    top: 50%;
    right: 43px;
    transform: translateY(-50%);
}

.reason1 .inner .con2 {
    position: relative;
    margin-bottom: 47px;
}

.reason1 .inner .con2 .slider .swiper-container {
    position: absolute;
    top: 104px;
    left: 126px;
    height: 395px;
}

.reason1 .inner .con2 .slider .swiper-pagination {
    position: absolute;
    top: 50%;
    left: 43px;
    transform: translateY(-50%);
}

.reason1 .inner .con2 .slider a {
    display: block;
    position: absolute;
    bottom: 58px;
    right: 115px;
    width: 422px;
    height: 69px;
    text-indent: -9999px;
}

.reason1 .inner .con3 {
    position: relative;
}

.reason1 .inner .con3 .video {
    overflow: hidden;
    position: absolute;
    right: 91px;
    width: 355px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 20px;
}

.reason1 .inner .con3 .video.v1 {
    bottom: 274px;
}

.reason1 .inner .con3 .video.v2 {
    bottom: 58px;
}

.reason1 .inner .con3 .video video {
    width: 100%;
}

.reason1 .inner .con1 .dual {
    position: absolute;
    top: 460px;
    left: 50%;
    transform: translateX(-50%);
    width: 188px;
    height: 172px;
    z-index: 10;
}

.reason1 .inner .con1 .dual .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 188px;
    height: 172px;
}

.reason1 .inner .con1 .dual .circle.rol {
    background: url(img/reason01_dual_circle.png) 0 0 no-repeat;
    animation: rotate_circle 6s linear infinite;
    transform-origin: 50% 50%;
    z-index: 10;
}

.reason1 .inner .con1 .dual .circle.txt {
    background: url(img/reason01_dual.png) center center no-repeat;
}

/* reason2 */
.reason2 .inner {
    padding: 70px 0 120px;
}

.reason2 .inner .slider {
    margin: 22px 0 32px;
}

.reason2 .inner .slider .swiper-wrapper .swiper-slide {
    opacity: 0 !important;
}

.reason2 .inner .slider .swiper-wrapper .swiper-slide-active {
    opacity: 1 !important;
}

/* reason3 */
.reason3 {
    position: relative;
}

.reason3 .inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 91px 0 101px;
}

.reason3 .inner .tit {
    margin-bottom: 37px;
}

/* transition */
.transition {
    position: relative;
}

.transition .inner {
    position: absolute;
    top: 245px;
    left: 50%;
    transform: translateX(-50%);
}

.transition .circle {
    position: relative;
}


.transition .circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 775px;
    height: 775px;
    z-index: -1;
    border-radius: 50%;
    animation: spreadEffect01 2000ms linear infinite;
}

.transition_link {
    position: absolute;
    top: 436px;
    left: 50%;
    transform: translateX(-50%);
    width: 451px;
    height: 86px;
    font-size: 0;
    text-indent: -9999em;
}

/* ½ºÇÁ·¹µå È¿°ú */
@keyframes spreadEffect01 {
    0% {
        box-shadow: 0 0 0 0 rgba(12, 12, 12, 0.5), 0 0 0 0 rgba(12, 12, 12, 0.5);
    }
    100% {
        box-shadow: 0 0 0 25px rgba(12, 12, 12, 0), 0 0 0 0 rgba(12, 12, 12, 0);
    }
}


/* satisfaction */
.satisfaction {
    position: relative;
    padding: 74px 0 100px;
    background: #E5F7FC;
}

.satisfaction:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 2560px;
    height: 98px;
    background: url(img/con_tit_shadow.png) center top no-repeat;
    z-index: 5;
    mix-blend-mode: multiply;
}

.satisfaction .graph {
    position: relative;
    margin-top: 20px;
}

.satisfaction .graph {
    margin-top: 10px;
    position: relative;
}

.satisfaction .graph .circle_box {
    position: absolute;
    top: 45px;
    left: 44px;
}

.satisfaction .graph .circle_box:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgb(0 0 0 / 33%);
}

.satisfaction .graph .circle_box:after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: inset 0 0 6px 1px rgb(0 0 0 / 33%);
}

.satisfaction .circle-percent {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-family: 'GmarketSansBold', sans-serif;
    font-size: 28px;
    text-align: center;
    color: #007fff;
    letter-spacing: -2px;
    line-height: 1.2;
}

.satisfaction .circle-percent span {
    display: block;
    font-family: 'GmarketSansMedium', sans-serif;
    font-size: 18px;
    color: #000;
}

.satisfaction .circle-percent b {
    color: #000;
    font-family: 'GmarketSansBold', sans-serif;
    font-size: 24px;
    display: block;
}

.satisfaction .circle-percent i {
    display: inline-block;
    width: 89px;
    font-style: inherit;
}

.satisfaction .circle-percent i.sign {
    width: auto;
    font-size: 24px;
    vertical-align: top;
}

/* service */
.service {
    position: relative;
    background: #E5E8F1;
}

.service:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 2560px;
    height: 98px;
    background: url(img/con_tit_shadow.png) center top no-repeat;
    z-index: 5;
    mix-blend-mode: multiply;
}

.service .inner {
    padding: 80px 0 99px;
}

.service .inner .con .tab {
    display: flex;
}

.service .inner .con .tab button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100px;
    background-color: #B2BAD4;
    border-top: 1px solid #dbdbdb;
    border-right: 1px solid #dbdbdb;
    font-weight: 500;
    font-size: 24px;
    color: #7B829A;
    line-height: 29px;
}

.service .inner .con .tab button.on {
    background-color: #2E2B47;
    font-weight: 900;
    color: #fff;
}

.service .inner .con .tab button:first-child {
    border-left: 1px solid #dbdbdb;
    border-radius: 24px 0 0 0;
}

.service .inner .con .tab button:first-child.on {
    border-left: 1px solid #2E2B47;
}

.service .inner .con .tab button:last-child {
    border-radius: 0 24px 0 0;
}

.service .inner .con .tab_contents {
    position: relative;
    padding: 59px 100px 46px;
    background: #fff;
    border: 3px solid #2E2B47;
}

.service .inner .con .tab_contents .badge {
    position: absolute;
    top: 30px;
    right: 30px;
    left: auto;
    z-index: 10;
}

.service .swiper-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: static;
    width: 100%;
    margin-top: 70px;
}

.service .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    margin: 0 !important;
}

.service .swiper-pagination-bullet-active {
    background: #ED3535;
}

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

/* floating(remove: °­Á ¸®½ºÆ® µµ´Þ ½Ã »ç¶óÁü) */
.floating {
    position: fixed;
    top: 50%;
    right: 1%;
    z-index: 100;
}

.floating.remove {
    position: absolute;
    top: 50%;
    right: 1%;
}

.floatingUi {
    position: fixed;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%);
    width: 168px;
    z-index: 20;
    text-align: left;
}

.floatingUi ul {
    overflow: hidden;
    background: #fff;
    border-radius: 20px;
}

.floatingUi ul li:not(:first-child) {
    border-top: 1px dashed #d0d0d0;
}

.floatingUi ul li a {
    display: block;
    position: relative;
    height: 40px;
    padding: 0 10px 0 16px;
    background: #fff;
    font-weight: 300;
    font-size: 16px;
    color: #000;
    line-height: 38px;
}

.floatingUi ul li a:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 19px;
    height: 20px;
    background: url(img/nav_arr.png) 0 0 no-repeat;
}

.floatingUi ul li.on a {
    background: #86B4FF;
    font-weight: 700;
}

.floatingUi ul li.on a:before {
    background-position: 0 -20px;
}

.floatingUi > a {
    display: block;
    width: 148px;
    height: 40px;
    margin: 10px auto 0 auto;
    background: #2976F1;
    border-radius: 20px;
    font-weight: 900;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 38px;
}


/* ------------------------------ animation css ¡é ---------------------------------------------
	animation:60s linear 0s infinite normal forwards running rollingTop1;
	animation:60s linear 0s infinite normal forwards running rollingTop2;
	animation:click 1s ease-in infinite alternate;
	animation:blinker 1s ease-in infinite alternate;
------------------------------------------------------------------------------------------ */

/* ÇÑÂÊÀ¸·Î È帣´Â ¾Ö´Ï¸ÞÀ̼Ç(top:À§·Î, right:¿À¸¥ÂÊÀ¸·Î) */
@keyframes rollingTop1 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100%);
    }
    50.01% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes rollingTop2 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-200%);
    }
}

@keyframes rollingRight1 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100%);
    }
    50.01% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

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

/* ¼Õ°¡¶ô Ŭ¸¯ À¯µµ ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes click {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(10%, 10%);
    }
}

/* ±ô¹Ú°Å¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

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