.ytp-large-play-button {
  background: url(../images/content2/youtube-play-btn.png) no-repeat !important; }

.ytp-large-play-button svg {
  display: none !important; }

.subVisual {
  height: auto; }
  .subVisual img {
    animation: none; }
  .subVisual .subVisualTxt {
    top: 58%; }
    .subVisual .subVisualTxt p:first-child {
      font-size: 2.19rem;
      position: relative; }
      .subVisual .subVisualTxt p:first-child::before {
        content: "";
        display: block;
        width: 35px;
        height: 3px;
        background: var(--main-color);
        position: absolute;
        left: 0;
        top: -20px; }
      .subVisual .subVisualTxt p:first-child::before {
        left: 50%;
        transform: translateX(-50%); }

#content .txtTop {
  border-bottom: 1px solid rgba(48, 45, 44, 0.3);
  padding-bottom: 20px;
  margin-bottom: 50px;
  position: relative; }
  #content .txtTop::before {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    background: var(--text-color);
    position: absolute;
    right: 0;
    bottom: 0; }
  #content .txtTop ul {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
    #content .txtTop ul li {
      padding: 0 30px;
      position: relative;
      font-size: 1.13rem;
      font-weight: 600; }
      #content .txtTop ul li::before {
        content: "";
        display: block;
        width: 1px;
        height: 21px;
        background: rgba(48, 45, 44, 0.5);
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%); }
    #content .txtTop ul li:first-child {
      opacity: .5;
      font-weight: 400; }
      #content .txtTop ul li:first-child::before {
        display: none; }
    #content .txtTop ul li:last-child {
      padding-right: 0; }
#content .subProductInfo {
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between; }
  #content .subProductInfo img {
    width: 50%;
    object-fit: cover;
    object-position: center; }
  #content .subProductInfo div {
    background: #F5F5F5;
    border-radius: 50px;
    width: 50%;
    padding: 90px 68px 68px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    #content .subProductInfo div p {
      font-weight: 500; }
    #content .subProductInfo div p:first-child {
      position: relative;
      font-size: 2.19rem;
      font-weight: 600; }
      #content .subProductInfo div p:first-child::before {
        content: "";
        display: block;
        width: 35px;
        height: 3px;
        background: var(--main-color);
        position: absolute;
        left: 0;
        top: -20px; }
    #content .subProductInfo div p:nth-of-type(2) {
      width: 77%;
      line-height: 1.7rem; }
#content .videoBox {
  position: relative; }
  #content .videoBox .playBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    background: url("../images/content2/youtube-play-btn-big.png") no-repeat center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10; }
  #content .videoBox iframe {
    height: 700px;
    width: 100%; }
    #content .videoBox iframe button.ytp-large-play-button svg {
      height: 0 !important; }
#content .imgBox {
  position: relative;
  height: 500px; }
  #content .imgBox img {
    border-radius: 50px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; }
  #content .imgBox div {
    padding: 110px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    #content .imgBox div p {
      font-size: 2.25rem;
      font-weight: 600; }
      #content .imgBox div p span {
        font-size: 4.81rem;
        font-weight: 700;
        display: block;
        margin-top: 15px;
        line-height: 1em; }
    #content .imgBox div p:last-child {
      font-size: 1.38rem;
      color: #707070; }
