#topbar {
    /* background: #106eea; */
    background: #106eea;
    height: 50px;
    font-size: 18px;
    /* transition: all 0.5s; */
    color: #106eea;
    /* position: relative !important; */
}

.wrong_answer{
  color: red !important;;
}

.t_logo{
    height: 60px;
}

.float_l{
    float: left;
}

.c_logo_blue{
    color:deepskyblue;
}

.y_scroll{
  overflow-y: scroll;
}

.c_white{
    color: white;
}

/* pc 화면 */
@media (min-width: 768px) {
    #kakao-talk-channel-chat-button {
    position: fixed;
    z-index: 999;
    right: 60px; /* 화면 오른쪽으로부터의 거리, 숫자만 변경 */
    bottom: 10px; /* 화면 아래쪽으로부터의 거리, 숫자만 변경 */
    }
}
/* 모바일 화면 */
@media (max-width:767px) {
    #kakao-talk-channel-chat-button {
    position: fixed;
    z-index: 999;
    right: 60px; /* 화면 오른쪽으로부터의 거리, 숫자만 변경 */
    bottom: 10px; /* 화면 아래쪽으로부터의 거리, 숫자만 변경 */
    }
}

.video_card{
    margin-top: 30px;
    width:315px!important;
}



.video_thumb{
    width: 100%;
    max-height: 163px;
    object-fit:cover;
}


.video_thumb_whole{
  width: 100%;
  height: 340px;
  /* object-fit:cover; */
}

.logo_img{
  width: 100%;
}

.video_title_box{
    /* width: 315px !important; */
    padding:8px 15px 15px 15px;
}

.time_belt{
    text-align: center;
    background-color: rgba(30,30,30,0.6);
    right: 0px;
    bottom: 0px;
    left: 0px;
    position: absolute;
}

.pos_rel{
    position: relative;
}

.time_belt_span{
    font-size: 12px;
    color: #f4f4f4;
    line-height: 22px;
    letter-spacing: 0.3px;
    height: 22px;
    display: block;
}

.time_belt_span_strong{
  font-size: 15px;
  font-weight: bolder;
  color: #f4f4f4;
  line-height: 22px;
  letter-spacing: 0.3px;
  height: 22px;
  display: block;
}

.pr_td{
  padding:3px 0px!important;
}

.pr_ok{
  height: 10px;
  border-style: solid;
  border-left-width: 1px;
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-color:white;
}

.pr_color_1 {
  background-color: #23bae6;
}

.pr_color_2{
  background-color: #fa9c54;
}

.pr_color_3{
  background-color: #ffc244;
}

.pr_color_4{
  background-color: #4eb2cd;
}

.pr_color_5{
  background-color: #82ad9f;
}

.width_100_percent{
  width: 100%;
}

.word_break td{
  word-break: break-all;
}
@media (min-width: 1200px){
    .container {
        max-width: 1300px;
    }
}

.video_study_level{
    text-align: center;
    color:chocolate;
}

.video_view{
    color: dimgray;
    font-size: 14px;
    font-weight: bolder;
    float: right;
    margin-bottom: 10px;
}


.login_container{
    padding-top: 15vh;
    padding-bottom:15vh;
}

