/* PC 화면용 */ 


/* class Detail */



/* class Cover */

.class_cover { width: 100%; height: 854px; display: block; margin: 0; padding: 0;
    background-image: url(/class/training/img/sketch/main_bg.png); background-size: cover; position: relative; background-position: right;}
   
   .cover_wrap {height:100%; width:1200px; margin-left: auto; margin-right: auto;    }
   
   .cover_textbox {width:1200px; padding-top:200px; position: relative;} 
   .cover_textbox * {color: white;}
   .cover_textbox h2 { width: 800px; }
   .cover_textbox h4  {padding-top:24px;}
   .cover_textbox p {padding-top: 12px;}
   #main_mockup {position: absolute; top: 220px; right: 7%; width: 60%; min-width: 960px;}
  
   
   
   /* class_info*/
   
   .class_info {width: 100%; color: #fff; background-color: #000; padding: 95px 0 120px }
   .info_list {max-width: 490px; margin: 0 auto; display:flex;  }
   .info_img {text-align: center; padding-bottom: 36px;}
   .info_list li {padding: 14px 0 14px 0; border-top: 1px solid rgba(170,173,183,0.3); padding-left: 0px;}
   .info_list li:first-child {border-top: 2px solid #aaadb7;}
   .info_list li:last-child {border-bottom: 2px solid #aaadb7; height: 56px;}
   .info_list_title { width: 190px; }
   .info_list_title li {color: #c1c1c1; font-weight: 300; padding-left: 50px;}
   .info_list_detail { width: 300px; }
   .info_list_title li >div {width: 60px;}
   
   .info_register {display: block; text-align: center; color: #fff;   }
   .info_register .info_register_button {width: 490px; height: 70px; display: flex; justify-content: center; align-items: center; margin: 40px auto 0; background-color: #474398; border-radius: 9px; color: white; letter-spacing: 4.4px;}
   
   
   /* class_overview*/
   
   .class_overview {width : 100%; height: 100%; background-size: cover; color:white; background-position: center; background-image: url(/class/training/img/sketch/overview_background.jpg); padding-bottom: 140px; }
   
   .overview_title { width: 1200px; margin-left:auto; margin-right:auto; padding-top: 120px; }
   .overview_title h3 { text-align: center; letter-spacing: 0; }
   .overview_title h6 { padding-top: 20px; text-align: center;}
   .ln_tablet {display: none;}
   .ln_mobile {display: none;}
   
   
   
   /* class_result*/
   
   .class_result {width : 100vw; height: 100%; background-image:url(); background-color: #fafafa; color:#171717; padding: 0; padding-bottom: 140px; }
   .class_select_top_left h3 {font-weight: 500;}
   
   .result_title {margin-left:auto; margin-right:auto; padding-top: 120px; text-align: center;}
   .result_title h3 {color: #242629; font-weight: 500;}
   .result_title h6 {padding-top: 20px; color: #636B7B;}
   
   
   .result_contents { width: fit-content; margin-left: auto; margin-right: auto; display: block; margin-top: 72px; text-align: left; position: relative;  }
   .vertical_line {background-color:#EFF0F2; width: 2px; height: 490px; position: absolute; top: 50px; right: 524px;}
   .result_contents ul {margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white;}
   .result_contents ul li:nth-child(1) { width: 500px; height: 150px; color: #171717; margin-right: 150px;}
   .result_contents ul li:nth-child(2) {width: 50px; height: 150px; display: flex; align-items: center;}
   .result_contents ul li:nth-child(2) div {width: 50px; height: 50px; border-radius: 50%; background-color: #474398; display: flex; justify-content: center; align-items: center; position: relative;}
   .result_contents ul li:nth-child(2) h5 {color: white;}
   .result_contents ul li:nth-child(3) { width: 500px; height: 150px; text-align: left; color: #171717; box-sizing: border-box; padding-left: 60px; display: flex; flex-direction: column; justify-content: center;}
   .result_contents ul li:nth-child(3) h5 {color: #363A43; font-weight: 500;}
   .result_contents ul li:nth-child(3) p {color: #636B7B; line-height: 28px; margin-top: 10px;}
   .result_contents ul li p {width: 400px; word-break: keep-all;}
    

    /* class_select*/
    .trait {width: 100%; background-color: #474398; color: white; display: flex; flex-direction: column; align-items: center; padding: 140px 0 210px; position: relative;}
    .trait >img {margin-top: 60px; width: 75px;}
    .trait ul {margin-top: 50px;}
    .trait li {display: flex; margin-bottom: 80px; align-items: center;}
    .trait li:last-child {margin-bottom: 0;}
    .trait li img {width: 150px;}
    .trait_list_text {margin-left: 50px;}
    .trait_list_text h4 {color: #FDAA00; font-weight: 400;}
    #trait_line_top {position: absolute; top: 140px; right: 0; width: 320px}
    #trait_line_bottom {position: absolute; bottom: 140px; left: 0; width: 320px;}


   
   /* class_select*/
   
   .class_select {width : 100%; height: 100%; background-color: white;}
  
   .class_select_top {display: flex; max-width: 1200px; padding: 0 calc((100% - 1200px)/2); margin: 140px 0;}
   .class_select_top >div {width: 50%;}
   .class_select_top_left {color: #101010;}
   .class_select_top_right {color: #636B7B; padding-left: 30px; position: relative;}
   .class_select_top_right h6 {margin-left: 76px;}
   #quotation {width: 76px; height: 76px; position: absolute; top: -38px; left: 0;}
   .neon_underline {position: relative;}
   .neon_underline::after {content: ''; width: 100%; height: 6px; background-color: #EAFC27; position: absolute; left: 0; bottom: -3px; border-radius: 3px;}
   
   .class_select_bottom {background-color: #474398; padding-bottom: 140px;}
   .class_select_bottom_title {display: flex; justify-content: center; align-items: center; padding: 140px 0 80px;}
   .class_select_bottom >div:last-child {display: flex; justify-content: space-between; width: 1200px; margin: 0 auto;}
   .class_select_bottom h5 {color: #F9FFB5; text-align: center;}
   .class_select_bottom img {width: 200px; height: intrinsic; box-shadow: 10px 14px 18px 3px rgba(0,0,0,0.15); border-radius: 10px;}
   .class_select_bottom_title img {width: 30px; height: 30px; margin-right: 10px;}
   .class_select_bottom_title img {box-shadow: none;}
   
   
   /* class_select_02*/
   
   .class_select_02 {width : 100vw; background-color:#fafafa; color:#171717; text-align: center;}
   
   
   .class_select_02 h3 {color: #242629; padding: 140px 0 20px; font-weight: 500;}
   
   .select_02_contents { width: 1200px; margin-left: auto; margin-right: auto; display: block; margin-top: 72px; text-align: left; padding-bottom: 110px;  }
   .select_02_contents ul { width: 1200px; margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white; align-items: top;   }
   .select_02_contents ul li { width: 1200px;  text-align: center;   }
   
   
   /* class_select_03*/
   
   .class_select_03 {width : 100vw; height: 100%;  background-image:url(); background-color:#363435; text-align: center; color: #fafafa;}
   .class_select_03 h3 {padding: 140px 0 20px; font-weight: 500;}
   
   .select_03_contents { width: 100%; margin-left: auto; margin-right: auto; display: block; margin-top: 72px; text-align: left;   }
   .select_03_contents ul { width: 100%; margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white; align-items: top;   }
   .select_03_contents ul a li { width: 100%;  height: 600px; text-align: center;   }
   .select_03_contents ul a { width: 100%; height: 600px; text-align: center; background-image: url(/class/training/img/sketch/select_03.jpg); background-repeat:no-repeat; background-size: cover; }
   
   
   
   /* portfolio_scroll*/
   
   .portfolio_scroll { width: 100%; height: 100%;margin: 0; padding-top: 140px; text-align: center; background-color:#171717; color:#fff; position: relative; text-align: center;}
   .portfolio_scroll h3 {margin-bottom: 20px; letter-spacing: 0;}
   .portfolio_scroll h5 {color: #f3a819; margin-top: 50px;}
   
   .portfolio_scroll_wrap { width: 100%; height: 100%; display: block; overflow-x:scroll;  margin-top: 70px;}
   .portfolio_scroll_wrap ul { width:100%; display: flex; text-align: center; margin-bottom: 0px; padding-top: 20px;}
   .portfolio_scroll_wrap li { width: 300px;  text-align: left; margin-left:10px; margin-right: 10px; margin-bottom: -2px;}
   .portfolio_scroll_wrap li:first-child {padding-left: 10px;}
   .portfolio_scroll_wrap li:last-child {padding-right: 20px;}
   .portfolio_scroll_wrap img { width: 300px; cursor: pointer;}
   
   .portfolio_scroll_modal { z-index: 400; position: fixed; overflow-y: scroll; top:0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.7);}
   .portfolio_scroll_modal_img { width: 70%; padding: 60px 0; }
   .pol_img_close_btn{display: block; z-index: 400; height: 20px; width: 20px; top: 7%; position: fixed; right: 10%; cursor: pointer; background: url(../images/closeBtn.png) no-repeat center center;
   }
  
  
  
   /* class_curriculum_02*/
  
   .curriculum_contents_02 { width : 100%; height: 100%;background-color: rgb(250, 250, 250); color:#171717; padding: 140px 0;}
   .curriculum_contents_02 h3 {text-align: center; margin-bottom: 70px;}
   
   .curriculum_contents_02 >div {width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #E5E8ED; padding-top: 120px; display: none;}
   .curriculum_contents_02 >div:first-child {padding-top: 0;}
   .curriculum_contents_02 h5 {color: #7E8186;}
   .curriculum_contents_02 p {color: #A4A8AF; padding-bottom: 4px;}
   .curriculum_contents_02 ul { width:1200px; display: flex; align-items: flex-start; justify-content: center; margin-left: auto; margin-right: auto; margin-top:90px; }
   .curriculum_contents_02 ul:nth-of-type(1) {margin-top: 0;}
   .curriculum_contents_02 li:nth-child(odd) { width: 585px; padding-right: 15px;   }
   .curriculum_contents_02 li:nth-child(even) { width: 585px; padding-left: 15px;   }
   .curriculum_contents_02 li img {width: 585px;}
   .curriculum_contents_02 ul h4 {width: 585px;  text-align: left; border: none; line-height: 60px; margin: 10px 0;}
   .curriculum_contents_02 ul h6 {width: 585px; text-align: left;}
   .half {display: flex;}
   .half h6 {width: 50%;}
   
   
   /* class_target*/
   
   .class_target {width : 100%; height: 854px; background-color: white;}
   
   .target_title { width: 1200px; margin-left:auto; margin-right:auto; padding-top: 120px; text-align: center;}
   .target_title h3 {color: #242629; font-weight: 500;}
   .target_title h6 { color: #636B7B; padding-top: 20px; }
   
   .target_contents { width: 1200px; margin-left:auto; margin-right:auto; padding-top: 120px; text-align: center; display: block;}
   .target_contents ul { width: 100%; margin-left:auto; margin-right:auto; display: flex; text-align: center; padding: 0px; align-items: center; justify-content: space-between; }
   .target_contents li { display: block; text-align: center; position: relative; width: 320px; }
   .target_contents li img { width: 240px; }
   .target_contents li h5 {color: #363A43; margin: 37px 0 10px; font-weight: 500;}
   .target_contents li h6 {color: #363A43;}
   .target_contents li .target_check {position: absolute; top: 0; right: 45px; width: 50px;}
   
   
   /* class_teacher*/
   
   .class_teacher {width : 100%; height: 100%; background-color: #474398; color:white; display: flex; flex-direction: column; align-items: center; padding-bottom: 140px;}
   .class_teacher h3 {padding: 120px 0 20px; letter-spacing: 0;}
   .class_teacher h6 {padding-bottom: 80px;}
   
   .class_teacher_top {display: flex; align-items: flex-end; width: 1200px; justify-content: space-evenly; padding-bottom: 100px;}
   .class_teacher_top img {width: 260px; box-shadow: 10px 14px 18px 3px rgba(0,0,0,0.15); border-radius: 10px; opacity: 0.7;} 
   .class_teacher_top img:first-child {opacity: 1;}
   .class_teacher_bottom {height: auto; background-color: #fafafa; color: black; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.15) 10px 14px 18px 3px; padding: 70px;}
   /* .class_teacher_bottom {width: 100%; height: auto; background-color: #474398; color: white; padding: 100px 0 140px;} */
   .class_teacher_bottom li:first-child {margin-right: 70px;}
   .class_teacher_bottom ul {padding: 0 calc((100% - 1200px) / 2); display: flex; justify-content: space-evenly;}
   .class_teacher_bottom img {border-radius: 50%; box-shadow: 10px 14px 18px 3px rgba(0,0,0,0.15);}
  
   .teacher_select_bar {width: 1200px; height: 4px; margin: 30px 0 100px; position: relative;}
   .progress_bar {width: 260px; height: 4px; border-radius: 2px; background-color: white; position: absolute; top: 0; left: 0;}
   .teacher_history h5:nth-of-type(2), .teacher_history h5:nth-of-type(3) {position: relative; margin: 40px 0;}
   .teacher_history h5:nth-of-type(2)::before, .teacher_history h5:nth-of-type(3)::before {content: ''; width: 34px; height: 3px; background-color: #f3a819; position: absolute; top: -5px; left: 0;}
   
   
   .teacher_contents { width: 1200px; margin-left:auto; margin-right:auto; display: block;}
   .teacher_contents ul { width: 960px; margin-left:auto; margin-right:auto; display: flex; margin-top: 120px; align-items: center; justify-content: center;  }
   .teacher_contents ul li:nth-child(1) {  width: 450px;  display: block; }
   .teacher_contents ul li:nth-child(2) {  width: 510px;  display: block; text-align: left;  }
   .teacher_contents li img { width: 360px; }
   .teacher_contents li h4 {width: 450px; border-bottom: 1px solid #ff3366; padding-bottom: 12px; font-weight: 400;}
   .teacher_contents li p {width: 510px; margin-top:24px;}
   .teacher_contents li p:nth-child(odd) {position: relative; margin-top: 95px; padding-top: 10px; color: #000; font-weight: 400;}
   .teacher_contents li p:nth-child(odd)::before {position: absolute; top: 0; left: 0; content: ''; width: 160px; height: 1px; background-color: #000;} 
   
   
   /* class_student*/
   
   .class_student {width : 100%; height: 100%; background-color: #fafafa; color:#171717; padding: 0; padding-bottom: 140px; text-align: center;}
   
   .class_student >h3 {color: #242629; padding: 140px 0 20px; font-weight: 500;}
   .class_student >h6 {color: #636B7B; margin-bottom: 100px;}
   
   .student_contents { width: 1200px; margin-left:auto; margin-right:auto; padding-top: 120px; text-align: center; display: block; padding: 0px;}
   .student_contents ul { width: 100%; margin-left:auto; margin-right:auto;margin-top: 90px; text-align: center; padding: 0px; display: flex; justify-content: space-between; flex-wrap: wrap;}
   .student_contents li {  width: 49%; background-color: white; display: flex; border-radius: 10px; box-shadow: 5px 5px 20px #0000001D; padding-left: 40px; margin-bottom: 50px; box-sizing: border-box;}
   .student_contents img {min-width: 32px; min-height: 32px;}
   .dot {width: 5px; height: 5px; background-color: #197BF6; border-radius: 50%; margin: 10px; margin-bottom: 14px;}
   .student_contents p {padding: 40px; text-align: left; line-height: 28px; color: #636B7B; word-break: keep-all;}
   .student_color {color: #474398; font-weight: 700;}
  
  
   /* class_faq*/
   
   .class_faq {background-color: #363435; width : 100%; height: 100%; color:white;  display: flex; flex-direction: column; align-items: center;}
   
   .class_faq >h3 {padding: 120px 0 70px; font-weight: 500;}
   .question_box {width: 1200px;}
   .question_box >div {width: 100%;}
   .question_box >div:first-child {display: flex; justify-content: space-around;}
   .question_box >div:last-child {position: relative; height: 8px;}
   .question_box h5 {width: 25%; text-align: center; cursor: pointer;}
   .faq_progress {width: 33.3%; height: 8px; background-color: #F3A819; border-radius: 2px; position: absolute; top: 0; left: 0;}
   .question_title {color: #FAFAFA; margin-bottom: 50px ;}
   .question_title:nth-of-type(1) {color: #f3a819;}
   .answer_box {width: 1200px; height: 260px; background-color: rgba(62,61,61,0.5); border-radius: 2px; padding: 60px; box-sizing: border-box; margin-bottom: 140px;}
   .answer_box h5 {margin-bottom: 20px; color: #f3a819;}
   .answer_box h6 {word-break: keep-all; color: #fafafa;}
   
   
   /* class_benefit*/
   
   .class_benefit {width : 100%; background-color: #474398; color:white; padding-bottom: 140px;}
   
   .benefit_title { width: 1200px; margin-left:auto; margin-right:auto; display: flex; justify-content: center; align-items: center; padding-top:120px; } 
   .benefit_title h3 {font-weight: 500;}
   .benefit_title img { width: 60px; height: 60px; }
   
   .benefit_contents {width: 1200px; height: 520px; margin-left: auto; margin-right: auto; display: block;  text-align: center; padding-top: 60px;  }
   .benefit_contents ul { display: flex; align-items: center; justify-content: center; width: 1200px; margin-left: auto; margin-right: auto; display: flex; text-align: center; padding: 0px;  }
   .benefit_contents li { width: 360px; height: 150px; text-align: left; margin: 0; text-align: center;}
   .benefit_contents li div {margin: 24px auto; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px;  border: 2px solid #fff;  border-radius: 50%; text-align: center; }
   .benefit_contents h5 {margin: 0 auto; padding-top: 0px; padding-bottom: 12px; } 
   .benefit_contents p {width: 240px; margin: 0 auto;} 
   .benefit_contents ul:nth-child(2) {margin-top: 120px;}
   .benefit_contents img {width: 50px;}
  
   
   
   
   
   
   
   
   
   /* ======================================= Media Query ======================================= */
   
   
   @media only screen and (max-width: 1440px)   {
     .portfolio_scroll_wrap li { width: 220px;  text-align: left; margin-left:10px; margin-right: 10px; }
     .portfolio_scroll_wrap img { width: 220px; }
   }
   
   
   
   
   
   @media only screen and (max-width: 1280px) {
   
     /* class_select */
       
     .class_target {height: auto; padding-bottom: 140px;}
     .class_select_top {justify-content: center;}
     .class_select_top >div {width: auto;}
     
   
     /* class_portfolio */
   
     .portfolio_scroll_wrap li { width: 220px;  text-align: left; margin-left:10px; margin-right: 10px; }
     .portfolio_scroll_wrap img { width: 220px; }
   
   
     /* class_info*/
   
   
     /* class_overview*/
   
     .overview_title p { width: calc(100vw - 80px); padding-top: 12px; }
   
     .overview_contents_goal { margin-left: auto; margin-right: auto; display: flex; margin-top: 72px; text-align: center;   }
     .overview_contents_goal h5 { line-height: 36px;}
   
     .overview_contents_record { margin-left: auto; margin-right: auto; display: flex; margin-top: 200px; text-align: center;  }
     .overview_contents_record li { width: 200px;  }
     .overview_contents_record h4 { line-height: 72px; }
     .overview_contents_record li p { line-height: 36px; }
     .overview_contents_record_caption {width: calc(100vw - 80px); margin-left: auto; margin-right: auto; margin-top: 20px; text-align: center;}
   
   
   
     /* class_result*/
      
     .target_contents li .target_check {width: 40px; right: 70px;}
   
     .class_result {width : 100vw; height: 100%; background-image:url(); background-color: #fafafa; color:#171717; padding: 0; padding-bottom: 140px; }
   
     .result_title { width: calc(100vw - 80px); margin-left:40px; padding-top: 120px; }
     .result_title h3 { width: calc(100vw - 80px); padding: 0; }
     .result_title p { width: calc(100vw - 80px); padding-top: 12px; }
   
     .result_contents ul li h5 { color:#ff3366;  }
     .result_contents ul li p { width: 320px;  }
     .result_contents ul li:nth-child(1) {margin-right: 0;}
     .result_contents ul li:nth-child(3) {width: fit-content;}
     .vertical_line {right: auto; left: 525px;}
   
    
   
     /* class_select_02*/
   
     .class_select_02 {width : 100vw; height: 100%;   background-image:url(); background-color:#fafafa; color:#171717;}
   
   
     .select_02_title { width: calc(100vw - 80px); margin-left:40px; padding-top: 120px; display: block;}
     .select_02_title h3 { width: calc(100vw - 80px); }
     .select_02_title p { width: calc(100vw - 80px); padding-top: 12px; }
   
     .select_02_contents { width: calc(100vw - 80px); margin-left: auto; margin-right: auto; display: block; margin-top: 72px; text-align: left; padding-bottom: 140px;}
     .select_02_contents ul { width: calc(100vw - 80px); margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white; align-items: top;   }
     .select_02_contents ul li { width: calc(100vw - 80px);  text-align: center;   }
     .select_02_contents ul li img { width: 70%; }
   
     /* class_select_03*/
   
     .class_select_03 {width : 100vw; height: 100%;  background-image:url(); background-color:#363435; color:#fff; padding-bottom: 0px; }
   
   
     .select_03_title { width: calc(100vw - 80px); margin-left:40px; padding-top: 120px; display: block; }
     .select_03_title h3 { width: calc(100vw - 80px); padding: 0; }
     .select_03_title p { width: calc(100vw - 80px); padding-top: 12px; }
   
     .select_03_contents { width: 100%; margin-left: auto; margin-right: auto; display: block; margin-top: 72px; text-align: left;   }
     .select_03_contents ul { width: 100%; margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white; align-items: top;   }
     .select_03_contents ul a li { width: 100%;  height: 600px; text-align: center;   }
     .select_03_contents ul a { width: 100%; height: 600px; text-align: center; background-image: url(../class/portfolio/frontend/img/select_03.jpg); background-repeat:no-repeat; background-size: cover; }
   
   
   
     /* class_portfolio*/
   
   
     .portfolio_scroll { width: 100%; height: 100%;margin: 0; text-align: center; background-color:#171717; color:#fff;   }
     .portfolio_scroll_title  {width: calc(100vw - 80px); margin-left:auto; margin-right:auto; padding: 60px 0; text-align: center; }
     .portfolio_scroll_title  h4 { width: calc(100vw - 80px); padding: 0; text-align: center;  }
     .portfolio_title  p { width: calc(100vw - 80px); padding-top: 12px; }
   
     .portfolio_scroll_wrap { width: 100%; height: 100%; display: block; overflow-x:scroll;}
     .portfolio_scroll_wrap li { width: calc(24vw - 10px);  text-align: left; margin-left:10px; margin-right: 10px;}
     .portfolio_scroll_wrap img { width: calc(24vw - 10px); }
   
   
     /* class_curriculum*/
    
     .curriculum_contents_02 { width : 100vw; height: 100%; background-color:#fff; color:#171717; padding-bottom: 120px;}
   
     .curriculum_contents_02 h4 {width:calc(100vw - 80px); margin-left: auto; margin-right: auto;  border-top: 1px solid #ff3366; margin-top:120px; padding-top: 12px;}
     .curriculum_contents_02 ul { width:calc(100vw - 80px); display: flex; align-items: flex-start; justify-content: center; margin-left: auto; margin-right: auto; margin-top:90px; }
     .curriculum_contents_02 li:nth-child(odd) { width: calc(50vw - 50px); padding-right: 15px;   }
     .curriculum_contents_02 li:nth-child(even) { width: calc(50vw - 50px); padding-left: 15px;   }
     .curriculum_contents_02 li img { width: calc(50vw - 50px); }
     .curriculum_contents_02 ul h4 {width: calc(50vw - 50px);  text-align: left; border: none; line-height: 60px; margin-top:0px; padding-top: 0px;}
     .curriculum_contents_02 ul h6 {width: calc(50vw - 50px); text-align: left;}
   
   
     /* class_target*/
   
     .target_title { width: calc(100vw - 80px); margin-left:auto; margin-right:auto; padding-top: 120px; text-align: center;}
     .target_title h2 { width: 600px; padding: 0; }
     .target_title p { width: calc(100vw - 80px); padding-top: 12px; }
     .target_contents ul { justify-content: space-evenly;  }
     .target_contents li img { width: 180px; }

     #trait_line_bottom {bottom: 100px;}
   
   
   
     /* class_teacher*/
   
     .teacher_title { width: calc(100vw - 80px); margin-left:auto; margin-right:auto; padding-top: 120px; text-align: center;}
     .teacher_title h2 { width: calc(100vw - 80px); padding: 0; color: #ff3366; }
     .teacher_title p { width: calc(100vw - 80px); padding-top: 12px; }
   
     .teacher_contents { width: calc(100vw - 80px); margin-left:auto; margin-right:auto; display: block;}
     .teacher_contents ul { width: calc(100vw - 80px); margin-left:auto; margin-right:auto; display: flex; margin-top: 120px; align-items: center; justify-content: center;  }
     .teacher_contents ul li:nth-child(1) {  width: calc(50vw - 80px);  display: block; }
     .teacher_contents ul li:nth-child(2) {  width: calc(50vw );  display: block; text-align: left;  }
     .teacher_contents li img { width: 300px; }
     .teacher_contents li h4 {width: calc(50vw - 40px); border-bottom: 1px solid #ff3366; padding-bottom: 12px;}
     .teacher_contents li p {width: calc(50vw - 40px); margin-top:24px;}
   
   
   
     /* class_faq*/
   
   
   
     .benefit_title { width: calc(100vw - 80px); margin-left:auto; margin-right:auto; display: flex; justify-content: center; align-items: center; padding-top:120px; } 
     /* .benefit_title h3 { margin-right:36px;  } */
     .benefit_title img { width: 60px; height: 60px; }
   
     .benefit_contents ul { display: flex; align-items: center; justify-content: space-between; width: fit-content; margin-left: auto; margin-right: auto; display: flex; text-align: center; padding: 0px;   }
     .benefit_contents li { width: 240px; height: 150px; text-align: left; margin: 0; text-align: center;}
     .benefit_contents li div {margin: 24px auto; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px;  border: 2px solid #fff;  border-radius: 50px; text-align: center; }
     .benefit_contents h5 {margin: 0 auto; padding-top: 0px; padding-bottom: 12px; } 
     .benefit_contents p {width: 220px; margin: 0 auto;} 
     .benefit_contents ul:nth-child(2) {margin-top: 120px;}
   
   
   }
   
   
   
   
   
   @media only screen and (max-width: 1024px) {
     .cover_textbox {padding-left: 24px;}     
     .overview_title {width: auto; margin-left: 0;}
     #main_mockup {top: auto; bottom: 75px; width: 90%; min-width: auto; right: 5%;}
  
     .target_contents {width: calc(100% - 48px);}
     .target_contents ul {width: 100%;}
   
     .class_select_top {justify-content: center;}
     .class_select_top >div {width: auto;}
     .class_select_bottom >div:last-child {width: calc(100% - 48px);}
     .class_select_bottom img {height: auto; height: intrinsic; width: calc((100% - 96px) / 5);}
         /* height: intrinsic 사파리 및 모바일 브라우저에서 height : auto가 안먹어서 넣은 코드 */
     .class_select_bottom_title img {width: 30px; height: 30px;}
     .class_select_top_left h3 {font-size: 34px;}
     .class_select_top_right h6 {margin-left: 50px;}
  
     .class_teacher_top {width: calc(100% - 48px);}
     .teacher_history:nth-child(1) {padding-left: 172px;}
  
     .student_contents {width: calc(100% - 48px);}
     .student_contents ul {width: auto; flex-direction: column;}
     .student_contents li {width: 100%; margin-bottom: 50px;}
     .student_contents li:last-child {margin-bottom: 0;}
   
     .question_box, .answer_box {width: calc(100% - 48px);}
   
     .benefit_contents {width: auto;}
   
   }
   
   
   
   
   @media only screen and (max-width: 834px)  {
      
     .class_cover {height: 72vh;}      
     .cover_textbox {padding-top: 120px;}
     .cover_textbox h4 {padding-top:8px; }
     .ln_tablet {display: block;}
   
   
     /* class_select */
   
     .class_select_top {flex-direction: column; align-items: center; margin: 80px 0;}   
     .class_select_top_left h3 {font-size: 26px;}
     .class_select_top_left {margin-bottom: 50px;}
     .class_select_top_right {padding-left: 0; margin-left: 50px;}
     .class_select_top_right h6 {margin-left: 0;}
     #quotation {top: -35px; left: -80px;}
     .class_select_bottom {padding-bottom: 90px;}
     .class_select_bottom_title {padding: 90px 0 50px;}
     
     
     /* class_portfolio */
         
     .portfolio_scroll_wrap li { width: 220px;  text-align: left; margin: 0; margin-left:10px; margin-right: 10px; }
     .portfolio_scroll_wrap img { width: 220px; }
   
     /* class_overview*/
   
     .overview_title { padding-top: 90px; }
     .overview_title h6 {width: 585px; margin: 0 auto; word-break: keep-all;}
   
     /* class_result*/
   
     .class_result {width : 100vw; height: 100%; background-image:url(); background-color: #fafafa; color:#171717; padding: 0; padding-bottom: 90px; }
   
     .result_title { width: calc(100vw - 40px); margin-left:20px; padding-top: 90px; }
     .result_title h3 { width: calc(100vw - 40px); padding: 0; }
     .result_title p { width: calc(100vw - 40px); padding-top: 12px; }
   
   
     .result_contents { width: calc(100vw - 40px); margin-left:20px; ; display: block; margin-top: 72px; text-align: left; }
     .result_contents ul { width: 420px; margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white; flex-wrap: wrap;}
     .result_contents li h5 { color:#ff3366;  }     
     .result_contents ul li:nth-child(3) {padding-left: 40px;}
     .result_contents ul li p { width: 320px;  }
    
     .vertical_line {display: none;}

     /* trait */
     .trait {padding: 90px 0;}
     .trait >img {margin: 50px 0; width: 70px;}
     .trait li img {width: 100px;}
     #trait_line_top {width: 25%; top: 90px;}
     #trait_line_bottom {width: 25%; bottom: 90px;}
   
   
     /* class_select*/
     .class_select_top_left {margin-left: 10px;}
     /* .class_select_top_left br {display: none;} */
   
   
     /* class_select_02*/
   
     .class_select_02 {width : 100vw; height: 100%;   background-image:url(); background-color:#fafafa; color:#171717;}
     .class_select_02 h3 {padding: 90px 0 20px;}
  
     .select_02_title { width: calc(100vw - 40px); margin-left:20px; padding-top: 90px; display: block;}
     .select_02_title h3 { width: calc(100vw - 40px); }
     .select_02_title p { width: calc(100vw - 40px); padding-top: 12px; }
     .select_02_contents { width: calc(100vw - 40px); margin-left: auto; margin-right: auto; display: block; margin-top: 60px; text-align: left;   }
     .select_02_contents ul { width: calc(100vw - 40px); margin-left: auto; margin-right: auto; display: flex; margin-top: 60px;  color:white; align-items: top;   }
     .select_02_contents ul li { width: calc(100vw - 40px);  text-align: center;   }
     .select_02_contents ul li img { width: 70%;  }
   
     /* class_select_03*/
   
     .class_select_03 {width : 100vw; height: 100%;  background-image:url(); background-color:#363435; color:#fff; padding-bottom: 0px; }
     .class_select_03 h3 {padding: 90px 0 20px;}
   
     .select_03_contents { width: 100%; margin-left: auto; margin-right: auto; display: block; margin-top: 72px; text-align: left;   }
     .select_03_contents ul { width: 100%; margin-left: auto; margin-right: auto; display: flex; margin-top: 72px;  color:white; align-items: top;   }
     .select_03_contents ul a li { width: 100%;  height: 480px; text-align: center;   }
     .select_03_contents ul a { width: 100%; height: 480px; text-align: center; background-image: url(../class/portfolio/frontend/img/select_03.jpg); background-repeat:no-repeat; background-size: cover; background-position: -100px; }
    
   
     /* class_portfolio*/ 
     .portfolio_scroll { width: 100%; height: 100%;margin: 0; padding-top: 90px; text-align: center; background-color:#171717; color:#fff;   }
     .portfolio_scroll_title  {width: calc(100vw - 40px); margin-left:auto; margin-right:auto; padding: 0px 0 60px; text-align: center; }
     .portfolio_scroll_title  h4 { width: calc(100vw - 40px); padding: 0; text-align: center;  }
     .portfolio_title  p { width: calc(100vw - 40px); padding-top: 12px; }
   
     .portfolio_scroll_wrap { width: 100%; height: 100%; display: block; overflow-x:scroll;}
     .portfolio_scroll_wrap ul { width: 100%; display: flex; text-align: center; padding: 0px; margin-bottom: 0px;}
     .portfolio_scroll_wrap li { width: calc(50vw - 20px);  text-align: left; margin: 0; margin-left:10px; margin-right: 10px; margin-bottom: -1px;}
     .portfolio_scroll_wrap img { width: calc(50vw - 20px); }
   
   
     /* class_curriculum*/ 
     .curriculum_contents_02 { width : 100vw; height: 100%; background-color:#fff; color:#171717; padding: 90px 0;}
   
     .curriculum_contents_02 h4 {width:calc(100vw - 40px); margin-left: auto; margin-right: auto;  border-top: 1px solid #ff3366; margin-top:90px; padding-top: 12px; margin-bottom: 12px;}
     .curriculum_contents_02 ul { width:calc(100vw - 40px); display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; margin-top:0px; flex-direction: column; }
     .curriculum_contents_02 li:nth-child(odd) { width: calc(100vw - 40px); padding-right: 0px;   }
     .curriculum_contents_02 li:nth-child(even) { width: calc(100vw - 40px); padding-left: 0px;   }
     .curriculum_contents_02 li img { width: calc(100vw - 40px); margin-top:36px; }
     .curriculum_contents_02 ul h4 {width: calc(100vw - 40px);  text-align: left; border: none; line-height: 60px; margin-top:0px; padding-top: 0px;}
     .curriculum_contents_02 ul h6 {width: calc(100vw - 40px); text-align: left; font-size: 14px;}
   
   
     /* class_target*/
     
     .class_target {height: auto; padding-bottom: 50px;}
     .target_title { width: calc(100vw - 40px); margin-left:auto; margin-right:auto; padding-top: 90px; text-align: center;}
     .target_title h2 { width: 600px; padding: 0; }
     .target_title p { width: calc(100vw - 40px); padding-top: 12px; }
   
     .target_contents { width: calc(100vw - 40px); margin-left:auto; margin-right:auto; padding-top: 60px; text-align: center; display: block;}
     .target_contents ul { width: calc(100vw - 40px); margin-left:auto; margin-right:auto; display: flex; text-align: center; padding: 0px; align-items: center; justify-content: center; flex-direction: column; }
     .target_contents li {height: 300px; display: block; text-align: center; margin-top: 30px;}
     .target_contents li img { width: 180px; }
     .target_contents li h5 {margin-top: 24px;}   
   
  
   
   
   
     /* class_teacher*/
   
     .class_teacher h3 {padding: 90px 0 11px;}
     .class_teacher h6 {padding-bottom: 50px;}
     .class_teacher_top img {width: calc(50% - 96px);}
     .progress_bar {width: 26%;}
     .teacher_select_bar {margin-bottom: 80px;}
     .class_teacher_bottom {padding: 0}
     .class_teacher_bottom ul {display: block; padding: 50px;}
     .class_teacher_bottom li:first-child {margin-bottom: 50px;}
   
   
   
   
     /* class_student*/
   
     .class_student {width : 100vw; height: 100%; background-color: #fafafa; color:#171717; padding: 0; padding-bottom: 90px;}
     .class_student >h3 {padding-top: 90px;}
     .class_student >h6 {margin-bottom: 50px;}
     
     .student_contents li {height: auto;}
     .student_contents_name h6 {margin-bottom: -4px;}
     .dot {margin-bottom: 10px;}
   
     /* class_faq*/
   
     .question_box {width: calc(100% - 48px);}
     .answer_box {width: calc(100% - 48px); padding: 50px;}
     .answer_box h5, .answer_box h6 {width: 100%;}
   
     .class_faq >h3 {padding: 90px 0 76px;}
     .answer_box {margin-bottom: 90px; height: 222px;}
   
   
     /* class_benefit*/
   
     .benefit_title { width: calc(100vw - 40px); margin-left:auto; margin-right:auto; display: flex; justify-content: center; align-items: center; padding-top:90px;  } 
     /* .benefit_title h3 { margin-right:36px;  } */
     .benefit_title img { width: 60px; height: 60px; }
   
     .benefit_contents {width: 100%; height: 720px; margin-left: auto; margin-right: auto; display: block;  text-align: center; display: flex; justify-content: space-evenly;}
     .benefit_contents ul { display: flex; align-items: center; justify-content: space-between; margin: 0; text-align: center; padding: 0px; flex-direction: column;  }
     .benefit_contents li { width: 100%; height: 260px; text-align: left; margin: 0; padding-right: 0; text-align: center;}
     .benefit_contents li div {margin: 24px auto; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px;  border: 2px solid #fff;  border-radius: 50%; text-align: center; }
     .benefit_contents h5 {margin: 0 auto; padding-top: 0px; padding-bottom: 12px; } 
     .benefit_contents p {width: 160px; margin: 0 auto; font-size:12px;} 
     .benefit_contents ul:nth-child(2) {margin-top: 0px;}
   
   }
   
   
   
   
   
   @media only screen and (max-width: 430px) {
  
    .ln_mobile {display: block;}
  
     .cover_textbox {padding-left: 16px; padding-top: 150px;}
  
     .info_register .info_register_button {width: 340px;}   
     .info_list {width: calc(100% - 32px);}
     .info_list_title {width: 110px;}
     .info_list_title li {padding-left: 30px;}
     .info_list_detail {width: calc(100% - 110px);}
  
   
     .overview_title h6 {width: auto;}
     .target_contents li .target_check {width: 30px; right: 90px;}
   
     .result_contents {width: calc(100% - 32px);}
     .result_contents ul {width: 100%; margin-top: 30px;}
     .result_contents ul li:nth-child(1) img {width: 100%;}   
     .result_contents ul li:nth-child(2) div {width: 35px; height: 35px;}
     .result_contents ul li:nth-child(2) {width: 40px;}
     .result_contents ul li:nth-child(3) {width: calc(100% - 56px); padding-left: 20px;}
     .result_contents ul li:nth-child(3) p {width: 100%}

     .trait li {padding: 0 32px; flex-direction: column; text-align: center;}
     .trait li img {width: 70px; margin: 0 auto;}
     .trait_list_text {margin-left: 0; margin-top: 30px;}
     .trait_list_text h4 {margin-bottom: 10px;}
     .hidden_430 {display: none;}

     .portfolio_scroll h5 {font-size: 16px;}
   
     #quotation {left: -10px; top: -60px; width: 50px;}
     .class_select_top_left {margin-bottom: 70px !important;}
     .class_select_top >div {width: fit-content; margin: 0 auto;}
     .class_select_top_right h6, .neon_underline {font-size: 12px;}
     .class_select_top_left h3 {font-size: 24px;}
     
     .class_select_bottom >div {flex-wrap: wrap;}
     .class_select_bottom img {width: calc((100% - 32px) / 3); margin-bottom: 20px;}
     .class_select_bottom img:nth-child(4) {margin-left: calc(100% / 6); margin-bottom: 0;}
     .class_select_bottom img:nth-child(5) {margin-right: calc(100% / 6); margin-bottom: 0;}
     #check {width: fit-content; margin-bottom: 0;}
     .class_select_bottom >div:last-child {width: calc(100% - 32px);}
     
     .class_teacher_top {flex-wrap: wrap; width: calc(100% - 32px); padding-bottom: 30px;}
     .class_teacher_top img:nth-child(1) {width: calc(50% - 32px); opacity: 1;}
     .class_teacher_top img:nth-child(2) {width: calc(50% - 32px); opacity: 0.7;}
     .class_teacher_bottom {width: calc(100% - 32px);}
     .class_teacher_bottom ul {flex-direction: column; padding: 32px;}
  
     .student_contents {width: calc(100% - 32px);}
     .student_contents li {padding-left: 16px; align-items: flex-start;}
     .student_contents li img {padding-top: 22px;}
     .student_contents p {padding: 20px;}
   
     .question_box >div:first-child {flex-direction: column;}
     .question_box h5 {width: 100%;}
     .question_box >div:last-child {display: none;}
     .answer_box {height: auto; padding: 32px;}
     .question_title {position: relative; margin-bottom: 40px;}
     .question_title::before {content: ''; width: 300px; height: 1px; background-color: rgba(255,255,255,0.4); position: absolute; bottom: -20px; left: calc(50% - 150px);}
     .question_title:last-child::before {display: none;}
   
   }
  
  
   .portfolio_scroll_wrap::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid rgba( 23, 23, 23);
      background-color: #f3a819;
  }