#content .tabBox {
  margin-top: 50px;
  position: relative; }
  #content .tabBox ul.tabLists {
    display: flex;
    border: 1px solid #D9D9D9; }
    #content .tabBox ul.tabLists li {
      width: 25%;
      font-size: 1.25rem;
      padding: 28px 10px;
      text-align: center;
      cursor: pointer;
      border-right: 1px solid #D9D9D9;
      transition: .3s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      word-break: break-word; }
      #content .tabBox ul.tabLists li:hover {
        color: #fff;
        background: var(--text-color); }
    #content .tabBox ul.tabLists li:last-child {
      border-right: 0; }
    #content .tabBox ul.tabLists li.active {
      color: #fff;
      background: var(--text-color); }
  #content .tabBox .downloadBox {
    border-radius: 18px;
    z-index: 20;
    text-align: center;
    width: max-content;
    padding: 13px 11px;
    position: absolute;
    right: 0px;
    top: 83px; }
    #content .tabBox .downloadBox a {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 200px;
      font-weight: 500;
      justify-content: center;
      margin-bottom: 10px; }
    #content .tabBox .downloadBox ul {
      display: none; }
      #content .tabBox .downloadBox ul li a {
        font-weight: 500;
        padding: 13px 0;
        border: 1px solid #D9D9D9;
        border-radius: 11px; }
        #content .tabBox .downloadBox ul li a:hover {
          color: var(--main-color); }
      #content .tabBox .downloadBox ul li:last-child a {
        margin-bottom: 0; }
  #content .tabBox .downOpen {
    background: #fff;
    box-shadow: 0px 6px 7px 1px rgba(0, 0, 0, 0.05); }
    #content .tabBox .downOpen > a {
      color: var(--main-color); }
    #content .tabBox .downOpen ul {
      display: block; }
  #content .tabBox .tabcontent {
    margin: 50px 0;
    background: rgba(245, 245, 245, 0.5);
    border-radius: 50px;
    position: relative;
    padding: 54px;
    display: none; }
    #content .tabBox .tabcontent .downloadBox {
      border-radius: 18px;
      z-index: 20;
      text-align: center;
      width: max-content;
      padding: 13px 11px;
      position: absolute;
      right: 46px;
      top: 35px; }
      #content .tabBox .tabcontent .downloadBox a {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 200px;
        font-weight: 500;
        justify-content: center;
        margin-bottom: 10px; }
      #content .tabBox .tabcontent .downloadBox ul {
        display: none; }
        #content .tabBox .tabcontent .downloadBox ul li a {
          font-weight: 500;
          padding: 13px 0;
          border: 1px solid #D9D9D9;
          border-radius: 11px; }
          #content .tabBox .tabcontent .downloadBox ul li a:hover {
            color: var(--main-color); }
        #content .tabBox .tabcontent .downloadBox ul li:last-child a {
          margin-bottom: 0; }
    #content .tabBox .tabcontent .downOpen {
      background: #fff; }
      #content .tabBox .tabcontent .downOpen > a {
        color: var(--main-color); }
      #content .tabBox .tabcontent .downOpen ul {
        display: block; }
    #content .tabBox .tabcontent .tabTitle {
      position: relative;
      font-size: 1.56rem;
      font-weight: 600;
      margin-bottom: 32px; }
      #content .tabBox .tabcontent .tabTitle::before {
        content: "";
        display: block;
        width: 35px;
        height: 3px;
        background: var(--main-color);
        position: absolute;
        left: 0;
        top: -32px; }
      #content .tabBox .tabcontent .tabTitle::before {
        position: relative;
        top: auto;
        margin-bottom: 32px; }
    #content .tabBox .tabcontent .ppText {
      font-size: 25px;
      text-align: center;
      padding: 140px 0;
      opacity: .3;
      font-weight: 600; }
    #content .tabBox .tabcontent div table {
      width: 100%; }
      #content .tabBox .tabcontent div table thead {
        background: #D9D9D9; }
        #content .tabBox .tabcontent div table thead th:not(:last-child) {
          border-right: 1px solid rgba(112, 112, 112, 0.3); }
        #content .tabBox .tabcontent div table thead tr {
          background: #D9D9D9; }
        #content .tabBox .tabcontent div table thead tr:nth-of-type(2) th {
          font-weight: 400; }
      #content .tabBox .tabcontent div table tbody tr:nth-of-type(odd) {
        background: #EEEEEE; }
      #content .tabBox .tabcontent div table tbody tr:nth-of-type(even) {
        background: #fff; }
      #content .tabBox .tabcontent div table tbody.colchange tr:nth-of-type(odd) {
        background: #fff; }
        #content .tabBox .tabcontent div table tbody.colchange tr:nth-of-type(odd) td {
          background: #fff; }
      #content .tabBox .tabcontent div table tbody.colchange tr:nth-of-type(even) {
        background: #eee; }
        #content .tabBox .tabcontent div table tbody.colchange tr:nth-of-type(even) td {
          background: #eee; }
      #content .tabBox .tabcontent div table tr {
        border-top: 1px solid rgba(112, 112, 112, 0.3);
        border-bottom: 1px solid rgba(112, 112, 112, 0.3); }
        #content .tabBox .tabcontent div table tr th {
          font-weight: 500;
          padding: 17px 10px;
          vertical-align: middle;
          word-break: break-word;
          line-height: 1.6em; }
        #content .tabBox .tabcontent div table tr td {
          border-left: 1px solid rgba(112, 112, 112, 0.3);
          line-height: 1.6em;
          padding: 17px 24px;
          vertical-align: middle;
          word-break: break-all; }
  #content .tabBox .tabcontent1 > ul {
    display: flex;
    gap: 20px; }
    #content .tabBox .tabcontent1 > ul > li {
      width: 50%; }
      #content .tabBox .tabcontent1 > ul > li ul li {
        position: relative;
        margin-bottom: 10px;
        padding-left: 37px; }
        #content .tabBox .tabcontent1 > ul > li ul li::before {
          content: "";
          display: block;
          background: #C9C9C9;
          width: 15px;
          height: 3px;
          position: absolute;
          left: 0;
          top: 8px; }
      #content .tabBox .tabcontent1 > ul > li ul li:last-child {
        margin-bottom: 0; }
  #content .tabBox .tabcontent2 > div .tableName {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 18px; }
  #content .tabBox .tabcontent2 table.slashTable {
    text-align: center; }
    #content .tabBox .tabcontent2 table.slashTable .slash {
      background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), rgba(112, 112, 112, 0.3), transparent calc(50% + 1px));
      background-size: 120% 120%;
      background-position: center;
      text-align: right;
      padding: 30px;
      line-height: 2.5em;
      color: rgba(48, 45, 44, 0.5);
      width: 11.11%; }
      #content .tabBox .tabcontent2 table.slashTable .slash span {
        display: block;
        width: 100%;
        text-align: left; }
    #content .tabBox .tabcontent2 table.slashTable tbody td {
      line-height: 1.7em; }
  #content .tabBox .tabcontent2 table.numberTable {
    text-align: center; }
    #content .tabBox .tabcontent2 table.numberTable thead tr:nth-of-type(2) th {
      font-weight: 400; }
    #content .tabBox .tabcontent2 table.numberTable tbody {
      counter-reset: number; }
      #content .tabBox .tabcontent2 table.numberTable tbody tr th:first-child {
        border-left: none;
        position: relative; }
        #content .tabBox .tabcontent2 table.numberTable tbody tr th:first-child::before {
          content: counter(number) "";
          display: block;
          counter-increment: number;
          width: 20px;
          height: 20px;
          border-radius: 50px;
          background: #707070;
          font-size: 13px;
          font-weight: 500;
          color: #fff;
          padding: 4px;
          line-height: 1.3rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-400%, -50%); }
      #content .tabBox .tabcontent2 table.numberTable tbody tr td:first-child {
        border-left: none;
        position: relative; }
        #content .tabBox .tabcontent2 table.numberTable tbody tr td:first-child::before {
          content: counter(number) "";
          display: block;
          counter-increment: number;
          width: 20px;
          height: 20px;
          border-radius: 50px;
          background: #707070;
          font-size: 13px;
          font-weight: 500;
          color: #fff;
          padding: 4px;
          line-height: 1.3rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-400%, -50%); }
  #content .tabBox .tables table:not(:last-child) {
    margin-bottom: 46px; }
  #content .tabBox .colinfo > div:nth-of-type(1) {
    margin-bottom: 32px;
    font-weight: 600;
    font-size: 1.56rem; }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-pink {
      color: var(--col-pink); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-yellow {
      color: var(--col-yellow); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-green {
      color: var(--col-green); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-blue {
      color: var(--col-blue); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-navy {
      color: var(--col-navy); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-purple {
      color: var(--col-purple); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-mint {
      color: var(--col-mint); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-brown {
      color: var(--col-brown); }
    #content .tabBox .colinfo > div:nth-of-type(1) .col-gray {
      color: var(--col-gray); }
  #content .tabBox .colinfo table th span {
    display: inline-block;
    color: #fff;
    padding: 3px 0px;
    border-radius: 50px;
    margin-right: 8px;
    width: 26px;
    height: 26px;
    transform: translateY(-1px);
    font-size: 1rem;
    line-height: 1.4em; }
  #content .tabBox .colinfo table .col-pink {
    background: var(--col-pink); }
  #content .tabBox .colinfo table .col-yellow {
    background: var(--col-yellow); }
  #content .tabBox .colinfo table .col-green {
    background: var(--col-green); }
  #content .tabBox .colinfo table .col-blue {
    background: var(--col-blue); }
  #content .tabBox .colinfo table .col-navy {
    background: var(--col-navy); }
  #content .tabBox .colinfo table .col-purple {
    background: var(--col-purple); }
  #content .tabBox .colinfo table .col-mint {
    background: var(--col-mint); }
  #content .tabBox .colinfo table .col-brown {
    background: var(--col-brown); }
  #content .tabBox .colinfo table .col-gray {
    background: var(--col-gray); }
  #content .tabBox .colinfo table .oglabel {
    background: var(--main-color);
    font-weight: 600;
    color: #fff;
    width: auto;
    height: auto;
    border-radius: 6px;
    padding: 5px 9px; }
  #content .tabBox .circleTable .tableGrid {
    display: grid;
    gap: 40px 1%;
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas: 'a b c d e f g h i' 'a j k l et1 et2 et3 et4 et5'; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(1) {
      grid-area: a; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(2) {
      grid-area: b; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(3) {
      grid-area: c; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(4) {
      grid-area: d; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(5) {
      grid-area: e; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(6) {
      grid-area: f; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(7) {
      grid-area: g; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(8) {
      grid-area: h; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(9) {
      grid-area: i; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(10) {
      grid-area: j; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(11) {
      grid-area: k; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(12) {
      grid-area: l; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(13) {
      grid-area: et1; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(14) {
      grid-area: et2; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(15) {
      grid-area: et3; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(16) {
      grid-area: et4; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(17) {
      grid-area: et5; }
    #content .tabBox .circleTable .tableGrid > div {
      display: flex;
      height: 100%;
      flex-direction: column; }
      #content .tabBox .circleTable .tableGrid > div .type {
        font-weight: 500;
        text-align: center;
        position: relative; }
        #content .tabBox .circleTable .tableGrid > div .type::before {
          content: "";
          display: block;
          width: 20px;
          height: 1px;
          background: #707070;
          position: absolute;
          right: -15px;
          top: 50%;
          transform: translateY(-50%); }
        #content .tabBox .circleTable .tableGrid > div .type span {
          position: relative;
          margin: 0 auto; }
          #content .tabBox .circleTable .tableGrid > div .type span::before {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background: #707070;
            position: absolute;
            left: 50%;
            bottom: -5px;
            transform: translateX(-50%); }
      #content .tabBox .circleTable .tableGrid > div .circleTitle {
        margin: 16px auto;
        width: 140px;
        height: 140px;
        font-weight: 500;
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: var(--col-coral); }
      #content .tabBox .circleTable .tableGrid > div ul {
        background: #fff;
        border: 1px solid #D9D9D9;
        padding: 11px 16px;
        flex: 1; }
        #content .tabBox .circleTable .tableGrid > div ul li {
          font-weight: 500;
          line-height: 1.4em; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(2) .circleTitle {
      background: var(--col-light-yellow); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(3) .circleTitle {
      background: var(--col-lime); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(3) .type::before {
      transform: translateY(-50%) rotate(-45deg); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(4) .circleTitle {
      background: var(--col-light-green); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(5) .circleTitle {
      background: var(--col-skyblue); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(5) .type::before {
      transform: translateY(-50%) rotate(-45deg); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(6) .circleTitle {
      background: var(--col-light-blue); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(7) .circleTitle {
      background: var(--col-light-purple); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(8) .circleTitle {
      background: var(--col-light-yellow); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(9) .type::before {
      display: none; }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(10) .circleTitle {
      background: var(--col-beige); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(11) .circleTitle {
      background: var(--col-light-pink); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(12) .circleTitle {
      background: var(--col-light-brown); }
    #content .tabBox .circleTable .tableGrid > div:nth-of-type(12) .type::before {
      display: none; }
    #content .tabBox .circleTable .tableGrid > div:not(:first-child) .type span {
      width: 20px;
      height: 20px;
      display: block;
      background: #C9C9C9; }
    #content .tabBox .circleTable .tableGrid > div:last-child .type::before {
      display: none; }
  #content .tabBox .underType div table tbody {
    text-align: center; }
    #content .tabBox .underType div table tbody tr td {
      border-left: none; }
    #content .tabBox .underType div table tbody tr th[scope="row"] {
      background: #eee; }
    #content .tabBox .underType div table tbody tr:first-child th {
      color: var(--sub-color-1);
      background: #fff; }
      #content .tabBox .underType div table tbody tr:first-child th span {
        color: var(--main-color);
        font-size: 20px;
        line-height: 2.5em; }
      #content .tabBox .underType div table tbody tr:first-child th ins {
        padding: 0 5px; }
  #content .tabBox .tabinfo {
    background: #fff;
    padding: 50px 0;
    margin-top: 0; }
    #content .tabBox .tabinfo ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 50px; }
      #content .tabBox .tabinfo ul li {
        width: 48%;
        transition: .3s ease-out; }
        #content .tabBox .tabinfo ul li img {
          border: 1px solid #D9D9D9;
          background: #fff; }
        #content .tabBox .tabinfo ul li a {
          padding: 65px;
          background: #F5F5F5;
          border-radius: 50px; }
          #content .tabBox .tabinfo ul li a div {
            display: flex;
            justify-content: space-between; }
          #content .tabBox .tabinfo ul li a .readMore {
            display: inline-block;
            position: absolute;
            color: rgba(48, 45, 44, 0.5);
            transform: translateY(-20px);
            transition: .3s ease-out; }
            #content .tabBox .tabinfo ul li a .readMore::after {
              content: "";
              display: inline-block;
              width: 8px;
              height: 2px;
              background: rgba(48, 45, 44, 0.5);
              margin-left: 20px;
              transform: rotate(45deg);
              position: relative;
              top: -7px; }
            #content .tabBox .tabinfo ul li a .readMore::before {
              content: "";
              display: block;
              width: 8px;
              height: 2px;
              background: rgba(48, 45, 44, 0.5);
              transform: rotate(-45deg) translateY(-50%);
              position: absolute;
              right: -1px;
              top: 12px; }
        #content .tabBox .tabinfo ul li .tabContents {
          display: none; }
          #content .tabBox .tabinfo ul li .tabContents > div {
            padding: 65px;
            background: #F5F5F5;
            border-radius: 50px;
            display: flex;
            width: calc(200% + 90px);
            position: relative;
            gap: 4.3%;
            z-index: 10;
            margin-top: 50px; }
            #content .tabBox .tabinfo ul li .tabContents > div img {
              width: auto;
              height: 100%;
              object-fit: cover;
              object-position: center; }
            #content .tabBox .tabinfo ul li .tabContents > div .tabClose {
              font-weight: 500;
              opacity: .5;
              position: absolute;
              right: 35px;
              top: 0px;
              background: none; }
              #content .tabBox .tabinfo ul li .tabContents > div .tabClose::before {
                content: "";
                display: block;
                width: 15px;
                height: 2px;
                background: var(--text-color);
                position: absolute;
                right: 30px;
                top: 50%;
                transform: translateY(-50%) rotate(45deg); }
              #content .tabBox .tabinfo ul li .tabContents > div .tabClose::after {
                content: "";
                display: block;
                width: 15px;
                height: 2px;
                background: var(--text-color);
                position: absolute;
                right: 30px;
                top: 50%;
                transform: translateY(-50%) rotate(-45deg); }
            #content .tabBox .tabinfo ul li .tabContents > div div:nth-of-type(2) {
              display: flex;
              flex-direction: column;
              justify-content: space-between; }
              #content .tabBox .tabinfo ul li .tabContents > div div:nth-of-type(2) p:nth-of-type(2) {
                width: 60%; }
        #content .tabBox .tabinfo ul li:hover {
          opacity: 1; }
          #content .tabBox .tabinfo ul li:hover .readMore {
            color: var(--main-color); }
            #content .tabBox .tabinfo ul li:hover .readMore::before {
              background: var(--main-color); }
            #content .tabBox .tabinfo ul li:hover .readMore::after {
              background: var(--main-color); }
      #content .tabBox .tabinfo ul li:nth-of-type(even) .tabContents > div {
        margin-left: calc(-100% - 90px); }
      #content .tabBox .tabinfo ul li.active {
        opacity: 1; }
        #content .tabBox .tabinfo ul li.active .readMore {
          color: var(--main-color); }
          #content .tabBox .tabinfo ul li.active .readMore::before {
            background: var(--main-color); }
          #content .tabBox .tabinfo ul li.active .readMore::after {
            background: var(--main-color); }

