.container { width:100%; max-width:1280px; place-self:center; }
h2 { font-size:24px; }

#section1 { position:relative; min-height:100vh;  background-size:cover; display:flex; justify-content:center; align-items:center; overflow:hidden; }
#section1 .wrap { width:100%; max-width:1280px; }
#section1 .wrap h2 { color:#fff; font-size:40px; font-family: "Nanum Pen Script", cursive; color:rgba(255, 255, 255, 0.7); }
#section1 .wrap h1 { color:#fff; font-size:40px; line-height:60px; }
#section1 .wrap .scroll { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); color:#fff; width:100px; height:100px; border-radius:50%; display:flex; justify-content:center; align-items:center; }
#section1 .wrap .scroll div { position:relative; }
#section1 .wrap .scroll div > i { position:absolute; animation: grow-shrink 2s linear infinite; left:50%; width:1.5px; background:rgba(255, 255, 255, 1); }
#section1 .slide { position:absolute; width:100%; height:100%;overflow:hidden; z-index:-1; opacity:0; transition: opacity 1s ease-in-out; }
#section1 .slide img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit: cover; }
#section1 .slide::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); z-index: 1; }
#section1 .slide.show { opacity:1; }

@keyframes grow-shrink {
  0% {
    height: 0;
    top: -50px;
  }
  49.9% {
    height: 49px;
    top: -50px;
  }
  50% {
    height: 50px;
	top:auto;
    bottom: 100%;
  }
  100% {
    height: 0;
    bottom: 100%;
  }
}

#section1 .bg_controll{ position:relative; margin-top:40px; display:flex; }
#section1 .bg_controll > ul { display:flex; }
#section1 .bg_controll > ul > .ball{ width:18px; height:18px; border-radius:9px; background:rgba(255, 255, 255, 0.5); transition: all 0.3s ease-in-out; cursor:pointer; }
#section1 .bg_controll > ul > .ball:not(:first-child){ margin-left:10px; }
#section1 .bg_controll > ul > .ball.show{ width:45px; background:#fff; }


#section3 { padding:100px 0; }
.section-header { position:relative; display:flex; justify-content:center; }
.section-header .more-btn { position: absolute; right:0; bottom:0; padding:0 20px; background:#eee; height:30px; }
.course-list { margin-top:60px; display:flex; justify-content:space-around; flex-wrap:wrap; }
.course-list > .course-card { width:350px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); border-radius:5px; overflow:hidden; }
.course-list > .course-card > .image { position:relative; height:250px; background:#eee; overflow:hidden; }
.course-list > .course-card > .image img { position:absolute; width:100%; height:100%; object-fit: cover; }
.course-list > .course-card > .course-info { padding:30px 20px; }
.course-list > .course-card > .course-info h3 { font-size:20px; }
.course-list > .course-card > .course-info p { margin-top:20px; }
.course-list > .course-card > .course-info button { margin-top:20px; padding:0 20px; background:#eee; height:30px; }



@media screen  and  (max-width : 1280px) {
	.course-list { margin-top:60px; display:flex; justify-content:space-around; }
	#section1 .wrap { padding:20px; }
}

@media screen  and  (max-width : 1025px) {
	#section1 .wrap h2 { font-size:30px; }
	#section1 .wrap h1 { font-size:30px; }