.hover_table {
  border-spacing: 0;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

.hover_table th {
  padding: 2px;
}

.hover_table td {
  padding: 2px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hover_table_big td {
  padding: 5px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sm_btn {
  padding: 2px 4px;
}

.margin_r_5{
  margin-right:5px;
}

.color_beige {
  background-color: beige;
}

#timer_area{
  border-color: gainsboro;
    border-width: 1px;
    border-style: solid;
    margin-right: 40px;
    border-radius: 25px;
}

#list_area {
  height: 500px;
  width: 100%;
  overflow-y: auto;
  border: 1px solid #ddd;
}

.min_max_list_area {
  min-height: 500px;
  max-height: 700px;
  width: 100%;
  overflow-y: auto;
  border: 1px solid #ddd;
}

.chunk_border{
  border-radius: 10px;
  border: 3px solid #965932;
  width: 40%;
  padding: 5px;
}

.mid_timer{
  width: 20%;
}

.hover_pointer{
  cursor:pointer;
}

.margin_r_20{
  margin-right: 20px;
}

.margin_r_10_i{
  margin-right: 10px!important;
}

.margin_r_4{
  margin-right: 4px;
}

.margin_r_40{
  margin-right: 40px;
}

.page_title {
    padding-bottom: 10px;
    padding-top: 30px;
    padding-left: 30px;
}

.page_title h2 {
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    /* position: relative; */
    color: #37517e;
}

.page_contents_container{
    padding-bottom: 30px;
}

.btn{
    transition: none !important;
}

.hidden {
    display: none;
}

table.classifications > tbody > tr > td {
    padding: 0;
}


td[data-on] {
    cursor: pointer;
}

td.selected {
    background-color: rgb(119, 187, 214);
}



/*add sp*/
.narrow_width_space {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 18px 20px 18px;
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 1300px;
}

.no_radius {
  border-radius: 0px !important;
  margin-right: 5px;
}

.order_btn_area {
  padding: 15px 30px 15px 15px;
}

.tab_text{
  color: #428bca;
  font-weight: bolder;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: brown !important;;
  background-color: #fff;
  border-color: #dee2e6;
}



#order_tab {
  height: 571px;
  width: 100%;
  /* overflow-y: auto; */
  border: 1px solid #ddd;
  border-top-color: transparent;
}

.order_box {
  height: 350px;
  width: 100%;
  border: 1px solid #ddd;
}

.thumbnail_box {
  width: 100%;
  border: 1px solid #ddd;
}

.thumbnail_box div {
  font-size: 15px;
  font-weight: bolder;
}

.font_s_20 {
  font-size: 20px;
}

.font_s_15 {
  font-size: 15px;
}

.no_margin {
  margin: 0px !important;
}

.height_30 {
  height: 30px !important;
}

.qty .minus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: white;
  width: 20px;
  height: 20px;
  font-size: 13px;
  text-align: center;
  border-radius: 25%;
  background-color: darkgrey;
}

.qty .plus {
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  color: white;
  width: 20px;
  height: 20px;
  font-size: 13px;
  text-align: center;
  border-radius: 25%;
  background-color: darkgrey;
}

.qty .count {
  color: #000;
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  padding: 0 2px;
  min-width: 36px;
  text-align: center;
  width: 36px;
  height: 20px;
  box-sizing: border-box;
}

.tab_padding{
  padding: 5px 15px 5px 15px !important;
}

.padding_15{
  padding: 15px
}

.product_header>th{
  border-top-color: transparent;
  padding: 3px;
  text-align: center;
}

.all_centered>td{
  text-align: center;
}

.product_header{
  height: 35px !important;
}

.margin_10 {
  margin: 10px;
}

.bolder {
  font-weight: bolder;
}
.tc_blue {
  color: #428bca;
}

.blue{
  color: blue !important;
}

.very_narrow_width_space {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 18px 20px 18px;
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 1000px;
}

.post_title{
  font-size: x-large;
  font-weight: bolder;
    color: rgb(196, 73, 2);
}
.board_image{
  width:100%
}
.no_maxwidth_space {

  margin-left: auto;
  margin-right: auto;
  padding: 0px 18px 20px 18px;
  margin-top: 0px;
  margin-bottom: 30px;
}

.max_width_1200{
    max-width : 1200px;
    margin: auto;
}

.middle_width_space {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 60px 20px 60px;
  margin-top: 30px;
  margin-bottom: 30px;
  max-width: 1300px;
}

.wide_width_space {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px 20px 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}

.step_label{
  font-size: 24px;
  font-weight: bold;
  color: #37517e;
}
  
.table_fixed {
  table-layout: fixed;
}

.table_text > td {
  /* font-size: 13px; */
  padding: 0.3rem;
  vertical-align: inherit;
}

.table_header_text > th {
  /* font-size: 13px; */
  padding: 0.3rem;
  vertical-align: inherit !important;
  font-size: 16px;
  font-weight: bolder;
}

.flat_btn{
  height:18px;
  font-size:12px;
  padding:0px 3px 0px 3px;
}

.font_12 {
  font-size: 12px;
}

.font_13 {
  font-size: 13px;
}