@media screen and (max-width: 1920px) {
  #content .tabBox .tabcontent4 ul li .tabContents > div {
    width: calc(200% + 65px); }

  #content .tabBox .tabcontent4 ul li:nth-of-type(even) .tabContents > div {
    margin-left: calc(-100% - 63px); }

  #content .tabBox .tabinfo ul li .tabContents > div div {
    width: 50%; }

  #content .tabBox .tabinfo ul li .tabContents > div img {
    width: 100%; } }
@media screen and (max-width: 1850px) {
  #content .tabBox .circleTable .tableGrid > div .circleTitle {
    width: 120px;
    height: 120px;
    font-size: 15px; } }
@media screen and (max-width: 1700px) {
  #content .tabBox .tabinfo ul {
    gap: 0; }

  #content .tabBox .tabinfo ul li {
    margin-bottom: 50px; }

  #content .tabBox .tabinfo ul li .ptabList img {
    width: 60%; }

  #content .tabBox .circleTable .tableGrid > div .circleTitle {
    width: 100px;
    height: 100px; }

  #content .tabBox .tabcontent2 table.slashTable .slash {
    padding: 30px 20px; } }
@media screen and (max-width: 1600px) {
  #content .tabBox .circleTable .tableGrid {
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: 'a b c d e' 'et1 f g h i' 'et4 j k l et5'; } }
@media screen and (max-width: 1280px) {
  .subVisual .subVisualTxt p:first-child {
    font-size: 1.53rem; }

  #content .subProductInfo div p:first-child {
    font-size: 1.13rem; }

  #content .videoBox iframe {
    height: 600px; }

  #content .imgBox div p {
    font-size: 1.88rem; }

  #content .imgBox div p span {
    font-size: 4.06rem !important; }

  #content .tabBox ul.tabLists li {
    font-size: 1rem;
    padding: 20px 10px; }

  #content .tabBox .tabcontent .tabTitle,
  #content .tabBox .colinfo > div > p:nth-of-type(2) {
    font-size: 1.25rem; }

  #content .tabBox .tabcontent4 ul li .tabContents > div {
    width: calc(200% + 45px); }

  #content .tabBox .downloadBox {
    top: 60px; }

  #content .tabBox .tabcontent2 table.slashTable .slash {
    padding: 20px 10px; }

  #content .tabBox .underType div table tbody tr:first-child th {
    font-size: 1rem; } }
