@charset "utf-8";
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* hebrew */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* hebrew */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* hebrew */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* cyrillic-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSumu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSOmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSymu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* hebrew */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS2mu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSCmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu0SC55K5gw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    src: url(fonts/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "GmarketSans";
    src: url("/styles/fonts/GmarketSans.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
      font-family: "GmarketSansBold";
      src: url("/styles/fonts/GmarketSansBold.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
  }

.gmarket {
    font-family: 'GmarketSans', "Noto Sans KR", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.gmarket-bold {
    font-family: 'GmarketSansBold', "Noto Sans KR", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}


body { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
/* body { font-family: "Helvetica Neue", Helvetica, "Open Sans", Arial, 'SimSong', '宋體', 'simsun', "Microsoft Yahei", "微软雅黑", STXihei, "华文细黑", sans-serif; margin: 0; padding: 0; } */
body.disabled { overflow: hidden; }

#battle-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; overflow-x: hidden; z-index: 1; }
.is-mobile #battle-wrapper { min-width: 1440px; min-height: 720px; }
.is-mobile #guide_video { width: 1440px; }

.cc-body { width: 1240px; margin: 0px auto; }
.cc-body2 { width: 1240px; margin: 0px auto; }
.is-mobile .cc-body .is-mobile .cc-body2 { width: 100%; margin: 0px; padding: 0px 12px; }
.cc-content { padding-left: 40px; }

.cc-row:before, .cc-row:after { display: table; content: " "; }
.cc-row:after { clear: both; }
.cc-row .cc-col { float: left; position: relative; }

.text-default { color: #222328 !important; }
.text-gclass { color: #369FFF !important }
.text-primary { color: #7f5ac8 !important }
.text-primary-lightest { color: #f0eef3 !important }
.text-info { color: #009be1 !important }
.text-success { color: #78d024 !important }
.text-success2 { color: #318500 !important }
.text-success3 { color: #AAF736 !important}
.text-success-dark { color: #6cbb24 !important }
.text-success-light { color: #ebf6e1 !important }
.text-success-lighter { color: #f7fbf3 !important }
.text-danger { color: #C9484D !important }
.text-danger2 { color: #B50E22 !important }
.text-danger3 { color: #FF6159 !important; }
.text-warning { color: #ffca28 !important }
.text-warning2 { color: #FC812F !important }
.text-4d { color: #4D4E54; }
.text-gray, .text-666 { color: #666 !important }
.text-d9 { color: #D9D9D9 !important; }
.text-c0 { color: #C0C0C0 !important; }
.text-29 { color: #292929 !important; }
.text-7c { color: #7c7c7c !important }
.text-8c { color: #8C8C8C !important }
.text-777 { color:#777; }
.text-333 { color:#333; }
.text-999 { color: #999 !important }
.text-light { color: #a8a8a8 !important }
.text-ccc { color: #ccc !important; }
.text-lighter { color: #ddd !important }
.text-lightest { color: #eaeaea !important }
.text-dark { color: #000 !important }
.text-white { color: #fff !important }
.text-white-a70 { color: rgba(255, 255, 255, 0.7) !important; }
.text-marker { position: relative; }
.text-marker>span { position: relative; }
.text-marker::before { content: ""; position: absolute; left: 0; right: 0; bottom: 10%; top: 50%; background: rgba(120, 208, 36, 0.3); }
.text-marker.gclass::before { background: rgba(66, 157, 223, 0.2); }
.text-marker.primary::before { background: rgba(221, 211, 240, 0.2); }
.text-seperate { display: block; position: relative; width: 100%; text-align: center; }
.text-seperate>span { font-weight: 600; background: #fff; padding: 0px 12px; position: relative; z-index: 2; }
.text-seperate::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 1px; background: #E5E5E5; z-index: 1; }
.text-mid { vertical-align: middle; }
.text-line-1 { line-height: 1; }
.text-strike { text-decoration : line-through; }

.bg-default { background-color: #333 !important; }
.bg-gclass { background-color: #369FFF !important; color: #fff !important; }
.bg-gclass-light { background-color: #DCEBF9 !important; }
.bg-primary { background-color: #7f5ac8 !important; color: #fff !important; }
.bg-primary-light { background-color: #F1EAFF !important; }
.bg-primary-lightest { background-color: #f0eef3 !important; }
.bg-primary-light2 { background-color : #A78BE9 !important; }
.bg-info { background-color: #009be1 !important; }
.bg-success { background-color: #78d024 !important; }
.bg-success-dark { background-color: #6cbb24 !important; }
.bg-success-light { background-color: #ebf6e1 !important; }
.bg-success-lighter { background-color: #f7fbf3 !important; }
.bg-danger { background-color: #C9484D !important; }
.bg-warning { background-color: #ffca28 !important; }
.bg-warning2 { background-color: #FC812F !important; }
.bg-gray { background-color: #666 !important; }
.bg-light { background-color: #a8a8a8 !important; }
.bg-lighter { background-color: #ddd !important; }
.bg-lightest { background-color: #eaeaea !important; }
.bg-lightest2 { background-color: #f4f4f4 !important; }
.bg-dark { background-color: #000 !important; }
.bg-white { background-color: #fff !important; }

.bg-style { background-color: #FFF !important; }
.bg-style[data-bg-value="255255255"]{ background-color: #FFF !important; }
.bg-style[data-bg-value="245245245"]{ background-color: #F5F5F5 !important; }
.bg-style[data-bg-value="229246218"]{ background-color: #E5F6DA !important; }
.bg-style[data-bg-value="255253230"]{ background-color: #FFFDE6 !important; }
.bg-style[data-bg-value="255234232"]{ background-color: #FFEAE8 !important; }
.bg-style[data-bg-value="225247255"]{ background-color: #E1F7FF !important; }
.bg-style[data-bg-value="245240255"]{ background-color: #F5F0FF !important; }

.bg-style[data-bg-value="243243243"]{ background-color: #F5F5F5 !important; }
.bg-style[data-bg-value="225244215"]{ background-color: #E5F6DA !important; }
.bg-style[data-bg-value="255253228"]{ background-color: #FFFDE6 !important; }
.bg-style[data-bg-value="255231229"]{ background-color: #FFEAE8 !important; }

.br-4 { border-radius: 4px; } .br-6 { border-radius: 6px; } .br-8 { border-radius: 8px; } .br-10 { border-radius: 10px; } .br-15 { border-radius: 15px; } .br-25 { border-radius: 25px; } .br-20 { border-radius: 20px; }

.label { padding: .25em .8em; font-weight: 400; }
.label.bold { font-weight: 700; font-size: 11px; }
.label-default { background-color: #4E4E4E; }
.label-gclass { background-color: #369FFF; }
.label-max { background: linear-gradient(90deg, #01CDA4 0%, #7E4AEC 100%); font-size: 80%; }
.label-primary { background-color: #7f5ac8; }
.label-info { background-color: #009be1; }
.label-success { background-color: #78d024; }
.label-danger { background-color: #C9484D; }
.label-warning { background-color: #ffca28; }
.label-warning2 { background-color: #fbb329; }
.label.radius { border-radius: 100px; }

.tag { display: inline; padding: 4px 10px; font-size: 75%; font-weight: 400; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 20px 20px 20px 0px; position: relative; }
.tag-default { background-color: #A8A8BD; }
.tag-gclass { background-color: #D64F9C; }
.tag-primary { background-color: #7f5ac8; }
.tag-info { background-color: #009be1; }
.tag-success { background-color: #78d024; }
.tag-danger { background-color: #C9484D; }
.tag-warning { background-color: #ffca28; }
.tag.radius { border-radius: 100px; }


.label.badge-new { padding: 0px; display: table; font-size: 10px; width: 17px; height: 17px; text-align: center; overflow: hidden; color: #fff; border-radius: 17px; transform: scale(0.9); }
.label.badge-new-left { position: absolute; top: 17px; right:5px; padding: 3px 7px; display: table; font-size: 75%; font-weight: 700; line-height: 1; width: 17px; height: 17px; text-align: center; overflow: hidden; color: #fff; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.label.badge-new>* { display: table-cell; vertical-align: middle; }
.label.badge-new-left>* { display: table-cell; vertical-align: middle; }

.font-108 { font-size: 108px !important }
.font-96 { font-size: 96px !important }
.font-72 { font-size: 72px !important }
.font-64 { font-size: 64px !important }
.font-55 { font-size: 55px !important }
.font-50 { font-size: 50px !important }
.font-48 { font-size: 48px !important }
.font-40 { font-size: 40px !important }
.font-38 { font-size: 38px !important }
.font-36 { font-size: 36px !important }
.font-32 { font-size: 32px !important }
.font-30 { font-size: 30px !important }
.font-28 { font-size: 28px !important }
.font-26 { font-size: 26px !important }
.font-25 { font-size: 25px !important }
.font-24 { font-size: 24px !important }
.font-23 { font-size: 23px !important }
.font-22 { font-size: 22px !important }
.font-21 { font-size: 21px !important }
.font-20 { font-size: 20px !important }
.font-19 { font-size: 19px !important }
.font-18 { font-size: 18px !important }
.font-17 { font-size: 17px !important }
.font-16 { font-size: 16px !important }
.font-15 { font-size: 15px !important }
.font-14 { font-size: 14px !important }
.font-13 { font-size: 13px !important }
.font-12 { font-size: 12px !important }
.font-11 { font-size: 11px !important }
.font-10 { font-size: 10px !important }
.font-0 { font-size: 0px !important }
.font-50p { font-size: 50% !important }
.font-70p { font-size: 70% !important }
.font-80p { font-size: 80% !important }
.font-90p { font-size: 90% !important }
.font-110p { font-size: 110% !important }
.font-120p { font-size: 120% !important }
.font-130p { font-size: 130% !important }
.font-140p { font-size: 140% !important }
.font-150p { font-size: 150% !important }
.font-160p { font-size: 160% !important }
.font-170p { font-size: 170% !important }

.p-n { padding: 0px !important }
.p-xxs { padding: 5px !important }
.p-xs { padding: 10px !important }
.p-sm { padding: 15px !important }
.p-m { padding: 20px !important }
.p-25 { padding: 25px !important }
.p-md { padding: 25px !important }
.p-lg { padding: 30px !important }
.p-xl { padding: 40px !important }
.p-xxl { padding: 50px !important }
.p-l-none { padding-left: 0 !important }
.p-l-xs { padding-left: 5px !important }
.p-l-sm { padding-left: 10px !important }
.p-l { padding-left: 15px !important }
.p-l-md { padding-left: 20px !important }
.p-l-25 { padding-left: 25px !important }
.p-l-lg { padding-left: 30px !important }
.p-l-xl { padding-left: 40px !important }
.p-l-xxl { padding-left: 50px !important }
.p-l-xxxl { padding-left: 60px !important }
.p-t-none { padding-top: 0 !important }
.p-t-xxs { padding-top: 1px !important }
.p-t-xs { padding-top: 5px !important }
.p-t-sm { padding-top: 10px !important }
.p-t { padding-top: 15px !important }
.p-t-md { padding-top: 20px !important }
.p-t-25 { padding-top: 25px !important }
.p-t-lg { padding-top: 30px !important }
.p-t-xl { padding-top: 40px !important }
.p-t-xxl { padding-top: 50px !important }
.p-t-xxxl { padding-top: 60px !important }
.p-r-none { padding-right: 0 !important }
.p-r-xxs { padding-right: 1px !important }
.p-r-xs { padding-right: 5px !important }
.p-r-sm { padding-right: 10px !important }
.p-r { padding-right: 15px !important }
.p-r-md { padding-right: 20px !important }
.p-r-25 { padding-right: 25px !important }
.p-r-lg { padding-right: 30px !important }
.p-r-xl { padding-right: 40px !important }
.p-r-50 { padding-right: 50px !important }
.p-r-60 { padding-right: 60px !important }
.p-b-none { padding-bottom: 0 !important }
.p-b-xxs { padding-bottom: 1px !important }
.p-b-xs { padding-bottom: 5px !important }
.p-b-sm { padding-bottom: 10px !important }
.p-b { padding-bottom: 15px !important }
.p-b-md { padding-bottom: 20px !important }
.p-b-25 { padding-bottom: 25px !important }
.p-b-lg { padding-bottom: 30px !important }
.p-b-xl { padding-bottom: 40px !important }
.m-xxs { margin: 2px 4px !important }
.m-xs { margin: 5px !important }
.m-sm { margin: 10px !important }
.m { margin: 15px !important }
.m-md { margin: 20px !important }
.m-25 { margin: 25px !important }
.m-lg { margin: 30px !important }
.m-xl { margin: 50px !important }
.m-xxl { margin: 60px !important }
.m-n { margin: 0 !important }
.m-center { margin: 0 auto !important; }
.m-l-none { margin-left: 0 !important }
.m-l-xs { margin-left: 5px !important }
.m-l-sm { margin-left: 10px !important }
.m-l-12 { margin-left: 12px !important }
.m-l { margin-left: 15px !important }
.m-l-md { margin-left: 20px !important }
.m-l-25 { margin-left: 25px !important }
.m-l-lg { margin-left: 30px !important }
.m-l-35 { margin-left: 35px !important }
.m-l-xl { margin-left: 40px !important }
.m-l-xxl { margin-left: 50px !important }
.m-l-xxxl { margin-left: 60px !important }
.m-l-xxxxl { margin-left: 80px !important }
.m-t-none { margin-top: 0 !important }
.m-t-xxs { margin-top: 1px !important }
.m-t-xs { margin-top: 5px !important }
.m-t-8 { margin-top: 8px !important }
.m-t-sm { margin-top: 10px !important }
.m-t-12 { margin-top: 12px !important }
.m-t { margin-top: 15px !important }
.m-t-md { margin-top: 20px !important }
.m-t-25 { margin-top: 25px !important }
.m-t-lg { margin-top: 30px !important }
.m-t-35 { margin-top: 35px !important }
.m-t-xl { margin-top: 40px !important }
.m-t-xxl { margin-top: 50px !important }
.m-t-xxxl { margin-top: 60px !important }
.m-t-xxxxl { margin-top: 80px !important }
.m-r-none { margin-right: 0 !important }
.m-r-xxs { margin-right: 1px !important }
.m-r-xs { margin-right: 5px !important }
.m-r-sm { margin-right: 10px !important }
.m-r { margin-right: 15px !important }
.m-r-md { margin-right: 20px !important }
.m-r-25 { margin-right: 25px !important }
.m-r-lg { margin-right: 30px !important }
.m-r-xl { margin-right: 40px !important }
.m-r-xxl { margin-right: 50px !important }
.m-b-none { margin-bottom: 0 !important }
.m-b-xxs { margin-bottom: 1px !important }
.m-b-xs { margin-bottom: 5px !important }
.m-b-sm { margin-bottom: 10px !important }
.m-b-12 { margin-bottom: 10px !important }
.m-b { margin-bottom: 15px !important }
.m-b-md { margin-bottom: 20px !important }
.m-b-25 { margin-bottom: 25px !important }
.m-b-lg { margin-bottom: 30px !important }
.m-b-xl { margin-bottom: 40px !important }
.m-b-xxl { margin-bottom: 50px !important }

.border { border: 1px solid #dbdbdb; }
.border-t { border-top: 1px solid #dbdbdb; }
.border-r { border-right: 1px solid #dbdbdb; }
.border-b { border-bottom: 1px solid #dbdbdb; }
.border-l { border-left: 1px solid #dbdbdb; }
.border-t-none { border-top: none; }
.border-r-none { border-right: none; }
.border-b-none { border-bottom: none; }
.border-l-none { border-left: none; }
.border.bg-gclass-light, .border.bg-gclass { border-color: #369FFF; }

.cc-table { display: table; }
.cc-table>* { display: table-cell; vertical-align: top; }
.cc-table>.middle, .cc-table.middle>* { vertical-align: middle; } .cc-table>.bottom, .cc-table.bottom>* { vertical-align: bottom; }
.col-13p { width: 13.333333%; } .col-16p { width: 16.666666%; } .col-20p { width: 20%; } .col-25p { width: 25%; }

.fill-parent { width: 100%; height: 100%; }
.fill-parent-w { width: 100%; }
.fill-parent-h { height: 100%; }

.w-a { width: auto !important; } .w-20 { width: 20px !important; } .w-24 { width: 24px !important; } .w-30 { width: 30px !important; } .w-35 { width: 35px !important; } .w-40 { width: 40px !important; } .w-45 { width: 45px !important; } .w-50 { width: 50px !important; } .w-55 { width: 55px !important; } .w-60 { width: 60px !important; } .w-65 { width: 65px !important; } .w-70 { width: 70px !important; } .w-80 { width: 80px !important; } .w-85 { width: 85px !important; } .w-90 { width: 90px !important; } .w-100 { width: 100px !important; } .w-110 { width: 110px !important; } .w-120 { width: 120px !important; } .w-130 { width: 130px !important; } .w-140 { width: 140px !important; } .w-150 { width: 150px !important; } .w-160 { width: 160px !important; } .w-170 { width: 170px !important; } .w-180 { width: 180px !important; } .w-200 { width: 200px !important; } .w-230 { width: 230px !important; } .w-240 { width: 240px !important; } .w-250 { width: 250px !important; } .w-260 { width: 260px !important; } .w-290 { width: 290px !important; } .w-300 { width: 300px !important; } .w-320 { width: 320px !important; } .w-330 { width: 330px !important; } .w-340 { width: 340px !important; } .w-350 { width: 350px !important; } .w-360 { width: 360px !important; } .w-370 { width: 370px !important; } .w-380 { width: 380px !important; } .w-400 { width: 400px !important; } .w-430 { width: 430px !important; } .w-450 { width: 450px !important; } .w-500 { width: 500px !important; } .w-600 { width: 600px !important; } .w-700 { width: 700px !important; } .w-720 { width: 720px !important; } .w-750 { width: 750px !important; } .w-790 { width: 790px !important; } .w-800 { width: 800px !important; } .w-900 { width: 900px !important; } .w-1000 { width: 1000px !important; } .w-1080 { width: 1080px !important; } .w-1200 { width: 1200px !important; } .w-1280 { width: 1280px !important; } .w-1500 { width: 1500px !important; }
.h-a { height: auto !important; } .h-30 { height: 30px !important } .h-40 { height: 40px !important; } .h-48 { height: 48px !important; } .h-50 { height: 50px !important; } .h-60 { height: 60px !important; } .h-70 { height: 70px !important; } .h-65 { height: 65px !important; } .h-80 { height: 80px !important; } .h-100 { height: 100px !important; } .h-150 { height: 150px !important; } .h-166 { height: 166px !important; } .h-180 { height: 180px !important; } .h-200 { height: 200px !important; } .h-250 { height: 250px !important; } .h-300 { height: 300px !important; } .h-350 { height: 350px !important; } .h-400 { height: 400px !important; } .h-420 { height: 420px !important; } .h-450 { height: 450px !important; } .h-500 { height: 500px !important; } .h-600 { height: 600px !important; } .h-700 { height: 700px !important; } .h-800 { height: 800px !important; } .h-900 { height: 900px !important; } .h-1000 { height: 1000px !important; } .h-1080 { height: 1080px !important; } .h-1200 { height: 1200px !important; } .h-1280 { height: 1280px !important; } .h-100p { height: 100% !important; }
.w-5p { width: 5% !important; } .w-10p { width: 10% !important; } .w-11p { width: 11% !important; } .w-12p { width: 12% !important; } .w-14p { width: 14.28% !important; } .w-15p { width: 15% !important; } .w-20p { width: 20% !important; } .w-23p { width: 23% !important; } .w-25p { width: 25% !important; } .w-30p { width: 30% !important; } .w-33p { width: 33.33333% !important; } .w-35p { width: 35% !important; } .w-40p { width: 40% !important; } .w-44p { width: 44% !important; } .w-45p { width: 45% !important; } .w-50p { width: 50% !important; } .w-55p { width: 55% !important; } .w-60p { width: 60% !important; } .w-65p { width: 65% !important; } .w-70p { width: 70% !important; } .w-74p { width: 74% !important; } .w-75p { width: 75% !important; } .w-80p { width: 80% !important; } .w-85p { width: 85% !important; } .w-90p { width: 90% !important; } .w-95p { width: 95% !important; } .w-100p { width: 100% !important; }
.mw-30 { min-width: 30px !important; } .mw-50 { min-width: 50px !important; } .mw-80 { min-width: 80px !important; } .mw-100 { min-width: 100px !important; } .mw-120 { min-width: 120px !important; }  .mw-180 { min-width: 180px !important; } .mw-200 { min-width: 200px !important; } .mw-220 { min-width: 220px !important; } .mw-250 { min-width: 250px !important; } .mw-260 { min-width: 260px !important; } .mw-320 { min-width: 320px !important; } .mw-1080 { min-width: 1080px !important; }
.w-xl { min-width: 180px !important; }
.maxh-50 { max-height: 50px !important; } .maxh-80 { max-height: 80px !important; } .maxh-100 { max-height: 100px !important; } .maxh-120 { max-height: 120px !important; }  .maxh-180 { max-height: 180px !important; } .maxh-200 { max-height: 200px !important; } .maxh-220 { max-height: 220px !important; } .maxh-280 { max-height: 280px !important; } .maxh-350 { max-height: 350px !important; } .maxh-960 { max-height: 960px !important; }
.maxw-1500 { max-width: 1500px !important; width:auto !important }

.set-small-show, .set-small-show-table, .learn-small-show, .set-small-show-init {
	display: none !important;
}
.page-small .set-small-show, .page-small .learn-small-show {
	display: block !important;
}
.page-small .set-small-show-init { display: initial !important; }
.page-small .set-small-show-table {
	display: table-cell !important;
}

.checkbox, .radio { margin: 0px; }
.radio input[type="radio"]:focus + label::before { outline: none !important; }
.checkbox input[type="checkbox"]:focus + label::before { outline: none !important; }

.btn { transition: 0.2s all cubic-bezier(0, 0.6, 0.4, 1); font-weight: 600; }
.btn.focus, .btn:focus, .btn:active.focus { outline: none; }
.btn.active, .btn:active { box-shadow: none !important; }
.btn.outline.active, .btn.outline:active { color: #fff; border-color: transparent; }
.btn.bottom { padding: 4.5px 12px 7.5px; }
.btn-group-lg>.btn.bottom, .btn-lg.bottom { padding: 8.5px 16px 11.5px; }

.btn-group-lg>.btn, .btn-lg { border-radius: 4px; }
.btn-group-lg2>.btn, .btn-lg2 { padding: 8px 16px 9px; font-size: 15px; font-weight: 500; }
.btn-group-lg3>.btn, .btn-lg3 { padding: 11px 20px 12px; font-size: 18px; font-weight: 700; }
.btn-group-xl>.btn, .btn-xl { padding: 17px 16px; font-size: 20px; line-height: 1; border-radius: 4px; }

.btn-text { display: inline-block; text-align: center; position: relative; }
.btn-text>div { margin-top: 15px; font-size: 14px; color: #7C7C7C; font-weight: bolder; }

.btn.shadow { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16) !important; }
.btn.bottom.shadow { box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1) !important; }

.btn-default { border-color: #333 }
.btn-gray { border-color: #999 }
.btn-light-gray { border-color: #cccccc }
.btn-default:focus, .btn-default.focus { border-color: #000; background-color: #fff; box-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000; }
.btn-default.shadow:focus, .btn-default.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000 !important; }
.btn-default:hover, .btn-default.hover { border-color: #333; background-color: #DADADA; }
.btn-gray:hover, .btn-gray.hover { border-color: #999; }
.btn-light-gray:hover, .btn-light-gray.hover, .btn-light-gray:focus { border-color: #cccccc; }
.btn-light-gray:active, .btn-light-gray.active { border-color: #ccc; background-color: #A0A0A0; }
.btn-default:active, .btn-default.active { border-color: #333; background-color: #A0A0A0; }
.btn-default:disabled, .btn-default.disabled { border-color: #666; color: #666; }

.btn-trans { background: transparent; border-color: transparent; color: #fff; }
.btn-trans:hover, .btn-trans.hover, .btn-trans:active, .btn-trans.active { background: rgba(255, 255, 255, 0.15); color: #fff; } 

.btn-gclass { color: #fff; background-color: #369FFF; border-color: #369FFF; }
.btn-gclass.light { color: #369FFF; background-color: #D6E7F7; border-color: #D6E7F7; }
.btn-gclass:focus, .btn-gclass.focus { border-color: #5eb2ff; background-color: #369FFF; box-shadow: 1px 0px #5eb2ff, 0px 1px #5eb2ff, -1px 0px #5eb2ff, 0px -1px #5eb2ff; }
.btn-gclass.shadow:focus, .btn-gclass.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #5eb2ff, 0px 1px #5eb2ff, -1px 0px #5eb2ff, 0px -1px #5eb2ff !important; }
.btn-gclass:hover, .btn-gclass.hover { border-color: #5eb2ff; background-color: #5eb2ff; color: #fff; }
.btn-gclass:active, .btn-gclass.active { border-color: transparent; background-color: rgba(66, 157, 223, 0.8); }
.btn-gclass:disabled, .btn-gclass.disabled { background-color: #369FFF; border-color: #369FFF; }
.btn-gclass .prog { background-color: #369FFF; }
.btn-gclass.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(66, 157, 223,0.18); }

.btn-dark { color: #fff; background-color: #000; border-color: #000; }
.btn-dark:hover, .btn-dark.hover {color: #fff; border-color: #666; background-color: #666; }

.btn-primary { color: #fff; background-color: #7f5ac8; border-color: #7f5ac8; }
.btn-primary:focus, .btn-primary.focus { border-color: #5C38A6; background-color: #7f5ac8; box-shadow: 1px 0px #5C38A6, 0px 1px #5C38A6, -1px 0px #5C38A6, 0px -1px #5C38A6; }
.btn-primary.shadow:focus, .btn-primary.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #5C38A6, 0px 1px #5C38A6, -1px 0px #5C38A6, 0px -1px #5C38A6 !important; }
.btn-primary:hover, .btn-primary.hover { border-color: #5C38A6; background-color: #5C38A6; }
.btn-primary:active, .btn-primary.active { border-color: transparent; background-color: rgba(127, 90, 200, 0.8); }
.btn-primary:disabled, .btn-primary.disabled, .btn-primary[disabled] { background-color: #666; border-color: #666; }
.btn-primary .prog { background-color: #7f5ac8; }
.btn-primary.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(127,90,200,0.18); }

.btn-info { color: #fff; background-color: #009be1; border-color: #009be1; }
.btn-info:focus, .btn-info.focus { border-color: #006b9c; background-color: #009be1; box-shadow: 1px 0px #006b9c, 0px 1px #006b9c, -1px 0px #006b9c, 0px -1px #006b9c; }
.btn-info.shadow:focus, .btn-info.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #006b9c, 0px 1px #006b9c, -1px 0px #006b9c, 0px -1px #006b9c !important; }
.btn-info:hover, .btn-info.hover { border-color: #006b9c; background-color: #006b9c; }
.btn-info:active, .btn-info.active { border-color: transparent; background-color: rgba(0, 155, 225, 0.8); }
.btn-info:disabled, .btn-info.disabled { background-color: #666; border-color: #666; }
.btn-info .prog { background-color: #009be1; }
.btn-info.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(0,155,225,0.18); }

.modal.success.v3 .btn-success, .modal.success.v3 .btn-primary, .modal.success.v3 .btn-danger, .modal.success.v3 .btn-danger3, .modal.success.v3 .btn-gclass,
.modal.gclass.v3 .btn-success, .modal.gclass.v3 .btn-primary, .modal.gclass.v3 .btn-danger, .modal.gclass.v3 .btn-danger3, .modal.gclass.v3 .btn-gclass  { border-width: 2px; font-size: 20px; font-weight: 600; padding:11px 0px; text-align: center; border-radius: 6px;}
.modal.success.v3 .btn-success.small, .modal.success.v3 .btn-primary.small, .modal.success.v3 .btn-danger.small, .modal.success.v3 .btn-danger3.small  { border-width: 2px; font-size: 16px; font-weight: 600; padding:11px 0px; text-align: center; border-radius: 6px;}

.btn-success { color: #fff; background-color: #78d024; border-color: #78d024; }
.btn-success:focus, .btn-success.focus { border-color: #52AD00; background-color: #78d024; box-shadow: 1px 0px #52AD00, 0px 1px #52AD00, -1px 0px #52AD00, 0px -1px #52AD00; }
.btn-success.shadow:focus, .btn-success.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #52AD00, 0px 1px #52AD00, -1px 0px #52AD00, 0px -1px #52AD00 !important; }
.btn-success:hover, .btn-success.hover { border-color: #52AD00; background-color: #52AD00; }
.btn-success:active, .btn-success.active { border-color: transparent; background-color: rgba(120, 208, 36, 0.8); }
.btn-success:disabled, .btn-success.disabled { background-color: #666; border-color: #666; }
.btn-success .prog { background-color: #78d024; }
.btn-success.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(120,208,36,0.18); }

.btn-success2 { color: #fff; background-color: #318500; border-color: #318500; }
.btn-success2:focus, .btn-success2.focus { border-color: #439612; background-color: #318500; box-shadow: 1px 0px #439612, 0px 1px #439612, -1px 0px #439612, 0px -1px #439612; }
.btn-success2.shadow:focus, .btn-success2.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #439612, 0px 1px #439612, -1px 0px #439612, 0px -1px #439612 !important; }
.btn-success2:hover, .btn-success2.hover { border-color: #439612; background-color: #439612; }
.btn-success2:active, .btn-success2.active { border-color: transparent; background-color: rgba(120, 208, 36, 0.8); }
.btn-success2:disabled, .btn-success2.disabled { background-color: #666; border-color: #666; }
.btn-success2 .prog { background-color: #318500; }
.btn-success2.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(120,208,36,0.18); }

.btn-danger { color: #fff; background-color: #C9484D; border-color: #C9484D; }
.btn-danger:focus, .btn-danger.focus { border-color: #B40606; background-color: #C9484D; box-shadow: 1px 0px #B40606, 0px 1px #B40606, -1px 0px #B40606, 0px -1px #B40606; }
.btn-danger.shadow:focus, .btn-danger.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #B40606, 0px 1px #B40606, -1px 0px #B40606, 0px -1px #B40606 !important; }
.btn-danger:hover, .btn-danger.hover { border-color: #B40606; background-color: #B40606; }
.btn-danger:active, .btn-danger.active { border-color: transparent; background-color: rgba(213, 67, 62, 0.8); }
.btn-danger:disabled, .btn-danger.disabled { background-color: #666; border-color: #666; }
.btn-danger .prog { background-color: #C9484D; }
.btn-danger.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(201,72,77,0.18); }

.btn-danger2 { background-color: #c0392b; border-color: #c0392b; color: #FFFFFF; }
.btn-danger2:hover, .btn-danger2:focus, .btn-danger2:active, .btn-danger2.active, .open .dropdown-toggle.btn-danger2 { background-color: #d24637 !important; border-color: #d24637; color: #FFFFFF }
.btn-danger2:active, .btn-danger2.active, .open .dropdown-toggle.btn-danger2 { background-image: none }
.btn-danger2.disabled, .btn-danger2.disabled:hover, .btn-danger2.disabled:focus, .btn-danger2.disabled:active, .btn-danger2.disabled.active, .btn-danger2[disabled], .btn-danger2[disabled]:hover, .btn-danger2[disabled]:focus, .btn-danger2[disabled]:active, .btn-danger2.active[disabled], fieldset[disabled] .btn-danger2, fieldset[disabled] .btn-danger2:hover, fieldset[disabled] .btn-danger2:focus, fieldset[disabled] .btn-danger2:active, fieldset[disabled] .btn-danger2.active { background-color: #a73225; border-color: #a73225 }
.btn-danger2 .prog { background-color: #c0392b; }
.btn-danger2.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(192,57,43,0.18); }

.btn-danger3 { background-color: #FF6159; border-color: #FF6159; color: #FFFFFF; }
.btn-danger3:hover, .btn-danger3:focus, .btn-danger3:active, .btn-danger3.active, .open .dropdown-toggle.btn-danger3 { background-color: #ff7f79 !important; border-color: #ff7f79; color: #FFFFFF }
.btn-danger3:active, .btn-danger3.active, .open .dropdown-toggle.btn-danger3 { background-image: none }
.btn-danger3.disabled, .btn-danger3.disabled:hover, .btn-danger3.disabled:focus, .btn-danger3.disabled:active, .btn-danger3.disabled.active, .btn-danger3[disabled], .btn-danger3[disabled]:hover, .btn-danger3[disabled]:focus, .btn-danger3[disabled]:active, .btn-danger3.active[disabled], fieldset[disabled] .btn-danger3, fieldset[disabled] .btn-danger3:hover, fieldset[disabled] .btn-danger3:focus, fieldset[disabled] .btn-danger3:active, fieldset[disabled] .btn-danger3.active { background-color: #e34941; border-color: #e34941 }
.btn-danger3 .prog { background-color: #FF6159; }
.btn-danger3.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(192,57,43,0.18); }

.btn-warning { color: #fff; background-color: #ffca28; border-color: #ffca28; }
.btn-warning:focus, .btn-warning.focus { border-color: #deae1b; background-color: #ffca28; box-shadow: 1px 0px #deae1b, 0px 1px #deae1b, -1px 0px #deae1b, 0px -1px #deae1b; }
.btn-warning.shadow:focus, .btn-warning.shadow.focus { box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.16), 1px 0px #deae1b, 0px 1px #deae1b, -1px 0px #deae1b, 0px -1px #deae1b !important; }
.btn-warning:hover, .btn-warning.hover { border-color: #deae1b; background-color: #deae1b; }
.btn-warning:active, .btn-warning.active { border-color: transparent; background-color: rgba(255, 202, 40, 0.8); }
.btn-warning:disabled, .btn-warning.disabled { background-color: #666; border-color: #666; }
.btn-warning .prog { background-color: #ffca28; }
.btn-warning.bottom { box-shadow: inset 0 -4px 0 0 rgba(0,0,0,0.09), 0 5px 0 0 rgba(255,202,40,0.18); }

.btn-gclass.outline { color: #369FFF; background-color: #fff; border-color: #369FFF !important; }
.btn-gclass.outline.trans { background-color: transparent; }
.btn-gclass.outline:hover, .btn-gclass.outline.hover { background-color: #D6E7F7 !important; }
.btn-gclass.outline:active, .btn-gclass.outline.active { background-color: rgba(66, 157, 223, 0.8) !important; }
.btn-gclass.outline:disabled, .btn-gclass.outline.disabled { background-color: #bbb !important; border-color: #bbb !important; color: #666; }

.btn-primary.outline { color: #7f5ac8; background-color: #fff; border-color: #7f5ac8 !important; }
.btn-primary.outline.trans { background-color: transparent; }
.btn-primary.outline:hover, .btn-primary.outline.hover { background-color: #E7E0F5 !important; }
.btn-primary.outline:active, .btn-primary.outline.active { background-color: #9A7ED3 !important; }
.btn-primary.outline:disabled, .btn-primary.outline.disabled { background-color: #bbb !important; border-color: #666; color: #666; }

.btn-info.outline { color: #009be1; background-color: #fff; border-color: #009be1 !important; }
.btn-info.outline:hover, .btn-info.outline.hover { background-color: #D2ECF9 !important; }
.btn-info.outline:active, .btn-info.outline.active { background-color: #3BB0E7 !important; }
.btn-info.outline:disabled, .btn-info.outline.disabled { background-color: #bbb !important; border-color: #666 !important; color: #666; }

.btn-success.outline { color: #78d024; background-color: #fff; border-color: #78d024 !important; }
.btn-success.outline:hover, .btn-success.outline.hover { background-color: #E6F6D8 !important; }
.btn-success.outline:active, .btn-success.outline.active { background-color: #95DA57 !important; }
.btn-success.outline:disabled, .btn-success.outline.disabled { background-color: #bbb !important; border-color: #666 !important; color: #666; }

.btn-success2.outline { color: #318500; background-color: #fff; border-color: #318500 !important; }
.btn-success2.outline:hover, .btn-success2.outline.hover { background-color: #E6F6D8 !important; }
.btn-success2.outline:active, .btn-success2.outline.active { background-color: #95DA57 !important; }
.btn-success2.outline:disabled, .btn-success2.outline.disabled { background-color: #bbb !important; border-color: #666 !important; color: #666; }

.btn-danger.outline { color: #C9484D; background-color: #fff; border-color: #C9484D !important; }
.btn-danger.outline:hover, .btn-danger.outline.hover { background-color: #F6DDDC !important; }
.btn-danger.outline:active, .btn-danger.outline.active { background-color: #DE6C69 !important; }
.btn-danger.outline:disabled, .btn-danger.outline.disabled { background-color: #bbb !important; border-color: #666 !important; color: #666; }

.btn-danger3.outline { color: #FF6159; background-color: #fff; border-color: #FF6159 !important; }
.btn-danger3.outline:hover, .btn-danger3.outline.hover { background-color: #F6DDDC !important; }
.btn-danger3.outline:active, .btn-danger3.outline.active { background-color: #DE6C69 !important; }
.btn-danger3.outline:disabled, .btn-danger3.outline.disabled { background-color: #bbb !important; border-color: #666 !important; color: #666; }

.btn-warning.outline { color: #ffca28; background-color: #fff; border-color: #ffca28 !important; }
.btn-warning.outline:hover, .btn-warning.outline.hover { background-color: #FFF5D8 !important; }
.btn-warning.outline:active, .btn-warning.outline.active { background-color: #FFD55A !important; }
.btn-warning.outline:disabled, .btn-warning.outline.disabled { background-color: #bbb !important; border-color: #666 !important; color: #666; }

.btn.outline.trans { background-color: transparent; }

.btn-progress { position: relative; overflow: hidden; border-width: 0px; }
.btn-progress:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.25); }
.btn-progress .prog { position: absolute; left: 0; top: 0; height: 100%; }
.btn-progress .txt { position: relative; }
.btn-progress.progress-100 .txt { position: relative; padding-top: 2px;}
.btn-progress.progress-100 { padding-top: 0px; padding-bottom: 0px; height:32px; }
.btn-progress.progress-100 .txt i.cc { font-size: 22px; }

.btn-facebook {
    background-color: #3a5795;
    border-color: #314a7f;
    color: #FFFFFF
}

.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook { background-color: #4ea5e0 !important; border-color: #4ea5e0; color: #FFFFFF }
.btn-facebook:active, .btn-facebook.active, .open .dropdown-toggle.btn-facebook { background-image: none }
.btn-facebook.disabled, .btn-facebook.disabled:hover, .btn-facebook.disabled:focus, .btn-facebook.disabled:active, .btn-facebook.disabled.active, .btn-facebook[disabled], .btn-facebook[disabled]:hover, .btn-facebook[disabled]:focus, .btn-facebook[disabled]:active, .btn-facebook.active[disabled], fieldset[disabled] .btn-facebook, fieldset[disabled] .btn-facebook:hover, fieldset[disabled] .btn-facebook:focus, fieldset[disabled] .btn-facebook:active, fieldset[disabled] .btn-facebook.active { background-color: #2489cc; border-color: #2489cc }

.btn-xs { padding: 4px 5px; font-size: 11px; line-height: 1; }
.btn.radius { border-radius: 100px; }

/* checkbox & radio */
.checkbox label::before { border-color: inherit; border-radius: 2px; width: 20px; height: 20px; top: calc(50% - 10px); }
.checkbox label::after { width: 19px; height: 19px; padding-left: 4px; font-size: 13px; border-radius: 2px; }
.checkbox input[type="checkbox"]:checked + label::after { font-family: 'classcard'; content: "\e905"; text-align: left;}
.radio label::before { border-color: inherit; width: 20px; height: 20px; top: calc(50% - 10px); }
.radio label::after { width: 14px; height: 14px; top: calc(50% - 7px); }
.radio.w-24 label::before { border-color: inherit; width: 24px; height: 24px; top: calc(50% - 12px); }
.radio.w-24 label::after { width: 18px; height: 18px; top: calc(50% - 9px); }
.radio-24[type="radio"] + label::before { width: 24px; height: 24px; top: calc(50% - 12px); }
.radio-24[type="radio"] + label::after { width: 18px; height: 18px; top: calc(50% - 9px); }

.radio.v2 label::before { width: 18px; height: 18px; box-shadow: inset 2px 2px 1px rgb(0 0 0 / 10%); background: #F3F3F3; border: 1px solid #C0C0C0; top: calc(50% - 9px); }
.radio.v2 label::after { width: 12px; height: 12px; top: calc(50% - 6px); }


.checkbox.right, .radio.right { padding-left: 0px; padding-right: 20px; }
.checkbox.right input[type=checkbox], .radio.right input[type=radio] { margin-left: 0px; margin-right: -20px; }
.checkbox.right label, .radio.right label { padding-left: 0px; padding-right: 5px; }
.checkbox.right label::before, .radio.right label::before, .checkbox.right label::after, .radio.right label::after { left: auto; margin-left: 0px; margin-right: -20px; right: 0px; }

.checkbox.gclass label::after, .checkbox.primary label::after, .checkbox.info label::after, .checkbox.success label::after, .checkbox.warning label::after, .checkbox.danger label::after, .checkbox.gray label::after, .checkbox.checkbox-gclass label::after, .checkbox.checkbox-primary label::after, .checkbox.checkbox-info label::after, .checkbox.checkbox-success label::after, .checkbox.checkbox-warning label::after, .checkbox.checkbox-danger label::after, .checkbox.checkbox-gray label::after { color: #fff; width: 20px; height: 20px; top: calc(50% - 10px); }
.checkbox.gclass label::after, .radio.gclass label::after, .checkbox.checkbox-gclass label::after, .radio.checkbox-gclass label::after { background: #369FFF; border-color: #369FFF; }
.checkbox.primary label::after, .radio.primary label::after, .checkbox.checkbox-primary label::after, .radio.checkbox-primary label::after { background: #7f5ac8; border-color: #7f5ac8; }
.checkbox.info label::after, .radio.info label::after, .checkbox.checkbox-info label::after, .radio.checkbox-info label::after { background: #009be1; border-color: #009be1; }
.checkbox.success label::after, .radio.success label::after, .checkbox.checkbox-success label::after, .radio.checkbox-success label::after { background: #78d024; border-color: #78d024; }
.checkbox.warning label::after, .radio.warning label::after, .checkbox.checkbox-warning label::after, .radio.checkbox-warning label::after { background: #ffca28; border-color: #ffca28; }
.checkbox.danger label::after, .radio.danger label::after, .checkbox.checkbox-danger label::after, .radio.checkbox-danger label::after { background: #C9484D; border-color: #C9484D; }
.checkbox.gray label::after, .radio.gray label::after, .checkbox.checkbox-gray label::after, .radio.checkbox-gray label::after { background: #666; border-color: #666; }

.btn-cc-radio { background: #fff; border-color: #CCCCCC; border-radius: 0px; color: #666; border-left-color: transparent; border-right-color: transparent; }
.btn-cc-radio:first-child:not(:last-child) { border-left-color: #CCCCCC; }
.btn-cc-radio:last-child:not(:first-child) { border-right-color: #CCCCCC; }
.btn-cc-radio:after { display: block; content: ""; position: absolute; top: 30%; bottom: 30%; right: -1px; width: 1px; background: #CCCCCC; z-index: 1; }
.btn-cc-radio:hover:after, .btn-cc-radio:active:after, .btn-cc-radio.active:after { background: transparent; }
.btn-cc-radio:hover, .btn-cc-radio:active, .btn-cc-radio.active { font-weight: 600; }
.btn-cc-radio.btn-default:hover, .btn-cc-radio.btn-default:active, .btn-cc-radio.btn-default.active { background: rgba(51, 51, 51, 0.098); color: #333333; border-color: #333333; }
.btn-cc-radio.btn-gclass:hover, .btn-cc-radio.btn-gclass:active, .btn-cc-radio.btn-gclass.active { background: rgba(66, 157, 223, 0.098); color: #369FFF; border-color: #369FFF; }
.btn-cc-radio.btn-primary:hover, .btn-cc-radio.btn-primary:active, .btn-cc-radio.btn-primary.active { background: rgba(127, 90, 200, 0.098); color: #7f5ac8; border-color: #7f5ac8; }
.btn-cc-radio.btn-info:hover, .btn-cc-radio.btn-info:active, .btn-cc-radio.btn-info.active { background: rgba(0, 155, 225, 0.098); color: #009be1; border-color: #009be1; }
.btn-cc-radio.btn-success:hover, .btn-cc-radio.btn-success:active, .btn-cc-radio.btn-success.active { background: rgba(108, 187, 36, 0.098); color: #6CBB24; border-color: #6CBB24; }
.btn-cc-radio.btn-danger:hover, .btn-cc-radio.btn-danger:active, .btn-cc-radio.btn-danger.active { background: rgba(201, 72, 77, 0.098); color: #C9484D; border-color: #C9484D; }
.btn-cc-radio.btn-warning:hover, .btn-cc-radio.btn-warning:active, .btn-cc-radio.btn-warning.active { background: rgba(255, 202, 40, 0.098); color: #ffca28; border-color: #ffca28; }

.switch-button { position: relative; display: inline-block; }
.switch-button input { opacity: 0; width: 0; height: 0; }
.switch-button label { position: relative; cursor: pointer; -webkit-transition: .25s; transition: .25s; margin: 0px; padding-left: 55px; font-weight: normal; }
.switch-button input[type=checkbox][disabled] + label { cursor: default; }
.switch-button label:before { position: absolute; content: ""; top: 0; left: 0; width: 45px; min-height: 22px; height: 100%; border-radius:100px; background-color: #ccc; box-shadow: inset 1px 5px 1px #999; -webkit-transition: .25s; transition: .25s; margin: 0px; }
.switch-button label:after { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; top: calc(50% - 8px); background-color: #fff; -webkit-transition: .25s; transition: .25s; border-radius:20px; }
.switch-button input[type=checkbox][disabled] + label:before, .switch-button input[type=checkbox].disabled + label:before, .switch-button input[type=checkbox][disabled] + label:after, .switch-button input[type=checkbox].disabled + label:after { opacity: 0.3; }
.switch-button input:checked + label:before { background-color: #5C5C5C; box-shadow: inset 1px 5px 1px #333; }
.switch-button input:checked + label:after { -webkit-transform: translateX(21px); -ms-transform: translateX(21px); transform: translateX(21px); }
.switch-button.gclass input:checked + label:before { background-color: #68B1E5; box-shadow: inset 1px 5px 1px #369FFF; }
.switch-button.primary input:checked + label:before { background-color: #997BD3; box-shadow: inset 1px 5px 1px #7f5ac8; }
.switch-button.info input:checked + label:before { background-color: #33AFE7; box-shadow: inset 1px 5px 1px #009be1; }
.switch-button.success input:checked + label:before { background-color: #89C950; box-shadow: inset 1px 5px 1px #6CBB24; }
.switch-button.danger input:checked + label:before { background-color: #D46D71; box-shadow: inset 1px 5px 1px #C9484D; }
.switch-button.warning input:checked + label:before { background-color: #FFD553; box-shadow: inset 1px 5px 1px #ffca28; }

.switch-button2 { position: relative; display: inline-block; }
.switch-button2 input { opacity: 0; width: 0; height: 0; }
.switch-button2 label { position: relative; cursor: pointer; -webkit-transition: .25s; transition: .25s; margin: 0px; padding-left: 55px; font-weight: normal; }
.switch-button2 label:before { position: absolute; content: ""; top: 4px; bottom: 4px; left: 4px; width: 40px; border-radius:100px; background-color: #DADADA; -webkit-transition: .25s; transition: .25s; margin: 0px; }
.switch-button2 label:after { position: absolute; content: ""; height: 24px; width: 24px; left: 0px; top: calc(50% - 12px); background-color: #EBEBEB; -webkit-transition: .25s; transition: .25s; border-radius:20px; box-shadow: 3px 0px 3px rgba(66, 66, 66, 0.15); }
.switch-button2 input:checked + label:before { background-color: #333; }
.switch-button2 input:checked + label:after { -webkit-transform: translateX(22px); -ms-transform: translateX(22px); transform: translateX(22px); }
.switch-button2.gclass input:checked + label:before { background-color: #A1CEEF; }
.switch-button2.primary input:checked + label:before { background-color: #BFADE4; }
.switch-button2.info input:checked + label:before { background-color: #80CDF0; }
.switch-button2.success input:checked + label:before { background-color: #B6DD92; }
.switch-button2.danger input:checked + label:before { background-color: #E4A4A6; }
.switch-button2.warning input:checked + label:before { background-color: #FFE594; }
.switch-button2.gclass input:checked + label:after { background-color: #369FFF; }
.switch-button2.primary input:checked + label:after { background-color: #7f5ac8; }
.switch-button2.info input:checked + label:after { background-color: #009be1; }
.switch-button2.success input:checked + label:after { background-color: #6CBB24; }
.switch-button2.danger input:checked + label:after { background-color: #C9484D; }
.switch-button2.warning input:checked + label:after { background-color: #ffca28; }

.badge { padding: 4px 10px; }
.badge.badge-success { background-color: #6CBB24 }
.badge.badge-info { background-color: #009be1 }
.badge.badge-danger { background-color: #C9484D }
.badge.badge-warning { background-color: #ffca28 }
.badge.badge-primary { background-color: #7f5ac8 }
.badge.badge-gclass { background-color: #369FFF }

.font-normal { font-weight: normal; }
.font-medium { font-weight: 500 !important }
.font-bold { font-weight: 600 !important }
.font-bold2 { font-weight: 700 !important }
.font-bold3 { font-weight: 800 !important }
.font-bolder { font-weight: bolder !important }
.font-boldest { font-weight: 900 !important; }
.font-light { font-weight: 300 !important }
.font-do { font-family: 'dohyeon' !important; }

/* modal */
.modal.modalv20 .modal-backdrop.in { filter: alpha(opacity=0); opacity: 0; }
.modal.modalv20 .modal-dialog { margin: 0px auto; padding: 0px 20px; width: 480px; }
.modal.modalv20 .modal-dialog.modal-lg { width: 660px; }
.page-small .modal.modalv20 .modal-dialog { width: auto; }
.modal.modalv20 .modal-dialog .close-pos { position: absolute; right: 5px; top: 7px; font-size: 28px; color: #333; cursor: pointer; z-index: 1; padding: 5px 10px; }
.is-mobile .modal.modalv20 .modal-dialog .close-pos { right: 0px; top: -2px; }
.modal.modalv20 .modal-content { border-radius: 8px; font-size: 18px; word-break: break-all; padding: 35px; line-height: 1.333; border-color: rgba(0,0,0,0.1); }
.is-mobile .modal.modalv20 .modal-content { padding: 25px; }
.modal.modalv20 .modal-content .modal-body { padding: 0px; text-align: center; }
.modal.modalv20 .modal-content .modal-body .msg-sub { line-height: 1.166; color: #666; }
@media (min-width: 768px) {
    .modal-md { width: 450px; }
    .modal-md2 { width: 400px; }
    .modal-660 { width: 660px; }
}
@media (min-width: 910px) {
  .modal-700 { width: 700px; }
  .modal-800 { width: 800px; }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .modal-dialog .modal-content { margin-top: 60px; }
}

.modal.cc-full-screen { z-index: 1080; padding-right: 0px !important; }
.modal.cc-full-screen .modal-dialog { min-height: 100%; margin: 0px auto; width: 100%; }
.modal.cc-full-screen .modal-dialog .modal-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

.vertical-top { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; -webkit-align-items:start; justify-content: center; }
.vertical-mid { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; align-items:center; -webkit-align-items:center; }
.vertical-mid.left { justify-content:flex-start; -webkit-justify-content:flex-start; }
.vertical-mid.center { justify-content:center; -webkit-justify-content:center; }
.vertical-mid.right { justify-content:flex-end; -webkit-justify-content:flex-end; }
.vertical-mid>* { position: relative; }
.vertical-mid>.modal-backdrop { position: absolute; }

/* 사용자페이지 iframe 설정 */
.cc-iframe-dialog-body { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 101; display: none; text-align: center; overflow-y: auto; }
.cc-iframe-dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; opacity: 0.5; background: #aaaaaa; display: none; }
.cc-iframe-dialog-body.active, .cc-iframe-dialog-overlay.active { display: block; }
.cc-iframe-dialog { margin: 100px auto 30px; border-radius: 5px; border: 5px solid #e74c3c; background: #fcfdfd; padding: .2em; outline: 0; display: inline-block; }
.cc-iframe-dialog-content {position: relative; border: 0; padding: 0; background: none; overflow: auto; width: auto; min-height: 480px; max-height: none; height: auto; }
.cc-iframe-dialog-content-iframe { margin: 0; padding: 0; }

/* 탭버튼 디자인 */
.cc-nav>li { display: inline-block; margin-right: 25px; }
.cc-nav>li:last-child { margin-right: 0px; }
.cc-nav>li>a { padding: 18px 5px 14px; color: #666; border-bottom: 4px solid transparent; cursor: pointer; }
.cc-nav>li>a:hover, .cc-nav>li.active>a { color: #333; border-bottom: 4px solid; background-color: transparent; }
.cc-nav>li>a:focus { background-color: inherit; }
.cc-nav>li.active>a { font-weight: 500; }
.cc-nav.gclass>li>a:hover, .cc-nav.gclass>li.active>a { color: #369FFF; }
.cc-nav.primary>li>a:hover, .cc-nav.primary>li.active>a { color: #7f5ac8; }
.cc-nav.info>li>a:hover, .cc-nav.info>li.active>a { color: #009be1; }
.cc-nav.success>li>a:hover, .cc-nav.success>li.active>a { color: #6CBB24; }
.cc-nav.danger>li>a:hover, .cc-nav.danger>li.active>a { color: #C9484D; }
.cc-nav.warning>li>a:hover, .cc-nav.warning>li.active>a { color: #ffca28; }

.cc-tab-box { list-style-type: none; padding-left: 0px; margin-bottom: 0px; border-radius: 1000px; overflow: hidden; }
.cc-tab-box:before, .cc-tab-box:after { display: table; content: " "; clear: both;}
.cc-tab-box>* { position: relative; float: left; border: 1px solid silver; border-left-color: transparent; border-right-color: transparent; margin-left: -1px }
.cc-tab-box>*:first-child { margin-left: 0px; border-left-color: silver; }
.cc-tab-box>*:last-child { border-right-color: silver; }
.cc-tab-box>*:after { display: block; content: ""; position: absolute; top: 30%; bottom: 30%; right: -1px; width: 1px; background: silver; }
.cc-tab-box.v2>*:after { display: block; content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%; background: silver; }
.cc-tab-box>*:last-child:after { background: transparent; }
.cc-tab-box>*:hover { background: rgba(51, 51, 51, 0.063); }

.cc-tab-box>*>a { display: block; padding: 8px 28px; color: #666; }
.cc-tab-box>*>a>i.cc { font-size: 120%; }
.cc-tab-box>*.active { border-color: #333333; }
.cc-tab-box>*.active:after { background: transparent; }
.cc-tab-box>*.active>a { background: rgba(51, 51, 51, 0.098); color: #333333; font-weight: 600; }

.cc-tab-box.gclass>*.active { border-color: #369FFF; }
.cc-tab-box.gclass>*.active>a { background: rgba(66, 157, 223, 0.098); color: #369FFF; }
.cc-tab-box.gclass.solid>*.active { background: #369FFF; }
.cc-tab-box.gclass.solid>*.active>a { color: #fff; }
.cc-tab-box.gclass2>*.active { border-color: #1562A3; }
.cc-tab-box.gclass2>*.active>a { background: rgba(21, 98, 163, 0.098); color: #1562A3; }
.cc-tab-box.gclass2.solid>*.active { background: #1562A3; }
.cc-tab-box.gclass2.solid>*.active>a { color: #fff; }
.cc-tab-box.primary>*.active { border-color: #7f5ac8; }
.cc-tab-box.primary>*.active>a { background: rgba(127, 90, 200, 0.098); color: #7f5ac8; }
.cc-tab-box.primary.solid>*.active { background: #7f5ac8; }
.cc-tab-box.primary.solid>*.active>a { color: #fff; }
.cc-tab-box.info>*.active { border-color: #009be1; }
.cc-tab-box.info>*.active>a { background: rgba(0, 155, 225, 0.098); color: #009be1; }
.cc-tab-box.info.solid>*.active { background: #009be1; }
.cc-tab-box.info.solid>*.active>a { color: #fff; }
.cc-tab-box.success>*.active { border-color: #6CBB24; }
.cc-tab-box.success>*.active>a { background: rgba(108, 187, 36, 0.098); color: #6CBB24; }
.cc-tab-box.success.solid>*.active { background: #6CBB24; }
.cc-tab-box.success.solid>*.active>a { color: #fff; }
.cc-tab-box.danger>*.active { border-color: #C9484D; }
.cc-tab-box.danger>*.active>a { background: rgba(201, 72, 77, 0.098); color: #C9484D; }
.cc-tab-box.danger.solid>*.active { background: #C9484D; }
.cc-tab-box.danger.solid>*.active>a { color: #fff; }
.cc-tab-box.warning>*.active { border-color: #ffca28; }
.cc-tab-box.warning>*.active>a { background: rgba(255, 202, 40, 0.098); color: #ffca28; }
.cc-tab-box.warning.solid>*.active { background: #ffca28; }
.cc-tab-box.warning.solid>*.active>a { color: #fff; }

.cc-tab-box.radius>*:first-child { border-radius: 50px 0 0 50px; }
.cc-tab-box.radius>*:last-child { border-radius: 0 50px 50px 0; }

.cc-tab-box.radius4 { border-radius: 4px; }
.cc-tab-box.radius4>*:first-child { border-radius: 4px 0 0 4px; }
.cc-tab-box.radius4>*:last-child { border-radius: 0 4px 4px 0; }

/* radio 그룹버튼 디자인 */

.panel-heading, .panel-body, .panel-footer { padding: 20px 28px; }
.is-mobile .panel-heading, .is-mobile .panel-body, .is-mobile .panel-footer { padding: 16px; }
.hpanel { margin-bottom: 12px; }
.hpanel.panel-collapse .panel-heading { border-bottom-color: transparent; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.hpanel .panel-tools { float: right; }

/* panel-v2 */
.panel-default.v2 { border: 2px solid #D6E7F7; border-radius: 10px; }
.panel-default.v2 .panel-heading { height: 66px; background-color: #F5F9FD; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.panel-default.v2.panel-collapse .panel-heading { background-color: #F5F9FD; border-radius: 10px; }

/* 스코어 보드 리스트 항목 */
.cc-score-box { background: #F7F7F7; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 6px; height: 48px; display: table; width: 100%; }
.cc-score-item { display: table-cell; vertical-align: middle; }
.cc-score-item.rank { width: 50px; background: #ECECEC; border-radius: 5px 0px 0px 5px; color: #666; text-align: center; font-size: 20px; font-weight: 600; font-style: italic; position: relative; }
.cc-score-item.rank:after { content: ""; position: absolute; right: -15px; top: 0px; border-top: 46px solid #ECECEC; border-right: 15px solid transparent; }
.cc-score-item.name { padding-left: 25px; color: #666; font-size: 14px; max-width: 0px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cc-score-item.score { width: 110px; text-align: right; color: #333; font-size: 16px; font-weight: 600; padding-right: 12px }
.cc-score-box.default .cc-score-item.rank { color: #fff; background: #3C4551; }
.cc-score-box.default .cc-score-item.rank:after { border-top-color: #3C4551; }
.cc-score-box.gclass .cc-score-item.rank { color: #fff; background: #369FFF; }
.cc-score-box.gclass .cc-score-item.rank:after { border-top-color: #369FFF; }
.cc-score-box.primary .cc-score-item.rank { color: #fff; background: #7f5ac8; }
.cc-score-box.primary .cc-score-item.rank:after { border-top-color: #7f5ac8; }
.cc-score-box.info .cc-score-item.rank { color: #fff; background: #009be1; }
.cc-score-box.info .cc-score-item.rank:after { border-top-color: #009be1; }
.cc-score-box.success .cc-score-item.rank { color: #fff; background: #78d024; }
.cc-score-box.success .cc-score-item.rank:after { border-top-color: #78d024; }
.cc-score-box.warning .cc-score-item.rank { color: #fff; background: #ffca28; }
.cc-score-box.warning .cc-score-item.rank:after { border-top-color: #ffca28; }
.cc-score-box.danger .cc-score-item.rank { color: #fff; background: #C9484D; }
.cc-score-box.danger .cc-score-item.rank:after { border-top-color: #C9484D; }

.cc-score-box-outline { border: 6px solid; border-radius: 16px; padding: 6px; margin-bottom: 10px; }
.cc-score-box-outline.team_J { border-color: #D53367; }
.cc-score-box-outline.team_I { border-color: #3695CA; }
.cc-score-box-outline.team_H { border-color: #BC33B0; }
.cc-score-box-outline.team_G { border-color: #39CD9C; }
.cc-score-box-outline.team_F { border-color: #8936C5; }
.cc-score-box-outline.team_E { border-color: #E07A23; }
.cc-score-box-outline.team_D { border-color: #4744DB; }
.cc-score-box-outline.team_C { border-color: #E0C200; }
.cc-score-box-outline.team_B { border-color: #DA3232; }
.cc-score-box-outline.team_A { border-color: #75CC35; }

.cc-score-box-outline[class*="team_"] .cc-score-box { background: transparent; height: 74px; border: none; }
.cc-score-box-outline[class*="team_"] .cc-score-box .cc-score-item { color: #fff; font-weight: 600; }
.cc-score-box-outline[class*="team_"] .cc-score-box .cc-score-item.rank { width: 95px; font-size: 50px; }
.cc-score-box-outline[class*="team_"] .cc-score-box .cc-score-item.rank:after { border-top-width: 74px; right: -35px; border-right-width: 35px; }
.cc-score-box-outline[class*="team_"] .cc-score-box .cc-score-item.name { font-size: 30px; padding-left: 50px; }
.cc-score-box-outline[class*="team_"] .cc-score-box .cc-score-item.score { font-size: 45px; font-style: italic; padding-right: 30px; width: 230px; }
.cc-score-box-outline.team_J .cc-score-box .cc-score-item.rank { color: #fff; background: #D53367; }
.cc-score-box-outline.team_J .cc-score-box .cc-score-item.rank:after { border-top-color: #D53367; }
.cc-score-box-outline.team_I .cc-score-box .cc-score-item.rank { color: #fff; background: #3695CA; }
.cc-score-box-outline.team_I .cc-score-box .cc-score-item.rank:after { border-top-color: #3695CA; }
.cc-score-box-outline.team_H .cc-score-box .cc-score-item.rank { color: #fff; background: #BC33B0; }
.cc-score-box-outline.team_H .cc-score-box .cc-score-item.rank:after { border-top-color: #BC33B0; }
.cc-score-box-outline.team_G .cc-score-box .cc-score-item.rank { color: #fff; background: #39CD9C; }
.cc-score-box-outline.team_G .cc-score-box .cc-score-item.rank:after { border-top-color: #39CD9C; }
.cc-score-box-outline.team_F .cc-score-box .cc-score-item.rank { color: #fff; background: #8936C5; }
.cc-score-box-outline.team_F .cc-score-box .cc-score-item.rank:after { border-top-color: #8936C5; }
.cc-score-box-outline.team_E .cc-score-box .cc-score-item.rank { color: #fff; background: #E07A23; }
.cc-score-box-outline.team_E .cc-score-box .cc-score-item.rank:after { border-top-color: #E07A23; }
.cc-score-box-outline.team_D .cc-score-box .cc-score-item.rank { color: #fff; background: #4744DB; }
.cc-score-box-outline.team_D .cc-score-box .cc-score-item.rank:after { border-top-color: #4744DB; }
.cc-score-box-outline.team_C .cc-score-box .cc-score-item.rank { color: #fff; background: #E0C200; }
.cc-score-box-outline.team_C .cc-score-box .cc-score-item.rank:after { border-top-color: #E0C200; }
.cc-score-box-outline.team_B .cc-score-box .cc-score-item.rank { color: #fff; background: #DA3232; }
.cc-score-box-outline.team_B .cc-score-box .cc-score-item.rank:after { border-top-color: #DA3232; }
.cc-score-box-outline.team_A .cc-score-box .cc-score-item.rank { color: #fff; background: #75CC35; }
.cc-score-box-outline.team_A .cc-score-box .cc-score-item.rank:after { border-top-color: #75CC35; }

/* Material Icons */
.material-icons { font-size: inherit; position: relative; top: 2px; transform: scale(1.20); }
.material-icons.md-16 { font-size: 16px; top: 3px; }
.material-icons.md-18 { font-size: 18px; top: 3px; }
.material-icons.md-24 { font-size: 24px; top: 6px; }
.material-icons.md-36 { font-size: 36px; top: 10px; }
.material-icons.md-48 { font-size: 48px; top: 18px; }

/* isLoading */
.isloading-overlay { position: relative; text-align: center; background: rgba(0,0,0,0.6) !important; height: auto !important; bottom: 0; }
.isloading-overlay .isloading-wrapper { background: transparent !important; color: #fff; -webkit-border-radius: 7px; -webkit-background-clip: padding-box; -moz-border-radius: 7px; -moz-background-clip: padding; border-radius: 7px; background-clip: padding-box; display: inline-block; margin: 0 auto; padding: 10px 20px; top: 10%; z-index: 9000; font-size: 24px; }

/* scroll design */
.cc-scroll-y { overflow-x: hidden; overflow-y: auto; }
.cc-scroll-y::-webkit-scrollbar-track { border-radius: 5px; background-color: rgba(255, 255, 255, 0.17); }
.cc-scroll-y::-webkit-scrollbar { border-radius: 5px; width: 5px; background-color: rgba(255, 255, 255, 0.17); }
.cc-scroll-y::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0, 236, 255, 0.7); }
.cc-scroll-y::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: rgba(0, 236, 255, 1); }

.cc-scroll-y.success::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.success::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #78D024; }
.cc-scroll-y.success::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #6cbb24; }
.cc-scroll-y.success2::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.success2::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #318500; }
.cc-scroll-y.success2::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #215901; }
.cc-scroll-y.gclass::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.gclass::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #369FFF; }
.cc-scroll-y.gclass::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #369FFF; }
.cc-scroll-y.primary::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.primary::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #7F59C7; }
.cc-scroll-y.primary::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #5F4398; }
.cc-scroll-y.gray::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.gray::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #c1c1c1; }
.cc-scroll-y.gray::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #9a9797; }
.cc-scroll-y.danger::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.danger::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #C9484D; }
.cc-scroll-y.danger::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #a93135; }
.cc-scroll-y.danger3::-webkit-scrollbar { background-color: #F0EEF3; }
.cc-scroll-y.danger3::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #FF6159; }
.cc-scroll-y.danger3::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #d7453d; }
.cc-scroll-y.white::-webkit-scrollbar-track { background-color: transparent; }
.cc-scroll-y.white::-webkit-scrollbar { background-color: transparent; }
.cc-scroll-y.white::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #fff; }
.cc-scroll-y.white::-webkit-scrollbar-thumb:hover { border-radius: 5px; background-color: #E0E0E0; }


.cc-scroll-y.cc-scroll-small::-webkit-scrollbar-track { background-color: transparent; }
.cc-scroll-y.cc-scroll-small::-webkit-scrollbar { width: 1px; background-color: transparent; }


/* ribbon design */
.cc-ribbon-r { display: inline-block; position: relative;
}
.cc-ribbon-r>* { float: left; height: 46px; overflow: hidden; z-index: 2; position: relative; margin-left: 12px; margin-right: 6px; font-size: 24px; font-weight: 600; }
.cc-ribbon-r:before { content: ""; position: absolute; top: 0; right: 10px; bottom: 0; left: 0; transform: skew(-12deg); z-index: 1; background: #7f5ac8; }
.cc-ribbon-r:after { content: ""; float: left; border: 23px solid #7f5ac8; border-right-color: transparent; border-right-width: 10px; border-left-width: 1px; z-index: 1; position: relative; transform: skew(-12deg); }

.is-mobile .cc-ribbon-r>* { height: 36px; font-size: 18px; }
.is-mobile .cc-ribbon-r:after { border-top-width: 18px; border-bottom-width: 18px; }

/* 말줄임표 */
.cc-ellipsis { display: -webkit-box !important;
    box-orient: vertial;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all; 
}
.cc-ellipsis.l1 { line-clamp: 1; -webkit-line-clamp: 1; }
.cc-ellipsis.l2 { line-clamp: 2; -webkit-line-clamp: 2; }
.cc-ellipsis.l3 { line-clamp: 3; -webkit-line-clamp: 3; }
.cc-ellipsis.l4 { line-clamp: 4; -webkit-line-clamp: 4; }
.cc-ellipsis.l5 { line-clamp: 5; -webkit-line-clamp: 5; }
.cc-ellipsis.l6 { line-clamp: 6; -webkit-line-clamp: 6; }
 
/* Modal */
.modal { background: rgba(0, 0, 0, 0.4); }
.modal .modal-dialog { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; min-height: calc(100% - 60px); margin: 30px auto; }
.modal.fade .modal-dialog { -webkit-transform: translate(0,-10%); -ms-transform: translate(0,-10%); -o-transform: translate(0,-10%); transform: translate(0,-10%); }
.modal.in .modal-dialog { -webkit-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); }
.modal-backdrop.in { opacity: 0; height: 100% !important; }
.modal-content { border-radius: 10px; box-shadow: 0 3px 30px rgba(0,0,0,.24); border-color: rgba(0, 0, 0, 0.1); width: 100%; }
.cc-full-screen .modal-content { border-radius: 0px; }
.modal-header { padding: 15px 24px; font-size: 18px; font-weight: 600; color: #fff; border-radius: 9px 9px 0px 0px; }
.modal-header i.cc { top: -4px; }
.modal.gclass .modal-header { background: #369FFF; }
.modal.primary .modal-header { background: #7f5ac8; }
.modal.info .modal-header { background: #009be1; }
.modal.success .modal-header { background: #78d024; }

.modal.success.v3 .modal-header { background: #D1EFAB; color:#292929; font-size:22px; text-align: center; padding:13px; position: relative; font-weight: 500;}
.modal.success.v3 .modal-footer { padding:18px 30px; text-align: center; border-top:0px; position: relative; box-shadow: 0px -3px 4px 0px rgba(0, 0, 0, 0.10);}
.modal.success.v3 .modal-header .cc2.times { position: absolute; font-size: 20px; right:20px; top:18px;}

.modal.gclass.v3 .modal-header { background: #D6E7F7; color:#292929; font-size:22px; text-align: center; padding:13px; position: relative; font-weight: 500;}
.modal.gclass.v3 .modal-footer { padding:18px 30px; text-align: center; border-top:0px; position: relative; box-shadow: 0px -3px 4px 0px rgba(0, 0, 0, 0.10);}
.modal.gclass.v3 .modal-header .cc2.times { position: absolute; font-size: 20px; right:20px; top:18px;}

.modal.danger .modal-header { background: #C9484D; }
.modal.warning .modal-header { background: #ffca28; }
.modal.black .modal-header { background: #181818; height: 60px; font-size: 14px; color: #ddd; }
.modal-body { padding: 32px; font-size: 18px; }
.modal-body.is-e-grammar { padding: 20px; font-size: 15px; }
.modal-footer { text-align: center; }
#customCenterModal.modal .modal-dialog { display: block; margin: 0px; min-height: auto; position: absolute; right: 20px; bottom: 35px; }

/* left menu */
.left-item-group { padding: 26px 8px 15px; /* border-bottom: 1px solid #E5E5E5; */ }
.left-item-title { color: #777; }
/* .left-item-title:hover, .left-item-title.active { color: #6cbb24; font-weight: 600; } */
.left-item-icons { position: relative; display:inline-block; font-size: 130%; color: #333; }
.left-item-icons:hover, .left-item-icons.active { color: #6cbb24; font-weight: 600; }
.left-item-icons>a { padding: 0px 3px; }
.left-item { display: block; font-size: 16px; padding-top: 15px; }
.left-pro-list .left-item { padding-top: 10px; }
.left-item:first-child { padding-top: 5px; }
.left-item:hover, .left-item.active { color: #6cbb24; font-weight: 600; }
.left-item>i.cc, .left-item>i.cc2 { font-size: 150%; }

i.cc2.gclass { position: relative; top: 2px; }

/* form */
.form-control, .form-control:focus, .has-error .form-control:focus, .has-success .form-control:focus, .has-warning .form-control:focus, .navbar-collapse, .navbar-form, .navbar-form-custom .form-control:focus, .navbar-form-custom .form-control:hover, .open .btn.dropdown-toggle, .panel, .popover, .progress, .progress-bar { box-shadow: none; }
.form-control:focus { border-color: #7f5ac8; }
.form-control:focus+.input-group-btn>.btn { border-color: #7f5ac8; }
.has-default .form-control { border-color: #333 !important; }
.has-gray .form-control { border-color: #999 !important; }
.has-light-gray .form-control { border-color: #cccccc !important; }
.has-gclass .form-control { border-color: #369FFF !important; }
.has-primary .form-control { border-color: #7f5ac8 !important; }
.has-info .form-control { border-color: #009be1 !important; }
.has-success .form-control { border-color: #78d024 !important; }
.has-danger .form-control { border-color: #C9484D !important; }
.has-warning .form-control { border-color: #ffca28 !important; }

.input-group .form-control { border-right: none; }
.input-group .form-control.main-search-input { padding: 7px 16px; line-height: 1; }
.input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group { border-left: none; }
.input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn { height: auto; font-size: 16px; box-shadow: none;
    border-width: 2px; }
.input-group-lg>.input-group-btn>.btn { font-size: 22px; padding: 6px 12px; }
.input-group-lg>.input-group-btn>.btn.btn-main-search { padding: 5px 12px 7px; line-height: 1.1; }


/* Common */
.pos-relative { position: relative; } .pos-absolute { position: absolute; }
.cc-title-img { position: absolute; width: calc(100% - 290px - ((100% - 1240px) / 2)); min-width: 790px; background-size:cover; }
.my-set .cc-title-img { height: 191px; background-image: url(/images/v2/title/img_set_list_default_title_01.png); background-repeat: no-repeat; }
.my-set .cc-content { margin-top: 215px; }
.set-list .cc-title-img { height: 191px; background-image: url(/images/v2/title/img_set_list_title_01.png); background-repeat: no-repeat; }
.set-list .cc-content { margin-top: 215px; }
.user-info .cc-title-img { height: 134px; background-image: url(/images/v2/title/img_user_info_title_01.png); background-repeat: no-repeat; }
.user-info .cc-content { margin-top: 196px; }
.class-info .cc-title-img { height: 191px; background-color: #A799C3; }
.class-info .cc-title-img.success { background-color: #AFCE92; }
.class-info .cc-title-img.gray { background-color: #CCCCCC; }
.class-info .cc-title-img.gclass { background-color: #74ABD2; }
.class-info .cc-title-img.dong { background-color: #F1F1F1; }
.class-info .cc-title-img .class-img-filter { position: absolute; top: 0; bottom: 0; left: 830px; width: 120px; background-image: linear-gradient(270deg, #A799C3 0%, rgba(167, 153, 195,0.00) 100%); }
.class-info .cc-title-img.success .class-img-filter { background-image: linear-gradient(270deg, #AFCE92 0%, rgba(216,216,216,0.00) 100%); }
.class-info .cc-title-img.gray .class-img-filter { background-image: linear-gradient(270deg, #CCCCCC 0%, rgba(216,216,216,0.00) 100%); }
.class-info .cc-title-img.gclass .class-img-filter { background-image: linear-gradient(270deg, #74ABD2 0%, rgba(116, 171, 210,0.00) 100%); }
.class-info .cc-title-img.dong .class-img-bg { background: rgba(0, 0, 0, 0.05) }
.class-info .cc-title-img.dong .class-img-filter { background-image: linear-gradient(270deg, #F1F1F1 0%, rgba(167, 153, 195,0.00) 100%) }
.class-info .cc-title-img .class-img-filter-l { position: absolute; top: 0; bottom: 0; left: 159px; width: 670px; background-image: linear-gradient(90deg, #A799C3 0%, rgba(167, 153, 195,0.00) 100%); }
.class-info .cc-title-img.success .class-img-filter-l { background-image: linear-gradient(90deg, #AFCE92 0%, rgba(216,216,216,0.00) 32%); }
.class-info .cc-title-img.gray .class-img-filter-l { background-image: linear-gradient(90deg, #CCCCCC 0%, rgba(216,216,216,0.00) 32%); }
.class-info .cc-title-img.gclass .class-img-filter-l { background-image: linear-gradient(90deg, #74ABD2 0%, rgba(116, 171, 210,0.00) 32%); }
.class-info .cc-title-img.dong .class-img-filter-l { background-image: linear-gradient(90deg, #F1F1F1 0%, rgba(167, 153, 195,0.00) 32%) }
.class-info .class-tab-btns { margin-top: 191px; padding-left: 40px; }

/* 제휴 폴더 */
.cc-ptn-container { position: absolute; width: calc(100% - 290px - ((100% - 1240px) / 2)); min-width: 790px; background-size:cover; }
.set-list .ptn .cc-ptn-container .ptn-top { height: 45px; }
.set-list .ptn .cc-ptn-container .ptn-middle { position: relative; display: flex; flex-direction: row; padding: 20px 40px; height: 195px; }
.set-list .ptn .cc-ptn-container .ptn-middle .ptn-setlist-img { width: 126px; height: 164px; object-fit: cover; object-position: top center; border: 1px solid #d8d8d8; }
.set-list .ptn .cc-ptn-container .ptn-middle .ptn-setlist-content { display: flex; flex-direction: column; }
.set-list .ptn .cc-ptn-container .ptn-middle .ptn-setlist-content .ptn-sl-name-text { color: #292929; font-size: 30px; font-weight: 600; line-height: 120%; }
.set-list .ptn .cc-ptn-container .ptn-middle .ptn-setlist-content .ptn-sl-sub-name-text { color: #666; font-size: 18px; font-weight: 500; line-height: 120%; }
.set-list .ptn .cc-ptn-container .ptn-middle .ptn-setlist-content .ptn-sl-btn { padding: 5px 0 0 5px; align-items: center; width: 100px; height: 35px; border-radius: 5px; border: 1px solid #C0C0C0; background: #FFF; }
.set-list .ptn .cc-ptn-container .ptn-middle .ptn-setlist-content .ptn-sl-dropdown { align-items: center; width: 200px; height: 35px; border-radius: 5px; border: 1px solid #C0C0C0; background: #FFF; }

.set-list .ptn .cc-ptn-container .ptn-bottom { height: 5px; }
.set-list .ptn .cc-content { margin-top: 275px; }
.set-list .ptn .ne-times+.cc-content { margin-top: 220px; }
/* .set-list .ptn .cc-content .set-list-body { border-top: 2px solid #BDBDBD; } */
.set-list .ptn .btn-ne-combine-set { border-radius: 5px; }

.set-list .ptn .cc-ptn-container.alist .ptn-top { background: url(/images/v3/common/bg_folder_alist.svg), linear-gradient(90deg, #803E95 73.45%, rgba(128, 62, 149, 0.41) 100.73%); background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.alist .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2; background: linear-gradient(90deg, #402176 73.45%, rgba(128, 62, 149, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.alist .ptn-bottom { background: linear-gradient(90deg, #402176 73.45%, rgba(128, 62, 149, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.dong .ptn-top { background: url(/images/v3/common/bg_folder_dong.svg), #FFF ; background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.dong .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #DBDBDB 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.dong .ptn-bottom { background: linear-gradient(90deg, #DBDBDB 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.key .ptn-top { background: url(/images/v3/common/bg_folder_key.svg), #FFF; background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.key .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.key .ptn-bottom { background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.ne .ptn-top { background: url(/images/v3/common/bg_folder_ne.svg), linear-gradient(90deg, #803E95 73.45%, rgba(128, 62, 149, 0.41) 100.73%); background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.ne .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #803E95 73.45%, rgba(128, 62, 149, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.ne .ptn-bottom { background: linear-gradient(90deg, #803E95 73.45%, rgba(128, 62, 149, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.woong .ptn-top { background: url(/images/v3/common/bg_folder_woong.svg), #FFF; background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.woong .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.woong .ptn-bottom { background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.ybm .ptn-top { background: url(/images/v3/common/bg_folder_ybm.svg), #FFF; background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.ybm .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #F3F3F3 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.ybm .ptn-bottom { background: linear-gradient(90deg, #F3F3F3 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.jihak .ptn-top { background: url(/images/v3/common/bg_folder_jihak.svg), #FFF; background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.jihak .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.jihak .ptn-bottom { background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.gilbut .ptn-top { background: url(/images/v3/common/bg_folder_gilbut.svg), #FFF; background-repeat: no-repeat; }
.set-list .ptn .cc-ptn-container.gilbut .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.2;  background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }
.set-list .ptn .cc-ptn-container.gilbut .ptn-bottom { background: linear-gradient(90deg, #F4F4F4 73.45%, rgba(255, 255, 255, 0.41) 100.73%); }

.set-list .ptn .cc-ptn-container.common .ptn-top { height: 40px; background: #f3f3f3; display: flex; align-items: center; font-size: 15px; color: #333; padding-left: 40px; }
.set-list .ptn .cc-ptn-container.common .ptn-middle { padding: 40px; padding-right: 0px; border-bottom: 1px solid #D9D9D9; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); height: auto; }
.set-list .ptn .cc-ptn-container.common .ptn-middle>div { display: flex; width: 910px; gap: 30px; }
.set-list .ptn .cc-ptn-container.common .ptn-middle .ptn-setlist-content .ptn-sl-name-text { font-size: 32px; font-weight: 500; line-height: 1.6; }
.set-list .ptn .cc-ptn-container.common+.cc-content {
  margin-top: 310px;
}

.set-list .ptn .cc-ptn-container.ne-times .ptn-middle::before { content: ""; position: absolute; z-index: -1; inset:0; background: #FFDE81; }
/* set list & icons */
.set-icon { position: relative; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 7px; border-radius: 4px; }
.set-icon.word { background-color: #78D024; }
.set-icon.word.revers { color: #78D024; }
.set-icon.word:before { content: "\b2e8\c5b4";}
.set-icon.sentence { background-color: #FCBF00; }
.set-icon.sentence.revers { color: #FCBF00; }
.set-icon.sentence:before { content: "\bb38\c7a5"; }
.set-icon.quest { background-color: #7898FD; }
.set-icon.quest.revers { color: #7898FD; }
.set-icon.quest:before { content: "\bb38\c81c";}
.set-icon.term { background-color: #FF6CA9; }
.set-icon.term.revers { color: #FF6CA9; }
.set-icon.term:before { content: "\c6a9\c5b4";}
.set-icon.drill { background-color: #7898FD }
.set-icon.drill.revers { color: #7898FD; }
.set-icon.drill:before { content: "\b4dc\b9b4";}
.set-icon.hideset { background-color: #ccc ; }
.set-icon.hideset.revers { color: #ccc; }
.set-icon.hideset:before { content: "\c228\ae40" }
.set-icon.scramble { background-color: #EB587F; }
.set-icon.scramble.revers { color: #EB587F; }
.set-icon.scramble:before { content: "\c2a4\d06c\b7a8\be14" }
.set-icon.quiz { background-color: #1746C2; }
.set-icon.quiz.revers { color: #1746C2; }
.set-icon.quiz:before { content: "\d034\c988" }
.set-icon.listen { background-color: #7f5ac8; }
.set-icon.listen.revers { color: #7f5ac8; }
.set-icon.listen:before { content: "\b4e3\ae30";}
.set-icon.answer { background-color: #E07141; }
.set-icon.answer.revers { color: #E07141; }
.set-icon.answer:before { content: "\c815\b2f5";}
.set-icon.gclass { background-color: #369FFF; }
.set-icon.gclass.revers { color: #369FFF; }
.set-icon.gclass:before { content: "\0043\0047" }
.set-icon.gclass2 { color:#fff; background: #369FFF; font-size:14px; position:relative; padding:2.5px 8px;}
.set-icon.gclass3 { color:#fff; background: #D5E9FF; font-size:14px; position:relative; padding:2.5px 8px;}
.set-icon.revers { background-color: #FFFFFF; }
.set-icon.wrong { background-color: #000; }
.set-icon.wrong:before { content: "\bcf5\c2b5";}
/* img.setlist-img { width: 150px; height: 150px; } */
img.set-img { max-width: 90px; max-height: 120px; height: auto; }
img.setlist-img { max-width: 150px; max-height: 150px; height: auto; }
.set-items { display: table; width: 100%; height: 84px; border-bottom: 1px solid #E5E5E5; }
.set-items.std { background-color: rgba(108, 88, 147, 0.098) }
.set-items.std.disabled { background-color: #fff; }
.set-item { display: table-cell; vertical-align: middle; padding-right: 15px; }
.set-item.icon { width: 78px; text-align: center; padding: 0px; }
.set-item.speed { width: 110px; padding: 0px; }
.set-items.std.disabled .set-item.speed { display: none; }
.set-item.chk { width: 50px; padding: 0px; text-align: right; color: #666; }
.set-item.card { width: 260px; padding-right: 24px; }
.set-item .set-name { font-size: 16px; font-weight: 600; }
.set-item .set-detail { font-size: 14px; color: #666; }
.set-item .set-detail2 { font-size: 14px; color: #7f5ac8; display: none; }
.set-items.std.disabled .set-detail2 { display: block; }
.set-item .card-box { width: 235px; height: 60px; display: table; background-color: #F8F7F9; border-radius: 4px; margin: 0px auto; }
.set-item .card-box>* { display: table-cell; vertical-align: middle; padding-left: 20px; padding-right: 8px; }
.set-item .speed-box { width: 96px; height: 62px; display: table; background-color: #F7F6F4; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 4px; margin: 0px auto; }
.set-items.std .set-item .speed-box { background-color: #795BC1; border-color: #795BC1; }
.set-item .speed-box>* { display: table-cell; vertical-align: middle; text-align: center; }
.set-item .speed-box .l1 { font-size: 12px; color: #666; }
.set-item .speed-box .l2 { font-size: 16px; color: #7F59C7; font-weight: 600; }
.set-items.std .set-item .speed-box .l1, .set-items.std .set-item .speed-box .l2 { color: #fff; }
.set-item img.setlist-img { width: 60px; height: 60px; }

/* pagination */
.cc-pagination { text-align: center; }
.cc-pagination .pagination { margin: 35px 0px; }
.cc-pagination .pagination>li>a { border: none; color: #666; }
.cc-pagination .pagination>li.prev>a, .cc-pagination .pagination>li.next>a { font-size: 125%; padding: 2px 10px 5px; }
.cc-pagination .pagination>.active>a, .cc-pagination .pagination>.active>a:focus, .cc-pagination .pagination>.active>a:hover, .cc-pagination .pagination>.active>span, .cc-pagination .pagination>.active>span:focus, .cc-pagination .pagination>.active>span:hover { color: #7F59C7; font-weight: bolder; background: #fff; }
.cc-pagination .pagination>.disabled>a, .cc-pagination .pagination>.disabled>a:focus, .cc-pagination .pagination>.disabled>a:hover, .cc-pagination .pagination>.disabled>span, .cc-pagination .pagination>.disabled>span:focus, .cc-pagination .pagination>.disabled>span:hover { color: #666; opacity: 0.5; }
/* etc... */
.profile-img { width: 44px; height: 44px; border: 1px solid #CFCFCF; border-radius: 50%; }
.profile-img.xl { width: 140px; height: 140px; }
.profile-img.lg { width: 100px; height: 100px; }
.profile-img.md { width: 90px; height: 90px; }
.profile-img.md2 { width: 65px; height: 65px; }
.profile-img.md3 { width: 52px; height: 52px; }
.profile-img.sm { width: 30px; height: 30px; }
.profile-img.xs { width: 16px; height: 16px; }
.profile-img.noborder { border: none; }
.invisible { pointer-events: none; }
.hidden { display: none!important; visibility: hidden!important; }
.custom-center-body { position: fixed; width: auto; height: auto; z-index: 1039; bottom: 5px; right: 15px; }
.page-small .custom-center-body { display: none; }
label.cc-click { display: initial; max-width: initial; margin-bottom: 0px; font-weight: inherit; cursor: pointer; }

.dp-inline { display: inline; } .dp-inline-block { display: inline-block; }
.dp-flex { display:flex; } .dp-inline-flex { display:inline-flex; }
.align-items-center { align-items: center; }


a { cursor: pointer; color: inherit; }
a:focus, a:hover { text-decoration: none; color: inherit; outline: none; outline-offset: 0px; box-shadow: none !important; }
.anchor-underline:hover { text-decoration: underline; }
.anchor-block:hover { background: rgba(0, 0, 0, 0.06) !important; }
.text-underline { text-decoration: underline; }
.text-underline-p2 { text-decoration-line: underline; text-underline-offset: 2px; }

/* print */
.page-break	{ display: none; }		
.page { width: 210mm; padding: 10mm; margin: 0.5cm auto; border: 1px #D3D3D3 solid; border-radius: 5px; background: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); position: relative; }
.score-card-title { color: #bbb !important; font-size: 12px; padding: 2px 8px; }
.score-card-sub-title { background: #ddd !important; font-weight: 600; font-size: 15px; padding: 5px 8px; }
.score-card-words { font-size: 11px; padding: 0px 8px; }
.score-card-table { display:table; width:100%; height:100%; border-width: 2px 2px 0px 0px; position: relative; }
.score-card-table .rows { display:table-row; }
.score-card-table .cell { display:table-cell; border-width: 0px 0px 1px 1px; vertical-align: middle; position: relative; padding: 5px 8px; text-align: right; }
.score-card-table .rows .cell:first-child { border-left-width: 2px; }
.score-card-table .rows:last-child .cell { border-bottom-width: 2px; }
.score-card-table .cell.rowspanned { position: absolute; top: 0; bottom: 0; width: 145px; height: auto; overflow: hidden; }
.score-card-table .cell.empty { border: none; width: 145px; }
.score-card-table .rows:last-child .cell.empty { border-style: solid; border-color: #ccc; border-width: 0px 0px 2px 0px; }
.score-card-table .cell small { font-size: 75%; }
.score-card-table .cell>span { font-weight: 600; }
.score-card-table .cell.header { background: #ddd !important; text-align: center; font-weight: 600; }
.score-card-table, .score-card-table .cell { border-style: solid; border-color: #ccc; }
.score-card-rank { float: left; border: 1px solid; border-radius: 5px; padding: 1px 5px; font-size: 75%; }

/* crop */
.cropper-view-box { border-radius: 1000px; outline-color: #fff !important; }
.cropper-face { border-radius: 1000px; }
.cropper-line, .cropper-point { background-color: #fff !important; }

/* customer center */
#customCenterModal .modal-content { border-radius: 12px; background: rgba(255, 255, 255); }
#customCenterModal .modal-footer { background: #fff; border-radius: 0px 0px 12px 12px; text-align: left; }
#customCenterModal .modal-content .guide2 { display: block; }
#customCenterModal .modal-content .msg { display: none; }
#customCenterModal .modal-content.msg .guide2 { display: none; }
#customCenterModal .modal-content.msg .msg { display: block; }
#customCenterModal .modal-content.guide2 .msg { display: none; }
#customCenterModal .modal-content.guide2 .guide2 { display: block; }
/* #customCenterModal .modal-content #cusotomer_quest{ width:350px;  vertical-align:top;} */
/* #customCenterModal .modal-content.msg .msg #cusotomer_video{ width:350px;  vertical-align:top;} */
/* #customCenterModal .modal-content #cusotomer_reply{ width:350px; vertical-align:top;} */

.customer-box { position: relative; display: inline-block; width: 165px; height: 64px; box-shadow: 0 8px 18px 0 rgba(0,0,0,0.20); border: 1px solid rgba(0, 0, 0, 0.06); background: #fff; text-align: center; color: #666; border-radius: 60px; font-size: 30px; }
.customer-box.success { border-color: #78D024; background: #78D024; color: #fff; font-size: 12px; font-weight: 600; opacity:0.8; }
.customer-box.gclass { border-color: #369FFF; background: #369FFF; color: #fff; font-size: 12px; font-weight: 600; }
.customer-box.primary { border-color: #7f5ac8; background: #7f5ac8; color: #fff; font-size: 12px; font-weight: 600; opacity:1; }
.customer-box.large {     width: 290px;
  height: auto;
  border-radius: 10px;}
.customer-box .tooltip { position: absolute; right: 140%; bottom: 0px; background: rgba(127, 90, 200, 0.94); color: #fff; border-radius: 12px; opacity: 1; padding: 25px; font-size: 26px; font-weight: 300; display: none; }
/* .customer-box:hover .tooltip, .customer-box.active .tooltip { display: block; } */
.customer-box .tooltip.left .tooltip-arrow { border-left-color: rgba(127, 90, 200, 0.94); right: -10px; top: 72%; border-width: 10px 0px 10px 10px; }

.customer-box .tooltip .new-msg { display: none; }
.customer-box .tooltip.new .guide { display: none; }
.customer-box .tooltip.new .new-msg { display: table; }

.reply-list { display: flex; flex-direction: column; align-items: center; background: #fff; }

.reply-list .reply-question-item:not(:first-child) { margin-top: 10px; }
.reply-list .reply-question-item { padding: 22px; width: 645px; border-radius: 5px; border: 1px solid #C0C0C0; }
.reply-list .reply-question-item .reply-user { margin-top: 10px; color: #7C7C7C; font-size:14px; font-weight:400; line-height: 110%; }
.reply-list .reply-question-item .reply-content { margin-top: 10px; color: #222328; font-size:14px; line-height: 1.6; word-break: break-all; }
.reply-list .reply-question-item .reply-file { padding: 8px 0 14px 0; border-bottom: 1px solid #C0C0C0; }
.reply-list .reply-question-item .reply-file .attach-file:first-child { margin-top: 12px; }
.reply-list .reply-question-item .reply-file .attach-file:not(:first-child){ margin-top: 10px; }

.reply-list .reply-answer-item { margin-top: 10px; padding: 22px; width: 645px; background: #E3FCCC; border-radius: 5px; }
.reply-list .reply-answer-item .reply-user { margin-top: 10px; color: #7C7C7C; font-size:14px; font-weight:400; line-height: 110%; }
.reply-list .reply-answer-item .reply-content { margin: 20px 0 0 60px; color: #25282B; font-size:14px; line-height: 1.6; word-break: break-all; }
.reply-list .reply-answer-item .reply-file { margin-left: 60px; padding: 8px 0 14px 0; border-bottom: 1px solid #C0C0C0; }
.reply-list .reply-answer-item .reply-file .attach-file:first-child { margin-top: 12px; }
.reply-list .reply-answer-item .reply-file .attach-file:not(:first-child){ margin-top: 10px; }

.flip-body { font-size: 0px; width: 1280px; margin: 0px auto; }
.flip-body>.flip-card { font-size: 14px; display: inline-block; margin-right: 10px; margin-bottom: 18px; cursor: pointer; user-select: none; width:302px; }
.flip-body>.flip-card:nth-child(4n) { margin-right: 0px; }

.flip-card { background-color: transparent; width: 282px; height: 172px; perspective: 1000px; }
/*
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.3s; transform-style: preserve-3d; }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; border-radius: 4px; border: 1px solid; z-index: 1; }
.flip-card-front { background-color: #fff; color: #333; border-color: #DBDBDB; }
.flip-card:not(.drill):hover .flip-card-front { border-color: #78D024; box-shadow: 1px 0px #78D024, 0px 1px #78D024, -1px 0px #78D024, 0px -1px #78D024; }
#wrapper-learn.is-mobile .flip-card:not(.drill):hover .flip-card-front { border-color: transparent; box-shadow: none; }
.flip-card-back { background-color: #78D024; border-color: #78D024; color: #fff; transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card.flip .flip-card-inner { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); }
.flip-card.flip .flip-card-inner .flip-card-front { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
*/
/* iPAD Safari 15.7 에서 3D 애니메이션이 오류가 있어 교체 */
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.3s; perspective: 500px; }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; border-radius: 4px; border: 1px solid; z-index: 1; transition: 0.3s; }
.flip-card-front { background-color: #fff; color: #333; border-color: #DBDBDB; position: relative; opacity: 1; transform: translateY(0) rotateX(0); }
.flip-card:not(.drill):hover .flip-card-front { border-color: #78D024; box-shadow: 1px 0px #78D024, 0px 1px #78D024, -1px 0px #78D024, 0px -1px #78D024; }
#wrapper-learn.is-mobile .flip-card:not(.drill):hover .flip-card-front { border-color: transparent; box-shadow: none; }
.flip-card-back { background-color: #78D024; border-color: #78D024; color: #fff; top: 0; left: 0; opacity: 0; transform: translateY(-50%) rotateX(90deg); }
/* .flip-card.flip .flip-card-inner { transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -ms-transform: rotateX(180deg); } */
.flip-card.flip .flip-card-inner .flip-card-front { opacity: 0; transform: translateY(50%) rotateX(-90deg); visibility: hidden; }
.flip-card.flip .flip-card-inner .flip-card-back { opacity: 1; transform: translateY(0) rotateX(0); }
/* IE10 and IE11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.flip-card.flip .flip-card-inner .flip-card-back { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -moz-backface-visibility: visible; backface-visibility: visible; }
}

/* .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transform-style: preserve-3d; }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; border-radius: 4px; border: 1px solid; z-index: 1; -webkit-transition: transform 300ms !important; -moz-transition: transform 300ms !important; -ms-transition: transform 300ms !important; transition: transform 0.3s !important; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card-front { background-color: #fff; color: #333; border-color: #DBDBDB; }
.flip-card:hover .flip-card-front { border-color: #78D024; box-shadow: 1px 0px #78D024, 0px 1px #78D024, -1px 0px #78D024, 0px -1px #78D024; }
.flip-card-back { background-color: #78D024; border-color: #78D024; color: #fff; -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); }
.flip-card.flip .flip-card-inner .flip-card-front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); }
.flip-card.flip .flip-card-inner .flip-card-back { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; } */


.flip-card-inner .icon { position: absolute; display: none; font-size: 24px; color: #666; }
.flip-card-inner .flip-card-back .icon { color: #fff; }
.flip-card:hover .flip-card-inner .icon, .flip-card-inner .icon.show { display: block; }
.flip-card-inner .icon.top { top: 4px; }
.flip-card-inner .icon.left { left: 12px; }
.flip-card-inner .icon.right { right: 12px; }
.flip-card-inner .icon.bottom { bottom: 8px }
.flip-card .flip-card-inner .card-content { margin: 35px 10px; height: calc(100% - 70px); overflow: hidden; }

.flip-body>.flip-card.sentence { display: block; width: 100%; height: auto; margin: 0px; margin-bottom: 10px; }
.flip-body>.flip-card.sentence .flip-card-inner { width: auto; height: 64px; }
/* .flip-body>.flip-card.sentence .flip-card-inner .flip-card-front, .flip-body>.flip-card.sentence .flip-card-inner .flip-card-front .flip-card-back { height: auto; } */
.flip-body>.flip-card.sentence .flip-card-inner .card-content { height: auto; margin: 21px 80px 21px 110px; text-align: left; }
.flip-body>.flip-card.sentence .flip-card-inner .icon.top { top: 14px; }
.flip-body>.flip-card.sentence .flip-card-inner .icon.right { right: 33px; }
.flip-body>.flip-card.sentence .flip-card-inner .icon.bottom { bottom: auto; top: 13px; }
.flip-body>.flip-card.sentence .flip-card-inner .icon.left { left: 33px; }


.material-item { width: 79px; height: 51px; font-size: 14px; display: inline-block; margin-left: 30px; cursor: pointer; user-select: none; text-align:center; border:1px solid #999; }
/* .material-item:hover { border-color: #78D024; box-shadow: 1px 0px #78D024, 0px 1px #78D024, -1px 0px #78D024, 0px -1px #78D024; } */
.material-item:hover { box-shadow: 1px 1px 20px #78D024;  }
.material-item:hover .btn-play { opacity: 1.0 !important; }
.flip-body>.material-item {  width: 79px; height: 51px; }

.cc-prog { position: relative; width: 100%; height: 6px; background: #35373E; border-radius: 6px; overflow: hidden; }
.cc-prog .prog-bar { position: absolute; top: 0px; bottom: 0px; left: 0px; transition: 0.1s all linear; }
.prog-bar.gclass { background-color: #369FFF; }
.prog-bar.primary { background-color: #7f5ac8; }
.prog-bar.info { background-color: #009be1; }
.prog-bar.success { background-color: #78d024; }
.prog-bar.danger { background-color: #C9484D; }
.prog-bar.warning { background-color: #ffca28; }
.btn-seek-to .cc-prog { overflow: initial; }
.btn-seek-to .cc-prog .prog-bar { border-radius: 6px; }
.btn-seek-to .cc-prog .prog-bar.no-ani { transition: none; }
.btn-seek-to .cc-prog .prog-bar:after { content: ""; display: block; position: relative; top: -5px; left: calc(100% - 5px); width: 16px; height: 16px; background: #fff; border-radius: 12px; box-shadow: 1px 1px 3px rgb(0 0 0 / 50%); }


/* study card */
#wrapper-learn, #study_end { position: absolute; top: 48px; width: 100%; height: calc(100% - 48px); color: #fff; overflow: hidden; background: #222328; }
#wrapper-learn.zoom>*:first-child, #study_end.zoom { zoom: 1.5; top: 32px; height: calc(100% - 32px); }
/* IE10 and IE11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#wrapper-learn.zoom, #study_end.zoom { width: calc(100% / 1.5); height: calc(100% / 1.5 - 48px); }
}
#wrapper-learn.zoom .study-top { display: none; }
#study_end { display: none; }
#study_end.active { display: block; }
.study-top { text-align: center; padding-bottom: 18px; font-size: 18px; font-weight: 600; height: 44px; }

.study-bottom { padding: 38px 0px 0px; text-align: center; }
.study-bottom .btn-text { display: none; }
.study-bottom .btn-down-cover-box { display: inline-block; }
.study-bottom.down .btn-down-cover-box { display: none; }
.study-bottom.down .btn-know-box { display: inline-block; }
.study-bottom.down .btn-next-box { display: inline-block; margin-left: 10px; }

.study-bottom .show-hint-box { display: none; }
.study-bottom.show-hint .btn-text { display: none; }
.study-bottom.show-hint .show-hint-box { display: block; height: 91px; font-size: 24px; }

#study_end .study-bottom { padding: 38px 0px 0px; }
#study_end .study-bottom .btn-text { display: inline-block; }

.btnPrevCard, .btnNextCard { font-size: 24px; color: #fff; padding: 30px; }

.study-body { width: 600px; height: 400px; position: relative; color: #333; perspective: 1000px; }
.study-body.sentence { width: 800px; height: 470px; }
.CardItem { position: absolute; left: 0; top: 0px; width: 100%; height: 100%; background: #fff; box-shadow: 0 3px 6px 0 rgba(0,0,0,0.42); border-radius: 14px; overflow: hidden; text-align: center; font-size: 35px; font-weight: 600; 
    transition: transform 300ms ease,opacity 200ms linear !important;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    display: none;
    user-select: none; }
/* .CardItem.step3::after { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; bottom: -1px; border: 4px solid #7f5ac8; border-radius: 16px; z-index: 4; } */
.CardItem.step3 { background: #ddd; }
.study-body .CardItem { height: 400px; }
.study-body.sentence .CardItem { height: 470px; }
.CardItem.previous { display: block; transform: translateX(-74%) rotateY(-35deg) scale(0.8) translateZ(0) !important; opacity: 0; pointer-events: none; }
.CardItem.showing { display: block; }
.CardItem.next { display: block; transform: translateX(74%) rotateY(35deg) translateZ(0) scale(0.8) !important; opacity: 0; pointer-events: none; }

.CardItem .card-top, .CardItem .card-bottom { height: 50%; width: 100%; position: relative; padding: 30px; padding-right: 0px; z-index: 2; }
.CardItem .card-top>div, .CardItem .card-bottom>div { width: 100%; height: 100%; padding-right: 30px; }
.CardItem .card-top>div>div, .CardItem .card-bottom>div>div { display: table; width: 100%; height: 100%; }
.CardItem .card-top { padding-bottom: 0px; }
.CardItem .card-bottom { border-top: 1px solid #E3E3E3; }
.CardItem .card-top>div>div>*, .CardItem .card-bottom>div>div>* { display: table-cell; vertical-align: middle; }

.study-body.sentence .CardItem { font-weight: normal; }
.study-body.sentence .CardItem .card-top { font-size: 20px; text-align: left; padding-top: 55px; padding-bottom: 20px; }
.study-body.sentence .CardItem .card-bottom { font-size: 24px; text-align: left; }
/* .study-body.sentence .CardItem .card-top>div>div>*, .study-body.sentence .CardItem .card-bottom>div>div>* { vertical-align: top; } */
.study-body.sentence.scramble .CardItem .card-top .spell-answer { color: #666; font-weight: normal; }
.study-body.sentence.scramble .CardItem .card-top .spell-input { font-size: 24px; margin-top: 12px; }
.study-body.sentence.scramble .CardItem .card-bottom { background: #F0F0F0; padding: 22px 30px; }


.CardItem .card-quest { position: absolute; top: calc(50% + 1px); left: 0px; right: 0px; bottom: 0; padding: 1px; font-size: 16px; text-align: left; font-weight: 600; background: #fff; outline: 1px solid #fff; z-index: 3; }
.CardItem .card-quest .quest-num { font-size: 18px; width: 50px; text-align: center; }
.CardItem .card-quest .card-quest-item { border: 1px solid transparent; border-top-color: #E3E3E3; }
.CardItem .card-quest .card-quest-item.clicked { color: #ccc; cursor: default !important; }
.CardItem .card-quest .card-quest-item .answer-cell { width: 60px; text-align: center; display: none; }
.CardItem .card-quest .card-quest-item.card-quest-o { border-color: #78D024; outline: 1px solid #78D024; color: #78D024; }
.CardItem .card-quest .card-quest-item.card-quest-x { /* border-color: #C9484D; outline: 1px solid #C9484D; */ color: #C9484D; }
.CardItem .card-quest .card-quest-item.show-answer { border-color: #78D024; outline: 1px solid #78D024; color: #78D024; }
.CardItem .card-quest .card-quest-item.show-answer .answer-cell { display: table-cell; }
.CardItem .card-cover { position: absolute; top: 50%; right: 0; bottom: 0; left: 0; background: #78D024; box-shadow: 0 0 7px 0 rgba(0,0,0,0.31), inset 0 1px 0 0 #8EDA51;   z-index: 3; }
.CardItem .card-correct-info { display: none; position: absolute; top: -115px; right: -115px; width: 230px; height: 230px; border-radius: 230px; z-index: 1; color: #fff; font-size: 14px; }
.CardItem .card-correct-info:before { content: ""; position: absolute; left: 0; bottom: 60px; padding-left: 20px; text-align: center; width: 50%; font-size: 40px; }
.CardItem .card-correct-info:after { content: ""; position: absolute; left: 0; bottom: 40px; padding-left: 20px; text-align: center; width: 50%; font-weight: 600; }
.CardItem.active .card-correct-info { display: block; background: #78D024; }
.CardItem.active .card-correct-info:before { content: "\e905"; }
.CardItem.active .card-correct-info:after { content: "\c544\b294\ce74\b4dc"; }
.CardItem.active[data-status="xk"] .card-correct-info { display: none; }
.CardItem.active[data-status="xk"] .card-correct-info:before { content: ""; }
.CardItem.active[data-status="xk"] .card-correct-info:after { content: "\004f\004b"; font-size: 34px; bottom: 50px; }
.CardItem .answer-box { display: none; }
.CardItem.deactive .card-bottom .answer-box, .CardItem.deactive .card-top .answer-box.force { display: block; }
.CardItem.deactive .card-correct-info { display: block; background: #C9484D; }
/* .CardItem.deactive .card-correct-info:before { content: "\e907"; }
.CardItem.deactive .card-correct-info:after { content: "\baa8\b974\b294\ce74\b4dc"; } */
.CardItem.deactive .card-correct-info:before { content: ""; }
.CardItem.deactive .card-correct-info:after { content: "\0054\0072\0079\0020\0041\0067\0061\0069\006e\0021"; font-size: 24px; left: 5px; bottom: 44px; }

.CardItem .img-span { width: 200px; }
.CardItem .img-span img { max-height: 130px; max-width: 200px; }
.page-small .CardItem .img-span { width: 100px; }
.page-small .CardItem .img-span img { max-width: 100px; }

.CardItem .text-normal .normal-body { display: inline; }
.CardItem .text-normal .sentence-body { display: none; }
.CardItem .active .text-normal .normal-body { display: none; }
.CardItem .active .text-normal .sentence-body { display: inline; }
.CardItem .card-top.example .text-normal { display: none; }
.CardItem .card-top .text-example { display: none; }
.CardItem .card-top .text-img { position: absolute; top: 40px; right: 5px; bottom: 10px; left: 5px; text-align: center; }
.CardItem .card-bottom .text-img { display: none; }
.CardItem .card-top .text-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; margin-right: 0px; }
.CardItem .card-top.example .text-example { display: block; }
.CardItem .text-example span { color: transparent; border-bottom: 1px solid #333; }
.CardItem.active .text-example span { border-bottom-color: #78D024; }
.CardItem.deactive .text-example span { border-bottom-color: #C9484D; }

.CardItem .sentence-word { cursor: pointer; }
.CardItem .sentence-word.clicked.quest { color: #333; cursor: default; }
.CardItem .sentence-word .items:first-child { display: none; }
.CardItem .sentence-word .items:last-child { display: inline; color: transparent; border-bottom: 2px solid #000; }
.CardItem .card-top .sentence-word .items:last-child { color: inherit; border-bottom: inherit; }
.CardItem .sentence-word.active .items:first-child, .CardItem .sentence-word.clicked .items:first-child, .CardItem .sentence-word.force .items:first-child { display: inline; }
.CardItem .sentence-word.active .items:last-child, .CardItem .sentence-word.clicked .items:last-child, .CardItem .sentence-word.force .items:last-child { display: none; }
.CardItem .sentence-word.active .items:first-child { color: #999; }
.CardItem .sentence-word.clicked .items:first-child, .CardItem .sentence-word.force .items:first-child { color: inherit; }
.CardItem .sentence-word:hover .items:first-child { color: #999; }
.CardItem .sentence-word:hover .items:last-child { border-bottom-color: #999; color: #999; }
.CardItem .card-bottom.img { text-align: left; }
.CardItem .card-bottom.example .text-normal { display: none; }
.CardItem .card-bottom .text-example { display: none; }
.CardItem .card-bottom.example .text-example { display: inherit; }
.CardItem .card-top img, .CardItem .card-bottom img { margin-right: 10px; }

.CardItem .card-top.ani, .CardItem .card-bottom.ani { position: absolute; left: 0; top: 0; transition: all 0.7s cubic-bezier(0.68, -0.55, 0.38, 0.99); transition-delay: 0.1s; }
.CardItem .card-bottom.ani { top: 50%; }
.CardItem .card-top.ani.start { transform: scale(0.4); top: -50%; left: 0%; opacity: 0; }
.CardItem .card-bottom.ani.start { transform: scale(0.4); top: -100%; left: 0%; opacity: 0; }

.CardItem .icon-left { position: absolute; top: 15px; left: 17px; font-size: 24px; z-index: 3; }
.CardItem .icon-middle { position: absolute; top: 12px; left: 48.0%; font-size: 24px; z-index: 3; }
.CardItem .btn-auto-play { position: relative; top: -3px; font-size: 18px; font-weight: 600; }
.CardItem .btn-auto-play.active { color: #78D024; }
.CardItem .btn_audio.disabled { cursor: default; color: #ccc; }

.round-body { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #222328; color: #fff; font-size: 54px; }
.round-body.active { display: block; }


#newRankModal .modal-dialog { width: 945px; line-height: 1; }
#newRankModal .modal-dialog .modal-content { border: none; background: transparent; box-shadow: none; }
#newRankModal .modal-dialog .modal-content .rank-info { float: left; width: 670px; margin-right: 15px; background: #FFFFFF; background-image: url(/images/v2/test/bo_test_box_03.png); border-radius: 4px; height: 456px; position: relative; }
#newRankModal .modal-dialog .modal-content .rank-body { float: left; width: 260px; height: 456px; background: #31354A; border-radius: 6px; color: #fff; overflow: hidden; }
#newRankModal table { width: 100%; font-size: 14px; }
#newRankModal table tr { height: 39px; }
#newRankModal table tr td { padding-left: 7px; }
#newRankModal table tr td.name { word-break: break-all; }
#newRankModal table tr td:first-child { padding-left: 22px; }
#newRankModal table tr td:last-child { padding-right: 22px; font-size: 16px; font-weight: 600; }

#newRankModal .title-body { font-size: 60px; font-weight: bold; font-style: italic; margin-top: 105px; text-align: center; }
#newRankModal .msg-info { position: absolute; top: -35px; left: 0px; right: 0px; color: #fff; text-align: center; font-size: 16px; font-weight: bolder; }
#newRankModal .opt-info { position: absolute; top: -28px; right: 0px; width: 260px; color: #fff; text-align: left; }
#newRankModal .btn-body { text-align: center; margin: 63px 195px 0px; }
#newRankModal .rank-info .crash-option { display: none; }
#newRankModal .rank-info.crash .crash-option { display: block; text-align: center; line-height: 1.4; margin-top: 70px; }
#newRankModal .rank-info.crash .btn-body { margin-top: 30px; }

#newRankModal .modal-dialog .modal-content .rank-info.end {background-image: none; }
#newRankModal .modal-dialog .modal-content .rank-info.end .title-body { display: none; }
#newRankModal .modal-dialog .modal-content .rank-info.end .msg-info { position: static; color: #333; margin-top: 115px; font-size: 24px; }
#newRankModal .modal-dialog .modal-content .rank-info.end .btn-body { margin-top: 63px; }

kbd { background: #E9E9E9; border: 1px solid #C6C7C6; color: #444; box-shadow: none; font-weight: 600; padding: 2px 6px; }

.school-logo-img { max-width: 100px; max-height: 100px; height: auto;  }

.cmt-input-box { background: rgba(108, 88, 147, 0.1); border: 1px solid #DBDBDB; border-radius: 4px; width: 100%; padding: 15px 0px; margin-top: 10px; }
.cmt-item { width: 100%; padding: 12px 0px; }

.class-info-box { background: #F1EAFF; padding: 20px 20px; font-size: 14px; color: #333; }

input::-webkit-input-placeholder {
	color: #ccc !important;
}
input:-moz-placeholder { /* Firefox 18- */
	color: #ccc !important;  
}
input::-moz-placeholder {  /* Firefox 19+ */
	color: #ccc !important;  
}
input:-ms-input-placeholder {  
	color: #ccc !important;  
}

.cc-box { border: 1px solid #DBDBDB; border-radius: 4px; }
.cc-box-top { border: 1px solid #DBDBDB; border-width: 1px 0 0px 0; }
.cc-box-top-down { border: 1px solid #DBDBDB; border-width: 1px 0 1px 0; }
.cc-box-down { border: 1px solid #DBDBDB; border-width: 0px 0 1px 0; }

.adsbygoogle { position: relative; display: inline-block; background: #efefef; }
.adsbygoogle .upgrade-box { position: absolute; top: 0px; bottom: 0px; left: calc(100% + 15px); width: 60px; text-align: center; cursor: pointer; font-size: 12px; }

.bg-circle::after { content: ""; border: 2px solid; border-radius: 100%; position: absolute; top: -6px; right: -7px; bottom: -10px; left: -9px; }
.mem-list-body .class-report-panel.panel-default:not(.panel-collapse){margin-bottom:60px}

.ne-title { font-size: 20px; font-weight: 700; letter-spacing: -0.23333339393138885px; }
.ne-title>img { vertical-align: bottom; margin-right: 5px; }
.ne-category2 { font-size: 16px; color: #000; margin-top: 20px; font-weight: 600; }
.ne-category-list { margin-top: 20px; }
.ne-category-row { display: table; width: 100%; border-bottom: 1px solid #E5E5E5; padding-bottom: 1px; margin-bottom: 25px; }
.ne-category-row>div { display: table-cell; vertical-align: top; }
.ne-category-row .ne-book { width: 100px; padding-right: 16px; }
.ne-category-row .ne-book>img { width: 100%; }
.ne-category-row .ne-content { padding-top: 10px; }
.ne-category-row .ne-content .ne-name { font-size: 16px; font-weight: 600; }
.ne-category-row .ne-content .ne-desc { font-size: 14px; color: #666; }
.ne-category-row:hover .ne-name { color: #6cbb24; font-weight: 600; }
.ne-category-row:hover .ne-desc { color: #6cbb24; font-weight: 600; }
.ne-category-row:hover .ne-book img { border: 4px solid #78D024; box-sizing: border-box; }
.ne-search-title { font-size: 16px; font-weight: 600; }
.ne-login-guide-box { background: #F2EBFF; padding: 8px 24px; border-radius: 4px; margin-top: 12px; }

/* classcard grammar */
.gclass-q-item { position: relative; color: #333; text-align: left; min-height:250px; padding-bottom:30px; }
.gclass-q-item.correct, .gclass-q-item.wrong { pointer-events: none; }
.gclass-q-item .gclass-q-charactor { width: 104px; padding-right: 20px; vertical-align: middle; }
.gclass-q-item .gclass-q-tag-body { margin-bottom: 10px; }
.gclass-q-item .gclass-q-tag { color: #369FFF; font-size: 15px; font-weight: 700; line-height: 1; text-align: center; padding: 7px 10px; background: #D6E7F7; border-radius: 80px 80px 80px 0px; display: inline-block; min-width: 44px; line-height: 100%; }
.second-try .gclass-q-item .gclass-q-tag { background: #FDEFEF; color: #FF928C; }
.is-mobile .gclass-q-item .gclass-q-tag { font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .gclass-q-tag { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .gclass-q-tag { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .gclass-q-tag { font-size: 17px; }
.gclass-q-item.correct:not(.is-feedback) .gclass-q-tag { background: #6CBB24; color: #fff; }
.gclass-q-item.wrong:not(.is-feedback) .gclass-q-tag { background: #D5433E; color: #fff; }
.gclass-q-item .gclass-q-tag .tag-icon i.cc { top: 0px; display: none; }
.gclass-q-item.correct:not(.is-feedback) .gclass-q-tag .tag-icon i.cc:first-child { display: inline; }
.gclass-q-item.wrong:not(.is-feedback) .gclass-q-tag .tag-icon i.cc:last-child { display: inline; }
.gclass-q-item .gclass-q-dictation { font-size: 15px; font-weight: 500; word-break: keep-all; word-wrap: break-word;}
.is-mobile .gclass-q-item .gclass-q-dictation { font-size: 14px; line-height: 160%; }
.is-mobile.font_size_15 .gclass-q-item .gclass-q-dictation { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .gclass-q-dictation { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .gclass-q-dictation { font-size: 17px; }
.gclass-q-item .gclass-q-quest { font-size: 20px; line-height: 30px; color: #333; margin-top: 35px; word-break: keep-all; word-wrap: break-word; }
.is-mobile .gclass-q-item .gclass-q-quest { margin-top: 20px; font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .gclass-q-quest { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .gclass-q-quest { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .gclass-q-quest { font-size: 17px; }
.gclass-q-item .gclass-q-input { margin-top: 32px; font-size: 19px; }
.is-mobile .gclass-q-item .gclass-q-input { margin-top: 20px; font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .gclass-q-input { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .gclass-q-input { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .gclass-q-input { font-size: 17px; }
.gclass-q-item .gclass-q-input input.correct, .gclass-q-item .gclass-q-input select.correct, .gclass-q-item .gclass-q-input select.correct+.select2 .select2-selection { border-color: #78D024; outline: none; }
.gclass-q-item .gclass-q-input input.wrong, .gclass-q-item .gclass-q-input select.wrong, .gclass-q-item .gclass-q-input select.wrong+.select2 .select2-selection { border-color: #D5433E; outline: none; }

.gclass-q-item .gclass-q-input select.correct+.select2, .gclass-q-item .gclass-q-input select.wrong+.select2 { width: auto !important; }

.gclass-q-item .gclass-q-input .subject-body .subject { margin-bottom: 10px; }
.gclass-q-item .gclass-q-input .subject-body .subject:last-child { margin-bottom: 0px; }

.gclass-q-item .gclass-q-input .object-body .object { margin-bottom: 10px; background: #D6E7F7; border-radius: 4px; display: block; width: 100%; height: 100%; min-height: 36px; font-size: 18px; font-weight: 500; color: #333; cursor: pointer; border: 1px solid transparent; }
.gclass-q-item .gclass-q-input .object-body .object>div { display: table; width: 100%; height: 100%; min-height: 36px; }
.is-mobile .gclass-q-item .gclass-q-input .object-body .object { margin-bottom: 8px; font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .gclass-q-input .object-body .object { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .gclass-q-input .object-body .object { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .gclass-q-input .object-body .object { font-size: 17px; }
.gclass-q-item .gclass-q-input .object-body .object:hover:not(.wrong, .correct) { border-color: #369FFF; }
.gclass-q-item .gclass-q-input .object-body .object:last-child { margin-bottom: 0px; }
.gclass-q-item .gclass-q-input .object-body .object>div>div { display: table-cell; vertical-align: middle; }
.gclass-q-item .gclass-q-input .object-body .object.selected { color: #fff; background: #369FFF; }
.gclass-q-item .gclass-q-input .object-body .object.correct { color: #fff; background: #6CBB24; }
.gclass-q-item .gclass-q-input .object-body .object.wrong { color: #fff; background: #D5433E; }
.gclass-q-item .gclass-q-input .object-body .object .option_txt { padding-left: 20px; }
.gclass-q-item .gclass-q-input .object-body .object .option_txt>span { cursor: text; user-select: text;}
.gclass-q-item .gclass-q-input .object-body .object .option_txt .option-answer { display: none; }
.gclass-q-item .gclass-q-input .object-body .object .icon { padding-right: 20px; text-align: right; position: relative; font-size: inherit; color: inherit; }
.gclass-q-item .gclass-q-input .object-body .object .icon i { display: none; }
.gclass-q-item .gclass-q-input .object-body .object.selected .icon i:first-child { display: inline; }
.gclass-q-item .gclass-q-input .object-body .object.correct .icon i:nth-child(3n - 1) { display: inline; }
.gclass-q-item .gclass-q-input .object-body .object.wrong .icon i:last-child { display: inline; }

.gclass-q-item .gclass-q-input .object-num-body .object { margin-right: 10px; background: #D6E7F7; border-radius: 4px; display: block; width: calc(20% - 10px); height: 100%; min-height: 54px; font-size: 32px; font-weight: 400; color: #333; float: left; cursor: pointer; user-select: none; margin-bottom: 10px; }
.gclass-q-item .gclass-q-input .object-num-body .object>div { display: table; width: 100%; height: 100%; min-height: 54px; }
.is-mobile .gclass-q-item .gclass-q-input .object-num-body .object { width: calc(25% - 10px); font-size: 14px; height: 100%; min-height: 38px; }
.is-mobile .gclass-q-item .gclass-q-input .object-num-body .object>div { min-height: 38px; }
.gclass-q-item .gclass-q-input .object-num-body.construction .object { width: calc(33% - 10px); font-size: 20px; }
.is-mobile .gclass-q-item .gclass-q-input .object-num-body.construction .object { font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .gclass-q-input .object-num-body.construction .object { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .gclass-q-input .object-num-body.construction .object { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .gclass-q-input .object-num-body.construction .object { font-size: 17px; }
/* .gclass-q-item .gclass-q-input .object-num-body.construction .object:nth-child(n+4) { margin-top: 20px; } */
.gclass-q-item .gclass-q-input .object-num-body .object:last-child { margin-right: 0px; }
.gclass-q-item .gclass-q-input .object-num-body .object>div>div { display: table-cell; vertical-align: middle; }
.gclass-q-item .gclass-q-input .object-num-body .object.selected { color: #fff; background: #369FFF; }
.gclass-q-item .gclass-q-input .object-num-body .object.correct { color: #fff; background: #6CBB24; }
.gclass-q-item .gclass-q-input .object-num-body .object.wrong { color: #fff; background: #D5433E; }
.gclass-q-item .gclass-q-input .object-num-body .object .option_txt { text-align: center; }
.gclass-q-item .gclass-q-input .w-auto { width: auto !important; max-width:300px; }
.gclass-q-item .gclass-q-input .select-body .select { margin-bottom: 10px; }
.gclass-q-item .gclass-q-input .select-body .select:last-child { margin-bottom: 0px; }
.gclass-q-item .gclass-q-input-box { color: #333 !important; border: 1px solid #A0D1FF; border-radius: 4px; padding: 16px; margin-bottom:20px; }
.gclass-q-item .gclass-q-img-body { margin-top:20px; }
/* .gclass-q-item .gclass-q-img-body.img-grammar {background-image: url(/images/grammar_without_frame.jpg);} */
.gclass-q-item .gclass-q-img-body:not(.center) img { width: 240px; background-repeat: no-repeat; right: -280px; height: 190px; }
.gclass-q-item .gclass-q-img-body.center { margin-top:20px; } 
.gclass-q-item .gclass-q-img-body.center img { width: 100% ; height: auto; position: relative; display: inline-block; max-height: 400px; border-radius: 4px; }
.is-mobile .gclass-q-item .gclass-q-img-body.center { margin-top: 20px; height: auto; }
.is-mobile .gclass-q-item .gclass-q-img-body.center img { width: 100%; }
.gclass-q-item .input-lg { height:42px; }
.gclass-q-item .inline-input-body { line-height: 50px; color: #666; font-weight: normal; display: inline-block; }
.gclass-q-item .inline-input-body .tooltip-inner { max-width: 300px; }
.gclass-q-item .inline-input-body input{ font-size: 19px; display: inline-block; width: auto; padding: 0px 12px; height:42px; }
.gclass-q-item .inline-input-body select { font-size: 19px; display: inline-block;  padding:0px 22px 0px 12px;}
.is-mobile .gclass-q-item .inline-input-body input, .is-mobile .gclass-q-item .inline-input-body select { font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .inline-input-body .dictation-input { max-width: 300px; }
.is-mobile.font_size_16 .gclass-q-item .inline-input-body .dictation-input { max-width: 300px; }
.is-mobile.font_size_17 .gclass-q-item .inline-input-body .dictation-input { max-width: 300px; }
.is-mobile.font_size_15 .gclass-q-item .inline-input-body input, .is-mobile.font_size_15 .gclass-q-item .inline-input-body select { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .inline-input-body input, .is-mobile.font_size_16 .gclass-q-item .inline-input-body select { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .inline-input-body input, .is-mobile.font_size_17 .gclass-q-item .inline-input-body select { font-size: 17px; }
.gclass-q-item .select2-container { font-size: 19px; }
.is-mobile .gclass-q-item .select2-container { font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .select2-container { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .select2-container { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .select2-container { font-size: 17px; }
.gclass-q-item .select2-container .select2-selection--single { height: auto; position: relative; top: -2px; min-height: 40px; border-color: #ccc; }
.is-mobile .gclass-q-item .select2-container .select2-selection--single { top: 0px; }
.gclass-q-item .select2-container .select2-selection--single .select2-selection__rendered { line-height: 1; padding: 11px 24px 11px 8px; }
.is-mobile .gclass-q-item .select2-container .select2-selection--single .select2-selection__rendered { padding: 11px 24px 11px 8px; }
.is-mobile.font_size_15 .gclass-q-item .select2-container .select2-selection--single .select2-selection__rendered { padding: 11px 24px 11px 8px; }
.is-mobile.font_size_16 .gclass-q-item .select2-container .select2-selection--single .select2-selection__rendered { padding: 11px 24px 11px 8px; }
.is-mobile.font_size_17 .gclass-q-item .select2-container .select2-selection--single .select2-selection__rendered { padding: 11px 24px 11px 8px; }
.gclass-q-item .select2-container .select2-selection--single .select2-selection__arrow { height: calc(100% - 1px); }
.select2-container--default .select2-results__option--disabled { display: none; }
.select2-container .select2-dropdown { border-color: #ccc; }
.gclass-q-item .inline-input-body select.correct{width:auto}
.gclass-q-item select{padding:0px 12px;  background:url('/images/v2/icon/bottom_arrow.png') no-repeat 97% 50%/25px auto; -webkit-appearance:none; /* for chrome */ -moz-appearance:none; appearance:none; /*for firefox*/ }
.gclass-q-item select:invalid { color: #ccc; }
.gclass-q-item select::-ms-expand{display:none;/*for IE10,11*/}

.is-mobile .gclass-q-item .scramble-info { font-size: 11px; }
.gclass-q-item .scramble-body { border: 1px solid #dadada; border-radius: 4px; padding: 16px 16px 6px 16px; min-height: 67px; position: relative; margin-top:24px; }
.is-mobile .gclass-q-item .scramble-body { min-height: 82px; padding: 14px; }
.gclass-q-item .scramble-body .scramble-word { background: #369FFF; box-sizing: border-box; border-radius: 36px; padding: 4px 20px; margin-right: 8px; margin-bottom: 8px; font-size: 17px; display: inline-block; line-height: 1.4; color:#fff; }
.gclass-q-item .scramble-body .scramble-txt { position: absolute; top:20px; font-size: 19px; color:#C0C0C0; }
.is-mobile .gclass-q-item .scramble-body .scramble-txt { position: absolute; top:15px; font-size: 14px; color:#C0C0C0; }
.is-mobile .gclass-q-item .scramble-body .scramble-word { font-size: 14px; }
.is-mobile.font_size_15 .gclass-q-item .scramble-body .scramble-word { font-size: 15px; }
.is-mobile.font_size_16 .gclass-q-item .scramble-body .scramble-word { font-size: 16px; }
.is-mobile.font_size_17 .gclass-q-item .scramble-body .scramble-word { font-size: 17px; }
.gclass-q-item .scramble-body .scramble-word.correct { background: #78D024; }
.gclass-q-item .scramble-body .scramble-word.wrong { background: #D5433E; }

.gclass-q-item .syntax-brush-body .syntax-options { border: 1px solid #C0C0C0; color: #333; padding: 11px 7px; border-radius: 5px; width: 100px; font-size: 14px; cursor: pointer; vertical-align: middle; text-align: center; display: inline-block; }
.is-mobile .gclass-q-item .syntax-brush-body .cc-table { width: 24%;}
.is-mobile .gclass-q-item .syntax-brush-body .syntax-options { font-size: 13px; width: 100%; min-width:55px; }
.is-mobile.font_size_15 .gclass-q-item .syntax-brush-body .syntax-options { font-size: 14px; }
.is-mobile.font_size_16 .gclass-q-item .syntax-brush-body .syntax-options { font-size: 15px; }
.is-mobile.font_size_17 .gclass-q-item .syntax-brush-body .syntax-options { font-size: 16px; }
.gclass-q-item .syntax-brush-body .syntax-options:nth-of-type(n+9){margin-top: 20px;}
.gclass-q-item .syntax-brush-body .syntax-right-arrow:nth-of-type(n+9){position: relative; top:10px;}
/* .is-mobile .gclass-q-item .syntax-brush-body .syntax-options:nth-of-type(n+7){margin-top: 10px;} */
.is-mobile .gclass-q-item .syntax-brush-body .syntax-right-arrow:nth-of-type(n+7){position: relative; top:3px;}
.gclass-q-item .paragraph-row {padding:10px 10px 10px 20px; border:1px solid #bbb; border-radius:10px;background:#fff; word-break: break-all;}
.gclass-q-item .v-mid { top: 50%; transform: translateY(-50%); position: relative; }
/* .gclass-q-item .change-font-area { margin-left: -90px; width: calc(100% + 90px); } */

#wrapper-test:not(.is-mobile) .gclass-q-item .syntax-right-arrow { font-size: 24px; }

.gclass-q-item .syntax-brush-body .syntax-options.option0 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush0.svg); width: 30px; height: 30px; }
.gclass-q-item .syntax-brush-body .syntax-options.option1 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush1.svg); width: 30px; height: 30px; }
.gclass-q-item .syntax-brush-body .syntax-options.option2 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush2.svg); width: 30px; height: 30px; }
.gclass-q-item .syntax-brush-body .syntax-options.option3 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush3.svg); width: 30px; height: 30px; }
.gclass-q-item .syntax-brush-body .syntax-options.option4 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush4.svg); width: 30px; height: 30px; }
.gclass-q-item .syntax-brush-body .syntax-options.option5 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush5.svg); width: 30px; height: 30px; }
.gclass-q-item .syntax-brush-body .syntax-options.option6 .brush-img { margin: auto; background-image: url(/images/icon/g_syntax_brush6.svg); width: 30px; height: 30px; }

.gclass-q-item .syntax-word-body .option0,
.feedback-desc .option0,
.gclass-q-answer-body .gclass-q-answer-box .option0{ color:#fff; background-color: #D727DB !important; }
.gclass-q-item .syntax-word-body .option1,
.feedback-desc .option1,
.gclass-q-answer-body .gclass-q-answer-box .option1 { color:#fff; background-color: #4DC92E !important; }
.gclass-q-item .syntax-word-body .option2,
.feedback-desc .option2,
.gclass-q-answer-body .gclass-q-answer-box .option2 { color:#fff; background-color: #EECC1A !important; }
.gclass-q-item .syntax-word-body .option3,
.feedback-desc .option3,
.gclass-q-answer-body .gclass-q-answer-box .option3 { color:#fff; background-color: #27D0DB !important; }
.gclass-q-item .syntax-word-body .option4,
.feedback-desc .option4,
.gclass-q-answer-body .gclass-q-answer-box .option4 { color:#fff; background-color: #FF7F0A !important; }
.gclass-q-item .syntax-word-body .option5,
.feedback-desc .option5,
.gclass-q-answer-body .gclass-q-answer-box .option5 { color:#fff; background-color: #929292 !important; }
.gclass-q-item .syntax-word-body .option6,
.feedback-desc .option6,
.gclass-q-answer-body .gclass-q-answer-box .option6 { color:#fff; background-color: #1A62EE !important; }
.feedback-desc .paint-word{
  background: none;
}
.gclass-q-item .syntax-word-body .option0.syntax_find2 { background-color : #369FFF !important; }

.gclass-q-item .syntax-brush-body .syntax-options { background-color: #fff !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option0.active{ background-color: rgba(215, 39, 219, 0.1) !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option1.active{ background-color: rgba(77, 201, 46, 0.1) !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option2.active{ background-color: rgba(238, 204, 26, 0.1) !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option3.active{ background-color: rgba(39, 208, 219, 0.1) !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option4.active{ background-color: rgba(255, 127, 10, 0.1) !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option5.active{ background-color: rgba(146, 146, 146, 0.1) !important; }
.gclass-q-item .syntax-brush-body .syntax-options.option6.active{ background-color: rgba(26, 98, 238, 0.1) !important; }


.gclass-q-item .syntax-word-body { font-size: 18px; line-height: 30px; user-select: none;  margin-top:32px; }
.gclass-q-item .scramble-mean-box .q-mean-body { margin-top:0px; margin-bottom:10px; }
.gclass-q-item .q-mean-body, .wrong-card .q-mean-body  { margin: 20px 0px; color: #777; font-weight: 500; font-size:14px; display: table; }
.gclass-q-item .gclass-q-input-box .q-mean-body { margin: 10px 0px; display: block; }
.gclass-q-item .gclass-q-input-box .q-mean-body>* { display: initial; }
.wrong-card .q-mean-body2, .wrong-table .q-mean-body2 { margin:5px 0px; font-size:11px; display:flex; }
.is-mobile.font_size_15 .gclass-q-item .q-mean-body, .is-mobile.font_size_15 .wrong-card .q-mean-body, .is-mobile.font_size_15 .cell .q-mean-body { font-size: 14px; }
.is-mobile.font_size_16 .gclass-q-item .q-mean-body, .is-mobile.font_size_16 .wrong-card .q-mean-body, .is-mobile.font_size_16 .cell .q-mean-body { font-size: 15px; }
.is-mobile.font_size_17 .gclass-q-item .q-mean-body, .is-mobile.font_size_17 .wrong-card .q-mean-body, .is-mobile.font_size_17 .cell .q-mean-body { font-size: 16px; }
.gclass-q-item .q-mean-body>*, .wrong-card .q-mean-body>*, .cell .q-mean-body>* { display: table-cell; }
.gclass-q-item .q-mean-body .label, .wrong-card .q-mean-body .label {font-size:12px; background-color: #F3F3F3 !important; padding:4px 12px; margin-right:10px; color:#777 !important; }
.wrong-card .q-mean-body2 .label, .wrong-table .q-mean-body2 .label { font-size:11px; background-color: #F3F3F3 !important; padding:4px 12px; margin-right:10px; color:#333 !important; }
.is-mobile.font_size_15 .gclass-q-item .q-mean-body .label, .is-mobile.font_size_15 .wrong-card .q-mean-body .label, .is-mobile.font_size_15 .cell .q-mean-body .label { font-size:12px; }
.is-mobile.font_size_16 .gclass-q-item .q-mean-body .label, .is-mobile.font_size_16 .wrong-card .q-mean-body .label, .is-mobile.font_size_16 .cell .q-mean-body .label { font-size:13px; }
.is-mobile.font_size_17 .gclass-q-item .q-mean-body .label, .is-mobile.font_size_17 .wrong-card .q-mean-body .label, .is-mobile.font_size_17 .cell .q-mean-body .label { font-size:14px; }
.is-mobile .gclass-q-item .syntax-word-body { margin-top: 20px; }
.wrong-card .gclass-q-input-box, .wrong-table .gclass-q-input-box { padding:10px !important; border: 1px dashed #d8d8d8; margin-bottom:10px; }

.gclass-q-item .syntax-word-body .syntax-word, .gclass-q-answer-text .syntax-word  { display:inline-block; padding:1px 5px; border-radius:5px; margin:0px 0px 5px 0px; cursor:pointer; font-size:19px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 160%; background-color: #fff; font-weight:500; }
.gclass-q-answer-text { color:#000; }
.gclass-q-answer-body.is-eg-master .gclass-q-answer-text { color: #FF6159; }
.wrong-card .drill-box.bottom, .gclass-q-item .drill-box.bottom{ margin-top:15px; height: auto; border-radius: 0 0 4px 4px; text-align: left; border: 1px solid #A0D1FF; color: #333; padding: 16px; padding-bottom: 6px; border-radius: 4px; }
.gclass-q-item .gclass-q-input .sentence-tab-box>* {margin-right: 0px;}
.gclass-q-item .gclass-q-input .sentence-tab-box:before, .sentence-tab-box:after { display: table; content: " "; clear: both;}
.gclass-q-item .gclass-q-input .sentence-tab-box>*:first-child { border-radius: 50px 0 0 50px; border-left-color: silver; border-right:0 }
.gclass-q-item .gclass-q-input .sentence-tab-box>*:last-child { border-radius: 0 50px 50px 0; border-right-color: silver; margin-right: 10px; }
.is-mobile .gclass-q-item .drill-box.bottom { padding: 14px; padding-bottom: 4px; height: auto; }
.gclass-q-item .btn-sentence-word{font-size:17px;font-weight:400; padding:4.5px 20px !important; background: #FFFFFF;border: 1px solid #dbdbdb;box-sizing: border-box;border-radius: 36px; margin-bottom:10px; margin-right: 10px;}
.gclass-q-item .btn-sentence-word.selected-color { background: #369FFF; color:#fff; }
.gclass-q-feedback { position: absolute; left:220px;  bottom: 40px; opacity: 0; pointer-events: none; }
.is-mobile .gclass-q-feedback { left: calc(50% - 100px); }
.gclass-q-feedback i { font-size: 200px; opacity: 0.7; display: none; text-shadow: 4px 4px 10px #333; }
.correct .gclass-q-feedback, .wrong .gclass-q-feedback { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-name: bounceIn; animation-name: bounceIn; }
.correct .gclass-q-feedback i:first-child { display: inline;}
.wrong .gclass-q-feedback i:last-child { display: inline;}
.is-mobile .gclass-q-feedback i { display: none !important; }

.wrong-table .btn-sentence-word, .wrong-card .btn-sentence-word { padding:2.5px 10px !important; background: #FFFFFF;border: 1px dashed #dbdbdb;box-sizing: border-box;border-radius: 36px; margin-bottom:10px; margin-right: 10px; font-size:13px; user-select: none; color:#333; }
.wrong-table .sentence-tab-box>*:first-child, .wrong-card .sentence-tab-box>*:first-child { border-radius: 50px 0 0 50px; border-left-color: silver; border-right:0; margin-right:0px; }
.wrong-table .sentence-tab-box>*:last-child, .wrong-card .sentence-tab-box>*:last-child { border-radius: 0 50px 50px 0; border-right-color: silver; margin-right: 10px; }

/* .flip-card[data-type="11"] .flip-card-inner.drill .option0 { background-color: #7f5ac8; color:#fff; }
.flip-card[data-type="11"].prev+.answer-card .option0 { background-color: #7f5ac8; color:#fff; } */
/* .option0.aa {color:#1746C2} */
.view_set .option0.syntax_find2, #user_test_report_modal .paint-word.option0.syntax_find2, .class_score_card .option0.syntax_find2{ color: #7f5ac8 !important; display: inline-block; background-color: transparent; }

.view_set .option0, #user_test_report_modal .paint-word.option0, .class_score_card .option0{ color: #CF5F5B !important; display: inline-block; background-color: transparent; }
.view_set .option1, #user_test_report_modal .paint-word.option1, .class_score_card .option1 { color: #48AC6C !important; display: inline-block; background-color: transparent; }
.view_set .option2, #user_test_report_modal .paint-word.option2, .class_score_card .option2 { color: #FBB329 !important; display: inline-block; background-color: transparent; }
.view_set .option3, #user_test_report_modal .paint-word.option3, .class_score_card .option3 { color: #56B7E1 !important; display: inline-block; background-color: transparent; }
.view_set .option4, #user_test_report_modal .paint-word.option4, .class_score_card .option4 { color: #4385F3 !important; display: inline-block; background-color: transparent; }
.view_set .option5, #user_test_report_modal .paint-word.option5, .class_score_card .option5 { color: #6461FD !important; display: inline-block; background-color: transparent; }
.view_set .option6, #user_test_report_modal .paint-word.option6, .class_score_card .option6 { color: #ff6200 !important; display: inline-block; background-color: transparent; }
.view_set .option7, #user_test_report_modal .paint-word.option7, .class_score_card .option7 { color: #FF45EF !important; display: inline-block; background-color: transparent; }
.view_set .option8, #user_test_report_modal .paint-word.option8, .class_score_card .option8 { color: #747474 !important; display: inline-block; background-color: transparent; }
.view_set .option9, #user_test_report_modal .paint-word.option9, .class_score_card .option9 { color: #C1DF00 !important; display: inline-block; background-color: transparent; }
.view_set .option10, #user_test_report_modal .paint-word.option10, .class_score_card .option10 { color: #660002 !important; display: inline-block; background-color: transparent; }
.view_set .option11, #user_test_report_modal .paint-word.option11, .class_score_card .option11 { color: #01F2FF !important; display: inline-block; background-color: transparent; }
.class_test .flip-card .option0 { background-color: #CF5F5B !important; color:#fff !important; }
.class_test .flip-card .option1 { background-color: #48AC6C !important; color:#fff !important; }
.class_test .flip-card .option2 { background-color: #FBB329 !important; color:#fff !important; }
.class_test .flip-card .option3 { background-color: #56B7E1 !important; color:#fff !important; }
.class_test .flip-card .option4 { background-color: #4385F3 !important; color:#fff !important; }
.class_test .flip-card .option5 { background-color: #6461FD !important; color:#fff !important; }
.class_test .flip-card .option6 { background-color: #ff6200 !important; color:#fff !important; }
.class_test .flip-card .option7 { background-color: #FF45EF !important; color:#fff !important; }
.class_test .flip-card .option8 { background-color: #747474 !important; color:#fff !important; }
.class_test .flip-card .option9 { background-color: #C1DF00 !important; color:#fff !important; }
.class_test .flip-card .option10 { background-color: #660002 !important; color:#fff !important; }
.class_test .flip-card .option11 { background-color: #01F2FF !important; color:#fff !important; }
.class_test .flip-card .option99 {background-color:#d8d8d8}
.syntax-word.option0.syntax_find2 { background-color: #7f5ac8 !important; color:#fff !important; }
.syntax-options.option0, .syntax-word.option0 { background-color: #D727DB !important; color:#fff; }
.syntax-options.option1, .syntax-word.option1 { background-color: #4DC92E !important; color:#fff; }
.syntax-options.option2, .syntax-word.option2 { background-color: #EECC1A !important; color:#fff; }
.syntax-options.option3, .syntax-word.option3 { background-color: #27D0DB !important; color:#fff; }
.syntax-options.option4, .syntax-word.option4 { background-color: #FF7F0A !important; color:#fff; }
.syntax-options.option5, .syntax-word.option5 { background-color: #929292 !important; color:#fff; }
.syntax-options.option6, .syntax-word.option6 { background-color: #1A62EE !important; color:#fff; }
.syntax-options.option7, .syntax-word.option7 { background-color: #FF45EF !important; color:#fff; }
.syntax-options.option8, .syntax-word.option8 { background-color: #747474 !important; color:#fff; }
.syntax-options.option9, .syntax-word.option9 { background-color: #C1DF00 !important; color:#fff; }
.syntax-options.option10, .syntax-word.option10 { background-color: #660002 !important; color:#fff; }
.syntax-options.option11, .syntax-word.option11 { background-color: #01F2FF !important; color:#fff; }
.syntax-options.option99, .syntax-word.option99 { background-color: #d8d8d8 !important; }

.gclass-q-separate { border-bottom: 1px solid #E5E5E5; margin: 64px 0px; }

.gclass-q-dictionary { margin-top: 60px; padding-top:10px; text-align: left; color: #333; font-size: 14px; border-top: 1px solid #dfdfdf; }
.is-mobile .gclass-q-dictionary { margin-top: 40px; font-size: 13px; }
.is-mobile.font_size_15 .gclass-q-dictionary { font-size: 13px; }
.is-mobile.font_size_16 .gclass-q-dictionary { font-size: 14px; }
.is-mobile.font_size_17 .gclass-q-dictionary { font-size: 15px; }
.gclass-q-dictionary .gclass-q-dictionary-item { padding-left: 15px; position: relative; }
.gclass-q-dictionary .gclass-q-dictionary-item::before { content: "•"; position: absolute; left: 4px; }
.gclass-q-dictionary .mean { color: #999;}
.gclass-q-answer-body { margin-top: 20px; text-align: left; }
.gclass-q-answer-body.is-eg-master { margin-top: 32px; }
.gclass-q-answer-body.is-eg-master>div:first-child { display: none; }
.btn-gclass-q-answer { font-size: 15px; font-weight: 700; }
.is-e-grammar .btn-gclass-q-answer { color: #318500 !important; }
.gclass-q-answer-box { margin-top: 14px; background: #f3f3f3; padding: 20px 24px; display: none; pointer-events: none; border-radius: 4px; }
.is-e-grammar .gclass-q-answer-box { background: #D1EFAB; }
.is-e-grammar .gclass-q-answer-body.is-eg-master .gclass-q-answer-box { background: #FFE9E8; font-size: 19px; }
.is-e-grammar img[src="/images/v3/grammar/char_grammar_quest05.svg"] { content: url('/images/v3/grammar/char_grammar_quest09.svg'); }
.is-e-grammar .gclass-q-charactor.check-wrong img[src="/images/v3/grammar/char_grammar_quest05.svg"] { content: url('/images/v3/grammar/char_grammar_quest14.svg'); }


.letter-7 { letter-spacing: -0.7px }

/* .cc-input { position: relative; }
.cc-input::after { position: absolute; left: 13px; top: 0px; content: attr(data-placeholder); pointer-events: none; opacity: 0.4; overflow: hidden; height: 40px; }
.cc-input.lg::after { left: 17px; top: 11px; } */
/* .inline-input-body:hover .cc-input::after{ visibility: visible; }
.cc-input::after { border-radius:4px; background:#eee; font-size:18px; position: absolute; top:4px; left:1px; bottom:4px; content: attr(data-aa); pointer-events: none; overflow: hidden; visibility: hidden; padding-left:10px; width:calc(100% - 2px);} */

.new-footer-body { border-top: 1px solid #ebebeb; padding-top: 75px; padding-bottom: 40px; }
.new-footer-body .title1 { font-size: 13px; line-height: 160%; color: #555555; }
.new-footer-body .title2 { font-size: 13px; line-height: 100%; color: #A0A0A0; margin-top: 12px; }
.new-footer-body .title3 { font-size: 15px; line-height: 160%; color: #555555; }
.new-footer-body .title3 span { vertical-align: middle; margin-left: 7px; }
.new-footer-body .title4 { font-size: 14px; line-height: 100%; color: #A0A0A0; }
.new-footer-body .title5 { font-size: 15px; line-height: 100%; color: #555555; }
.new-footer-body .title6 { font-size: 12px; line-height: 100%; color: #555555; margin-top: 50px; text-align: center; }

i.cc2.class_normal_f, i.cc2.class_grammar_f, i.cc2.cls_n, i.cc2.cls_p, i.cc2.cls_g, i.cc2.cls_l  { opacity: 0.75; }

.line-160p { line-height: 160%; }

.ico-svg { filter: invert(16%) sepia(1%) saturate(0%) hue-rotate(3deg) brightness(96%) contrast(87%); }
.ico-svg.h666 { filter: invert(37%) sepia(0%) saturate(0%) hue-rotate(174deg) brightness(101%) contrast(82%); }
.ico-svg.h777 { filter: invert(48%) sepia(0%) saturate(0%) hue-rotate(354deg) brightness(96%) contrast(84%); }
.ico-svg.h888 { filter: invert(54%) sepia(10%) saturate(0%) hue-rotate(279deg) brightness(97%) contrast(99%); }
.ico-svg.h999 { filter: invert(63%) sepia(0%) saturate(0%) hue-rotate(63deg) brightness(96%) contrast(89%); }
.ico-svg.haaa { filter: invert(78%) sepia(0%) saturate(150%) hue-rotate(246deg) brightness(90%) contrast(84%); }
.ico-svg.hbbb { filter: invert(82%) sepia(6%) saturate(0%) hue-rotate(186deg) brightness(90%) contrast(93%); }
.ico-svg.hccc { filter: invert(100%) sepia(0%) saturate(723%) hue-rotate(258deg) brightness(83%) contrast(90%); }
.ico-svg.hddd { filter: invert(98%) sepia(0%) saturate(812%) hue-rotate(242deg) brightness(110%) contrast(73%); }
.ico-svg.heee { filter: invert(91%) sepia(86%) saturate(32%) hue-rotate(166deg) brightness(115%) contrast(87%); }
.ico-svg.hfff { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(100deg) brightness(102%) contrast(107%); }
.ico-svg.primary { filter: invert(42%) sepia(15%) saturate(1968%) hue-rotate(219deg) brightness(97%) contrast(101%); }
.ico-svg.success { filter: invert(60%) sepia(51%) saturate(623%) hue-rotate(48deg) brightness(106%) contrast(95%); }
.ico-svg.success2 { filter: invert(37%) sepia(37%) saturate(6224%) hue-rotate(71deg) brightness(95%) contrast(103%); }
.ico-svg.info { filter: invert(46%) sepia(94%) saturate(2257%) hue-rotate(169deg) brightness(93%) contrast(101%); }
.ico-svg.danger { filter: invert(29%) sepia(78%) saturate(1041%) hue-rotate(322deg) brightness(104%) contrast(85%); }
.ico-svg.danger3 { filter: invert(48%) sepia(30%) saturate(1178%) hue-rotate(314deg) brightness(103%) contrast(106%); }
.ico-svg.warning { filter: invert(81%) sepia(78%) saturate(2459%) hue-rotate(334deg) brightness(103%) contrast(101%); }
.ico-svg.gclass { filter: invert(53%) sepia(66%) saturate(2634%) hue-rotate(188deg) brightness(102%) contrast(104%); }

.inline-box.form-control {width:auto; padding:0px; font-size: inherit; border: none;}
.inline-box.form-control[disabled], .inline-box.form-control[readonly] { background: #fff; pointer-events: none;}
.inline-box.form-control[disabled] .hint-box, .inline-box.form-control[disabled] .option-item, .inline-box.form-control[readonly] .hint-box, .inline-box.form-control[disabled] .option-item { background: #eee; }
.gclass-q-input .inline-box { display: inline-block; margin: 0px 3px; height: 50px; }
.gclass-q-input .inline-box .hint-box { display: inline-block; padding:0px 36px;border:1px solid #7E5AC7; border-radius:4px; line-height:40px; background: #7E5AC7; color: #fff; }
.gclass-q-input .inline-box .option-box { display: inline-block; }
.gclass-q-input .inline-box .option-box .option-item  { display: inline-block; line-height:40px; padding:0px 12px; }

.gclass-q-input .inline-box .option-box .option-item.active {background-color: #369FFF; color:#fff}
.gclass-q-input .inline-box .option-box .option-item:not(.hidden):first-child {border: 1px solid #ccc; border-radius: 4px 0px 0px 4px;}
.gclass-q-input .inline-box .option-box .option-item:not(.hidden):last-child {border: 1px solid #ccc;border-left-width: 0px;border-radius: 0px 4px 4px 0px;}
.gclass-q-input .inline-box .option-box .option-item.selected:not(.active) { border-radius: 4px !important; border-width: 1px !important; }
.gclass-q-input .inline-box .option-box .option-item.selected { border-color: #7E5AC7 !important; }
.gclass-q-input .inline-box .option-box .option-item.active { border-color: #ccc !important;}

.gclass-q-input .inline-box.wrong .hint-box, .gclass-q-input .inline-box.wrong .option-item.selected { border-color: #D5433E !important; outline: none; } 
.gclass-q-input .inline-box.correct .hint-box, .gclass-q-input .inline-box.correct .option-item.selected { border-color: #78D024 !important; outline: none; }


.gclass-q-item .match-content { width: 100%; position: relative; }
.gclass-q-item .match-content .match-body { float: left; width: 50%; }
.gclass-q-item .match-content .match-body.left { padding-right: 4px; }
.gclass-q-item .match-content .match-body.right { padding-left: 4px; }
.gclass-q-item .match-content .match-body .match-item { width: 100%; height: 102px; color: #333; font-size: 17px; font-weight: 700; line-height: 140%; margin-bottom: 8px; background: #FFFFFF; border: 1px solid #DBDBDB; border-radius: 4px; overflow: hidden; text-align: center; padding: 8px 12px; cursor: pointer; }
.gclass-q-item .match-content .match-body .match-item.end { cursor: default; }
.gclass-q-item .match-content .match-body .match-item:last-child { margin-bottom: 0px; }
.gclass-q-item .match-content .match-body .match-item.selected { color: #fff; }
.gclass-q-item .match-content .match-body .match-item.s0 { background: #369FFF; border-color: #369FFF; }
.gclass-q-item .match-content .match-body .match-item.s1 { background: #78D024; border-color: #78D024; }
.gclass-q-item .match-content .match-body .match-item.s2 { background: #FBB329; border-color: #FBB329; }
.gclass-q-item .match-content .match-body .match-item.s3 { background: #7E5AC7; border-color: #7E5AC7; }
.gclass-q-item .match-content .match-body .match-item.s4 { background: #E9B7EF; border-color: #E9B7EF; }
.gclass-q-item .match-content .match-body .match-item>div { width: 100%; height: 100%; overflow: hidden; position: relative; }
.gclass-q-item .match-content .match-body .match-item>div>div { position: relative; }
.gclass-q-item .match-content .match-body .match-item img { position: absolute; height: 100%; top: 0px; left: calc(50% - 42px); opacity: 0.5; display: none; }
.gclass-q-item .match-content .match-body .match-item.correct img.correct { display: block; }
.gclass-q-item .match-content .match-body .match-item.wrong img.wrong { display: block; }

.gclass-q-item .grouping-body .grouping-item { display: table; width: 100%; height: 60px; font-size: 19px; font-weight: 600; line-height: 32px; border-top: 1px dashed #DBDBDB; }
.gclass-q-item .grouping-body .grouping-item .radio-button label {font-size:15px; padding: 4px 6px;}
.gclass-q-item .grouping-body .grouping-item:first-child { border-top-color: transparent; }
.gclass-q-item .grouping-body .grouping-item>div { display: table-cell; vertical-align: middle; }
.gclass-q-item .grouping-body .grouping-item .radio-button { display: inline-block; }
.gclass-q-item .grouping-body .grouping-item .ico-svg { display: none; width: 20px; margin-right: 6px; }
.gclass-q-item .grouping-body .grouping-item .ico-body { width: 0px; }
.gclass-q-item .grouping-body .grouping-item.correct .ico-body, .gclass-q-item .grouping-body .grouping-item.wrong .ico-body { width: 26px; }
.gclass-q-item .grouping-body .grouping-item.correct .ico-svg.correct, .gclass-q-item .grouping-body .grouping-item.wrong .ico-svg.wrong { display: inline; }

.radio-button input[type="radio"] { width: 0; height: 0; opacity: 0; margin-left: -4px; }
.radio-button label { font-size: 16px; font-weight: 500; line-height: 160%; text-align: center; border: 1px solid #DBDBDB; border-radius: 100px; margin: 0px; padding: 4px 16px; cursor: pointer; }
.radio-button input[type="radio"]:checked + label { background: #369FFF; border-color: #369FFF; color: #fff; }

.eg-suggest-word-body { position: relative; margin-bottom: 20px; border: 1px dashed #A0D1FF; border-radius: 4px; padding: 16px 16px 8px; }
.eg-suggest-word-body::after { position: absolute; left: 15px; top: -10px; background: #fff; display: block; content: "보기"; color: #369FFF; font-weight: 700; font-size: 12px; line-height: 100%; padding: 4px 8px; }
.eg-suggest-word-body .eg-suggest-word { display: inline-block; padding: 9px 20px; border-radius: 35px; background: #369FFF; color: #fff; line-height: 100%; font-size: 17px; font-weight: 500; margin-right: 8px; margin-bottom: 8px; }
.eg-suggest-word-body .eg-suggest-word.active { background: #369FFF; }

.wrong-card .eg-suggest-word-body::after, .wrong-table .eg-suggest-word-body::after { padding: 0px; font-size:0px; }
.wrong-card .eg-suggest-word-body, .wrong-table .eg-suggest-word-body { padding: 0px; border: none; margin-bottom:10px; }
.wrong-card .eg-suggest-word, .wrong-table .eg-suggest-word { font-size:12px; padding:6px 13px; color:#333; background-color: #f3f3f3; }

.direction-box { position: relative; border: 1px solid #A0D1FF; border-radius: 4px; padding: 16px; font-size: 17px; font-weight: 700; line-height: 150%; }
.is-mobile.font_size_15 .direction-box { font-size: 17px; }
.is-mobile.font_size_16 .direction-box { font-size: 18px; }
.is-mobile.font_size_17 .direction-box { font-size: 19px; }
.direction-box::after { position: absolute; left: 15px; top: -11px; background: #fff; padding: 4px 8px; content: "문법 규칙"; font-size: 12px; font-weight: 700; line-height: 100%; color: #369FFF; }
.is-mobile.font_size_15 .direction-box::after { font-size: 12px; }
.is-mobile.font_size_16 .direction-box::after { font-size: 13px; }
.is-mobile.font_size_17 .direction-box::after { font-size: 14px; }
.direction-box.manual::after { content: attr(data-text); }
.rules-input-body { font-size: 32px; line-height: 2.2; }
.is-mobile .rules-input-body { font-size: 20px; line-height: 2.5; }
.is-mobile.font_size_15 .rules-input-body { font-size: 20px; }
.is-mobile.font_size_16 .rules-input-body { font-size: 21px; }
.is-mobile.font_size_17 .rules-input-body { font-size: 22px; }
.rules-items .rules-item { height: 43px; margin-bottom: 16px; }
.rules-items .rules-item.speak { margin-bottom: 8px; }
.rules-item .rules-btn { width: 110px; vertical-align: top; }
.is-mobile .rules-item .rules-btn { width: 40px; }
.rules-item .rules-icon { width: 20px; }
.rules-item .rules-sentence .front { font-size: 19px; font-weight: 700; line-height: 230%; border-radius: 4px; padding: 7px 8px 9px; }
.is-mobile.font_size_15 .rules-item .rules-sentence .front { font-size: 19px; }
.is-mobile.font_size_16 .rules-item .rules-sentence .front { font-size: 20px; padding: 6.5px 8px 8px; }
.is-mobile.font_size_17 .rules-item .rules-sentence .front { font-size: 21px; padding: 6px 8px 7.5px; }
.rules-item .rules-sentence .back { font-size: 14px; font-weight: 500; line-height: 100%; border-radius: 4px; padding: 11px 8px 12px; color: #666; display: none; }
.is-mobile.font_size_15 .rules-item .rules-sentence .back { font-size: 14px; }
.is-mobile.font_size_16 .rules-item .rules-sentence .back { font-size: 15px; padding: 10.5px 8px 11px; }
.is-mobile.font_size_17 .rules-item .rules-sentence .back { font-size: 16px; padding: 10px 8px 10.5px; }
.rules-item .rules-sentence .unscramble-body { display: none; font-size: 0px; word-break: break-word; }
.rules-item.speak .rules-sentence .front, .rules-item.blind .rules-sentence .front { display: none; }
.rules-item.speak .rules-sentence .unscramble-body, .rules-item.blind .rules-sentence .back { display: inline; }
.rules-item .rules-sentence .unscramble-body .unscramble-item { display: inline-block; color: #333; font-size: 19px; font-weight: 700; line-height: 100%; border-radius: 4px; padding: 10px 8px 11px; background: #fff; border: 1px solid #DBDBDB; transition: all 0.15s ease; margin-right: 8px; margin-bottom: 8px; cursor: pointer; }
.is-mobile.font_size_15 .rules-item .rules-sentence .unscramble-body .unscramble-item { font-size: 19px; }
.is-mobile.font_size_16 .rules-item .rules-sentence .unscramble-body .unscramble-item { font-size: 20px; padding: 10px 8px 10px; }
.is-mobile.font_size_17 .rules-item .rules-sentence .unscramble-body .unscramble-item { font-size: 21px; padding: 9.5px 8px 9.5px; }
.rules-item .rules-sentence .unscramble-body .unscramble-reset { font-size: 20px; padding: 6px; vertical-align: sub; color: #369FFF; }
.rules-item .rules-sentence .unscramble-body .unscramble-item.clicked { color: #fff; background: #369FFF; border-color: #369FFF; }
.rules-item .rules-sentence .unscramble-body .unscramble-item.wrong { color: #fff; background: #FF6159; border-color: #FF6159; }

.eg-card-body { font-size: 0px; margin-right: -30px; }
.is-mobile .eg-card-body { margin-right: -8px; }
.eg-card-body .eg-card { width: 33.333%; display: inline-block; text-align: center; vertical-align: top; padding-right: 30px; padding-bottom: 32px; position: relative; user-select: none; }
.is-mobile .eg-card-body .eg-card { width: 50%; padding-right: 8px; padding-bottom: 16px; }
.eg-card-body:not(.hold) .eg-card { cursor: pointer; }
.eg-card-body .eg-card.not-yet { cursor: default !important; opacity: 0.3; }
.eg-card-body .eg-card.not-yet .eg-card-front .txt { visibility: hidden; }
/* .eg-card-body .eg-card:not(.not-yet):not(.flip):not(.end) .eg-card-front .cc-table { border: 2px solid #369FFF; border-radius: 4px; }
.eg-card-body .eg-card:not(.not-yet):not(.flip):not(.end) .eg-card-front img { border: 2px solid #369FFF; border-radius: 4px; } */
/* .gtest-history .eg-card-body .eg-card:not(.not-yet):not(.flip):not(.end) .eg-card-front .cc-table { border-width: 0px !important; }
.gtest-history .eg-card-body .eg-card:not(.not-yet):not(.flip):not(.end) .eg-card-front img { border-width: 0px !important; } */
.eg-card-body .eg-card>div { position: relative; }
.eg-card-body .eg-card>div>div { position: relative; transition: all 0.3s; z-index: 2; }
.eg-card-body .eg-card .eg-card-back { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 1; }
.eg-card-body .eg-card .eg-card-front img { width: 100%; height: 135px; object-fit: contain; border-radius: 4px; }
.eg-card-body .eg-card .eg-card-front .txt { margin-top: 12px; font-size: 16px; font-weight: 700; line-height: 1; }
.is-mobile.font_size_15 .eg-card-body .eg-card .eg-card-front .txt { font-size: 16px; }
.is-mobile.font_size_16 .eg-card-body .eg-card .eg-card-front .txt { font-size: 17px; }
.is-mobile.font_size_17 .eg-card-body .eg-card .eg-card-front .txt { font-size: 18px; }
.eg-card-body .eg-card.flip .eg-card-back { opacity: 1; z-index: 3; }
@media (hover: hover) {
  .eg-card-body .eg-card.flip.end:hover .eg-card-back { opacity: 0; z-index: 1; }
}
#wrapper-test.is-mobile .eg-card-body .eg-card.flip.end:hover .eg-card-back { opacity: 1; z-index: 3; }
.eg-card-body .eg-card>div>div .cc-table { width: 100%; height: 136px; }
.eg-card-body .eg-card .eg-card-back .cc-table { background: rgba(54, 159, 255, 0.95); color: #fff; border-radius: 4px; font-size: 20px; font-weight: 700; line-height: 1.4; }
.is-mobile.font_size_15 .eg-card-body .eg-card .eg-card-back .cc-table { font-size: 20px; }
.is-mobile.font_size_16 .eg-card-body .eg-card .eg-card-back .cc-table { font-size: 21px; }
.is-mobile.font_size_17 .eg-card-body .eg-card .eg-card-back .cc-table { font-size: 22px; }
.eg-card-body .eg-card .eg-card-back .audio-box .cc-table { background: transparent; }
.eg-card-body .eg-card .eg-card-back .icn { position: absolute; left: 10px; top: 10px; }
.eg-card-body .eg-card .eg-card-back .audio-box { display: none; position: absolute; left: 0; top: 0; right: 0; }
.eg-card-body .eg-card .eg-card-back.audio .audio-box { display: block; }
.eg-card-body .eg-card .eg-card-back .prog-body { position: absolute; left: 10px; right: 10px; top: 121px; height: 4px; background: rgba(255, 255, 255, 0.31); border-radius: 4px; overflow: hidden; }
.eg-card-body .eg-card .eg-card-back .prog-body .prog { position: relative; height: 100%; width: 0%; background: #fff; border-radius: 4px; transition: all 0.1s ease; }
.input-rules { color:#369FFF; }

.test-layer.bottom .syntax-word {  display: inline-block; padding: 3px 5px; margin: 0px; border-radius: 4px; cursor: pointer; font-size: 13px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 160%;}


:root {
  --text-danger: #FF6159;
}


.checkbox.v2 label { font-weight:600; color:#777; font-size:12px; padding-left:5px; }
.checkbox.v2 label::before { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 2px 2px 1px rgb(0 0 0 / 10%); background: #F3F3F3; border: 1px solid #C0C0C0; }
.checkbox.v2 label::after { width: 18px; height: 18px; border-radius:4px; }
.checkbox.v2 input[type="checkbox"]:checked + label::after { content:' '; background-image:url('/images/icon/check_sm.png'); background-repeat: no-repeat; background-position-x:3px; background-position-y:4px; }

.switch-button.sm label:before { min-height:20px; width:36px; left:-2px; }
.switch-button.sm label:after { left:1px; }
.switch-button.sm input:checked + label:after { -webkit-transform: translateX(14px); -ms-transform: translateX(14px); transform: translateX(14px); }
.switch-button.sm label { padding-left: 38px; font-size:14px; font-weight:800; height:20px; color:#292929; }


#wrapper-learn .start-opt-popup-guide, .retry-layer .start-opt-popup-guide { text-align:left; display: block; left: 105%; top: 3%; background: #7E5AC7; color: #fff; border: none; padding: 12px; width: 250px; position: absolute; z-index: 1000; float: left; font-size: 12px; font-weight: 700; list-style: none; border-radius: 5px; box-shadow: 0 6px 12px rgba(0,0,0,.175); line-height: 18px; }
.retry-layer .start-opt-popup-guide { left: 103%; }
#wrapper-learn .start-opt-popup-guide:before, .retry-layer .start-opt-popup-guide:before { content: ""; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; top: 20%; left: -10px; border-width: 10px 10px 10px 0px; border-right-color: #7E5AC7; }

.paragraph .dev2-body, .speaking_word .dev2-body, .memorize .dev2-body, .recall .dev2-body, .spell .dev2-body { position: fixed; top: 0; left: 0; right: 0; z-index: 1; opacity: 0.7; display: none; }

.start-opt-body .start-opt-box .completed-body, .quiz-start-div .completed-body { position: absolute; left: -35px; top: -35px; }

.border-w-sm { border-width:1.5px; }

.modal.v2 .modal-content { border-radius: 20px; overflow: hidden; }
.modal.v2 .modal-header { font-weight: 500; font-size: 20px; line-height: 100%; padding: 12px 24px; }
.modal.v2.success .modal-header { background: #78D024; }
.modal.v2 .modal-header .header-title { text-align: center; }
.modal.v2 .modal-body { padding: 24px; }

.row2 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row2 > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

.col { flex: 1 0 0%; }
.row2-cols-auto > * { flex: 0 0 auto; width: auto; }
.row2-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row2-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row2-cols-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
.row2-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row2-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row2-cols-6 > * { flex: 0 0 auto; width: 16.6666666667%; }
.row2-cols-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
.row2-cols-8 > * { flex: 0 0 auto; width: 12.5%; }
.row2-cols-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
.row2-cols-10 > * { flex: 0 0 auto; width: 10%; }
.row2-cols-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
.row2-cols-12 > * { flex: 0 0 auto; width: 8.3333333333%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.offset-1 { margin-left: 8.33333333%; }
.offset-2 { margin-left: 16.66666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.33333333%; }
.offset-5 { margin-left: 41.66666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.33333333%; }
.offset-8 { margin-left: 66.66666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.33333333%; }
.offset-11 { margin-left: 91.66666667%; }
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-1, .gy-1 { --bs-gutter-y: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-2, .gy-2 { --bs-gutter-y: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-3, .gy-3 { --bs-gutter-y: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }
.g-5, .gy-5 { --bs-gutter-y: 3rem; }

@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .row2-cols-sm-auto > * {flex: 0 0 auto; width: auto; }
  .row2-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
  .row2-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
  .row2-cols-sm-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
  .row2-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
  .row2-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
  .row2-cols-sm-6 > * { flex: 0 0 auto; width: 16.6666666667%; }
  .row2-cols-sm-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
  .row2-cols-sm-8 > * { flex: 0 0 auto; width: 12.5%; }
  .row2-cols-sm-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
  .row2-cols-sm-10 > * { flex: 0 0 auto; width: 10%; }
  .row2-cols-sm-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
  .row2-cols-sm-12 > * { flex: 0 0 auto; width: 8.3333333333%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
  .offset-sm-0 { margin-left: 0; }
  .offset-sm-1 { margin-left: 8.33333333%; }
  .offset-sm-2 { margin-left: 16.66666667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.33333333%; }
  .offset-sm-5 { margin-left: 41.66666667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.33333333%; }
  .offset-sm-8 { margin-left: 66.66666667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.33333333%; }
  .offset-sm-11 { margin-left: 91.66666667%; }
  .g-sm-0, .gx-sm-0 { --bs-gutter-x: 0; }
  .g-sm-0, .gy-sm-0 { --bs-gutter-y: 0; }
  .g-sm-1, .gx-sm-1 { --bs-gutter-x: 0.25rem; }
  .g-sm-1, .gy-sm-1 { --bs-gutter-y: 0.25rem; }
  .g-sm-2, .gx-sm-2 { --bs-gutter-x: 0.5rem; }
  .g-sm-2, .gy-sm-2 { --bs-gutter-y: 0.5rem; }
  .g-sm-3, .gx-sm-3 { --bs-gutter-x: 1rem; }
  .g-sm-3, .gy-sm-3 { --bs-gutter-y: 1rem; }
  .g-sm-4, .gx-sm-4 { --bs-gutter-x: 1.5rem; }
  .g-sm-4, .gy-sm-4 { --bs-gutter-y: 1.5rem; }
  .g-sm-5, .gx-sm-5 { --bs-gutter-x: 3rem; }
  .g-sm-5, .gy-sm-5 { --bs-gutter-y: 3rem; }
}
@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .row2-cols-md-auto > * { flex: 0 0 auto; width: auto; }
  .row2-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row2-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row2-cols-md-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
  .row2-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
  .row2-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
  .row2-cols-md-6 > * { flex: 0 0 auto; width: 16.6666666667%; }
  .row2-cols-md-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
  .row2-cols-md-8 > * { flex: 0 0 auto; width: 12.5%; }
  .row2-cols-md-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
  .row2-cols-md-10 > * { flex: 0 0 auto; width: 10%; }
  .row2-cols-md-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
  .row2-cols-md-12 > * { flex: 0 0 auto; width: 8.3333333333%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .offset-md-0 { margin-left: 0; }
  .offset-md-1 { margin-left: 8.33333333%; }
  .offset-md-2 { margin-left: 16.66666667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.33333333%; }
  .offset-md-5 { margin-left: 41.66666667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.33333333%; }
  .offset-md-8 { margin-left: 66.66666667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.33333333%; }
  .offset-md-11 { margin-left: 91.66666667%; }
  .g-md-0, .gx-md-0 { --bs-gutter-x: 0; }
  .g-md-0, .gy-md-0 { --bs-gutter-y: 0; }
  .g-md-1, .gx-md-1 { --bs-gutter-x: 0.25rem; }
  .g-md-1, .gy-md-1 { --bs-gutter-y: 0.25rem; }
  .g-md-2, .gx-md-2 { --bs-gutter-x: 0.5rem; }
  .g-md-2, .gy-md-2 { --bs-gutter-y: 0.5rem; }
  .g-md-3, .gx-md-3 { --bs-gutter-x: 1rem; }
  .g-md-3, .gy-md-3 { --bs-gutter-y: 1rem; }
  .g-md-4, .gx-md-4 { --bs-gutter-x: 1.5rem; }
  .g-md-4, .gy-md-4 { --bs-gutter-y: 1.5rem; }
  .g-md-5, .gx-md-5 { --bs-gutter-x: 3rem; }
  .g-md-5, .gy-md-5 { --bs-gutter-y: 3rem; }
}
@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .row2-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
  .row2-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
  .row2-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
  .row2-cols-lg-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
  .row2-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
  .row2-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
  .row2-cols-lg-6 > * { flex: 0 0 auto; width: 16.6666666667%; }
  .row2-cols-lg-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
  .row2-cols-lg-8 > * { flex: 0 0 auto; width: 12.5%; }
  .row2-cols-lg-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
  .row2-cols-lg-10 > * { flex: 0 0 auto; width: 10%; }
  .row2-cols-lg-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
  .row2-cols-lg-12 > * { flex: 0 0 auto; width: 8.3333333333%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .offset-lg-0 { margin-left: 0; }
  .offset-lg-1 { margin-left: 8.33333333%; }
  .offset-lg-2 { margin-left: 16.66666667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.33333333%; }
  .offset-lg-5 { margin-left: 41.66666667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.33333333%; }
  .offset-lg-8 { margin-left: 66.66666667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.33333333%; }
  .offset-lg-11 { margin-left: 91.66666667%; }
  .g-lg-0, .gx-lg-0 { --bs-gutter-x: 0; }
  .g-lg-0, .gy-lg-0 { --bs-gutter-y: 0; }
  .g-lg-1, .gx-lg-1 { --bs-gutter-x: 0.25rem; }
  .g-lg-1, .gy-lg-1 { --bs-gutter-y: 0.25rem; }
  .g-lg-2, .gx-lg-2 { --bs-gutter-x: 0.5rem; }
  .g-lg-2, .gy-lg-2 { --bs-gutter-y: 0.5rem; }
  .g-lg-3, .gx-lg-3 { --bs-gutter-x: 1rem; }
  .g-lg-3, .gy-lg-3 { --bs-gutter-y: 1rem; }
  .g-lg-4, .gx-lg-4 { --bs-gutter-x: 1.5rem; }
  .g-lg-4, .gy-lg-4 { --bs-gutter-y: 1.5rem; }
  .g-lg-5, .gx-lg-5 { --bs-gutter-x: 3rem; }
  .g-lg-5, .gy-lg-5 { --bs-gutter-y: 3rem; }
}
@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .row2-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
  .row2-cols-xl-1 > * { flex: 0 0 auto; width: 100%; }
  .row2-cols-xl-2 > * { flex: 0 0 auto; width: 50%; }
  .row2-cols-xl-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
  .row2-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
  .row2-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
  .row2-cols-xl-6 > * { flex: 0 0 auto; width: 16.6666666667%; }
  .row2-cols-xl-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
  .row2-cols-xl-8 > * { flex: 0 0 auto; width: 12.5%; }
  .row2-cols-xl-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
  .row2-cols-xl-10 > * { flex: 0 0 auto; width: 10%; }
  .row2-cols-xl-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
  .row2-cols-xl-12 > * { flex: 0 0 auto; width: 8.3333333333%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
  .offset-xl-0 { margin-left: 0; }
  .offset-xl-1 { margin-left: 8.33333333%; }
  .offset-xl-2 { margin-left: 16.66666667%; }
  .offset-xl-3 { margin-left: 25%; }
  .offset-xl-4 { margin-left: 33.33333333%; }
  .offset-xl-5 { margin-left: 41.66666667%; }
  .offset-xl-6 { margin-left: 50%; }
  .offset-xl-7 { margin-left: 58.33333333%; }
  .offset-xl-8 { margin-left: 66.66666667%; }
  .offset-xl-9 { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.33333333%; }
  .offset-xl-11 { margin-left: 91.66666667%; }
  .g-xl-0, .gx-xl-0 { --bs-gutter-x: 0; }
  .g-xl-0, .gy-xl-0 { --bs-gutter-y: 0; }
  .g-xl-1, .gx-xl-1 { --bs-gutter-x: 0.25rem; }
  .g-xl-1, .gy-xl-1 { --bs-gutter-y: 0.25rem; }
  .g-xl-2, .gx-xl-2 { --bs-gutter-x: 0.5rem; }
  .g-xl-2, .gy-xl-2 { --bs-gutter-y: 0.5rem; }
  .g-xl-3, .gx-xl-3 { --bs-gutter-x: 1rem; }
  .g-xl-3, .gy-xl-3 { --bs-gutter-y: 1rem; }
  .g-xl-4, .gx-xl-4 { --bs-gutter-x: 1.5rem; }
  .g-xl-4, .gy-xl-4 { --bs-gutter-y: 1.5rem; }
  .g-xl-5, .gx-xl-5 { --bs-gutter-x: 3rem; }
  .g-xl-5, .gy-xl-5 { --bs-gutter-y: 3rem;}
}
@media (min-width: 1400px) {
  .col-xxl { flex: 1 0 0%; }
  .row2-cols-xxl-auto > * { flex: 0 0 auto; width: auto; }
  .row2-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; }
  .row2-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; }
  .row2-cols-xxl-3 > * { flex: 0 0 auto; width: 33.3333333333%; }
  .row2-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; }
  .row2-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; }
  .row2-cols-xxl-6 > * { flex: 0 0 auto; width: 16.6666666667%; }
  .row2-cols-xxl-7 > * { flex: 0 0 auto; width: 14.2857142857%; }
  .row2-cols-xxl-8 > * { flex: 0 0 auto; width: 12.5%; }
  .row2-cols-xxl-9 > * { flex: 0 0 auto; width: 11.1111111111%; }
  .row2-cols-xxl-10 > * { flex: 0 0 auto; width: 10%; }
  .row2-cols-xxl-11 > * { flex: 0 0 auto; width: 9.0909090909%; }
  .row2-cols-xxl-12 > * { flex: 0 0 auto; width: 8.3333333333%; }
  .col-xxl-auto { flex: 0 0 auto; width: auto; }
  .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; }
  .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; }
  .col-xxl-3 { flex: 0 0 auto; width: 25%; }
  .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; }
  .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; }
  .col-xxl-6 { flex: 0 0 auto; width: 50%; }
  .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; }
  .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; }
  .col-xxl-9 { flex: 0 0 auto; width: 75%; }
  .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; }
  .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; }
  .col-xxl-12 { flex: 0 0 auto; width: 100%; }
  .offset-xxl-0 { margin-left: 0; }
  .offset-xxl-1 { margin-left: 8.33333333%; }
  .offset-xxl-2 { margin-left: 16.66666667%; }
  .offset-xxl-3 { margin-left: 25%; }
  .offset-xxl-4 { margin-left: 33.33333333%; }
  .offset-xxl-5 { margin-left: 41.66666667%; }
  .offset-xxl-6 { margin-left: 50%; }
  .offset-xxl-7 { margin-left: 58.33333333%; }
  .offset-xxl-8 { margin-left: 66.66666667%; }
  .offset-xxl-9 { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.33333333%; }
  .offset-xxl-11 { margin-left: 91.66666667%; }
  .g-xxl-0, .gx-xxl-0 { --bs-gutter-x: 0; }
  .g-xxl-0, .gy-xxl-0 { --bs-gutter-y: 0; }
  .g-xxl-1, .gx-xxl-1 { --bs-gutter-x: 0.25rem; }
  .g-xxl-1, .gy-xxl-1 { --bs-gutter-y: 0.25rem; }
  .g-xxl-2, .gx-xxl-2 { --bs-gutter-x: 0.5rem; }
  .g-xxl-2, .gy-xxl-2 { --bs-gutter-y: 0.5rem; }
  .g-xxl-3, .gx-xxl-3 { --bs-gutter-x: 1rem; }
  .g-xxl-3, .gy-xxl-3 { --bs-gutter-y: 1rem; }
  .g-xxl-4, .gx-xxl-4 { --bs-gutter-x: 1.5rem; }
  .g-xxl-4, .gy-xxl-4 { --bs-gutter-y: 1.5rem; }
  .g-xxl-5, .gx-xxl-5 { --bs-gutter-x: 3rem; }
  .g-xxl-5, .gy-xxl-5 { --bs-gutter-y: 3rem; }
}

.main-customer-group{
  border-radius: 50px; 
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
  background: #8F73C9; 
  padding:0px 24px;
  font-size: 18px;
  font-weight: 700;
  color:#fff;
  position: relative;
}
.main-customer-group.grammar{
  background: #369FFF;
}
.main-customer-group > a {
  padding:16px 8px;
  display: inline-block;
}

.main-customer-group .tooltip { position: absolute; right: 110%; bottom: 0px; background: rgba(127, 90, 200, 0.94); color: #fff; border-radius: 12px; opacity: 1; padding: 25px; font-size: 26px; font-weight: 300; display: none; }
/* .customer-box:hover .tooltip, .customer-box.active .tooltip { display: block; } */
.main-customer-group .tooltip.left .tooltip-arrow { border-left-color: rgba(127, 90, 200, 0.94); right: -10px; top: 72%; border-width: 10px 0px 10px 10px; }

.main-customer-group .tooltip .new-msg { display: none; }
.main-customer-group .tooltip.new .new-msg { display: table; }

.iframe-cover{
  cursor: pointer;
  z-index: 10;
  position: relative;
}
#main-player{
  position: absolute;
  right:0px;
  top:0px;
  width:640px;
  height:360px;
  z-index: 2;
}

.cc-yt-status { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); display: none; cursor: pointer; z-index: 3; }
.cc-yt-status.active { display: block; }
.cc-yt-status>div { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.cc-yt-status>div>div { display: flex; width: 90px; height: 90px; text-align: center; border: 5px solid #369FFF; border-radius: 100%; background: #fff; color: #369FFF; font-size: 34px; line-height: 1; align-items: center; justify-content: center; }
.cc-yt-status>div>div>* { color: inherit; }

/* 스피킹 AI 리포트 */
.report-detail-container { cursor: auto; }
.report-detail-containert>*:last-child, .report-detail-containert>*.no-line { border-right: none; }
.report-detail-container .r-line { border-right: 1px solid #EAEAEA; }
.report-detail-container .t-line { border-top: 1px solid #EAEAEA; }
.report-detail-container { background: #F5F9FD; }
.report-detail-container .flex-center { display: flex; align-items: center; justify-content: center; }
.report-detail-container .btn-gray { border-radius: 6px; border: 2px solid #666; background: #FFF; color: #666666; }
.report-detail-container .btn-green { border-radius: 6px; border: 2px solid #72BE45; background: #FFF; color: #72BE45; }
.report-detail-container .btn-green.disabled { color: #DBDBDB; border-color: #DBDBDB; }
.report-detail-container .answer-btn { color: #C0C0C0; border: 2px solid #C0C0C0; background: #FFF; }
.report-detail-container .answer-btn.left.active { color: #72BE45; background: #E3FCCC; border-color: #72BE45; z-index: 1; }
.report-detail-container .answer-btn.right.active { color: #FF6159; background: #FFE9E8; border-color: #FF928C; z-index: 1; }
.report-detail-container .answer-btn.left { border-radius: 4px 0px 0px 4px; }
.report-detail-container .answer-btn.right { border-radius: 0px 4px 4px 0px; }
.report-detail-container .material-icons.audio.text-29:hover { color: #369FFF !important; }

.common-popup { z-index: 99; position: absolute; width: max-content; padding: 10px 14px; border-radius: 10px; background: #292929; cursor: auto; }
.common-popup:after { z-index: 0; content: ''; position: absolute; bottom: -10px; left: 40px; width: 0; height: 0; border-top: 12px solid #292929; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0px solid transparent; }
.common-popup.bottom:after { z-index: 0; content: ''; position: absolute; bottom: initial; top: -10px; left: 40px; width: 0; height: 0; border-bottom: 12px solid #292929; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 0px solid transparent; }
.common-popup.bottom.arrow-center:after { z-index: 0; content: ''; position: absolute; bottom: initial; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-bottom: 12px solid #292929; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 0px solid transparent; }
.common-popup.left:after { z-index: 0; content: ''; position: absolute; bottom: initial; right: -10px; left: initial; top: calc(50% - 12px); width: 0; height: 0; border-left: 12px solid #292929; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-right: 0px solid transparent; }
.common-popup.right:after { z-index: 0; content: ''; position: absolute; bottom: initial; left: -10px; top: calc(50% - 12px); width: 0; height: 0; border-right: 12px solid #292929; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 0px solid transparent; }
.common-popup .popup-title { font-size: 15px; font-weight: 500; color: #FFF; text-align: left; }
.common-popup .popup-detail { font-size: 15px; font-weight: 500; color: #292929; padding: 3px 8px 2px 8px; background: #78D024; border-radius: 100px; cursor: pointer; }
.common-popup .popup-close { font-size: 15px; font-weight: 400; color: #C0C0C0; cursor: pointer; }

/* 그래머 톡 */
.talk-bg{
  background: #DCE9F5;
}
.talk-body:not(.is-mobile){ padding:0px 130px 180px 100px; width:1000px; position:relative; min-height:calc(100% - 70px); background: #DCE9F5; margin: 0px auto;}
.talk-body .bottom{
  text-align:center;
  width: 100%;
  bottom: 60px;
  position: absolute;
  left: 0;
}

.talk-body .talk-card{ 
  display:flex; 
  gap:8px; 
  margin-top:20px; 
  position:relative; 
}
.talk-body .talk-card[data-type="0"]{
  margin-top:10px;
}
.talk-body .talk-card[data-type="8"]{
  margin-top:20px;
  margin-bottom:40px;
}
.talk-body .talk-card[data-type="2"]{
  margin-top: 40px;
  margin-bottom: 40px;

}
.talk-body .talk-card[data-type="2"].correct, .talk-body .talk-card[data-type="2"].wrong{
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
.talk-body .talk-card[data-type="2"] .option-txt{
  line-height: 1.4;
}
.talk-body .d-flex{
  display: flex;
  gap:8px;
  margin-top:20px;
}
.talk-body .talk-card[data-type="7"] { width:100%; display: block; height:30px; }
.talk-body .talk-card[data-type="9"] { width:100%; display: block; height:60px; }
.talk-body .talk-card[data-type="12"] { width:100%; display: block; height:10px; }
.talk-body .talk-card[data-type="13"] { width:100%; display: block; height:90px; }
.talk-body .left-cell{ width: 45px; height:45px; flex-shrink: 0; }
.talk-body .left-cell img { width:100%; height:100%; border-radius:50%; display:none; position: relative;}
.talk-body .wrting-txt{
  display: inline-block;
}
.talk-body .talk-card[data-type="2"] .left-cell .objective-ans-img{
  display:block; 

}
.talk-body .talk-card[data-type="4"] + .talk-card[data-type="0"] {
  margin-top:30px;
}
.talk-body .talk-card[data-type="0"] .left-cell .default-img, 
.talk-body .talk-card[data-type="1"] .left-cell .default-img
 {
  display:block; 
}

.talk-body .talk-card[data-type="1"].wrong .left-cell .default-img, .talk-body .talk-card[data-type="1"].correct .left-cell .default-img{
  display: none;
}
.talk-body .talk-card[data-type="1"].wrong .left-cell .wrong-img{
  display: block;
}

.talk-body .talk-card[data-type="1"].correct .left-cell .correct-img{
  display: block;
}

.talk-body .talk-card[data-type="14"] .right-cell {
  padding: 11.5px 10px 11.5px 10px;
  border-radius: 8px;;
  width:100%;
  background-color: #FFEB33;
}
.talk-body .talk-card[data-type="14"] .right-cell::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  top: -12px;
  left: 38px;
  border-width: 0 14px 28px;
  border-bottom-color: #FFEB33;
}
.talk-body .talk-card[data-type="11"] .right-cell {
  width:100%;
  padding-left:0px;
}
.talk-body .talk-card[data-type="11"] .right-cell .card-content {
  width:100%;
}

.talk-body .absolute{
  position: absolute;
  top: -20px;
  text-align: center;
  width: 100%;
  font-size: 22px;
  white-space: nowrap;
}
.talk-body .talk-card[data-type="2"] .content-row{
  gap:10px;
}
/* .talk-body .talk-card[data-type="10"] .content-row div:last-child,
.talk-body .talk-card[data-type="10"] .content-row div:last-child span {
  display:flex;
  gap:6px;
  flex-wrap: wrap;
} */
.talk-body .talk-card[data-type="10"] .content-row div:last-child{
  display:flex;
  gap:6px;
  flex-wrap: wrap;
  
}
.talk-body .btn-word{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
}

.talk-body .btn-word.active{
  background: #369FFF;
  color:#fff;
}
.talk-body .talk-card[data-type="10"].wrong .btn-word.active{
  color:#fff;
  background: #FF6159; 
  border-color: #FF6159; 
  animation-name: shake;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}
.talk-body .talk-card[data-type="10"].correct .btn-word.active{
  color:#fff;
  border-color: #78D024; 
  background: #78D024; 
}

.talk-body .talk-card .content-row.replace-tmp .font-bold2{
  font-weight: 400 !important;
}
.talk-body .talk-card[data-type="11"] .content-row{
  position: relative;
  padding:40px 20px;
  background: #318500;
  color:#fff;
  border-radius: 10px 10px 0px 0px;
}
.talk-body .talk-card[data-type="11"] .audio-btn-div{
  font-size: 32px;
}
.talk-body .right-cell{  display: flex; align-items: center; position:relative; padding-left:10px; }

.talk-body .right-cell:before, 
.talk-body .talk-card[data-type="4"] .card-content .content-row:first-child:before, 
.talk-body .talk-card[data-type="10"] .card-content .content-row:first-child:before,
.talk-body .talk-card[data-type="11"] .writing-content:before{
  content:"\e937";
  font-family: 'classcard2' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color:#369FFF;
  position:absolute;
  font-size:16px;
  bottom:-3px;
  right:-20px;
}

.talk-body .talk-card[data-type="0"].wrong-mark .right-cell:before,
.talk-body .talk-card[data-type="4"].wrong-mark .card-content .content-row:first-child:before, 
.talk-body .talk-card[data-type="6"].wrong-mark .card-content .content-row:first-child:before,
.talk-body .talk-card[data-type="10"].wrong-mark .card-content .content-row:first-child:before{
    content: ""; /* 내용을 비워둡니다 */
    background-image: url('/images/v2/main/grammartalk_wrong_mark2.svg'); /* 배경 이미지 설정 */
    background-size: cover; /* 이미지 크기 조정 */
    background-repeat: no-repeat; /* 반복 없음 */
    display: inline-block; /* 블록 레벨 요소로 만듭니다 */
    width: 14px; /* 적절한 너비 설정 */
    height: 14px; /* 적절한 높이 설정 */
    position: absolute;
    bottom: 0px;
    right: -20px;
    font-family: 'classcard2' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #369FFF;
}
.talk-body .talk-card[data-type="4"].wrong-mark .card-content .content-row:first-child:before{
  bottom:10px;
}
.talk-body .talk-card[data-type="11"] .writing-content:before{
  right: -25px;
  bottom:3px;
  color: yellow;
}
.talk-body .talk-card.wait .right-cell:before, 
.talk-body .talk-card[data-type="4"].wait .card-content .content-row:first-child:before, 
.talk-body .talk-card[data-type="11"].wait .writing-content:before{
  color:#C0C0C0;
}
.talk-body .talk-card[data-type="1"].wrong .right-cell:before{
  content:"\e938";

}
.talk-body .talk-card[data-type="6"].correct .order-list{
  color: #318500;
  font-size: 18px;
  font-weight: 700;
}
.talk-body .talk-card[data-type="2"] .right-cell:before, 
.talk-body .talk-card[data-type="3"] .right-cell:before,
.talk-body .talk-card[data-type="4"] .right-cell:before, 
.talk-body .talk-card[data-type="6"] .right-cell:before,
.talk-body .talk-card[data-type="7"] .right-cell:before,
.talk-body .talk-card[data-type="9"] .right-cell:before,
.talk-body .talk-card[data-type="10"] .right-cell:before,
.talk-body .talk-card[data-type="11"] .right-cell:before,
.talk-body .talk-card[data-type="12"] .right-cell:before{
  content:'';
}
.talk-body .talk-card[data-type="8"] .right-cell:before{
  top: 8px;
  right: -22px;
}
.talk-body .talk-card[data-type="5"] .right-cell:before{
  top: 5px;
  right: -25px;
}
/* .talk-body .audio-cnt-view{
  position:absolute;
  background: #369FFF;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  right: -32px;
  top: 1px;
  
} */

/* .talk-body .talk-card.title  .content-row{font-size: 26px;}
.talk-body .talk-card.title  .btn-audio{top: -28px;} */

.talk-body .content-row { 
  align-items:baseline; 
  display:flex; 
  font-size:18px; 
  position: relative; 
  text-align: left;
  gap:8px;
}
.talk-body .content-row.option-item{
  align-items:center;
}
.talk-body .content-row.wrong{
  color:#FF6159;
}
.talk-body .user-text[disabled]{
  background: #F3F3F3 !important;
  border: 1px solid #C0C0C0 !important;
}
.talk-body .user-text.wrong{ 
  border: 1px solid #FF6159; 
  animation-name: shake;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}

.talk-body .order-item.wrong{
  border: 1px solid #FF6159 !important;
  background: #FF6159 !important;
  color:#fff !important; 
  animation-name: shake;
  animation-duration: 0.3s;
  animation-iteration-count: 1;
}
.talk-body .user-text.correct{ border: 1px solid #78D024; }

.talk-body .user-text{
  box-sizing: border-box; 
  border: 1px solid #369FFF;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  padding:4px 12px;
  width:100px;

  /* border-radius: 4px;
  border: 1px solid #C0C0C0;
  background: #FFF;
  padding:4px 12px;
  width:100px; */
}
.talk-body .talk-card[data-type="11"] .disabled-input::placeholder{
  color:#000 !important;
}
.talk-body .talk-card[data-type="11"] .disabled-input::-webkit-input-placeholder {
  color:#000 !important;
}

.talk-body .talk-card[data-type="11"] .disabled-input::-moz-placeholder {
  color:#000 !important;
}

.talk-body .talk-card[data-type="11"] .disabled-input::-ms-placeholder {
  color:#000 !important;
}

.talk-body .disabled-input{
  background: #F3F3F3;
  border: 1px solid #C0C0C0;
  border-radius: 4px;
  padding:4px 12px;
  width:100px;
  opacity: 1;
}
.talk-body .talk-audio{
  position: absolute;
  top:-25px;
  left:0px;

}
.talk-body .talk-card[data-type="11"] .talk-audio{
  position: absolute;
  top:-32px;
  left:0px;

}
.talk-body .talk-card[data-type="11"] .writing-content{
  font-size: 30px;
  position: relative;
}
.talk-body .talk-card[data-type="11"] .writing-content-bottom{
  position: absolute; 
  bottom: 0; 
  left: -5px; 
  width: 727px;
}
.talk-body .user-text:focus-visible{
  outline:none;
}
.talk-body .user-text.correct{
  border: 1px solid #78D024 !important;
  box-shadow: none;
}
.talk-body .user-text.wrong{
  border: 1px solid #FF6159 !important;
}

.talk-body .speak2{
  color: #369FFF;
}
.talk-body .talk-card[data-type="11"] .speak2{
  color: #FFEB33;
}
.talk-body .speak_off2{
  color: #C0C0C0;
}
.talk-body .talk-card.end .content-row { user-select: none; pointer-events: none; }
.talk-body .talk-card.end .content-row .audio-btn-div, 
.talk-body .talk-card.end .content-row .audio-btn {
  pointer-events: all;
}
.talk-body .audio-btn-div{
  font-size:28px;
  width:28px; position:relative; flex-shrink: 0;
}
.talk-body .talk-card[data-type="11"] .audio-btn-div{
  font-size:32px;
  width:32px; position:relative; flex-shrink: 0;
}
.talk-body .talk-card[data-type="1"].wrong .content-row.correct{ display:none !important; }
.talk-body .talk-card[data-type="1"].correct .content-row.wrong{ display:none !important; }


.talk-body .option-item{
  margin-top:10px;
}
.talk-body .option-num{
  width: 24px;
  height: 24px;
  border: 1px solid #C0C0C0;
  background: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.talk-body .talk-card.wrong .option-item.selected{
  color: #FF6159;
}
.talk-body .talk-card.wrong .option-item.selected .option-num{
  background: #FF6159;
  border:1px solid #FF6159;
  color:#fff;
}

.talk-body .talk-card.correct .option-item.selected{
  color: #78D024;
}
.talk-body .talk-card.correct .option-item.selected .option-num{
  background: #78D024;
  border:1px solid #78D024;
  color:#fff;
}

.talk-body .talk-card.correct .option-item, 
.talk-body .talk-card.wrong .option-item{
  color: #8C8C8C;
}

.talk-body .talk-card.correct .option-item .option-num, 
.talk-body .talk-card.wrong .option-item .option-num{
  background: #fff;
  border:1px solid #8C8C8C;
  color:#8C8C8C;
}

.talk-body .talk-card[data-type="0"] .right-cell, 
.talk-body .talk-card[data-type="1"] .right-cell{
  padding: 11.5px 10px 11.5px 10px;
  background: #fff;
  border-radius: 0px 8px 8px 8px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
}
.talk-body .direct-msg {
  font-weight: 700;
  font-size: 20px;
  line-height: 45px;;
}

.talk-body .order-list { display:flex; gap:5px; flex-wrap: wrap;}
.talk-body .order-list .order-item{
  font-size: 18px;
  color:#666;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 400;
  border-radius: 5px;
  border: 1px solid #C0C0C0;
  background: #FFF;
}
.talk-body .order-list .order-item.selected{
  background: #369FFF;
  color:#fff;
}
.talk-body .talk-card.wrong .order-list .order-item.selected{
  background: #FF6159;
  color:#fff;
}
.talk-body .sub-title{
  margin-top:4px;
  padding-left:36px;
  font-size: 13px;
  color: #4D4E54;

}
.talk-body .talk-arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
}
/* 모바일 */
.talk-body.is-mobile{ padding:20px 30px 80px 16px; width:100%; position:relative; background: #DCE9F5; min-height:calc(100% - 64px);}



.talk-body.is-mobile .content-row{
  align-items:center; 
  display:flex; 
  font-size:1.4rem; 
  position: relative; 
  text-align: left;
  gap:5px;   
}
.talk-body.is-mobile .audio-btn-div{
  font-size: 2rem;
  width: 20px;
}
.talk-body.is-mobile .talk-card[data-type="11"] .btn-audio{
  top: -26px;
}
.talk-body.is-mobile .absolute{
  font-size: 1.3rem;
  top: -16px;
}
.talk-body.is-mobile .btn-audio{
  top: -18px;
}

.talk-body.is-mobile .left-cell {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.talk-body.is-mobile .talk-card[data-type="0"] .right-cell, 
.talk-body.is-mobile .talk-card[data-type="1"] .right-cell{
  padding: 8px 8px 8px 8px;
  background: #fff;
  border-radius: 0px 8px 8px 8px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.25);
}

.talk-body.is-mobile .right-cell:before, 
.talk-body.is-mobile .talk-card[data-type="1"].wrong .right-cell:before,
.talk-body.is-mobile .talk-card[data-type="4"] .card-content .content-row:first-child:before, 
.talk-body.is-mobile .talk-card[data-type="10"] .card-content .content-row:first-child:before{
  content: '';
}
.talk-body.is-mobile .direct-msg{
  line-height: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.talk-body.is-mobile .talk-card[data-type="4"].wrong-mark .card-content .content-row:first-child:before{
  bottom: 11px;
  width: 12px;
  height: 12px;
}


.talk-body.is-mobile .talk-card[data-type="0"].wrong-mark .right-cell:before, 
.talk-body.is-mobile .talk-card[data-type="6"].wrong-mark .card-content .content-row:first-child:before, 
.talk-body.is-mobile .talk-card[data-type="10"].wrong-mark .card-content .content-row:first-child:before {
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 0px;
  right: -20px;
}

.talk-body.is-mobile .option-num{
  width:18px;
  height:18px;

}

.talk-body.is-mobile .sub-title{
  margin-top:4px;
  padding-left:25px;
  font-size: 1.1rem;
  color: #4D4E54;

}
.talk-body.is-mobile .user-text{
  padding: 4px 8px;
  margin: 5px 0px;
  vertical-align: middle;
}

.talk-body.is-mobile .disabled-input{
  padding: 4px 8px;
  margin: 5px 0px;
}

.talk-body.is-mobile .talk-card[data-type="11"] .writing-content-bottom{
  position: absolute; 
  bottom: 0; 
  left: -5px; 
  width: calc(100% + 10px);
}

.talk-body.is-mobile .talk-card[data-type="11"] .left-cell{
  width: 6px;
}
.talk-body.is-mobile .talk-card[data-type="11"] .content-row{
  padding: 30px 10px 10px 10px;
  min-height: 200px;
}
.talk-body.is-mobile .talk-card[data-type="11"] .writing-content{
  font-size: 1.8rem;
}

.talk-body.is-mobile .talk-card[data-type="6"].correct .order-list{
  font-size: 1.6rem;
}

.talk-body.is-mobile .order-list .order-item{
  font-size: 1.6rem;
  padding: 4px 8px;
}

.talk-body.is-mobile .talk-card[data-type="14"] .right-cell::after{
  top: -13px;
  left: 27px;
}
.talk-body.is-mobile .talk-arrow{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -9px;
  width:13px;
}
.talk-body.is-mobile .talk-audio{
  position: relative;
  top:1px;
  left:0px;
}
.talk-body .user-text.check{
  border: 2px solid #78D024;
  box-shadow: none;
}
/* 여기까지 */


.common-new-icon{
  background-image: url('/images/v2/common/common_new_ico.svg');
  background-repeat: no-repeat;
  background-size: cover; /* 또는 100% 100%로 설정할 수도 있습니다 */
  width:45px;
  height:27px;
  display: inline-block;
  cursor: pointer;
  position: absolute;
}
.common-new-icon:hover{
  background-image: url('/images/v2/common/common_new_ico_hover.svg');
}
.common-new-icon.right{
  background-image: url('/images/v2/common/common_new_ico_right.svg');
}
.common-new-icon.right:hover{
  background-image: url('/images/v2/common/common_new_ico_hover_right.svg');
}
.common-new-icon.left{
  background-image: url('/images/v2/common/common_new_ico_left.svg');
}
.common-new-icon.right:hover{
  background-image: url('/images/v2/common/common_new_ico_hover_left.svg');
}

i.cc2.star.text-warning {
  color:#FCBF00 !important;
}
i.cc2.star_o{
  color:#999999 !important;
}
.onboarding-overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
  
.cc-loading {
  --bs-loading-color: #48B952;
  --bs-loading-font-size: 2.6rem;
  display: flex;
  height: 1em;
  width: 1em;
  font-size: var(--bs-loading-font-size);
  justify-content: center;
}
.cc-loading.red {
  --bs-loading-color: #FF6159;
}

.cc-loading>.blade {
  width: .1666666667em;
  height: .2em;
  border-radius: 1em;
  display: block;
  background: var(--bs-loading-color);
  align-self: center;
  margin: 0px .0666666667em;
  flex: 0 0 auto;
}
.cc-loading.ani>.blade {
  animation: cc-loading-zoom 0.6s infinite linear;
  animation-delay: 0.3s;
}
.cc-loading.ani>.blade:nth-child(2n) {
  animation-delay: 0s;
}

@keyframes cc-loading-zoom {
  0% { height: 0.2em; }
  50% { height: 0.7em; }
  100% { height: 0.2em; }
}

#alertModal2 .modal-dialog, #confirmModal2 .modal-dialog{
  width:500px;
}
#alertModal2 .modal-body, #confirmModal2 .modal-body{
  min-height: 230px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

#alertModal2 .close-pos, #confirmModal2 .close-pos{
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  z-index: 1;

}

#alertModal2 .modal-body .msg, #confirmModal2 .modal-body .msg{
  font-size:20px;
  font-weight: 500;
}

#alertModal2 .modal-body .sub-msg, #confirmModal2 .modal-body .sub-msg{
  font-size: 18px;
  font-weight: 400;
}







#alertModal2 .modal-footer, #confirmModal2 .modal-footer{
  padding: 0px 0px 24px 0px;
  display: flex;
  gap:14px;
  justify-content: center;
  border-top:0px;
}
#alertModal2 .modal-footer .btn, #confirmModal2 .modal-footer .btn{
  width:180px;
  text-align: center;
  font-size:20px;
  font-weight: 500;
  padding: 11px 0px;
  border-radius: 6px;
  border-width: 2px;

}

#alertModal2 .modal-footer .btn.btn-default, #confirmModal2 .modal-footer .btn.btn-default{
  border: 2px solid #DBDBDB;
  background: #FFF;
}