.text_center {
  text-align: center;
}

.text_left {
  text-align: left!important;
}

.left_margin_5 {
  margin-left: 5px;
}

.font_14 {
  font-size: 14px;
}

.font_12 {
  font-size: 12px;
}
.view_btn{
  color: white;
  border-radius: 23px;
  background-color:dimgray;
}
.no_margin_row {
  margin-left: 0px;
  margin-right: 0px;
}

.font_16 {
  font-size: 16px;
}

.font_18 {
  font-size: 18px;
}

.font_18 {
  font-size: 20px;
}

.font_30 {
  font-size: 30px;
}

.font_home {
  font-size: 35px;
}




  .text_right {
    text-align: right!important;
  }
  
  .table_header_text {
    color:white;
    background-color:dimgray;
    height: 43px;
  }
  
  .gray_header {
    color:white;
    background-color:dimgray;
  }
  
  .pull_right {
    float: right;
  }
  
  .tb_base {
    border-style: solid none solid;
    border-color: #404040 #ffffff #ced5d9;
    border-width: 2px;
  
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }
  
  .tb_base.wr tbody th {
    border-color: #dddddd;
  }
  
  .for-margin {
    height: 2rem;
  }
  
  .tb_base tbody th {
    padding: 7px 0;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-color: #e4e8ee;
    background-color: #eff2f4;
    text-align: center;
    color: #3c3c3c;
    /* font-size: 12px; */
  }
  
  .tb_base.wr tbody td {
    padding-left: 5px;
    border-color: #dddddd;
    text-align: left;
    word-break: break-all;
  }
  
  .tb_base tbody td {
    padding: 7px 0;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-color: #e4e8ee;
    text-align: center;
    color: #3c3c3c;
    /* font-size: 12px; */
    word-break: break-all;
  }
  
  .table_label {
    font-size: 13px;
    font-weight: bolder;
  }
  
  .thead_color thead {
    background-color: #eff2f4;
    text-align: center;
    color: #3c3c3c;
  }
  
  .font_11 {
    font-size: 11px;
  }


  #display_item_table{
    min-height: 30px;
    border-top: hidden;
  }

  #display_item_table th{
    text-align: center;
  }

  #display_item_table td{
    height: 30px;
    padding: 3px;
  }
  
  .c_blue {
    color: blue;
  }
  .c_darkblue{
    color: #37517e;
  }
  
  .c_red {
    color: red;
  }
  
  #search_type {
    width: 100px;
    margin-left: 10px;
    margin-bottom: 10px;
    /* height: 30px; */
    padding: 0 0 0 5px;
  }
  
  .no_lr_margin_row {
    margin-left: 0px;
    margin-right: 0px;
  }
  
  .padding_r_30 {
    padding-right: 30px!important;
  }

  #search_text {
    width: 240px;
    height: 30px;
    margin: 0px 6px 0px 6px;
    border-width: thin;
  }
  .small_btn_in_table{
    margin-top: 2px;
    height: 30px;
    /* width:58px; */
    margin-bottom: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .small_width_btn_in_table{
    margin-top: 2px;
    height: 30px;
    margin-bottom: 2px;
    padding: 0px 3px 0px 3px;
  }

  .padding_b_10{
    padding-bottom: 10px;
  }
  
#search_select {
  width: 240px;
  margin-bottom: 0px;
  height: 30px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  margin: 0px 6px 0px 6px;
}

.left_margin_10 {
  margin-left: 10px;
}

.left_margin_20 {
  margin-left: 20px;
}

.left_margin_40 {
  margin-left: 40px;
}

#search_btn {
  height: 30px;
}

.small_round_btn{
  height: 28px;
    border-radius: 50px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 3px;
}

.centered {
  text-align: center;
}

.filter_label {
  padding-top: 7px;
  font-weight: bolder;
  width:50px;
}

.filter_label_long{
  padding-top: 7px;
  font-weight: bolder;
  width:120px;
}

.skyblue_b_c {
  background-color: #23bae6;
  color: white;
  font-weight: bolder;
}