@media screen and (max-width: 1024px) {
  .subVisual .subVisualTxt p:first-child {
    font-size: 1.38rem; }

  .subVisual > img {
    height: 500px; }

  #content .txtTop ul li {
    font-size: 1rem; }

  #content .txtTop ul li::before {
    height: 17px; }

  #content .imgBox img {
    object-position: 60%; }

  #content .subProductInfo {
    flex-direction: column; }

  #content .subProductInfo img {
    width: 100%; }

  #content .subProductInfo div {
    gap: 20px;
    width: 100%; }

  #content .subProductInfo div p:nth-of-type(2) {
    width: 90%; }

  #content .tabBox .tabcontent1 > ul {
    flex-direction: column;
    gap: 50px; }

  #content .tabBox .tabcontent1 > ul > li {
    width: 100%; }

  #content .tabBox .colinfo table th span {
    display: block;
    margin: 0 auto; }

  #content .tabBox .colinfo table .oglabel {
    display: inline-block;
    margin: auto; }

  #content .tabBox .tabcontent div table tr th {
    width: 20%; }

  #content .tabBox .colinfo div table tr th {
    width: 10%; }

  #content .tabBox .tabcontent .downloadBox {
    right: 2%; }

  #content .tabBox .tabcontent div table tr td {
    padding: 10px; }

  #content .tabBox .tabinfo ul li,
  #content .tabBox .tabinfo ul li .tabContents > div div {
    width: 100%; }

  #content .tabBox .tabcontent4 ul li .tabContents > div {
    width: 100%;
    flex-direction: column;
    gap: 50px; }

  #content .tabBox .tabcontent4 ul li:nth-of-type(even) .tabContents > div {
    margin-left: 0; }

  #content .tabBox .tabinfo ul li .tabContents > div div:nth-of-type(2) p:nth-of-type(2) {
    width: 90% !important; }

  #content .tabBox .tabinfo ul li .tabContents > div .tabClose {
    padding: 20px 65px;
    top: 10px; }

  #content .imgBox div {
    padding: 70px; }

  #content .imgBox div p {
    font-size: 1.25rem; }

  #content .imgBox div p span {
    font-size: 2.75rem !important; }

  #content .imgBox div p:last-child {
    font-size: 1rem; } }
