@charset "utf-8";

/* *********************************
	common
********************************* */
html, body { height:100%; }
body { display:flex; flex-direction:column; }
.school_wrap.bridge, 
.main_wrap { flex:1; }
.stream_area { flex:none;}

/* *********************************
	main
********************************* */
.main_wrap { display: flex; height:100vh; }
.main_wrap > div { position:relative; overflow:hidden; flex:1; }
.main_wrap > div.on { flex:6; transition:all 1.5s; }
.main_wrap > div:not(.on) { flex:2; }

.main_wrap > div a { padding:0 3vw; }
.main_wrap h1.current { display:none; max-width:297px; }
    .main_wrap .on h1 { position:relative; display:none; }
    .main_wrap .on h1.current { display:block; }
    .main_wrap h1 img { position:relative; max-width:100%; }
.main_wrap a { display:block; height:100%; }

.main_wrap h1 { position:relative; z-index:8; padding:8vw 0 0; text-align:center; }
.main_wrap h1.current { padding:6vw 0 0 0; text-align:left; }

.main_wrap > div .bg_area:before { z-index:3; content:""; position:absolute; left:50%; top:0px; transform:translateX(-50%); opacity:1; display:block; width:100%; height:100%; transition:all 0.8s; opacity:0.5; }
.main_wrap > div.on .bg_area:before { opacity:0; }
/* off */
.main_wrap > .ele .visual .bg_area:before { background:#67C2C3; }
.main_wrap > .mid .visual .bg_area:before { background:#E68CD3; }
.main_wrap > .high .visual .bg_area:before { background:#7547D9; }
.main_wrap .ele {  background:url('../images/main/bg_ele_on.jpg') center no-repeat; background-size:cover; }
.main_wrap .mid {  background:url('../images/main/bg_mid_on.jpg') center no-repeat; background-size:cover; }
.main_wrap .high { overflow:hidden; background:url('../images/main/bg_high_on.jpg') center no-repeat; background-size:cover; }
/* off */
.main_wrap > div .visual * { 
  -webkit-filter: grayscale(70%); 
  filter: grayscale(70%); 
  vertical-align:top;
  mix-blend-mode: luminosity; /* hard-light */
}
/*
.main_wrap > .ele .ch01,
.main_wrap > .high .ch03 { mix-blend-mode:normal; }
*/
/* on */
.main_wrap > div.on .visual * { 
  mix-blend-mode:normal;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%);
}
/* off */
.main_wrap .ch01,
.main_wrap .ch02,
.main_wrap .ch03,
.main_wrap .ch04,
.main_wrap .ch05,
.main_wrap .bg { z-index:2; position:absolute; }


.main_wrap .ch01 img,
.main_wrap .ch02 img,
.main_wrap .ch03 img,
.main_wrap .ch04 img,
.main_wrap .ch05 img,
.main_wrap .bg img { width:100%; }
  /* ele */
  .ele .ch01 { z-index:3; bottom:0px; right:-40%; max-width:848px; width:38vw; }
    .ele img.bg { position:absolute; top:0px; left:0px; }
    .ele.on .ch01 img.bg { animation:ele_motion 4s ease-in-out infinite; }
    /* .ele.on .ch01 img:nth-child(2) { animation:high_motion01 3s ease-in-out infinite; } */
  .ele .ch02 { bottom:25%; right:35%; max-width:357px; width:15vw; }
  .ele .ch03 { bottom:40%; right:33%; max-width:98px; width:4vw; }
  .ele .ch04 { display:none; top:1%; right:-80px; max-width:452px; width:17vw; }
    .ele .ch04 img { position:absolute; top:0px; left:0px; }
    .ele .ch04 img:nth-child(1) { animation:ele_motion 2s ease-in-out infinite; }
    .ele .ch04 img:nth-child(2) { animation:ele_motion 3s ease-in-out infinite; }
  .ele .ch05 { display:none; bottom:-68px; left:0; max-width:434px; width:24vw; }
    .ele.on .ch05 img.bg { animation:ele_motion 3.6s ease-in-out infinite; }
    .ele.on .ch01 { z-index:3; right:0px; }
    .ele.on .ch02,
    .ele.on .ch04, 
    .ele.on .ch05 { display:block; }
  /* mid */
  .mid .ch01 { z-index:3; bottom:-11%; right:-90%; max-width:863px; width:38vw; }
  .mid .ch02 { top:0; right:0; max-width:1471px; width:50vw; }
  .mid .ch03 { display:none; bottom:-10%; left:-5%; max-width:452px; width:22vw; }
  .mid .ch04 { top:30%; right:16vw; max-width:61px; width:3vw; }
  .mid .ch05 { display:none; bottom:30%; left:13vw; max-width:77px; width:4vw; }
    .mid.on .ch01 { right:-5%; }
    .mid.on .ch03 { display:block; }
    .mid.on .ch04 { animation:mid_fly 4s ease-in-out infinite; }
    .mid.on .ch05 { display:block; animation:mid_fly 5s ease-in-out infinite; }
  /* high */
  .high .visual * { transition:bottom 2s ease-in-out; }
  .high .ch01 { bottom:-5%; right:-20vw; max-width:914px; width:40vw; }
  .high .ch02 { display:none; bottom:1vw; right:2vw; max-width:163px; width:5vw; }
  .high .ch03 { top:100px; right:10%; max-width:528px; width:17vw; }
  .high .ch04 { display:none; bottom:0; left:0; max-width:646px; width:20vw; }
    .high.on .ch01 { right:0; animation:high_motion01 3s ease-in-out infinite; }
    .high.on .ch02 { animation:high_motion01 2s ease-in-out infinite; }
    .high.on .ch02,
    .high.on .ch03,
    .high.on .ch04 { display:block; }

  /* motion */
  @keyframes ele_motion {
      0% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-2vw);
      }
      100% {
          transform: translateY(0);
      }
  }
  @keyframes mid_motion {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-0.8vw);
        }
        100% {
            transform: translateY(0);
        }
  }
  @keyframes mid_fly {
    0%, 100% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25%, 75% {
      transform: translate(10px, -5px) rotate(5deg) scale(1.05);
    }
    50% {
      transform: translate(0, -10px) rotate(0deg) scale(1);
    }
  }
  @keyframes high_motion01 {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(1vw);
      }
  }

  