.pad_rl_10 {
  padding: 10px 0 10px 0;
}
.video_modal {
  max-width: 340px;
}
.record_sentence {
  overflow: auto;
  overflow-x: hidden;
  /* max-height: 200px; */
  width: 100%;
  margin-top: 5px;
}

.fit {
  width: 100%;
}

.language-selection-btn.selected::before {
  content: '\2713  '; /* check mark */
}

.language-selection-btn.ts-active::before {
  content: '\2713  '; /* check mark */
}


.check_mark::before {
  content: '\2713  '; 
}

.progress_complete::after {
  content: '\2713  '; /* check mark */
}

/* .card_button{
  background-color: #ffc244; 
  border: 0px;
  color: white;
} */

#select_c1 {
  width: 180px;
  height: 38px;
  padding: 0 0 0 5px;
  border-color:#ced5d9;
  /* border-radius: 5px; */
}

#select_c2 {
  width: 250px;
  height: 38px;
  padding: 0 0 0 5px;
  border-color:#ced5d9;
  /* border-radius: 5px; */
}
.margin_r_10{
  margin-right: 10px;
}

.margin_l_100{
  margin-left: 100px;
}

.margin_l_10{
  margin-left: 10px;
}
.margin_l_30{
  margin-left: 30px;
}
.margin_l_50{
  margin-left: 50px;
}
.margin_b_10{
  margin-bottom: 10px;
}
.margin_b_5{
  margin-bottom: 5px;
}
.margin_b_30{
  margin-bottom: 30px;
}

.margin_b_20{
  margin-bottom: 20px;
}

.margin_b_15{
  margin-bottom:15px;
}

.margin_t_10{
  margin-top: 10px;
}

.margin_t_20{
  margin-top: 20px;
}
.vertical_aligned>td{
  vertical-align: middle!important;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.datepick{
  width: 140px
}

.user_address input{
  margin-bottom :5px !important;
}

.left_header {
    align-content: center;
    background-color:lightgrey;
    vertical-align: middle !important;
    text-align: center;
}

.sp_files{
  width:450pxw
}

.margin_b_0{
  margin-bottom: 0px !important;
}

.margin_t_5{
  margin-top: 5px !important;
}

.margin_t_60{
  margin-top: 30px !important;
}

.margin_t_30{
  margin-top: 30px !important;
}
.word_page{
  cursor: pointer;
}
.td_centered td{
  text-align: center;
}

.centered {
  text-align: center;
}


.excel_btn{
  background-color:forestgreen;
  color: white;
}

.refund_requested_btn{
  background-color:coral;
  color: white;
}

.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child a { color: red; }
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a { color: red; }
.ui-datepicker-calendar > tbody td.date-holiday a { color: red; }

.t_align{
  text-align: center;
}

.header_highlight{
  color:#47b2e4 !important;
}

#video_con{
  /* -webkit-background-size: cover; */
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px; 
  /* height: 100%; */
  /* position: absolute; */
}

.video_button{
  /* width:150px; */
  /* height: 40px; */
  font-size: 16px;
  font-weight: bolder;
}

.sp_button{
  width:150px;
  height: 40px;
  font-size: 16px;
  font-weight: bolder;
  color: white;
}



.video_container {
  position: relative;
  margin: 0 0 15px 0;
  /* padding-bottom: 51%; */
  padding-top: 30px;
  width:100%;
  height:100%;
  overflow: hidden;
  border: none;
}


iframe {
  border: none;
  height: 80vh;   
  width: 100%;
}

.width_200{
  width: 200px;

}

.width_50{
  width: 50px;
}

.width_80{
  width: 80px;
}

.width_100{
  width: 100px;
}

.width_120{
  width: 120px;
}

.width_150{
  width: 150px;
}

.width_500{
  width: 500px;

}

.width_400{
  width: 400px;

}


.width_250{
  width: 250px;

}

.width_300{
  width: 300px;

}
.no_border_table th{
  border-top: 0px!important;
  border-bottom: 0px!important;
}

.category_input{
  width:370px;
  margin:2px;
  height:30px !important;
}

.f_size_12{
  font-size: 12px;
}

.no_padding_table td{
  padding: 0px;
}

.set_table_td td{
  height:46.5px
}

.small_padding_table td{
  padding: 5px;
  vertical-align: middle;
}

