@charset "utf-8";

/* ********** Patentpia Wiki ********** */
article.wiki-section { padding-top: 0; }
.wiki-section .section-title .title .tit { display: inline-block; line-height: 1.6; }
.wiki-section .section-title .title .tit .color { color: var(--theme-color); }
.wiki-section .section-title .title .tit .icon { position: relative; top: 5px; width: 35px; height: auto; margin-left: 8px; }
.wiki-section .section-title .title .more-btn { display: inline-block; margin-left: 25px; }


/* ********** com title ********** */
.section-title { position: relative; padding-bottom: 30px; }
.section-title .tit { font-size: 2.1rem; }
.section-title .label { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.section-title .label .icon { width: 28px; height: auto; }
.section-title .label .txt { font-size: 1.5rem; letter-spacing: 1.2px;  }
.section-title .title { position: relative; }
.section-title .title .tit { font-size: 3rem; font-weight: 300; }
.section-title .title .tit strong { font-weight: 700; }


/* ********** com more button ********** */
.more-btn { position: relative; cursor: pointer; }
.more-btn .btn { position: relative; display: flex; gap: 5px; align-items: center; opacity: .5; }
.more-btn .btn:hover { opacity: 1; }
.more-btn .btn .txt { font-size: 1.3rem; font-weight: 500; }
.more-btn .btn .icon { width: 18px; height: auto; position: relative; top: 2px; }


/* ********** Patentpia Wiki ********** */
article.wiki-section { padding-top: 0; }
.wiki-section .section-title .title .tit { display: inline-block; line-height: 1.6; }
.wiki-section .section-title .title .tit .color { color: var(--theme-color); }
.wiki-section .section-title .title .tit .icon { position: relative; top: 5px; width: 35px; height: auto; margin-left: 8px; }
.wiki-section .section-title .title .more-btn { display: inline-block; margin-left: 25px; }


.category ul li { display: inline-block; margin: 3px; }
.category ul li a { display: block; font-size: 1.3rem; padding: 7px 20px; border-radius: 30px; border:1px solid #ddd; font-weight: 500; color: #27356b; transition: border-color .2s; }
.category ul li.on a { background: #27356b; color: #fff; border-color: #27356b; }
.wiki-list { display: flex; flex-wrap: wrap; column-gap: 30px; margin-top: 30px; }
.wiki-list .item { width: 30%; border-bottom: 1px solid #ddd; padding: 15px 5px; }
.wiki-list .item:nth-child(-n+3) { border-top: 1px solid #000; }
.wiki-list .item .label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; width: 100%; padding-bottom: 5px; }
.wiki-list .item .label a {color: #818181; font-size: 1.3rem; }
.wiki-list .item .label a:hover { text-decoration: underline; color: var(--green-blue); }
.wiki-list .item .title { font-size: 1.6rem; }
.wiki-list .item .title a { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; width: 100%; }
.wiki-list .item .title a:hover { text-decoration: underline; }


@media (max-width: 1200px) {
  .category ul { white-space: nowrap; overflow-y: auto; }
  .category ul li { margin: 0 1px; }
  .category ul li a { font-size: 1.3rem; padding: 5px 15px; }
  .wiki-list { column-gap: 20px; }
  .wiki-list .item { padding: 13px 5px; width: 31%; }
  .wiki-list .item .label { font-size: 1.2rem; }
  .wiki-list .item .title { font-size: 1.5rem; }
}

@media (max-width: 860px) {
  .wiki-section .section-title .title .tit .icon { width: 25px; }
}

@media (max-width: 860px) {
    .wiki-list { column-gap: 15px; }  
    .wiki-list .item { padding: 10px 5px; width: 47%; }
    .wiki-list .item:nth-child(3) { border-top: 0; }
}

@media (max-width: 490px) {
  .wiki-section .section-title .title .more-btn { display: block; margin: 10px 0 0; }

  .wiki-list { display: block; }
  .wiki-list .item { width: 100%; }
  .wiki-list .item .title { font-size: 1.4rem; }
  .wiki-list .item:nth-child(2) { border-top: 0; }
}



/* ********** Patentpia Plan ********** */

.service-idea-wrap { padding: 70px 0;}
.read-more-btn .read-more { color: #868686; display: flex; align-items: center; font-size: 1.5rem; font-weight: 500; cursor: pointer; justify-content: center;}
.service-idea-wrap .service-idea-list { display: flex; gap: 30px;}
.service-idea-wrap .service-idea-list .navigation-area { flex-basis: 380px;}
.service-idea-wrap .service-idea-list .navigation-area ul { position: relative; height: 410px; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none;}
.service-idea-wrap .service-idea-list .navigation-area ul::-webkit-scrollbar { display: none;}
.service-idea-wrap .service-idea-list .navigation-area ul li { position: relative; padding: 15px 30px;}
.service-idea-wrap .service-idea-list .navigation-area ul li:after { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #D9D9D9;}
.service-idea-wrap .service-idea-list .navigation-area ul li a { display: block; font-size: 1.6rem;}
.service-idea-wrap .service-idea-list .navigation-area ul li a img.hot { width: auto; height: 17px; margin-left: 3px; position: relative; top: 3px;}
.service-idea-wrap .service-idea-list .navigation-area ul li a:hover { color: #27356b;}
.service-idea-wrap .service-idea-list .navigation-area ul li.on a { color: #27356b; font-weight: 600;}
.service-idea-wrap .service-idea-list .navigation-area ul li.on:after { background: #27356b; z-index: 1;}
.service-idea-wrap .service-idea-list .service-list-area { position: relative; flex-basis: calc(100% - 380px);}
.service-idea-wrap .service-idea-list .service-list-area ul { display: flex; flex-wrap: wrap; gap: 30px;}
.service-idea-wrap .service-idea-list .service-list-area ul li { flex: 1 1 30%; border: 4px solid #D9E0EA; border-radius: 4px; padding: 40px 15px; text-align: center; cursor: pointer;}
.service-idea-wrap .service-idea-list .service-list-area ul li:hover { border-color: #27356b;}
.service-idea-wrap .service-idea-list .service-list-area ul li .tit { padding-bottom: 20px;}
.service-idea-wrap .service-idea-list .service-list-area ul li .tit p { font-size: 1.8rem; font-weight: 500; word-break: keep-all;}
.service-idea-wrap .service-idea-list .service-list-area ul li .read-more-btn .read-more .symbol { width: 20px; height: auto; margin-right: 5px;}
.service-idea-wrap .service-idea-list .service-list-area ul li .read-more-btn .read-more .arrow { width: 10px; height: auto; position: relative; top: 1px; margin-left: 5px; opacity: 0.6;}
.service-idea-wrap .service-idea-list .service-list-area .list-more { position: absolute; bottom: -30px; right: 0;}

@media (max-width: 1200px) {
  .service-idea-wrap { padding: 50px 30px; }
  .service-idea-wrap .service-idea-list .navigation-area { flex-basis: 250px; }
  .service-idea-wrap .service-idea-list .navigation-area ul li { padding: 13px 0 13px 20px; }
  .service-idea-wrap .service-idea-list .navigation-area ul li a { font-size: 1.4rem; }
  .service-idea-wrap .service-idea-list .service-list-area { flex-basis: calc(100% - 250px); }
  .service-idea-wrap .service-idea-list .service-list-area ul { gap: 20px; }
  .service-idea-wrap .service-idea-list .service-list-area ul li { padding: 30px 10px; }
  .service-idea-wrap .service-idea-list .service-list-area ul li .tit p { font-size: 1.6rem; }
  .service-idea-wrap .service-idea-list .service-list-area ul li .read-more-btn .read-more { font-size: 1.3rem; }
}
@media (max-width: 860px) {
  .service-idea-wrap .service-idea-list { display: block; }
  .service-idea-wrap .service-idea-list .navigation-area ul { white-space: nowrap; overflow-y: auto; height: auto; margin-bottom: 20px; }
  .service-idea-wrap .service-idea-list .navigation-area ul li { display: inline-block; padding: 13px 15px; }
  .service-idea-wrap .service-idea-list .navigation-area ul li:after { width: 100%; height: 2px; bottom: 0; top: unset; }
  .service-idea-wrap .service-idea-list .service-list-area ul li { padding: 20px 5px; }
  .service-idea-wrap .service-idea-list .service-list-area ul li .tit p { font-size: 1.5rem; }
}
@media (max-width: 490px) {
  .service-idea-wrap .service-idea-list .service-list-area ul li .tit p { font-size: 1.4rem; }
  .service-idea-wrap .service-idea-list .service-list-area ul li .read-more-btn .read-more .symbol { width: 15px; }
  .service-idea-wrap .service-idea-list .service-list-area ul li .read-more-btn .read-more .txt { font-size: 1.2rem; }
}


/* ********** Patentpia Prout ********** */

.product-wrap { padding: 70px 0;}
.product-wrap .product-list { display: flex; gap: 30px; flex-wrap: wrap;}
.product-wrap .product-list .product-item { flex-basis: calc(20% - 24px);}
.product-wrap .product-list .product-item .title-area { display: flex; align-items: center; margin-bottom: 15px;}
.product-wrap .product-list .product-item .title-area .symbol { width: 40px; height: 40px; margin-right: 10px;}
.product-wrap .product-list .product-item .title-area .tit { font-size: 2.1rem; font-family: "nixgonfonts";}
.product-wrap .product-list .product-item .title-area .tit a { display: inline-block; position: relative;}
.product-wrap .product-list .product-item .title-area .tit a:after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: #000; transform: scaleX(0); transform-origin: left; transition: transform 0.2s linear;}
.product-wrap .product-list .product-item .title-area .tit:hover a:after { transform: scaleX(1);}
.product-wrap .product-list .product-item .desc-area .txt { font-size: 1.5rem; color: #777; line-height: 1.2;}
.product-wrap .product-list .product-item .img-area { position: relative; height: 0; padding-bottom: 65%; overflow: hidden; border: 4px solid #D9E0EA; margin-top: 20px; border-radius: 3px;}
.product-wrap .product-list .product-item .img-area:hover { border: 4px solid #27356b}
.product-wrap .product-list .product-item .img-area .thumbnail { width: 100%; transition: width 0.2s;}
.product-wrap .product-list .product-item:hover .img-area .thumbnail { width: 102%;}

@media (max-width: 1200px) {
  .product-wrap { padding: 70px 20px 70px;}
  .product-wrap .product-list { gap: 20px;}
  .product-wrap .product-list .product-item { flex-basis: calc(25% - 15px);}
  .product-wrap .product-list .product-item .title-area .tit { font-size: 1.7rem;}
  .product-wrap .product-list .product-item .desc-area .txt { font-size: 1.3rem;}
}
@media (max-width: 830px) {
  .product-wrap .product-list { flex-wrap: wrap;}
  .product-wrap .product-list .product-item { flex-grow: unset; flex-basis: 31%;}
}
@media (max-width: 600px) {
  .product-wrap { padding: 70px 30px 70px;}
  .product-wrap .product-list .product-item { flex-basis: 46.5%;}
  .product-wrap .product-list .product-item .title-area .symbol { width: 30px; height: 30px;}
  .product-wrap .product-list .product-item .title-area .tit { font-size: 1.6rem;}
}