@media screen and (max-width: 800px) {
  #content .tabBox .circleTable > div:nth-of-type(2) {
    overflow-y: scroll; }

  #content .tabBox .circleTable .tableGrid {
    width: 700px; } }
@media screen and (max-width: 768px) {
  #content .subProductInfo div {
    padding: 80px 50px 50px; }

  #content .txtTop ul li {
    padding: 0 20px; }

  #content .videoBox iframe {
    height: 300px; }

  #content .imgBox div {
    padding: 50px; }

  #content .imgBox div p {
    font-size: 1.13rem; }

  #content .imgBox div p span {
    font-size: 2.5rem !important; }

  #content .tabBox .tabcontent {
    padding: 100px 2rem; }

  #content .tabBox .tabcontent .tabTitle::before {
    margin-bottom: 20px; }

  #content .tabBox .tabcontent1 > ul > li ul li {
    padding-left: 27px; }

  #content .tabBox .tabinfo {
    padding: 35px 0; }

  #content .tabBox .downloadBox {
    top: 136px; }

  #content .subProductInfo div p:nth-of-type(2) {
    width: 100% !important; }

  #content .tabBox .tabcontent2 table.numberTable tbody tr td:first-child::before {
    display: none; } }
@media screen and (max-width: 640px) {
  #content .txtTop ul li {
    font-size: 15px; }

  #content .tabBox .tabinfo ul li a,
  #content .tabBox .tabcontent,
  #content .subProductInfo div, #content .imgBox img {
    border-radius: 30px; }

  #content .tabBox .tabinfo ul li a,
  #content .tabBox .tabinfo ul li .tabContents > div {
    padding: 45px; }

  #content .tabBox .tabinfo ul li a .readMore {
    position: relative;
    transform: translateY(0);
    margin-top: 20px; }

  #content .tabBox .tabinfo ul li .tabContents > div .tabClose {
    top: -45px;
    right: -10px; }

  #content .tabBox .tabinfo ul li .tabContents > div div:nth-of-type(2) p:nth-of-type(2) {
    width: 100% !important; }

  #content .imgBox div p:last-child {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); } }
