/* ******************** index.html ******************** */
/* -----visual----- */
#visual { margin-top: 80px; }
#visual img { width: 100%; }
#visual .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #244c70); }
#mvisual { display: none; }
#mmvisual { display: none; }

/* -----section1(PROGRAM)----- */
section { margin: 100px auto; }
h1 { font-size: 48px; font-weight: 200; text-align: center; }

.program { margin-top: 100px; opacity: 0; transition: all 0.6s; display: flex; justify-content: space-between; flex-wrap: wrap; }
.program .pro { display: inline-block; flex: 0 0 23%; position: relative; }
.program .pro:nth-child(1) { transform: translateY(150px); transition: all 0.6s; }
.program .pro:nth-child(2) { transform: translateY(150px); transition: all 0.8s; }
.program .pro:nth-child(3) { transform: translateY(150px); transition: all 1s; }
.program .pro:nth-child(4) { transform: translateY(150px); transition: all 1.2s; }
.on { opacity: 1; }
.pro img { width: 100%; }
.line { margin: 30px 0 20px; border-bottom: 1px dotted #333; }
.pro h3 { font-size: 22px; font-weight: 400; }
.pro h3 img { width: 6%; margin-right: 12px; }
.pro h4 { line-height: 3; font-size: 16px; }
.btn { float: right; display: inline-block; padding: 10px 30px; background: #333; transition: .6s; position: absolute; right: 0; top: 117%; }
.btn a { color: #fff; }
.btn:hover { background: #244c70; transform: translateX(-10px); }
.mbtn { display: none; }


/* -----section2(COURSE)----- */
#section2 { margin-top: 200px; padding: 100px 0 228px; text-align: center; background: #f9f9f9; }
#section2 .inner { width: 100%; }
.text1 { margin-top: 20px; color: #555; }
.list { margin-top: 100px; position: relative; }
.line2 { position: absolute; top: 120%; width: 100%; height: 1px; background: #ddd; }
.mline2 { display: none; }
.motion { width: 92%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; opacity: 0; transition: all 0.6s; }
.motion li { position: relative; flex: 1 0 auto; }
.motion li:nth-child(1) { transform: translateX(-150px); transition: all 0.6s; }
.motion li:nth-child(2) { transform: translateX(-150px); transition: all 0.8s; }
.motion li:nth-child(3) { transform: translateX(-150px); transition: all 1s; }
.motion li:nth-child(4) { transform: translateX(-150px); transition: all 1.2s; }
.motion li:nth-child(5) { transform: translateX(-150px); transition: all 1.4s; }
.motion li:nth-child(6) { transform: translateX(-150px); transition: all 1.6s; }
.motion li:nth-child(7) { transform: translateX(-150px); transition: all 1.8s; }
.motion li:nth-child(8) { transform: translateX(-150px); transition: all 2s; }
.on { opacity: 1; }
.list li strong {position: absolute; display: inline-block; left: 0; top: 136%; width: 100%; text-align: center; font-size: 17px; font-weight: 500; }
.list li p { display: block; margin-top: 5px; width: 100%; font-size: 15px; font-weight: 400; }
/* active */
.list li .dot { display: block; position: absolute; top: 118%; left: 50%; width: 9px; height: 9px; background-color: #ddd; border-radius: 50%; transition: all 0.6s ease-out; }
.list li .dot:before { display: block; content: ''; position: absolute; top: -50%; left: -50%; width: 15px; height: 15px; border: 2px solid #224c70; border-radius: 50%; opacity: 0; transition: all 0.6s ease-out; }
.list li:nth-child(1) .dot:before { display: block; content: ''; position: absolute; top: -50%; left: -60%; width: 15px; height: 15px; border: 2px solid #224c70; border-radius: 50%; opacity: 0; transition: all 0.6s ease-out; }
.list li:nth-child(5) .dot:before { display: block; content: ''; position: absolute; top: -50%; left: -60%; width: 15px; height: 15px; border: 2px solid #224c70; border-radius: 50%; opacity: 0; transition: all 0.6s ease-out; }
.list li:nth-child(6) .dot:before { display: block; content: ''; position: absolute; top: -50%; left: -60%; width: 15px; height: 15px; border: 2px solid #224c70; border-radius: 50%; opacity: 0; transition: all 0.6s ease-out; }
.list li:nth-child(7) .dot:before { display: block; content: ''; position: absolute; top: -50%; left: -60%; width: 15px; height: 15px; border: 2px solid #224c70; border-radius: 50%; opacity: 0; transition: all 0.6s ease-out; }
.list li img { display: inline-block; transform: translateY(0px); transition: all 0.6s ease-out; }
.list li.active img { transform: translateY(-15px);}
.list li.active .dot { background: #244c70; }
.list li.active .dot:before { opacity: 1; }


/* -----section3(SERVICE)----- */
#section3 { text-align: center; }
.service { margin-top: 100px; }
.s_left { float: left; width: 66%; }
.s_left img { width: 100%; }
.s_left .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #fff); }
.s_left .swiper-button-prev, .s_left .swiper-rtl .swiper-button-next { left: 2%; right: auto; color: #fff; }
.s_left .swiper-button-next, .s_left .swiper-rtl .swiper-button-prev { right: 2%; left: auto; color: #fff; }
.s_right { float: right; width: 30%; height: 580px; padding: 8% 0; border: 1px solid #244c70; }
.s_right .line { width: 80%; margin: 50px auto; border-bottom: 1px solid #244c70; }
.s_right h3 { margin-bottom: 20px; font-size: 16px; color: #244c70; }
.s_right p { display: inline-block; line-height: 1.2; font-size: 14px; }
.s_right .text2 { display: block; margin-left: 38px; }
.s_right img { height: 28px; margin-right: 12px; }
.btn2 { display: inline-block; margin-top: 80px; padding: 10px 30px; background: #333; transition: all .6s; }
.btn2 a { color: #fff; }
.btn2 i { margin-left: 5px; font-size: 16px; }
.btn2:hover { background: #244c70; transform: translateX(10px); }

.s_left { transition: transform 0.8s ease, opacity 0.8s ease; opacity: 0; transform: translateX(-150px); }
.s_left.on { transform: translateX(0); opacity: 1; }
.s_right { transition: transform 0.8s ease, opacity 0.8s ease; opacity: 0; transform: translateX(150px); }
.s_right.on { transform: translateX(0); opacity: 1; }


/* -----section4(INTRODUCTION)----- */
#section4 { width: 100%; height: 940px; background: url(../img/introdution_bg.jpg) no-repeat fixed; padding: 100px 0; }
.intro { margin-top: 100px; }
.i_left { float: left; width: 66%; }
.i_left img { width: 100%; }
.i_left .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #fff); }
.i_left .swiper-button-prev, .i_left .swiper-rtl .swiper-button-next { left: 2%; right: auto; color: #fff; }
.i_left .swiper-button-next, .i_left .swiper-rtl .swiper-button-prev { right: 2%; left: auto; color: #fff; }
.i_right { float: right; width: 30%; margin-top: 24%; text-align: left; }
.i_right h1 { font-size: 40px; color: #244c70; font-weight: 300; text-align: left; }
.i_right h3 { margin: 10px 0 20px; font-size: 16px; font-weight: 500; }
.i_right p { display: inline-block; line-height: 1.2; font-size: 1.1rem; }
.btn3 { display: inline-block; margin-top: 80px; padding: 10px 30px; background: #333; transition: .6s; }
.btn3 a { color: #fff; }
.btn3:hover { background: #244c70; transform: translateX(10px); }

.i_left,.i_right { opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease; position: relative; }
/* 초기 위치: 화면 바깥쪽 */
.i_left { transform: translateX(-150px); }
.i_right { transform: translateX(150px); }
/* on 클래스 추가 시: 슬라이드 인 + 페이드 인 */
.i_left.on, .i_right.on { transform: translateX(0); opacity: 1; }



/* -----reserv----- */
#reserv { margin: 100px auto; text-align: left; }
#reserv h2 { font-size: 32px; }
.steps { margin-top: 50px; }
.motion2 { display: flex; justify-content: space-between; flex-wrap: wrap; opacity: 0; transition: all 0.6s; }
.motion2 li { flex: 1 0 auto; }
.motion2 li:nth-child(1) { transform: translateY(150px); transition: all 0.6s; }
.motion2 li:nth-child(2) { transform: translateY(150px); transition: all 0.8s; }
.motion2 li:nth-child(3) { transform: translateY(150px); transition: all 1s; }
.motion2 li:nth-child(4) { transform: translateY(150px); transition: all 1.2s; }
.on { opacity: 1; }
.steps li i { font-size: 60px; }
.steps h3 { margin: 30px 0 10px; font-size: 20px; }
.steps p { font-size: 16px; }


/* ＊＊＊＊＊＊＊＊＊＊ 반응형 ＊＊＊＊＊＊＊＊＊＊ */
/* Tablet */
@media all and (max-width:1024px) {
    /* -----visual----- */
    #visual { display: none; }
    #mvisual { display: inline-block; width: 100%; margin-top: 60px; }
    #mvisual .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #244c70); }
    /* section2 */
    .line2 { top: 42.2%; }
    .mline2 { display: inline-block; position: absolute; left: 0; top: 107%; width: 100%; height: 1px; background: #ddd; }
    .motion li:nth-child(5) { margin-top: 18%; }
    .motion li:nth-child(6) { margin-top: 18%; }
    .motion li:nth-child(7) { margin-top: 18%; }
    .motion li:nth-child(8) { margin-top: 18%; }
    .list li .dot:before { top: -50%; left: -50%; }
    .list li:nth-child(2) .dot:before { top: -50%; left: -60%; }
    .list li:nth-child(3) .dot:before { top: -50%; left: -50%; }
    .list li:nth-child(4) .dot:before { top: -50%; left: -60%; }
    .list li:nth-child(5) .dot:before { top: -60%; left: -50%; }
    .list li:nth-child(6) .dot:before { top: -60%; left: -60%; }
    .list li:nth-child(7) .dot:before { top: -60%; left: -50%; }
    .list li:nth-child(8) .dot:before { top: -60%; left: -60%; }

    /* section3 */
    .s_right { height: 471px; padding: 4.5% 0; }
    .btn2 { margin-top: 40px; }

    
    /* section4 */
    .i_right { margin-top: 20%; }
    .i_right h1 { font-size: 32px; }
    .btn3 { margin-top: 60px; }




}

/* Mobile1 */
@media all and (max-width:780px) {
    /* section1 */
    .program .pro { flex: 0 0 48%; }
    .program .pro:nth-child(1) { margin-bottom: 20%; }
    .program .pro:nth-child(2) { margin-bottom: 20%; }

    /* section2 */
    .mline2 { top: 107.3%; }
    .motion li img { height: 150px; }
    .list li .dot:before { top: -60%; left: -60%; }
    .list li:nth-child(2) .dot:before { top: -60%; left: -50%; }
    .list li:nth-child(3) .dot:before { top: -60%; left: -60%; }
    .list li:nth-child(4) .dot:before { top: -60%; left: -60%; }
    .list li:nth-child(5) .dot:before { top: -50%; left: -60%; }
    .list li:nth-child(6) .dot:before { top: -50%; left: -50%; }
    .list li:nth-child(7) .dot:before { top: -50%; left: -60%; }
    .list li:nth-child(8) .dot:before { top: -50%; left: -60%; }
    .list li strong { font-size: 16px; }
    .list li p { font-size: 13px; }

    /* section3 */
    .s_right { height: 353px; padding: 4.5% 0; }
    .s_right p { width: 192px; }
    .s_right .line { margin: 20px auto; }

    /* section4 */
    .i_right { margin-top: 16%; }
    .i_right h1 { font-size: 25px; }
    .btn3 { margin-top: 30px; }

    /* reserv */
    .motion2 li { flex: 0 0 23%; }
    .steps h3 { font-size: 18px; }
    .steps p { font-size: 14px; }

}

/* Mobile2 */
@media all and (max-width:430px) {
    h1 { font-size: 35px; }
    /* visual */
    #mvisual { display: none; }
    #mmvisual { display: inline-block; width: 100%; margin-top: 60px; }
    #mmvisual .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #999); }

    /* section1 */
    section { margin: 60px auto; }
    .program { margin-top: 60px; }
    .program .pro { flex: 1 0 auto; }
    .program .pro:nth-child(2) { display: none; }
    .program .pro:nth-child(3) { display: none; }
    .program .pro:nth-child(4) { display: none; }
    .program .btn { display: none; }
    .mbtn { display: block; width: 154px; margin: 0 auto; padding: 10px 30px; background: #333; transition: .6s; }
    .mbtn a { color: #fff; }
    .mbtn:hover { background: #244c70; transform: translateX(-10px); }

    /* section2 */
    .list li .dot { width: 8px; height: 8px; }
    #section2 { margin-top: 60px; padding: 60px 0 110px; }
    .list { margin-top: 60px; }
    .line2 { top: 41.5%; }
    .mline2 { top: 107.4%; }
    .motion li img { height: 90px; }
    .motion li:nth-child(5) { margin-top: 22%; }
    .motion li:nth-child(6) { margin-top: 22%; }
    .motion li:nth-child(7) { margin-top: 22%; }
    .motion li:nth-child(8) { margin-top: 22%; }
    .list li .dot { left: 46%; }
    .list li .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(2) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(3) .dot:before { top: -50%; left: -60%; width: 12px; height: 12px; }
    .list li:nth-child(4) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(5) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(6) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(7) .dot:before { top: -50%; left: -60%; width: 12px; height: 12px; }
    .list li:nth-child(8) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li strong { font-size: 13px; }
    .list li p { display: none; }

    /* section3 */
    .service { margin-top: 60px; }
    .s_left { float: none; width: 95%; margin: 0 auto; }
    .s_left img { width: 100%; }
    .s_left .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #fff); }
    .s_left .swiper-button-prev, .s_left .swiper-rtl .swiper-button-next { left: 2%; right: auto; color: #fff; }
    .s_left .swiper-button-next, .s_left .swiper-rtl .swiper-button-prev { right: 2%; left: auto; color: #fff; }
    .s_right { float: none; width: 95%; height: 340px; margin: 10px auto 0; }

    /* section4 */
    #section4 { padding: 60px 0; height: 796px; }
    .intro { margin-top: 60px; }
    .i_left { float: none; width: 95%; margin: 0 auto; }
    .i_left img { width: 100%; }
    .i_left .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #fff); }
    .i_left .swiper-button-prev, .i_left .swiper-rtl .swiper-button-next { left: 2%; right: auto; color: #fff; }
    .i_left .swiper-button-next, .i_left .swiper-rtl .swiper-button-prev { right: 2%; left: auto; color: #fff; }
    .i_right { float: none; width: 95%; margin: 20px auto 0; }
    
    /* reserv */
    #reserv { margin: 60px auto; }
    .motion2 li { flex: 0 0 42%; }
    .motion2 li:nth-child(3) { margin-top: 30px; }
    .motion2 li:nth-child(4) { margin-top: 30px; }


}

/* Mobile3 */
@media all and (max-width:380px) {
    h1 { font-size: 35px; }
    /* visual */
    #mmvisual { display: inline-block; width: 100%; margin-top: 60px; }
    #mmvisual img { width: 100%; }
    #mmvisual .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #999); }

    /* section1 */
    section { margin: 60px auto; }
    .program { margin-top: 60px; }
    .program .pro { flex: 0 0 100%; }
    .program .pro:nth-child(2) { display: none; }
    .program .pro:nth-child(3) { display: none; }
    .program .pro:nth-child(4) { display: none; }
    .program .btn { display: none; }
    .mbtn { display: block; width: 154px; margin: 0 auto; padding: 10px 30px; background: #333; transition: .6s; }
    .mbtn a { color: #fff; }
    .mbtn:hover { background: #244c70; transform: translateX(-10px); }

    /* section2 */
    #section2 { margin-top: 60px; padding: 60px 0 110px; }
    .list { margin-top: 60px; }
    .line2 { top: 41.5%; }
    .mline2 { top: 107.4%; }
    .motion li img { height: 78px; }
    .motion li:nth-child(5) { margin-top: 22%; }
    .motion li:nth-child(6) { margin-top: 22%; }
    .motion li:nth-child(7) { margin-top: 22%; }
    .motion li:nth-child(8) { margin-top: 22%; }
    .list li .dot { width: 8px; height: 8px; left: 46%; }
    .list li .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(2) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(3) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(4) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(5) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(6) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(7) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(8) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li strong { font-size: 11px; }
    .list li p { display: none; }

    /* section3 */
    .service { margin-top: 60px; }
    .s_left { float: none; width: 95%; margin: 0 auto; }
    .s_left img { width: 100%; }
    .s_left .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #fff); }
    .s_left .swiper-button-prev, .s_left .swiper-rtl .swiper-button-next { left: 2%; right: auto; color: #fff; }
    .s_left .swiper-button-next, .s_left .swiper-rtl .swiper-button-prev { right: 2%; left: auto; color: #fff; }
    .s_right { float: none; width: 95%; height: 340px; margin: 10px auto 0; }

    /* section4 */
    #section4 { padding: 60px 0; height: 796px; }
    .intro { margin-top: 60px; }
    .i_left { float: none; width: 95%; margin: 0 auto; }
    .i_left img { width: 100%; }
    .i_left .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #fff); }
    .i_left .swiper-button-prev, .i_left .swiper-rtl .swiper-button-next { left: 2%; right: auto; color: #fff; }
    .i_left .swiper-button-next, .i_left .swiper-rtl .swiper-button-prev { right: 2%; left: auto; color: #fff; }
    .i_right { float: none; width: 95%; margin: 20px auto 0; }
    
    /* reserv */
    #reserv { margin: 60px auto; }
    #reserv h2 { font-size: 28px; }
    .motion2 li { flex: 0 0 47%; }
    .motion2 li:nth-child(3) { margin-top: 30px; }
    .motion2 li:nth-child(4) { margin-top: 30px; }


}

/* Mobile4 */
@media all and (max-width:320px) {
    /* section2 */
    #section2 { margin-top: 60px; padding: 60px 0 110px; }
    .list { margin-top: 60px; }
    .line2 { top: 38.5%; }
    .mline2 { top: 107.4%; }
    .motion li img { height: 68px; }
    .motion li:nth-child(5) { margin-top: 28%; }
    .motion li:nth-child(6) { margin-top: 28%; }
    .motion li:nth-child(7) { margin-top: 28%; }
    .motion li:nth-child(8) { margin-top: 28%; }
    .list li .dot { width: 8px; height: 8px; left: 46%; }
    .list li .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(2) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(3) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(4) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(5) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(6) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(7) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li:nth-child(8) .dot:before { top: -50%; left: -50%; width: 12px; height: 12px; }
    .list li strong { font-size: 11px; }
    .list li p { display: none; }
}