#topbar {
  background: #0080F4!important;
  background: white;
  height: 50px;
  font-size: 18px;
  color: #0080F4;
}

#topbar_d {
  background: rgb(20, 20, 20)!important;
  height: 50px;
  font-size: 18px;
  color: #0080F4;
}

.t_logo{
  height: 60px;
}

.float_l{
  float: left;
}

.c_logo_blue{
  color:deepskyblue;
}

.c_white{
  color: white!important;
}

/* 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; */
}



.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;
}

.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;
}

.sm_btn {
padding: 2px 4px;
}

.margin_r_5{
margin-right:5px;
}

.color_beige {
background-color: beige;
}

#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;
}



.hover_pointer{
cursor: pointer;
}

.margin_r_20{
margin-right: 20px;
}

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

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

.video_box{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 0 55px 0;
}

.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;
}

.center_space {
margin-left: auto;
margin-right: auto;
}



.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;
}

.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;
}

.c_blue_w {
  color: blue;
font-weight: bolder;
font-size:18px;
}

.very_narrow_width_space {
margin-left: auto;
margin-right: auto;
padding: 0px 18px 20px 18px;
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;
}

.nav_bar_top {
background-color: #0080F4;
margin-left: auto;
margin-right: auto;
padding: 0px 18px 8px 18px;
margin-top: 0px;
margin-bottom: 0px;
}

.nav_bar_btn {
background-color: #cde5ff;
border-color: #cde5ff;
}

.nav_bar_btn active{
background-color: #f1dd81;
border-color: #f1dd81;
}


.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;
}




.text_right {
  text-align: right!important;
}

.table_header_text {
  background-color:lightgray;
  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;
}

.font_20 {
  font-size: 20px;

}

#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;
  margin-bottom: 2px;
  padding: 0px 3px 0px 3px;
}

.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_2 {
  margin-left: 2px;
}

.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;
}

.round_btn {
  color: white!important;
  font-weight: bolder;
  border-radius: 50px;
}

.progress_round_btn {
  color: white!important;
  padding-top: 0px;
  padding-bottom: 0px;
  /* font-weight: bolder; */
  border-radius: 50px;
}

.progress_table td{
  font-size: 12px;
  vertical-align: middle;
}

.score_table_margin{
  height: 5px!important;
}

.progress_table tr{
  height: 30px;
}

.score_table tr{
  height: 21px;
}

.score_table td{
  font-size: 12px;
  /* text-align: center; */
  vertical-align: middle;
}

.mingle_color {
  background-color: #2F80ED;
}

.text_centered{
  text-align: center;
}



.padding_15 {
  padding: 15px 15px 15px 15px;
}



.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 */
}

.study_btn::before {
  content: '\f518'; /* check mark */
  }

.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;
}

.progress_page_title{
  font-size: 14px;
  font-weight: bold;
}

.margin_t_5{
margin-top: 5px;
}
 
.icon_title_width{
  width:27px;
}

.icon_step_width{
  width:23px;
}

.margin_t_15{
  margin-top: 15px;
  }

  .margin_t_30{
  margin-top: 30px;
  }

    .margin_t_80{
  margin-top: 80px;
  }
.min_height{
    min-height:1000px;

}

.bg_c_white{
    background-color: white;
}
.vertical_aligned>td{
vertical-align: middle!important;
}

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

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

.datepick{
width: 110px
}

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

.left_header {
  align-content: center;
 /*background-color: #063468;*/
    color: black;
  vertical-align: middle !important;
  text-align: center;
}

.sp_files{
width:450pxw
}

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

.margin_t_10{
margin-top: 10px !important;
}




.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!important;

}

.width_800{
width: 800px!important;

}


.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:35.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{
}
.short_width{
width: 150px;
}

.middle_width{
width: 350px;
}




.center_logo{
  margin-top: 12px;
  color: #d5f2ff;
  font-size: 20px;
  font-weight: 600;
}


.round_border{
  border-radius: 5px;
  border-color: grey;
  border-width: 1px;
  border-style: solid;
  padding: 5px;
  margin-bottom: 5px;
}

.boundary-table td {
    border: 1px solid black;
    padding: 5px;
  }

  .right-double-line-td{
border-right: double!important;
  }



.sen_line{
    padding-top: 33px !important;
    margin-bottom: 60px !important;
    border-bottom: 1px solid black;
    width:60%
}


.padding_space {
  margin-left: auto;
  margin-right: auto;
  padding: 20px 50px 20px 50px;
  margin-bottom: 30px;
  max-width: 1300px;
  }


.lesson_title {
  padding-bottom: 30px;
  padding-top: 0px;
  padding-left: 0px;
}

.lesson_title h2{

  font-size: 32px !important;
  font-weight: bold !important;
  text-transform: uppercase;
  /* position: relative; */
  color: #37517e;
}

.sen_padding{
    padding: 3px 0px;
}