@media screen and (max-width: 500px) {
  #content .txtTop ul {
    flex-direction: column;
    align-items: flex-end; }

  #content .txtTop ul li {
    padding: 5px 0; }

  #content .txtTop ul li::before {
    display: none; }

  #content .tabBox .tabcontent2 > div:nth-of-type(2) {
    overflow-x: scroll; }

  #content .tabBox .tabcontent2 div table {
    width: 500px; }

  #content .tabBox .colinfo div {
    overflow-x: scroll; }

  #content .tabBox .colinfo div table {
    width: 365px; }

  #content .tabBox ul.tabLists li {
    font-size: 15px; }

  #content .tabBox .tabinfo ul li a div {
    flex-direction: column; }

  #content .tabBox .tabinfo .tabTitle {
    margin-bottom: 20px; }

  #content .tabBox .tabinfo ul li .ptabList img {
    width: 100%; }

  #content .tabBox .tabinfo ul li a, #content .tabBox .tabinfo ul li .tabContents > div {
    padding: 45px 30px; }

  #content .subProductInfo div {
    padding: 60px 35px 35px; }

  #content .imgBox {
    height: 300px; }

  #content .imgBox div {
    padding: 35px; }

  #content .imgBox div p {
    font-size: 1rem; }

  #content .imgBox div p span {
    font-size: 1.38rem !important;
    margin-top: 10px; }

  #content .tabBox .tabcontent2 table.numberTable {
    width: 100%; } }