* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans KR', sans-serif !important;
}

.event-img {
    width: 100%;
    max-width: 1900px;
    display: block;
    margin: 0 auto;
}
.w1900 {
    position: relative;
    max-width: 1900px;
    margin: 0 auto;
}
.w1700 {
    position: relative;
    max-width: 1700px;
    margin: 0 auto;
}
.w1400 {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.section-1 {
    background-color:#020b35;
    overflow: hidden;
    position: relative;
}

.s1-teacher {
    position: absolute;
    max-width: 558px;
    width: 29.4%;
    top: 29%;
    left: 0;
    right: 0;
    margin: 0 auto;

    opacity: 0;
	animation: 0.8s teacher forwards;
	animation-timing-function:cubic-bezier(.215,.61,.355,1);
	animation-delay: .5s;
}
@keyframes teacher {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
    90% {
		transform: translateY(0px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.s1-title {
    position: absolute;
    max-width: 954px;
    width: 44%;
    bottom: 27.1%;
    left: 0;
    right: 0;
    margin: 0 auto;

    opacity: 0;
	animation: 1s title forwards;
	animation-timing-function:cubic-bezier(.215,.61,.355,1);
	animation-delay: .5s;
}
@keyframes title {
	0% {
		opacity: 0;
		transform: translateY(30px);
	}
    90% {
		transform: translateY(0px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.section-2-1 {
    background-color:#ffffff;
    overflow: hidden;
    padding: 0 15px;
}
.section-2-2 {
    background-color:#00134f;
    overflow: hidden;
    padding: 0 15px 8%;
}
.video-notice {
    font-size: 50px;
    color: #ffffff;
    text-align: center;
    font-weight: 600;
    background: #000000;
    max-width: 900px;
    padding: 190px 15px 200px;
    margin: 0 auto;
}


.section-3 {
    position: relative;
    background-color:#f8f7ea;
    overflow: hidden;
} 

.section-4 {
    position: relative;
    background-color: #d4e2ff;
    overflow: hidden;
}

.section-5 {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    padding: 120px 15px;
}

.section-6 {
    position: relative;
    background-color: #333333;
    overflow: hidden;
}

.section-7 {
    position: relative;
    background-color: #e3e3e3;
    overflow: hidden;
    padding-bottom: 8%;
}

.section-8 {
    position: relative;
    overflow: hidden;
}
.section-8 .w1900 {
    z-index: 1000;
}
.section-8 .bg-left {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    left: 0;
    background: linear-gradient(180deg, #020409 10%, #102647 55%, #11468d 70%, #0169c5 88%, #008fd8 100%);
    z-index: 999;
}
.section-8 .bg-right {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    right: 0;
    background: linear-gradient(180deg, #020409 10%, #101d31 50%, #0c52a3 85%, #007ac8 100%);
    z-index: 999;
}

.section-8 .video-wrapper {
    padding: 0 15px;
}

.books-btn-wrap {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}

.books-btn-wrap a {
    font-size: 0;
    position: absolute;
    cursor: pointer;
}

.books-btn-1 {
    top: 8%;
    left: 25.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-1-2 {
    top: 8%;
    left: 64.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-2-1 {
    top: 19.6%;
    left: 25.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-2-2 {
    top: 19.6%;
    left: 64.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-3-1 {
    top: 31.1%;
    left: 25.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-3-2 {
    top: 31.1%;
    left: 64.5%;
    width: 32.8%;
    height: 11%;
}

.books-btn-4-2 {
    top: 42.6%;
    left: 64.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-5-1 {
    top: 54.1%;
    left: 25.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-6 {
    top: 65.7%;
    left: 44.8%;
    width: 32.8%;
    height: 11%;
}
.books-btn-7-1 {
    top: 77.2%;
    left: 25.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-7-2 {
    top: 77.2%;
    left: 64.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-8-1 {
    top: 88.6%;
    left: 25.5%;
    width: 32.8%;
    height: 11%;
}
.books-btn-8-2 {
    top: 88.6%;
    left: 64.5%;
    width: 32.8%;
    height: 11%;
}


.video-title {
    text-align: center;
    color: #28292e;
    font-size: 42px;
}

.video-wrap {
    text-align: center;
    margin: 0;
}
.video-wrap iframe {
    width: 100%;
    max-width: 800px;
    height: 450px;
}

.btn-wrap {
    position: relative;
}

.search-btn-2 {
    position: absolute;
    top: 62.4%;
    left: 41.3%;
    width: 35%;
    height: 12.7%;
    max-width: 665px;
    font-size: 0;
    display: inline-block;
}

.s4-check {
    position: absolute;
    left: 29.8%;
    width: 3%;
    max-width: 50px;
    cursor: pointer;
    
    opacity: 0;
    transition: transform 0.8s, opacity .6s ;
    animation-timing-function:cubic-bezier(.215,.61,.355,1);
}
.c1 {top: 33.7%;}
.c2 {top: 38.3%;}
.c3 {top: 43.9%;}
.c4 {top: 49.7%;}
.c5 {top: 54.2%;}
.c6 {top: 58.7%;}
.c7 {top: 63.3%;}
.c8 {top: 67.9%;}

.s4-hand {
    position: absolute;
    top: 75.3%;
    left: 62.5%;
    max-width: 297px;
    width: 15.6%;

    opacity: 0;
    transform: translateX(30px);
    transition: transform 0.8s, opacity .6s ;
    animation-timing-function:cubic-bezier(.215,.61,.355,1);
}
.s4-box {
    position: absolute;
    max-width: 810px;
    width: 43%;
    top: 86.7%;
    left: 0;
    right: 0;
    margin: 0 auto;

    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.8s, opacity .6s ;
    animation-timing-function:cubic-bezier(.215,.61,.355,1);
}

.search-btn {
    position: absolute;
    top: 82.2%;
    left: 26.3%;
    width: 47.4%;
    height: 12%;
    font-size: 0;
    max-width: 901px;
    margin: 0 auto;
    display: block;
}

.book-wrapper {
    text-align: center;
    padding: 0 15px;
}
.book-wrapper .bx-wrapper {
    margin: 0 auto;
    background: none;
    border: 0px;
    box-shadow: none;
    position: relative;
    right: -15px;
    z-index: 14;
}
.book-wrapper .bx-wrapper img {
    position: relative;
}
.book-wrapper .bx-wrapper .bx-next {
    right: -30px;
    background: none;
    
    display: block;
    margin: 0px auto;
    width: 35px;
    height: 35px;
    border-top: 4px solid #666;
    border-left: 4px solid #666;
    transform: rotate(135deg);
}
.book-wrapper .bx-wrapper .bx-prev {
    left: -30px;
    background: none;
    
    display: block;
    margin: 0px auto;
    width: 35px;
    height: 35px;
    border-top: 4px solid #666;
    border-left: 4px solid #666;
    transform: rotate(-45deg);
}
.bx-wrapper .bx-controls-direction a {
    top: 70px;
}
.bx-wrapper .bx-pager {
    bottom: 10px;
    margin-left: -15px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    display: none;
}
.slider-2-wrapper .bx-pager.bx-default-pager a {
    display: block;
}

.slider-2-wrapper .bx-wrapper .bx-next {
    right: -30px;
    background: none;
    
    display: block;
    margin: 0px auto;
    width: 35px;
    height: 35px;
    border-top: 4px solid #666;
    border-left: 4px solid #666;
    transform: rotate(135deg);
}
.slider-2-wrapper .bx-wrapper .bx-prev {
    left: -30px;
    background: none;
    
    display: block;
    margin: 0px auto;
    width: 35px;
    height: 35px;
    border-top: 4px solid #666;
    border-left: 4px solid #666;
    transform: rotate(-45deg);
}
.slider-2-wrapper .bx-controls-direction a {
    top: 44% !important;
}
.slider-2-wrapper .bx-pager {
    bottom: 10px;
    margin-left: -15px;
}

@media(min-width:1921px) {
    .section-2-2 {
        padding: 0 15px 150px;
    }
}

@media(max-width:1200px) {
    .book-wrapper {
        padding: 0 5px;
    }
    .book-wrapper .bx-wrapper {
        right: -1%;
    }
    .book-wrapper .bx-wrapper .bx-next {
        right: 5%;
        width: 20px;
        height: 20px;
    }
    .book-wrapper .bx-wrapper .bx-prev {
        left: 2%;
        width: 20px;
        height: 20px;
    }
    .bx-wrapper .bx-controls-direction a {
        top: 5%;
    }
    .bx-wrapper .bx-pager {
        bottom: 0%;
        margin-left: -1.5%;
    }
}
@media(max-width:996px) {
    .section-1 img.event-img{
        width: 170%;
        margin-left: -35%;
    }
    .section-2-1 img.event-img, .section-2-2 img.event-img{
        width: 170%;
        margin-left: -35%;
    }
    .section-3 img.event-img{
        width: 160%;
        margin-left: -30%;
    }
    .section-4 img.event-img {
        width: 160%;
        margin-left: -30%;
    }

    .section-7 img.event-img{
        width: 140%;
        margin-left: -20%;
    }
    .section-8 img.event-img{
        width: 160%;
        margin-left: -30%;
    }

    .s1-title {
        width: 75%;
    }

    .search-btn {
        left: 12%;
        width: 76.1%;
    }
    .search-btn-2 {
        left: 36%;
        width: 56%;
    }
    .video-notice {
        font-size: 6vw;
        color: #ffffff;
        text-align: center;
        font-weight: 600;
        background: #000000;
        max-width: 900px;
        padding: 18% 15px 19%;
        margin: 0 auto;
    }

    .s4-check {
        left: 17.5%;
        width: 5%;
    }
    .s4-hand {
        left: 75%;
        width: 28%;
    }
    .s4-box {
        width: 78%;
    }

    .section-5 {
        padding: 12% 15px;
    }
}
@media(max-width:720px) {
    .section-4 {
        padding-bottom: 50px;
    }

    .video-wrap {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.5%;
		max-width: 720px;
        margin-top: 15px;
	}
	.video-wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
} 

/*waypoints*/
.active{
    opacity: 1;
    transform: translateY(0) scale(1);
    transform: translateX(0);
}