.main_bot { z-index:2; position:relative; padding:25px 30px 15px; background:#3A3A3A; box-sizing:border-box; }
.main_bot .bot_area { position:relative; display:flex; margin:0 auto; max-width:1400px; align-items:center; justify-content:space-between; }
    .main_bot .t_service { display:inline-block; width:126px; font-size:var(--bodyTxt20-size); color:var(--whiteColor); font-weight:var(--fontW600); }
        .main_bot .t_service:before { content:""; position:absolute; left:14%; top:50%; transform:translateY(-50%); display:inline-block; width:1px; height:56px; background:#666; }
    .main_bot .t_service a { display:inline-block; margin-top:10px; width:106px; height:35px; line-height:35px; background:var(--pointColor_ele); font-size:var(--bodyTxt18-size); color:var(--whiteColor); font-weight:var(--fontW600); border-radius:30px; text-align:center; }
.main_bot .main_event,
.main_bot copy { max-width:1130px; width:100%; }
.main_bot copy  { display:block; margin:10px auto 0; max-width:1400px; font-size:11px; text-align:right; color:#7D7D7D; }

.ev_banner { display:flex; justify-content:space-between; align-items:center; }

.ev_banner img {  width:120px; height:60px; }
    .ev_banner dt { position:relative; display:block; margin-bottom:5px; padding-left:75px; font-size:var(--bodyTxt20-size); color:#FDED7C; font-weight:var(--fontW600); line-height:1.2; }
    .ev_banner dt span { position:absolute; top:0px; left:0px; display:inline-block; width:67px; height:20px; line-height:20px; vertical-align:text-top; text-align:center; font-size:var(--bodyTxt12-size); font-weight:var(--fontW600); color:#19173E; background:url('../images/main/bg_event.svg') center no-repeat; }
    .ev_banner dd { font-size:var(--bodyTxt12-size); color:var(--whiteColor); line-height:1.4; word-break:keep-all; }
    .ev_banner dl br { display:none; }
    .ev_banner a { display:flex; align-items:center; justify-content:flex-start; }
    .ev_banner .event_fix { width:500px; }
    .ev_banner .evnet_list { position:relative; padding:13px 50px; width:560px; background:rgba(0, 0, 0, 0.2); border-radius:100px; box-sizing:border-box; }
    .ev_banner .evnet_list .prev,
    .ev_banner .evnet_list .next { z-index:3; position:absolute; top:50%; transform:translateY(-50%); }
    .ev_banner .evnet_list .prev { left:30px; }
    .ev_banner .evnet_list .next { right:30px; }
    .ev_banner .evnet_list .prev img,
    .ev_banner .evnet_list .next img { width:25px; height:25px;}

    .ev_banner.sub_event { padding:10px 0; }
    .ev_banner.sub_event > * { width:50%; }
    .ev_banner.sub_event * { font-size:var(--bodyTxt16-size); color:#000; font-weight:var(--fontW600); }
    .ev_banner.sub_event img { width:88px; height:auto; }
    .ev_banner.sub_event dt { display:inline-block; padding-left:0px; }
      .ev_banner.sub_event dt:before { content:"[ "}
      .ev_banner.sub_event dt:after { content:" ]"}
      .ev_banner.sub_event dt span { display:none; }
    .ev_banner.sub_event dd { display:inline-block; padding-left:5px; vertical-align:middle; }
    .ev_banner.sub_event .event_fix { padding:5px 0; }
    .ev_banner.sub_event .evnet_list { padding:5px 54px; background:var(--whiteColor); }
    .ev_banner.sub_event .evnet_list a { justify-content:center; }
    .ev_banner.sub_event .evnet_list .prev { left:15px; }
    .ev_banner.sub_event .evnet_list .next { right:15px; }

/* *********************************
	bridge
********************************* */
.bridge .video_area.fade_out { opacity:1 !important; z-index:5 !important; }

.bridge { padding-bottom:170px; /*min-height:calc(100vh - 500px);*/ background:#02A39F; }

    .bridge_con { margin:0 auto; max-width:1600px; }

    .bridge_con h1 { padding-top:90px; text-align:center; }
    .bridge_con h1 img { width:100%; }

    .bridge_con .list_menu { display:flex; justify-content:center; flex-wrap:wrap; margin:20px 0 50px -32px; }
        .list_menu a { position:relative; margin:15px 0 0 16px; padding:0 0 7px 16px; text-align:center; }
            .list_menu a img { max-height:24px; min-height:16px; height:3vw; opacity:0.8; }
            .list_menu a:hover img,
            .list_menu a.on img { opacity:1; }
            .list_menu a:hover:after,
            .list_menu a.on:after { content:""; position:absolute; right:0px; bottom:0px; display:inline-block; width:calc(100% - 16px); height:3px; background:var(--whiteColor); }
        .list_menu a:before { content:""; position:absolute; left:0px; top:50%; transform:translateY(-50%); display:inline-block; width:1px; height:24px; background:rgba(255, 255, 255, 0.2); }
        .list_menu a:first-child:before { display:none; } 

    .bridge_con .stream_con { overflow:visible; margin:0 0 0 -25px ; padding:0px; flex-wrap:wrap; justify-content:center !important; align-items:flex-end; } /* 24.08 미래엔 추가 -> justify-content:center !important; !important 추가 */
    .bridge_con .stream_con li { padding:0 0 65px 25px; }
        .bridge_con .stream_con li:first-child { padding-left:25px; }
        .bridge_con .stream_con li .bok_area { width:50vw; height:auto; max-height:fit-content; max-width:245px; box-shadow:0px 5px 25px -2px rgba(0, 0, 0, 0.4); }
        .bridge_con .stream_con li .bok_area img { width:100%; height:auto; vertical-align:top; }

      .bridge .stream_con a { position:relative; }
      .bridge .stream_con a:hover .bok_set:after,
      .bridge .stream_con .set .bok_set:after { content:""; z-index:1; position:absolute; top:-6px; left:-6px; display:inline-block; width:100%; height:calc(100% - 44px); padding:6px; background:rgba(255, 255, 255, 1); border-radius:10px; } 
      .bridge .stream_con a img { z-index:2; position:relative; }

      .bridge .stream_con a .tag { z-index:4; position:absolute; left:12px; top:-8px; max-width:36px; width:3vw; }
      .bridge .stream_con a .tag img { width:100%; }
    
    /*.bridge_con .stream_con + .stream_con { margin-top:25px; }*/

    .bridge_con .new_stream_con { position:relative; margin-bottom:80px; /*padding-bottom:30px;*/ }
    .bridge_con .new_stream_con:before { content:""; position:absolute; left:0; bottom:0px; display:block; width:100%; height:1px; border-radius:10px; background:#fff; }


    .textbook_name { z-index:5; position:fixed; right:30px; bottom:100px; display:inline-block; width:88px; height:107px; }
        .textbook_name .open_pop img,
        .pop_wrap.high .pop_con img { width:100%; height:auto; vertical-align:top; }
            .pop_wrap.high { max-width:785px; }
            .pop_wrap.high h1 { background:#BBE8C2; }
        .bridge .pop_wrap .pop_con { padding:30px; }
        .bridge .pop_wrap .pop_con p { padding:0 12%; margin-bottom:30px; font-size:var(--bodyTxt24-size); line-height:1.5; word-break:keep-all; text-align:center; }
    .textbook_name.absolute { position:absolute; }
    


@media screen and (max-width:1600px) { 
  .bridge_con .new_stream_con:before { left:0; width:100%; }
}
@media screen and (max-width:1400px) { 

    
    .main_wrap h1.current { display:none; max-width:25vw; }
    
    .mid .ch01 { width:40vw; }
    .mid .ch03 { width:30vw; }
    .high.on .ch01 { right:-15vw;}

    /* bridge */
    .bridge { padding-bottom:85px; }
    .list_menu a:before { display:none; }
    .bridge .video_area { display:block; }
    .bridge_con .stream_con li .bok_area { width:20vw; }

    /* bridge */
    .bridge_con .stream_con { padding:0 30px; }
    .bridge_con .group_con { margin-bottom:50px; }
    .bridge_con .group_con:before { left:50%; transform:translateX(-50%); bottom:0px; margin-left:12px; max-width:calc(100% - 25px); width:88%; }

    /* main_bot */
    .main_bot .bot_area { position:relative; display:block; }
        .main_bot .t_service { display:flex; gap:10px; align-items:center; justify-content:center; margin:-15px -30px 0; padding:10px 30px; margin-bottom:25px; width:100%; border-bottom:1px solid #666; }
            .main_bot .t_service:before { display:none; }
            .main_bot .t_service a { margin:0; }


    .textbook_name { right:10px; bottom:10px; width:70px; height:auto; }

            
}
@media screen and (max-width:1250px) { 

  .main_wrap { height:85%; flex:0 0 auto; }

 /* bridge */
 .bridge { padding-bottom:85px; }
 .list_menu a:before { display:none; }
 .bridge .video_area { display:block; right:20px; bottom:20px; }
 .bridge_con .stream_con li .bok_area { width:20vw; }

}


@media screen and (max-width:1030px){

/* main_bot */
  .main_bot { padding:0px; }
        .main_bot .t_service { margin:0; padding:10px 0; margin-bottom:0; }

  .main_bot .ev_banner { padding:3vw 0; }
      .main_wrap h1.current { padding:7vw 0 0 0; }
      .main_wrap .ele h1.current { padding:8vw 0 0 0; }
      .ev_banner .event_fix,
      .ev_banner .evnet_list { position:relative; flex:1; } 
      
      .ev_banner a { flex-direction:column; }
      .ev_banner dl { display:flex; flex-direction:column; text-align:center; justify-content:center; line-height:1.5;}
      .ev_banner dl,
      .ev_banner dl * { word-break:keep-all; }
      .ev_banner dt { display:flex; align-items:center; justify-content:center; padding:5vw 0 0; height:6vw; font-size:var(--bodyTxt12-size-w); }
      .ev_banner dt span { display:block; padding:1vw 0; width:100%; height:auto; font-size:var(--bodyTxt9-size-w); background-size:auto 100%; }
      .ev_banner dd { display:flex; align-items:center; justify-content:center; height:5vw; font-size:var(--bodyTxt10-size-w); }
      .ev_banner dl br { display:block; }

      .event_fix img,
      .evnet_list div img { position:absolute; left:50%; bottom:0px; transform:translateX(-50%); width:150px; height:auto; }
      .ev_banner .event_fix,
      .ev_banner .evnet_list .event_slider a { padding:0 30px 98px; } 

      .ev_banner .evnet_list { position:relative; padding:0px; background:transparent; border-radius:0px; width:50%; }
      .ev_banner .evnet_list .event_slider a { position:relative; box-sizing:border-box; }
      .ev_banner .evnet_list:before { content:""; position:absolute; left:0px; top:50%; transform:translateY(-50%); display:inline-block; width:1px; height:160px; background:#2E2E2E; }
      .ev_banner .evnet_list .prev { left:10px; }
      .ev_banner .evnet_list .next { right:10px; }
      .ev_banner .evnet_list .prev img, 
      .ev_banner .evnet_list .next img { width:15px; height:15px;}
  .main_bot copy { margin:0px; padding:1.5vw 0; text-align:center; background:#2E2E2E; font-size:var(--bodyTxt9-size-w); }
  
}

@media screen and (max-width:1000px) { 
  .main_wrap { flex-direction:column; }
  .main_wrap h1 { padding:7vw 0 0 2vw; text-align:left; }
      .main_wrap .ele h1 { padding-top:8vw; }
  .main_wrap h1 img { max-width:250px; width:30vw; min-width:150px; }
  .main_wrap h1.current img { max-width:620px; width:46vw; min-width:256px; }
  .main_wrap h1.current { padding:10vw 0 0 0; }
  
    /* ele */
    .ele .ch01 { bottom:-3vw; right:0px; width:60vw; }
    .ele .ch02 { display:none; bottom:18vw; right:30vw; width:24vw; }
    .ele .ch03 { display:none; bottom:33vw; right:26vw; width:7vw; }
    .ele.on .ch01 { bottom:0px; }
    .ele.on .ch02 { display:block; bottom:18vw; right:30vw; }
    .ele.on .ch03 { display:block; bottom:33vw; right:26vw; }
    .ele .ch04 { display:none; top:15vw; right:-10vw; width:40vw; }
    .ele .ch05 { bottom:-6vw; left:0; width:30vw; }
    
    .main_wrap .ele h1,
    .main_wrap .ele h1.current { padding-top:10vw; }
    /* mid */
    .mid .ch01 { bottom:-12vw; right:-3vw; width:65vw; }
    .mid.on .ch01 { bottom:-7vw; right:-3vw; width:65vw; }
    .mid .ch02 { width:100vw; }
    .mid .ch03 { left:-4vw; bottom:-4vw; }
    .mid .ch04 { width:5vw; }
    .mid .ch05 { width:7vw; }
    /* high */
    .high .ch01 { bottom:-22vw; width:80vw; }
    .high .ch02 { display:none; width:10vw; }
    .high .ch03 { width:40vw; }
    .high .ch04 { width:60vw; }
    .high.on .ch01 { bottom:0px; }
    .high.on .ch02 { display:block; bottom:0px; }

    /* bridge */
    .bridge .stream_con li strong { display:flex; min-height:25px; flex-direction:row; align-items:center; margin-bottom:0px; font-size:15px; }
    .bridge .stream_con li strong em { margin-bottom:0px; font-size:12px; }   

    .bridge_con .group_con { padding-bottom:5vw !important; margin-bottom:10vw; }
}

@media screen and (max-width:760px) { 

  /* main */
  .main_wrap > div.on { flex:0 0 60%; }
  .main_wrap h1.current { padding:7vw 0 0 0; }

  .ele.on .ch04 { display:block; }

  .main_wrap h1.current img { width:70vw; }

  .main_bot .ev_banner { padding:20px 0; }
      .ev_banner dt { padding:30px 0 0; height:42px; font-size:18px; }
      .ev_banner dt span { height:20px; padding:0px; font-size:12px; }
      .ev_banner dd { height:50px; font-size:12px; }

      .main_bot .t_service { font-size:16px;; }
      .main_bot .t_service a { width:auto; height:26px; line-height:28px; padding:0px 15px; font-size:14px;; }
      .main_bot .t_service a img { width:8px; }

      .event_fix img,
      .evnet_list div img { width:120px; height:auto; }
      .ev_banner .event_fix,
      .ev_banner .evnet_list .event_slider a { padding:0 30px 78px; } 

      .main_bot copy { padding:15px 0; font-size:11px; }

  /* bridge */
  .bridge_con .list_menu { margin:0 25px 30px 20px; }
      .list_menu a { position:relative; margin-left:5px; padding:0 10px 3px; }
      .list_menu a:hover:after,
      .list_menu a.on:after { height:2px; left:50%; transform:translate(-50%); }      
      
      .bridge_con .stream_con { margin-left:0px; gap:5vw; padding:0px; }
      .bridge_con .stream_con li { padding:0 0 2vw; }
      .bridge_con .stream_con li:first-child a { padding-left:0; }
      .bridge_con .stream_con li strong { margin-top:10px; }
      .bridge_con .stream_con li .bok_area { width:35vw; min-width:150px; }

      .bridge_con .stream_con + .stream_con { margin-top:5vw; }

      .bridge .video_area { right:10px; bottom:10px; width:190px; height:74px; }
      .bridge .video_area a { padding:10px 10px 10px 20px; }
      .bridge .video_area .video_box { width:90px; height:54px; } 
      .video_area p { font-size:14px; }
      .video_area p span { padding-left:12px; font-size:12px; background-size:12px auto; }

      .bridge .stream_con li:first-child { padding-left:0; }
      .bridge .stream_con li strong { font-size:var(--bodyTxt16-size); }
  .bridge .stream_con li strong em { font-size:var(--bodyTxt12-size); }  

  .bridge .stream_con a .tag { top:-2.5%; width:6vw; }

  .bridge_con .group_con:before { margin-left:0px; }

  /* S : 미래엔 08.30 추가 */
  .bridge .stream_con a:hover .bok_set:after, 
  .bridge .stream_con .set .bok_set:after { height:calc(100% - 39px); }
  /* S : 미래엔 08.30 추가 */

  .bridge_con .new_stream_con { margin-bottom:10vw; padding-bottom:5vw; }
  .bridge_con .new_stream_con:before { left:50%; transform:translateX(-50%); width:85%; }

    .bridge .pop_wrap .pop_con { padding:15px; }
    .bridge .pop_wrap .pop_con p { padding:0; margin-bottom:15px; font-size:var(--bodyTxt24-size-w); }

     
}

@media screen and (max-width:650px) { 
    .main_wrap .ele h1,
    .main_wrap .ele h1.current { padding-top:17vw; }
}

/* *********************************
	elementary : ele :: 2025 수정
********************************* */
/* bridge */
.ele.bridge { background:#379F9D url('../images/ele/content/bg_bridge.png') center top no-repeat; background-size:100% auto; }

@media screen and (max-width:750px) { 
    .ele.bridge { background:#379F9D url('../images/ele/content/bg_bridge_mo.jpg') center top no-repeat; background-size:100% auto; }
}


/* *********************************
	middle : mid :: 2025 수정
********************************* */
/* bridge */
.mid.bridge { background:#C65CB9 url('../images/mid/content/bg_bridge.png') center top no-repeat; background-size:100% auto; }

@media screen and (max-width:750px) { 
    .mid.bridge { background:#C65CB9 url('../images/mid/content/bg_bridge_mo.jpg') center top no-repeat; background-size:100% auto; }
}


/* *********************************
	high : high :: 2025 수정
********************************* */
/* bridge */
.high.bridge { background:#8765D2 url('../images/high/content/bg_bridge.png') center top no-repeat; background-size:100% auto; }

@media screen and (max-width:750px) { 
    .high.bridge { background:#8765D2 url('../images/high/content/bg_bridge_mo.jpg') center top no-repeat; background-size:100% auto; }
}