/* style.css */

  @font-face {
    font-family: "Jost";
    src:
      url("../font/Jost-ExtraLight.woff") format("woff"),
      url("../font/Jost-ExtraLight.ttf") format("truetype");
  }

  #m-visual {
    width: 100%;
    height: 100%;
  }

  #m-visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
  }

  #visual img {
    margin-top: 90px;
    width: 100%;
    height: auto;
  }

  #visual figure {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  #visual figure div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

  }

  /* about 글씨 추가부분 */

  #visual figure .img-t {
    color: #fff;
    font-family: 'Jost';
    font-size: 75px;
    padding-top: 120px;
  }

  #visual figure .img-st {
    color: #fff;
    font-size: 24px;
    font-family: 'SUIT';
    font-weight: 400;
    padding-top: 11px;
  }

  /* //about 글씨 추가부분 */

  .c-inner {
    /* border: 3px solid pink; */
    width: 70.31%;
    overflow: hidden;
    margin: 0 auto;
  }

  /* left-nav */

  .l-nav {
    margin-top: 216px;
    width: 18.52%;
    float: left;
    font-family: 'SUIT';
    font-weight: 700;
    font-size: 17px;

  }

  .menu {
    display: none;
  }

  .menu.active {
    display: block;
  }

  .menu li {
    display: block;
  }

  .menu li a {
    display: block;
    font-family: 'SUIT';
    font-weight: 300;
    font-size: 18px;
    color: #909090;
    padding: 3px 0 3px 0;
    margin: 12px 0 10px 0;
  }

  .menu li a:hover {
    color: #184990;
    text-decoration: underline;
  }

  .section-title {
    float: left;
  }

  .section-icon {
    float: right;
  }

  .l-nav li {
    text-align: left;
  }

  .l-nav .l-nav-title {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 13px;
    letter-spacing: 0.05em;
  }

  .l-nav .l-nav-title .section-title {
    padding: 0 5px 5px 0;
  }

  .l-nav .l-nav-title .section-icon {
    width: 22px;
    height: 22px;
    text-align: center;
    margin: 3px auto 4px;
  }

  .l-nav .l-nav-title a:hover {
    color: #184990;
    text-decoration: underline;
  }

  /* //left-nav */

  /* about */
  .inner {
    width: 70.31%;
    height: auto;
    margin: 0 auto;
  }

  .inner .ci {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner img {
    width: 33px;
    height: 28px;
    margin-top: 87px;
  }

  .inner .a-bt {
    text-align: center;
    padding: 82px 111px 0 111px;
    font-family: 'SUIT';
    font-weight: 500;
    font-size: 25px;
    line-height: 38px;
    color: #909090;
    letter-spacing: -0.01em;
  }

  .inner .a-bt span {
    font-family: 'SUIT';
    font-weight: 600;
    color: #184990;
  }

  /* main-new-item */
  .m-n-i {
    width: 100%;
    margin-top: 62px;
    display: flex;
    
  }

  .m-n-i figure {
    /* border: 1px solid red; */
    width: 22.04%;
    margin: 0 1.48% 1.48% 0;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 172px;
  }

  .m-n-i-i {
    
    width: 100%;
    height: 410px;
    display: flex;
    justify-content: center;
    /* 가로 정렬 */
    align-items: center;
    /* 세로 정렬 */
  }

  .m-n-i img {
    max-width: 100%;
    /* 이미지가 부모 요소를 넘지 않도록 설정 */
    max-height: 100%;
    /* 이미지가 부모 요소를 넘지 않도록 설정 */
    object-fit: contain;
    /* 이미지 비율을 유지하며 부모 요소에 맞게 조정 */
  }

  /* 이걸 왜 넣었지... 일단 숨기기 */
  .m-n-i figure:first-child img {
    /* transform: translateY(45px); */
  }

  .m-n-i-i:hover {
    background: #f8f9fc;
  }

  /* //main-new-item */

  /* main-table of contents */
  .m-toc {
    width: 100%;
    display: flex;
  }

  .side {
    border-left: 1px solid #fff;
    width: 14.84%;
    height: 756px;
    background: #232323;
  }

  .side:first-child {
    border: none;
  }

  .m-category {
    border-left: 1px solid #fff;
    width: 23.44%;
    height: 756px;
    background: #232323;
    position: relative;
  }

  .m-c-in {
    font-family: 'SUIT';
    font-weight: 900;
    color: #fff;
    font-size: 24px;
    padding: 50px 39px 0 39px;
  }

  .m-c-t {
    font-family: 'SUIT';
    font-weight: 700;
    font-size: 13px;
    color: #184990;
    padding: 50px 39px 0 39px;
  }

  .m-c-st {
    list-style: none;
    font-family: 'SUIT';
    font-weight: 500;
    color: #909090;
    padding: 18px 39px 0 39px;
  }

  .m-category img {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 487px;
    filter: grayscale(100%);
    transition: filter 0 ease;
  }

  .m-category:hover {
    transform: translateY(-37px);
  }

  .m-category img:hover {
    filter: grayscale(0%);
  }

  /* //main-table of contents */




  /* about-production-process */
  .inner .a-p-p {
    text-align: center;
    margin-top: 37px;
  }

  .a-p-p .circle {
    margin-top: 10px;
    width: 162px;
    height: 162px;
    border-radius: 50%;
    border: 1px solid #909090;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .a-p-p .circle .a-p-p-t {
    /* border: 1px solid pink; */
    padding-bottom: 82px;
    letter-spacing: -0.01em;
    font-size: 20px;
    font-family: 'SUIT';
    font-weight: 500;
    margin: 81px 0 0 0;
    line-height: 25px;
    color: #909090;
  }

  .a-p-p .circle:hover {
    background: #184990;
    border: 1px solid #184990;
  }

  .a-p-p .circle .a-p-p-t:hover {
    color: #fff;
  }

  .a-p-p img {
    width: auto;
    height: auto;
    margin-bottom: 150px;
  }

  /* //about-production-process */

  /* about-contents */
  .a-c {
    margin-top: 41px;
  }

  .a-c-03 {
    width: 100%;
    display: flex;
  }

  .a-c-03 img {
    background: #184990;
    width: 31.36%;
    margin: 0 2.96% 2.96% 0;
  }

  .a-c-03 img:last-child {
    margin-right: 0;
  }

  /* //about-contents */


  /* detail-contents */

  /* //detail-contents */

  /* contents */
  .c-inner .contents {
    /* border: 2px solid rgb(33, 131, 134); */
    width: 78.52%;
    height: auto;
    float: right;
    text-align: center;
  }

  /* detail-image */
  .d-inner {
    /* border: 3px solid rgb(187, 202, 53); */
    width: 77.45%;
    margin: 0 auto;
  }

  .d-i-i {
    width: 438px;
    height: 528px;
    margin: 43px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fc;
  }

  .d-i-i img {
    width: auto;
    height: 442px;
    display: none;
  }

  .d-i-i img.active {
    display: block;
  }

  .d-inner figure img {
    width: auto;
    height: 442px;
    /* background: #f8f9fc; */
  }

  .d-t {
    margin-top: 75px;
  }

  .d-ht {
    border-bottom: 1px solid #e0e0e0;
    /* border: 1px solid rgb(187, 202, 53); */
    height: 45px;
    width: 100%;
    overflow: hidden;
  }

  .d-ht:nth-child(3) {
    height: 70px;
}

  .d-t-l {
    /* border: 1px solid rgb(14, 156, 221); */
    width: 14.37%;
    height: 100%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .d-ht:nth-child(3) .d-t-l  {
    padding-top: 9px;
    align-items: start;
  }

  .d-t-t {
    /* border: 1px solid rgb(23, 197, 66); */
    padding: 5px;
    font-family: 'SUIT';
    font-weight: 700;
    font-size: 16px;
    color: #323232;
  }

  .section {
    display: none; /* 초기에는 모든 섹션 숨김 */
  }

  .section.active {
    /* border: 1px solid pink; */
    display: block; /* 활성화된 섹션만 보이도록 함 */
    padding-bottom: 6px;
  }

  .section-link, .d-t-st {
    /* border: 1px solid blue; */
    font-family: 'SUIT';
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
  }

  .container {
    /* border: 1px solid red; */
    display: flex;
    flex-direction: row; /* 가로로 배열되도록 수정 */
    flex-wrap: wrap; /* 화면 크기에 맞춰 자동으로 줄바꿈되도록 수정 */
    margin-top: 5px;
  }

  .section-link:hover, .clickable-text:hover {
    color: #184990;
    text-decoration: underline;
  }

  .section-links {
    width: 85.63%;
    height: 100%;
    float: right;
    text-align: left;
    display: flex;
    align-items: center;
  }

  .section-link {
    color: #909090;
  }

  .clickable-text {
    /* border: 1px solid #6682ab; */
    display: inline-block;
    font-family: 'SUIT';
    font-weight: 400;
    font-size: 16px;
    padding: 6px 6px;
    color: #909090;
    line-height: 24px;
    cursor: pointer;
  }

  .clickable-text:first-child {
    padding-left: 0;
  }

  .clickable-textt:last-child {
    padding-right: 0;
  }

  .d-ht:nth-child(3) .clickable-text, .d-ht:nth-child(4) .clickable-text {
  color: #323232;
}
  /* //detail-image */

  h2 {
    /* border: 10px solid rgb(33, 131, 134); */
    text-align: center;
    font-family: 'SUIT';
    font-weight: 600;
    font-size: 25px;
    color: #323232;
    margin-top: 121px;
  }

  .c-inner .contents .box {
    width: 100%;
    height: auto;
    display: flex;
  }

  .c-inner .contents .box figure {
    width: 22.17%;
    margin-right: 3.77%;
    margin-top: 66px;
  }

  .c-inner .contents .box figure:last-child {
    margin-right: 0;
  }

  /* item-image */
  .i-i {
    /* border: 1px solid #e0e0e0; */
    width: 100%;
    height: 344px;
    display: flex;
    justify-content: center;
    /* 수평 가운데 정렬 */
    /* align-items: flex-end;  */
    position: relative;
  }

  .i-i img {
    position: absolute;
    bottom: 18px;
  }

  .i-i:hover {
    background: #f8f9fc;
  }

  .i-i .new {
    position: absolute;
    top: 15px;
    right: 20px;
    font-family: 'SUIT';
    font-weight: 500;
    font-size: 17px;
    color: #184990;
  }

  .i-i .best {
    color: #f17db1;
  }

  .i-i-st {
    position: absolute;
    bottom: 0;
    font-family: 'SUIT';
    font-weight: 400;
    font-size: 14px;
    color: #184990;
  }

  /* //item-image */

  /* item-font option */
  /* item-title */
  .i-t {
    font-family: 'SUIT';
    font-weight: 500;
    font-size: 16px;
    color: #323232;
    padding-top: 13px;
  }

  /* item-sub title */
  .i-st {
    font-family: 'SUIT';
    font-weight: 400;
    font-size: 13px;
    color: #909090;
    padding-top: 2px;
  }

  /* //item-font option */


  /* 1page-button */

  .c-inner .contents .bt {
    /* border: 3px solid rgb(29, 165, 51); */
    margin: 152px 0 auto 0;
    display: flex;
    justify-content: center;
  }

  .c-inner .contents .bt p {
    /* background: #184990; */
    width: 36px;
    height: 36px;
    margin-right: 15px;
    font-family: 'SUIT';
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .c-inner .contents .bt p:last-child {
    margin-right: 0;
  }

  .c-inner .contents .bt .not-click {
    background: #fff;
    font-family: 'SUIT';
    font-weight: 700;
    font-size: 19px;
    color: #184990;
    text-decoration: underline;
  }

  .c-inner .contents .bt p a {
    width: 36px;
    height: 36px;
    font-size: 19px;
    color: #909090;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .c-inner .contents .bt p a:hover {
    background: #184990;
    color: #fff;
  }

  .c-inner .contents .bt .np {
    border: 1px solid #909090;
    background: url(../images/sub/nailcare/next.gif) no-repeat center;
  }

  .c-inner .contents .bt .np a:hover {
    border: 1px solid #184990;
    background: url(../images/sub/nailcare/next-hover.gif) no-repeat center;
  }

  /* //1page-button */


  /* 2page-button */

  .c-inner .contents .bt .pp {
    border: 1px solid #909090;
    background: url(../images/sub/nailcare/next.gif) no-repeat center;
    transform: scaleX(-1);
  }

  .c-inner .contents .bt .pp a:hover {
    border: 1px solid #184990;
    background: url(../images/sub/nailcare/next-hover.gif) no-repeat center;
  }



  /* //2page-button */


  /* footer: pc형 */