.small_padding_table .form-control{
  height: 28px;
}

.max_height_overflow{
  max-height:600px;
  overflow-y: auto;
}

.top_center{
  margin-top: 7px;
  color:#d5f2ff;
}
.short_width{
  width: 150px;
}

.middle_width{
  width: 350px;
}

.yed_select{
  /* height: 50px; */
  border-radius: 10px;
}

.rad_circle{
  border-radius: 25px;
}

.long_rad_circle{
  width:53px;
  border-radius: 25px;
}

.yed_table thead{
  background-color: #21253F;
  text-align: center;
  border-radius: 50px;
  border-top:hidden;
  border-bottom:hidden;
}



.yed_table thead th{
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}

.yed_table tbody td a{
  color: inherit;
}

.yed_table tbody td{
  vertical-align: middle;
}

.yed_table thead th:last-child {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.yed_table thead th:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

.yed_table tbody tr:nth-of-type(1) td {
  /* 첫행은 간격을 좀 주기 */
  /* padding-top: 32px; */
}

.rad_rect_circle{
  border-radius: 15px;
}


.yed_table2 thead{
  background-color: #21253F;
  text-align: center;
  border-radius: 50px;
  border-top:hidden;
  border-bottom:hidden;
}



.yed_table2 thead th{
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}

.yed_table2 tbody td a{
  color: inherit;
}

.yed_table2 tbody td{
  vertical-align: middle;
}

.level-section{
  overflow: hidden;
  position: relative;
  z-index: 0;
  min-height: calc(100vh - 158px);
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top;
  /* background-color: #e9e8e8; */
  font-size: 1.8rem;
  line-height: 1.6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.level-header .sub-h1 {
  line-height: 1;
  margin-top: 70px;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 900;
}

@media (min-width: 60em){
  .sub-h1 {
    font-size: 3.4rem;
  }
}

#level-header {
  /* display: flex; */
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  /* position: absolute; */
  margin-top: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  min-height: 370px;
  padding: 0 2rem 10rem 2rem;
  text-align: center;
}

.lt_btn{
  display: inline-block;
  width: 240px;
  height:160px;
  margin: 20px 20px 20px 20px;
  padding: 14px 0;
  border-radius: 10px;
  font: 500 22px 'noto';
  color: #FFF;
  line-height: 1.4;
  text-decoration: none;
  border-width: 0px;
  margin-top: 30px;
  background: #ff5200
}

.colored_btn{
    background: #0370dd ! important;
}

.lv_box{
  margin: 20px;
  width:150px;
  height:60px;
  background-color: #ffc244;
  border-radius: 30px;
}

.level-process {
  display: table;
  table-layout: fixed;
  width: 95.33898%;
  max-width: 1125px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.level-process .cell {
  display: table-cell;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.level-process .bar {
  overflow: hidden;
  height: 30px;
  background-color: rgba(60, 69, 87, 0.1);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  line-height: 0.6;
  margin: 15px 0px
}

.level-process .bar span {
  display: inline-block;
  height: 100%;
  background-color: #C10A11;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.hv_center{
  text-align: center;
  margin: auto;
}


.test_book{
  margin: 0 auto 60px auto!important;
  /* background-color: rgb(233, 233, 233)!important; */
}


.test_btn:hover{
  background-color: #0088DF!important;
    color: #FFF!important;
}





.s-title{
  text-align: left;
  padding-left: 70px;
  margin: auto;
  color: black;
  font-size: 22px;
}

.s-title.is_center{
  text-align: center!important;
  padding-left: 0!important;
}

.width_narrow{
  width:700px;
}

.red_box{
  position: relative;
  display: inline-block;
  width: 170px;
  padding: 13px;
  background-color: #ef4b33;
  border: 1px solid #ef4b33;
  border-radius: 5px;
  /* border-bottom-left-radius: 0; */
  font: 500 15px "noto";
  color: #fff;
  line-height: 1;
  text-align: center;
}

.result_rect{
  margin-top: 30px;
  margin-bottom: 100px;
  width:800px
}

.answer_box{
  background-color: #fff;
}

.ox-ul {
  padding-left: 5rem;
  padding-right: 5rem;
  padding-bottom: 6rem;
}

.ox-ul li {
  position: relative;
  padding: 2.5rem 8rem 2.5rem 3rem;
  border-top: 1px solid #E9E8E8;
  border-bottom: 1px solid #E9E8E8;
  list-style: none;
}

.ox-ul .cell-wrap {
  zoom: 1;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.ox-ul .cell-explain {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 66.66667%;
  margin-top: 0;
  padding-right: 2rem;
}

.ox-ul .q {
  position: relative;
  word-break: keep-all;
  word-wrap: break-word;
}
.accord .cell {
  word-break: keep-all;
  word-wrap: break-word;
}

.ox-ul .q strong {
  position: absolute;
  left: -3rem;
  top: -0.5rem;
  font-size: 2.4rem;
}

.cell.q{
  font-weight: bold;
}

.s.has-audio {
  position: relative;
  padding-left: 35px;
}
.ox-ul .s {
  margin-top: 1rem;
  word-break: keep-all;
  word-wrap: break-word;
}

.ox-ul .cell-answer {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 33.33333%;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
  padding-left: 3rem;
  border-left: 0;
}

.ox-ul li.is-x:before {
  top: 3rem;
  height: 60px;
  width: 60px;
  border-width: 3px;
  font-weight: bold;
  line-height: 54px;
  font-size: 3.3rem;
}

.ox-ul li.is-x:before {
  content: "\2713";
  display: inline-block;
  font-family: "icon";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #FF5259;
  color: #FF5259;
}

.ox-ul li:before {
  position: absolute;
  /* font-family: 'Font Awesome 5 Free'; */
  font-weight: 900;
  content: '\2713';
  right: 0;
  top: 2rem;
  width: 30px;
  height: 30px;
  line-height: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
}


.ox-ul li:first-child {
  border-top: 1px solid #E9E8E8;
}

.level-result .ox-ul li {
  position: relative;
  padding: 2.5rem 8rem 2.5rem 3rem;
}
.ox-ul li {
  position: relative;
  padding: 2rem 4rem 2rem 3rem;
  border-bottom: 1px solid #E9E8E8;
}


.result_q_num{
  font-size: 19px;
  font-weight: bolder;
}



.modal_left{
    top: 50%!important;
    left: 50%!important;
    transform: translate(-73%, -50%)!important;
}

.modal_right{
    top: 50%!important;
    left: 50%!important;
    transform: translate(-27%, -50%)!important;
}

.flip_card_font{
  font-size: 31px;
  font-weight: bold;
    overflow-wrap: break-word;
}

.flip_card_font_small{
  font-size: 21px;
  font-weight: bold;
    overflow-wrap: break-word;
}


/*이하 앱을 위함*/

.api_gray_12{
    margin-top: 16px;
    margin-bottom: 4px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    opacity: 0.5;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.api_gray_13{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    opacity: 0.5;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.api_gray_16{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    opacity: 0.5;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.api_black_18{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.api_black_16{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
}

.api_black_13{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
}

.api_black_thin_13{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
}

.api_black_thin_16{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #000000;
}

.gradulation{
width: 72px;
height: 72px;
}


.star_badge{
width: 28px;
height: 28px;
margin-left:4px;
    margin-top: 4px;
}

.content_margin{
margin-left:24px;
margin-right:24px;
}

.bottom_gray{
margin-left:3px;
    margin-top: 11px;
    /*
border-bottom: solid 1px #e9e8e8;*/
}

.score_area{
margin-right:4px;
}


.one_row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 0px;
    margin-right: 0px;
}

.circle_report{
width: 40px;
height: 40px;
border: 0.5px solid rgba(0, 0, 0, 0.5);
border-radius: 99px;
}

.vertical_horizontal_center {
  text-align: center;
      width: 100%;
}

.rounded_rect_report{
display: flex;
padding: 4px 8px;
background: #EBEDFF;
border-radius: 8px;
flex-grow: 0;
height: 48px;
}


.small_blue_11{
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 11px;
line-height: 150%;
display: flex;
align-items: center;
color: #5C3CDD;
opacity: 0.5;
flex: none;
order: 0;
flex-grow: 0;}

.margin_auto{
    margin: auto;
}

.wide_width{
width:180px!important;
}

.wide2_width{
width:220px!important;
}

.font_28{
font-size: 28px!important;
}

/*
.font_28_table th,div{
font-size: 28px!important;
}*/

.font_35{
font-size: 35px!important;
}


.sms_name_td{
 padding: 1px 5px 1px 3px!important;
 border: none!important;
}

.login_card{
    width: 19rem;
    margin-top: 50px;
}

.login_card_title{
    font-size: 20;
    font-weight: bolder;
}


.force_hidden {
    display: none !important;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently not supported by any browser */
  }

.popup_size{
    max-width:500px!important;
}

.lottie_icon_play{
    width: 110px;
}

.lottie_icon_record{
    width: 100px;
    height: 100px;
}

.lottie_btn_area{
   width: 110px;
    height: 110px;

}

.lottie_icon_small_record{
    width: 180px;
    height: 180px;
    margin-top:-36px!important;
}

.lottie_icon_small_mic{
    width: 120px;
}

.vertical_center{
    display: grid;  /* 세로중앙위치 */
  place-items: center;
}


.lottie_btn{
    margin: auto;

}
.lottie_btn:hover{
  cursor:pointer;
}

.sen_mic_area{
    margin: auto;
    margin-right: -34px;
    margin-left: -21px;

}


#video-canvas2 {
  display: block;
  background-color: black;
  width: 350px;
  height: 260px;
  border-radius: 4px;
}


.align_center_hv {
    display: flex;
    justify-content: center;  /* Horizontally center */
    align-items: center;       /* Just to visualize the parent div */
}

.fa-star:before {
  color: #fc8f8f;
}

.fa-star.empty:before {
  color: white;
}

.fa-star.gray:before {
  color:#e9ecef;
}


.fa-star.big:before {
  font-size: 30px;
}

.fa-star.small:before {
  font-size: 15px;
}


#reward-animation-container {
  position: relative;
  text-align: center;
}

.reward-animation-star{
  top: 0;
  right: 0;
  font-size: 26px;
}

.reward-animation {
  position: absolute;
  right: 22px;
  top: 50px; /* 상단에 위치 */
  left: 50%; /* 수평 중앙에 위치 */
  z-index: 999;
  font: 400 26px 'noto';
  /* font-size: 26px; */
  color: red;
  opacity: 0; /* 초기 상태를 흐릿하게 설정 */
}

.reward-animation.animate {
  transform: scale(2);
  opacity: 1;
  transition: transform 2s, opacity 2s;
}



.reward_container_wpm {
  text-align: center;
  margin-top: 13px;
}


.input-number {
  -moz-appearance: textfield;
}
.input-number::-webkit-outer-spin-button,
.input-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.gary-input-button {
  height:30px;
  color:black;
  border: 1px solid #505050; /* 테두리 선을 얇게 설정 */
  border-radius: 3px; /* radius 설정 */
}

#thumbnail-v{
  width:60px;
}


/* .ts-img-area.is_record_mobile {
  margin-left: 30px;
} */

.ts-img-area.is_record_mobile .ts-img-div{
  width:340px;
  /* margin-top: -25px; */
}

.ts-sc-video-room .ts-video-ctl.is_record_mobile .ts-video-ctl-btn-group {

}

.ts-sc-video-room .ts-video-ctl.is_record_mobile .ts-img-div {

  height: 250px;
  padding-top: 88px;
  width: 414px;
}

.ts-sc-video-room.is_record_mobile {
  padding: 15px 15px 15px 15px;
}

.ts-sc-video-room.is_record_mobile > .ts-box.ts-box-left {
  /* transform: translateX(-35px); */
}

.float_fixed_l{
  
  position: fixed!important;
  float: left;
}
/* 좌상단의 뒤로 가기 버튼 */
.floating-back-button {
  z-index: 1000; 
  position: fixed;
  float: left;
  top: 7px;
  left: 7px;
  /* background: transparent url("/static/assets/img/icons/ico-top-bar-link-wh.4bdaa83293a7.png") 0 50% / 28px 25px no-repeat; */
  background-color: #0088DF;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}