.button_margin{
    margin:4px;
}

.footer-bottom{
position: fixed;
      bottom: 0;
      width: 100%;
      height:100px;
background-color:#0080F4;
display: flex;
      align-items: center;
      justify-content: center;
}

.footer-bottom_d{
position: fixed;
      bottom: 0;
      width: 100%;
      height:100px;
background-color:rgb(20, 20, 20);
display: flex;
      align-items: center;
      justify-content: center;
}

.vertical_center{
align-items: center;
}

.scrollable-div {
    height: 300px;
    overflow-y: scroll;
    border: 2px solid black;
  }


  .row_name {
    padding: 0px 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    border: 1px solid #dee2e6;
  }

  .pad_v {
    padding: 10px 0px;
  }

    .flex_1 {
    flex: 1;
  }


  .row_name:hover {
    background-color: lightgray;
  }

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


  .row_name.selected input {
    display: inline-block;
  }

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

  .no_padding{
    padding:0px!important;
  }

  .page_title > h2{
text-align: center;
  }

div.nested-table-wrapper {
  height: 60vh;
}

.dis_flex{
display: flex;
  align-items: center;
  justify-content: center;
}

.move_btn{
    padding: 0.375rem 4px;
}


#thumbnail-container {
    margin:10px;
    display: none;
    text-align: center; /* 수평 중앙 정렬을 위한 text-align 속성 추가 */
  }

    #thumbnail {
    max-width: 130px; /* 가로 최대 너비를 100%로 설정하여 100을 넘지 않도록 함 */
  }

  #thumbnail-v {
    max-width: 130px;
  }
  #thumbnail-h {
    max-width: 195px;
  }

  .thumbnail-bk {
    max-width: 80px;
  }

  .small_thumb_img{
    width:60px;
    height:70px;
    padding: 3px 7px 3px 7px;
  }
  .gary-input-button {
    height:30px;
    border: 1px solid #505050; /* 테두리 선을 얇게 설정 */
    border-radius: 3px; /* radius 설정 */
  }

  .font_bolder{
    font-weight: bolder;
  }

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

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

.margin_center{
  margin: 0 auto;
}

.margin_lr_40{
    margin: 0 40px;
}

.padding_lr_20{
    padding: 0 20px;
}

  .max_width_1000{
    max-width : 1000px;
    margin: auto;
}

.ad_img{
    width : 300px;
    padding: 10px;
}

.lr_pad{
    margin-left: 1px;
    margin-right: 1px;
    padding-left: 2px;
    padding-right: 2px;
    border-radius : 30px;
}

.top_li_active{
    background-color:gray;
}


.image-container-slide {
        overflow: hidden; /* 이미지가 컨테이너를 넘어가면 숨깁니다. */
    }

.image-container-slide img {
    width: 100%; /* 이미지를 부모 요소의 가로 너비에 맞게 설정합니다. */
    height: 100%; /* 이미지의 세로 비율을 유지하도록 설정합니다. */
    object-fit: fill; /* 이미지를 화면에 꽉 차게 맞춥니다. */
}

.main-ad-image li{
width: 10px;
    height: 10px;
    border-radius:50%;
    background-color: black;
}

.carousel-control-prev, .carousel-control-next{
    width: 5%;
}

.font_w_bolder{
    font-weight: bolder!important;
}

.pg_title{
    font-weight: bolder;
    font-size: 20px;
    padding: 15px 0;

}

.c_black {
  color: black;
}

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




.navbar-custom {
    padding:.5rem 0rem;
}
.navbar-custom {
    background-color: black;
}
.navbar-custom .navbar-nav .nav-link {
    color: white;
}
.navbar-custom .navbar-nav .nav-link:hover,
.navbar-custom .navbar-nav .dropdown-menu a:hover {
    background-color: #333;
}
.navbar-custom .navbar-nav .dropdown-menu {
    background-color: black;
    border: none;
}
.navbar-custom .navbar-nav .dropdown-item {
    color: white;
}
.navbar-custom .navbar-nav .dropdown-item:hover {
    background-color: #333;
}

.navbar-collapse{
    z-index:4;
}
@media (max-width: 991px) {
    .navbar-nav {
        display: none;
    }
    .navbar-nav.show {
        display: block;
        background-color: black;
    }
    .navbar-nav .nav-link,
    .navbar-nav .dropdown-item {
        color: white;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .dropdown-item:hover {
        background-color: #333;
    }
    .navbar-toggler {
        display: block;
    }
}

.nohove{
    padding-left:10px;
}

.navbar-nav.ml-auto{

    padding-right:10px;
}

#navbarNav{
   padding-left:20px;
    background-color: black;
}



@media (min-width: 500px)  {
    .mingle_logo{
        width: 150px;
    }
}

@media (max-width: 499.98px)  {
    .mingle_logo{
        width: 100px;
    }
}