@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;900&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700&family=Noto+Serif+TC:wght@300;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tai+Heritage+Pro:wght@400;700&display=swap');

:root {
  /*****Font and typography *****/
  --body-font: "cwTeXFangSong", serif;
  --english-font: 'Tai Heritage Pro', serif;
  /* --english-font: 'Poppins', sans-serif; */
  /* --body-font: 'Noto Sans TC', sans-serif; */
  --bigtitle-font-size: 4rem;
  --title-font-size: 1.5rem;
  --normal-font-size: 1.25rem;
  --scroll-font-size: 1.05rem;
  --font-transform: scaleY(calc(100% * 1.075));
  --font-transform-0: scaleY(1);
  --letter-space: 0.04rem;
  --line-height-1200: 133%;
  --line-height-768: 128%;
  --line-height-360: 132%;
  --line-height-title: 125%;
  --line-height-small: 100%;

  /*****Font weight *****/
  --font-medium: 300;
  --font-bold: 500;
  --font-eng-bold: 700;

  /*****color *****/
  --color-title: seashell;
  --color-text: rgba(255, 245, 238, .8);
  --color-point: rgb(204, 160, 48, .8);
  --color-copyright: #d3d161;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: black;
  min-width: 320px;
  min-height: 640px;
  overflow-x: hidden;
  overflow-y: hidden;
  text-align: left;
}

/* =========================================
base
========================================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  text-decoration: none;
  list-style: none;
  font-family: var(--body-font);
}

h1,
h2,
h3 {
  color: var(--color-text);
  display: inline-block;
  margin-block-start: 0em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: var(--font-medium);
  --letter-space: 0.08rem;
  line-height: var(--line-height-title);
}

p,
h4 {
  display: inline-block;
  font-family: var(--body-font);
  font-weight: var(--font-medium);
  font-size: var(--normal-font-size);
  color: var(--color-text);
  letter-spacing: var(--letter-space);
  line-height: var(--line-height-360);
}

h4 {
  transform: var(--font-transform);
}

span {
  color: var(--color-text);
  display: inline-block;
}

.eng-text {
  display: inline-block;
  font-family: var(--english-font);
  transform: scaleY(calc(100% / 1.08));
  color: var(--color-text);
  letter-spacing: .03rem;
  line-height: 100%;
}

img,
svg,
video {
  vertical-align: middle;
}

video,
img {
  border-style: none;
  display: inline-block;
  /*img是inline元素 所以會有下白線那是文字的下留白*/
  /* width: 100%;
    height: 100%; */
}

.pointer {
  cursor: pointer;
}

.absolute {
  position: absolute;
}

section,
div,
header,
nav {
  display: block;
}

ul {
  list-style: none;
}

a {
  display: inline-block;
  text-decoration: none;
}

/* =========================================
background
========================================= */
.ddn-body-bg {
  background-color: black;
}

.ddn-background {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35%;
  top: 0;
  left: 0;
  z-index: -2;
}

.line-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;

}

.line {
  transform: scale(.9);
  z-index: -1;
  margin-left: auto;
  margin-right: auto;
  opacity: .6;
}

svg {
  width: 80%;
  height: auto;
  transform: translateY(20%);
}

.path {
  /* stroke: var(--color-title);
  stroke-width: 1rem; */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* stroke-width: 0.8px; */
  fill: none;
  transition: fill .3s linear;

}

@media (min-width:360px) {
  .line-container {
    transform: translate(10%, 10%);
  }

  .line {
    transform: scale(1.2);
  }
}

@media (min-width:600px) {
  .line-container {
    transform: translate(10%, 20%);
  }

  .line {
    transform: scale(1.4);
  }
}

@media (min-width:700px) {
  .line-container {
    transform: translate(10%, 20%);
  }

  .line {
    transform: scale(1.6);
  }
}

@media (min-width:800px) {
  .line-container {
    transform: translate(10%, 20%);
  }

  .line {
    transform: scale(1.8);
  }
}

@media (min-width:1000px) {
  .line-container {
    transform: translateY(30%);
  }

  .line {
    transform: scale(2);
  }
}

/* =========================================
home
========================================= */
.cb-tophead {
  position: relative;
  height: 55vh;
  min-height: 300px;
  z-index: 1;
}

.cb-tophead-content {
  display: flex;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100%;
}

.cb-tophead-header {
  margin: 0;
}

.cb-tophead-header h2 {

  font-size: .8rem;
  margin-block-end: 0em;
}

.cb-tophead-title {
  font-size: 1.75rem;
}

.cb-tophead-title h2 {
  font-size: 1.5em;
  margin-block-start: 0.03em;
  margin-block-end: 1.23em;
  line-height: 108%;
  margin: 0;
  padding: .5rem 0 1rem 0;
}

@media (min-width:360px) {
  .cb-tophead {
    min-height: 356px;
  }

  .cb-tophead-title {
    font-size: 2rem;
  }
}

@media (min-width:500px) {
  .cb-tophead-title {
    font-size: 6vw;
  }

}

@media (min-width:768px) {
  .cb-tophead {
    height: 85vh;
    min-height: 470px;
  }

  .cb-tophead-header .cb-tophead-title h2 {
    font-size: var(--normal-font-size);
  }
}

@media (min-width:1200px) {
  .cb-tophead-title {
    font-size: 3.41667vw;
  }
}

/* =========================================
secreenshot and video section
========================================= */

.cb-secreenshot {
  position: relative;
  z-index: 1;
}



.cb-screenshot-preview {
  position: relative;
  display: block;
  overflow: hidden;
  /* padding-bottom: 56.25%; */
  -webkit-perspective: 100px;
  -moz-perspective: 100px;
  perspective: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .cb-screenshot-preview.-lg {
  padding-bottom: 100%;
} */

.cb-screenshot-preview.-lg .-obj-pos {
  object-position: 0%;
}

.cb-screenshot-preview img,
.cb-screenshot-preview video {
  /* position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0; */
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  /* padding: 0 120px; */
  background-color: transparent;
}

.cb-screenshot-preview img.mobile-bg {
  /* top: -140px; */
  width: 100%;
  height: 100%;
  /* animation: move01 16s infinite; */
}

/* @keyframes move01{
    0%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-250px);
    }
    100%{
        transform:translateX(0px);
    }
} */

@media(min-width:768px) {
  /* .cb-screenshot-preview.-lg {
    padding-bottom: 56.25%;
  } */


}

@media(min-width:1200px) {}

/* =========================================
brief section
========================================= */
.cb-brief-grid {
  display: grid;
}

.cb-brief-grid-col.-left {
  padding: 0 0 30px 0;
}

.cb-brief-header {
  /* position: relative; */
  padding: 0px 0 0 0;
}

.cb-brief-header h2 {
  /* position: absolute;
    right: 0; */
  font-size: var(--scroll-font-size);
  font-weight: var(--font-bold);
  padding: 0;
  margin: 0;
}


.cb-brief-text-set p {
  line-height: var(--line-height-360);
}




.cb-brief-text-set p .js-text {
  display: block;
  text-align: center;
  padding: .8rem 0;
  font-style: italic;
  color: antiquewhite;
  transform: scale(.92);
  width: 100%;
}

.cb-brief-link {
  display: flex;
  gap: 3rem;
}

.cb-brief-link-item {
  width: 136px;
  height: 48px;
  position: relative;
  display: block;
  font-size: var(--normal-font-size);
  font-weight: var(--font-eng-bold);
  text-align: center;
  text-decoration: none;
  transition: all .3s ease;
  display: flex;
  position: relative;
  align-items: center;
}

.cb-brief-link-item:hover {
  justify-content: center;
}

.cb-brief-link-item:after {
  content: "";

  height: 48px;
  display: block;
  position: absolute;
  top: 48px;
  left: 0;
  height: 1px;
  background: var(--color-text);
}

.cb-brief-link-item:nth-child(1):after {
  width: 44px;
}

.cb-brief-link-item:nth-child(2):after {
  width: 60px;
}

.cb-brief-link-item:hover:after {
  width: 0px;
  transition: all 0.3s ease;
}

.cb-brief-link-item img.button-bg {
  width: 0px;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
}

.cb-brief-link-item:hover img.button-bg {
  transition: all .3s ease;
  width: 100%;
}

.cb-brief-link-item span.eng-text {
  line-height: var(--line-height-title);
}

.cb-brief-link-item div {
  display: flex;
  gap: .5rem;
  align-items: center;
  overflow: hidden;
}

.cb-brief-link-item div img {
  width: 0px;
  height: auto;
  display: none;

}

.cb-brief-link-item:hover div img {
  width: 28px;
  display: block;
  z-index: 2;
}

.cb-brief-link-item .shadow-box01::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  box-shadow: 0 0 10px rgba(255, 246, 120, 0);
  transition: all .3s ease;
}

.cb-brief-link-item:hover .shadow-box01::before {
  box-shadow: 0 0 6px rgba(255, 246, 120, 0.8);
  z-index: 2;
  width: 100%;
}

/* .cb-brief-link-item:nth-child(2):before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0px;
  width: 0px;
  height: 48px;
  
  transition: all 0.5s ease;
}
.cb-brief-link-item:nth-child(2):hover:before{
    width: 112px;
    border: solid 1px var(--color-text);
    
} */
.cb-brief-text-set {
  line-height: var(--line-height-360);
}

@media(min-width:768px) {
  .cb-brief-grid {
    grid-template-columns: minmax(190px, 30%) auto;
    gap: 20px;
  }

  .cb-brief-text-set {
    font-size: var(--normal-font-size);
    line-height: var(--line-height-768);
    letter-spacing: .08rem;
  }
}

@media(min-width:1024px) {
  .cb-brief-grid {
    grid-template-columns: minmax(300px, 30%) auto;
    gap: 80px;
  }
}

@media(min-width:1200px) {
  .cb-brief-text-set {
    max-width: 92%;
    font-size: var(--normal-font-size);
    line-height: var(--line-height-1200);
  }
}

/* =========================================
description section
========================================= */
.cb-description-header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.cb-description-header p {
  bottom: 0px;
  width: 180px;
  font-size: var(--scroll-font-size);
  line-height: var(--line-height-small);
}

.cb-description-header h2 {
  display: block;
  width: 100%;
  height: fit-content;
  position: relative;
  font-size: 80px;
  letter-spacing: -.04em;
  margin: 0;
}

.cb-description-header h2.-margin {
  margin: -10px 0 -15px 0;
}


.cb-description-text {
  margin: 30px 0 0 0;
}

.cb-description-text p {
  font-size: var(--normal-font-size);
  line-height: var(--line-height-360);
}

.-mb.cb-advantage-content,
.-mb.cb-billboard-content,
.-mb.cb-brief-content,
.-mb.cb-definition-content,
.-mb.cb-description-content,
.-mb.cb-employment-content,
.-mb.cb-employment-top,
.-mb.cb-feedback-content,
.-mb.cb-listing-content,
.-mb.cb-nextcase-content,
.-mb.cb-numstat-content,
.-mb.cb-rcfeed-content,
.-mb.cb-relcase-content,
.-mb.cb-screenshot-content,
.-mb.cb-smfeed-content,
.-mb.cb-splitshow-content,
.cb-content.-mb {
  padding-bottom: 30px;
}

.-ct.cb-advantage-content,
.-ct.cb-billboard-content,
.-ct.cb-brief-content,
.-ct.cb-definition-content,
.-ct.cb-description-content,
.-ct.cb-employment-content,
.-ct.cb-employment-top,
.-ct.cb-feedback-content,
.-ct.cb-listing-content,
.-ct.cb-nextcase-content,
.-ct.cb-numstat-content,
.-ct.cb-rcfeed-content,
.-ct.cb-relcase-content,
.-ct.cb-screenshot-content,
.-ct.cb-smfeed-content,
.-ct.cb-splitshow-content,
.cb-content.-ct {
  padding-top: 0;
}

@media (min-width: 360px) {
  .cb-description-header h2 {
    font-size: 54px;
  }
}

@media (min-width: 768px) {
  .cb-description-header {
    flex-direction: row;
  }

  .cb-description-header h2 {
    font-size: 60px;
  }

  .cb-description-text p {
    /* max-width: 805px; */
    width: 63vw;
    /* margin: 55px 0 0 0; */
    /* font-size: 22px; */
    line-height: var(--line-height-768);
  }

}

@media (min-width: 1200px) {
  .cb-description-header h2 {
    font-size: 70px;
  }

  .cb-description-text p {
    line-height: var(--line-height-1200);
  }

  .cb-description-header p {
    line-height: var(--line-height-1200);
  }

}

/* =========================================
splitshow section
========================================= */
.cb-splitshow-items {
  margin: -12px -6px;
}

.cb-splitshow-col {
  flex: 1;
}

.cb-splitshow-content {
  margin: 0 40px;
}

.cb-splitshow-item {
  position: relative;
  display: block;
  margin: 12px -14px;
}

.cb-splitshow-preview.-sm {
  padding-bottom: 100%;
}

.cb-splitshow-preview {
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 150.593%;
}

.cb-splitshow-preview img,
.cb-splitshow-preview video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.cb-splitshow-caption {
  display: block;
  margin: 0 auto;
  padding: 20px 24px;
  max-width: 100%;

  /* text-align: center; */
  text-align: left;
}

.cb-splitshow-caption p {
  font-size: var(--normal-font-size);
  line-height: var(--line-height-360);
}

.blur-bg {
  /* background: rgba(196, 159, 255, 0.06); */
  z-index: -1;
  backdrop-filter: blur(3px);
  width: 100%;
  height: 100%;
  position: absolute;
  /* border: solid .1rem rgba(255, 255, 255, 0.3); */
  /* box-shadow: 0px 0px 12px rgba(255, 255, 255, 0.5); */
  box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
}

/* 
.cb-splitshow-preview div.img-box01{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cb-splitshow-preview div.img-box01 img{
    width:100%;
    height: 100%;
    transform:scale(1.3);
    animation: scale01 16s linear infinite;
    object-fit: cover;
}

@keyframes scale01{
    0%{
        transform: scale(1.3);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.3);
    }
}
.cb-splitshow-preview div.img-box01 p{
    font-size: 4rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: .2rem;
} */


.cb-splitshow-preview div.img-box02 img:nth-child(2) {
  transform: translateY(100%);
  animation: move02 10s ease-in infinite;
}

@keyframes move02 {
  0% {
    transform: translateY(100%);
  }

  20% {
    transform: translateY(100%);
  }

  25% {
    transform: translateY(8%);
  }

  26% {
    transform: translateY(14%);
  }

  70% {
    transform: translateY(14%);
  }

  75% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(100%);
  }
}

@media (min-width: 360px) {
  .cb-splitshow-items {
    margin: -14px -7px;
  }

  .cb-splitshow-item {
    margin: 80px 20px;
  }

  .cb-splitshow-caption {
    padding: 23px 24px 36px;
    font-size: var(--scroll-font-size);
  }

  .cb-splitshow-col.-right {
    display: none;
  }

  .cb-splitshow-item.-rightInLeft {
    display: block;
  }
}

@media (min-width: 768px) {
  .cb-splitshow-items {
    display: flex;
    justify-content: space-between;
    margin: -24px -12px;
  }

  .cb-splitshow-item {
    margin: 24px 12px;
  }

  .cb-splitshow-caption {
    padding: 25px 24px;

  }

  .cb-splitshow-caption p {
    font-size: var(--scroll-font-size);
    line-height: var(--line-height-768);
  }

  .cb-splitshow-col.-right {
    display: block;
    margin: 122px 0 0 0;
  }

  .cb-splitshow-item.-rightInLeft {
    display: none;
  }
}

@media (min-width: 1024px) {
  .cb-splitshow-items {
    margin: -34px -17px;
  }

  .cb-splitshow-item {
    margin: 34px 17px;
  }

  .cb-splitshow-caption {
    padding: 34px 24px;
  }

  .cb-splitshow-caption p {
    font-size: var(--normal-font-size);
    line-height: var(--line-height-768);
  }

  .cb-splitshow-col.-right {
    margin: 170px 0 0 0;
  }
}

@media (min-width: 1200px) {
  .cb-splitshow-items {
    margin: -40px -20px;
  }

  .cb-splitshow-item {
    margin: 40px 20px;
  }

  .cb-splitshow-caption {
    padding: 40px 24px;
  }

  .cb-splitshow-caption p {
    line-height: var(--line-height-1200);
  }

  .cb-splitshow-col.-right {
    margin: 193px 0 0 0;
  }
}





/* -cb */
.-cb.cb-advantage-content,
.-cb.cb-billboard-content,
.-cb.cb-brief-content,
.-cb.cb-definition-content,
.-cb.cb-description-content,
.-cb.cb-employment-content,
.-cb.cb-employment-top,
.-cb.cb-feedback-content,
.-cb.cb-listing-content,
.-cb.cb-nextcase-content,
.-cb.cb-numstat-content,
.-cb.cb-rcfeed-content,
.-cb.cb-relcase-content,
.-cb.cb-screenshot-content,
.-cb.cb-smfeed-content,
.-cb.cb-splitshow-content,
.cb-content.-cb {
  padding-bottom: 0;
}

.cb-advantage-content,
.cb-billboard-content,
.cb-brief-content,
.cb-content,
.cb-definition-content,
.cb-description-content,
.cb-employment-content,
.cb-employment-top,
.cb-feedback-content,
.cb-listing-content,
.cb-nextcase-content,
.cb-numstat-content,
.cb-rcfeed-content,
.cb-relcase-content,
.cb-screenshot-content,
.cb-smfeed-content,
.cb-splitshow-content {
  padding: 120px 0;
}

.cb-advantage-container,
.cb-billboard-container,
.cb-brief-container,
.cb-container.-lg,
.cb-definition-container,
.cb-description-container,
.cb-employment-container,
.cb-featured-container,
.cb-feedback-container,
.cb-hero-container,
.cb-listing-container,
.cb-modal_box-container,
.cb-newsfeed-container,
.cb-nextcase-container,
.cb-numstat-container,
.cb-footer-container,
.cb-rcfeed-container,
.cb-relcase-container,
.cb-request-container,
.cb-smfeed-container,
.cb-splitshow-container,
.cb-textpaper-container,
.cb-topcover-container,
.cb-tophead-container,
.cb-work-container,
.cb-screenshot-container,
.cb-screenshot-swiper-zone {
  padding: 0 20px;
}

.-rp.cb-advantage-content,
.-rp.cb-billboard-content,
.-rp.cb-brief-content,
.-rp.cb-definition-content,
.-rp.cb-description-content,
.-rp.cb-employment-content,
.-rp.cb-employment-top,
.-rp.cb-feedback-content,
.-rp.cb-listing-content,
.-rp.cb-nextcase-content,
.-rp.cb-numstat-content,
.-rp.cb-rcfeed-content,
.-rp.cb-relcase-content,
.-rp.cb-screenshot-content,
.-rp.cb-smfeed-content,
.-rp.cb-splitshow-content,
.-rt.cb-advantage-content,
.-rt.cb-billboard-content,
.-rt.cb-brief-content,
.-rt.cb-definition-content,
.-rt.cb-description-content,
.-rt.cb-employment-content,
.-rt.cb-employment-top,
.-rt.cb-feedback-content,
.-rt.cb-listing-content,
.-rt.cb-nextcase-content,
.-rt.cb-numstat-content,
.-rt.cb-rcfeed-content,
.-rt.cb-relcase-content,
.-rt.cb-screenshot-content,
.-rt.cb-smfeed-content,
.-rt.cb-splitshow-content,
.cb-content.-rp,
.cb-content.-rt {
  padding-top: 60px;
}



@media (min-width:892px) {
  .stagbeetle a img {
    width: 120%;
    height: auto;
  }
}

@media (max-width:600px) {
  .stagbeetle a img {
    transform: translateY(0);
  }
}

@media (max-width:560px) {
  .footer-items .item .link-group {
    flex-direction: column;
  }
}

@media (min-width:1024px) {
  .stagbeetle a img {
    transform: translateY(-10%);
  }

  .footer-items .item .link-group {
    flex-direction: row;
  }

  .footer-row .item.stagbeetle a {
    height: 180px;
  }
}


@media (min-width: 360px) {

  .cb-advantage-content,
  .cb-billboard-content,
  .cb-brief-content,
  .cb-content,
  .cb-definition-content,
  .cb-description-content,
  .cb-employment-content,
  .cb-employment-top,
  .cb-feedback-content,
  .cb-listing-content,
  .cb-nextcase-content,
  .cb-numstat-content,
  .cb-rcfeed-content,
  .cb-relcase-content,
  .cb-screenshot-content,
  .cb-smfeed-content,
  .cb-splitshow-content {
    padding: 170px 0;
  }

  .cb-advantage-container,
  .cb-billboard-container,
  .cb-brief-container,
  .cb-container.-lg,
  .cb-definition-container,
  .cb-description-container,
  .cb-employment-container,
  .cb-featured-container,
  .cb-feedback-container,
  .cb-hero-container,
  .cb-listing-container,
  .cb-modal_box-container,
  .cb-newsfeed-container,
  .cb-nextcase-container,
  .cb-numstat-container,
  .cb-footer-container,
  .cb-rcfeed-container,
  .cb-relcase-container,
  .cb-request-container,
  .cb-smfeed-container,
  .cb-splitshow-container,
  .cb-textpaper-container,
  .cb-topcover-container,
  .cb-tophead-container,
  .cb-work-container,
  .cb-screenshot-container,
  .cb-screenshot-swiper-zone {
    padding: 0 15px;
  }

  .-rb.cb-advantage-content,
  .-rb.cb-billboard-content,
  .-rb.cb-brief-content,
  .-rb.cb-definition-content,
  .-rb.cb-description-content,
  .-rb.cb-employment-content,
  .-rb.cb-employment-top,
  .-rb.cb-feedback-content,
  .-rb.cb-listing-content,
  .-rb.cb-nextcase-content,
  .-rb.cb-numstat-content,
  .-rb.cb-rcfeed-content,
  .-rb.cb-relcase-content,
  .-rb.cb-screenshot-content,
  .-rb.cb-smfeed-content,
  .-rb.cb-splitshow-content,
  .-rp.cb-advantage-content,
  .-rp.cb-billboard-content,
  .-rp.cb-brief-content,
  .-rp.cb-definition-content,
  .-rp.cb-description-content,
  .-rp.cb-employment-content,
  .-rp.cb-employment-top,
  .-rp.cb-feedback-content,
  .-rp.cb-listing-content,
  .-rp.cb-nextcase-content,
  .-rp.cb-numstat-content,
  .-rp.cb-rcfeed-content,
  .-rp.cb-relcase-content,
  .-rp.cb-screenshot-content,
  .-rp.cb-smfeed-content,
  .-rp.cb-splitshow-content,
  .cb-content.-rb,
  .cb-content.-rp {
    padding-bottom: 85px;
  }

  .-mb.cb-advantage-content,
  .-mb.cb-billboard-content,
  .-mb.cb-brief-content,
  .-mb.cb-definition-content,
  .-mb.cb-description-content,
  .-mb.cb-employment-content,
  .-mb.cb-employment-top,
  .-mb.cb-feedback-content,
  .-mb.cb-listing-content,
  .-mb.cb-nextcase-content,
  .-mb.cb-numstat-content,
  .-mb.cb-rcfeed-content,
  .-mb.cb-relcase-content,
  .-mb.cb-screenshot-content,
  .-mb.cb-smfeed-content,
  .-mb.cb-splitshow-content,
  .cb-content.-mb {
    padding-bottom: 43px;
  }

  .-rp.cb-advantage-content,
  .-rp.cb-billboard-content,
  .-rp.cb-brief-content,
  .-rp.cb-definition-content,
  .-rp.cb-description-content,
  .-rp.cb-employment-content,
  .-rp.cb-employment-top,
  .-rp.cb-feedback-content,
  .-rp.cb-listing-content,
  .-rp.cb-nextcase-content,
  .-rp.cb-numstat-content,
  .-rp.cb-rcfeed-content,
  .-rp.cb-relcase-content,
  .-rp.cb-screenshot-content,
  .-rp.cb-smfeed-content,
  .-rp.cb-splitshow-content,
  .-rt.cb-advantage-content,
  .-rt.cb-billboard-content,
  .-rt.cb-brief-content,
  .-rt.cb-definition-content,
  .-rt.cb-description-content,
  .-rt.cb-employment-content,
  .-rt.cb-employment-top,
  .-rt.cb-feedback-content,
  .-rt.cb-listing-content,
  .-rt.cb-nextcase-content,
  .-rt.cb-numstat-content,
  .-rt.cb-rcfeed-content,
  .-rt.cb-relcase-content,
  .-rt.cb-screenshot-content,
  .-rt.cb-smfeed-content,
  .-rt.cb-splitshow-content,
  .cb-content.-rp,
  .cb-content.-rt {
    padding-top: 85px;
  }
}
@media (min-width: 520px) {
    .cb-advantage-container, .cb-billboard-container, .cb-brief-container, .cb-container.-lg, .cb-definition-container, .cb-description-container, .cb-employment-container, .cb-featured-container, .cb-feedback-container, .cb-hero-container, .cb-listing-container, .cb-modal_box-container, .cb-newsfeed-container, .cb-nextcase-container, .cb-numstat-container, .cb-footer-container, .cb-rcfeed-container, .cb-relcase-container, .cb-request-container, .cb-smfeed-container, .cb-splitshow-container, .cb-textpaper-container, .cb-topcover-container, .cb-tophead-container, .cb-work-container, .cb-screenshot-container, .cb-screenshot-swiper-zone {
        padding: 0 32px;
    }
}
@media (min-width: 768px) {

  .cb-advantage-content,
  .cb-billboard-content,
  .cb-brief-content,
  .cb-content,
  .cb-definition-content,
  .cb-description-content,
  .cb-employment-content,
  .cb-employment-top,
  .cb-feedback-content,
  .cb-listing-content,
  .cb-nextcase-content,
  .cb-numstat-content,
  .cb-rcfeed-content,
  .cb-relcase-content,
  .cb-screenshot-content,
  .cb-smfeed-content,
  .cb-splitshow-content {
    padding: 300px 0;
  }

  .cb-advantage-container,
  .cb-billboard-container,
  .cb-brief-container,
  .cb-container.-lg,
  .cb-definition-container,
  .cb-description-container,
  .cb-employment-container,
  .cb-featured-container,
  .cb-feedback-container,
  .cb-hero-container,
  .cb-listing-container,
  .cb-modal_box-container,
  .cb-newsfeed-container,
  .cb-nextcase-container,
  .cb-numstat-container,
  .cb-footer-container,
  .cb-rcfeed-container,
  .cb-relcase-container,
  .cb-request-container,
  .cb-smfeed-container,
  .cb-splitshow-container,
  .cb-textpaper-container,
  .cb-topcover-container,
  .cb-tophead-container,
  .cb-work-container,
  .cb-screenshot-container,
  .cb-screenshot-swiper-zone {
    padding: 0 60px;
  }

  .-rb.cb-advantage-content,
  .-rb.cb-billboard-content,
  .-rb.cb-brief-content,
  .-rb.cb-definition-content,
  .-rb.cb-description-content,
  .-rb.cb-employment-content,
  .-rb.cb-employment-top,
  .-rb.cb-feedback-content,
  .-rb.cb-listing-content,
  .-rb.cb-nextcase-content,
  .-rb.cb-numstat-content,
  .-rb.cb-rcfeed-content,
  .-rb.cb-relcase-content,
  .-rb.cb-screenshot-content,
  .-rb.cb-smfeed-content,
  .-rb.cb-splitshow-content,
  .-rp.cb-advantage-content,
  .-rp.cb-billboard-content,
  .-rp.cb-brief-content,
  .-rp.cb-definition-content,
  .-rp.cb-description-content,
  .-rp.cb-employment-content,
  .-rp.cb-employment-top,
  .-rp.cb-feedback-content,
  .-rp.cb-listing-content,
  .-rp.cb-nextcase-content,
  .-rp.cb-numstat-content,
  .-rp.cb-rcfeed-content,
  .-rp.cb-relcase-content,
  .-rp.cb-screenshot-content,
  .-rp.cb-smfeed-content,
  .-rp.cb-splitshow-content,
  .cb-content.-rb,
  .cb-content.-rp {
    padding-bottom: 150px;
  }

  .-mb.cb-advantage-content,
  .-mb.cb-billboard-content,
  .-mb.cb-brief-content,
  .-mb.cb-definition-content,
  .-mb.cb-description-content,
  .-mb.cb-employment-content,
  .-mb.cb-employment-top,
  .-mb.cb-feedback-content,
  .-mb.cb-listing-content,
  .-mb.cb-nextcase-content,
  .-mb.cb-numstat-content,
  .-mb.cb-rcfeed-content,
  .-mb.cb-relcase-content,
  .-mb.cb-screenshot-content,
  .-mb.cb-smfeed-content,
  .-mb.cb-splitshow-content,
  .cb-content.-mb {
    padding-bottom: 75px;
  }

  .-rp.cb-advantage-content,
  .-rp.cb-billboard-content,
  .-rp.cb-brief-content,
  .-rp.cb-definition-content,
  .-rp.cb-description-content,
  .-rp.cb-employment-content,
  .-rp.cb-employment-top,
  .-rp.cb-feedback-content,
  .-rp.cb-listing-content,
  .-rp.cb-nextcase-content,
  .-rp.cb-numstat-content,
  .-rp.cb-rcfeed-content,
  .-rp.cb-relcase-content,
  .-rp.cb-screenshot-content,
  .-rp.cb-smfeed-content,
  .-rp.cb-splitshow-content,
  .-rt.cb-advantage-content,
  .-rt.cb-billboard-content,
  .-rt.cb-brief-content,
  .-rt.cb-definition-content,
  .-rt.cb-description-content,
  .-rt.cb-employment-content,
  .-rt.cb-employment-top,
  .-rt.cb-feedback-content,
  .-rt.cb-listing-content,
  .-rt.cb-nextcase-content,
  .-rt.cb-numstat-content,
  .-rt.cb-rcfeed-content,
  .-rt.cb-relcase-content,
  .-rt.cb-screenshot-content,
  .-rt.cb-smfeed-content,
  .-rt.cb-splitshow-content,
  .cb-content.-rp,
  .cb-content.-rt {
    padding-top: 150px;
  }
}

@media (min-width: 1024px) {

  .cb-advantage-container,
  .cb-billboard-container,
  .cb-brief-container,
  .cb-container.-lg,
  .cb-definition-container,
  .cb-description-container,
  .cb-employment-container,
  .cb-featured-container,
  .cb-feedback-container,
  .cb-hero-container,
  .cb-listing-container,
  .cb-modal_box-container,
  .cb-newsfeed-container,
  .cb-nextcase-container,
  .cb-numstat-container,
  .cb-footer-container,
  .cb-rcfeed-container,
  .cb-relcase-container,
  .cb-request-container,
  .cb-smfeed-container,
  .cb-splitshow-container,
  .cb-textpaper-container,
  .cb-topcover-container,
  .cb-tophead-container,
  .cb-work-container,
  .cb-screenshot-container,
  .cb-screenshot-swiper-zone {
    padding: 0 120px;
  }
}

@media (min-width: 1200px) {

  .cb-advantage-container,
  .cb-billboard-container,
  .cb-brief-container,
  .cb-container.-lg,
  .cb-definition-container,
  .cb-description-container,
  .cb-employment-container,
  .cb-featured-container,
  .cb-feedback-container,
  .cb-hero-container,
  .cb-listing-container,
  .cb-modal_box-container,
  .cb-newsfeed-container,
  .cb-nextcase-container,
  .cb-numstat-container,
  .cb-footer-container,
  .cb-rcfeed-container,
  .cb-relcase-container,
  .cb-request-container,
  .cb-smfeed-container,
  .cb-splitshow-container,
  .cb-textpaper-container,
  .cb-topcover-container,
  .cb-tophead-container,
  .cb-work-container,
  .cb-screenshot-container,
  .cb-screenshot-swiper-zone {
    padding: 0 150px;
  }

}

@media (min-width: 1350px) {

  .cb-advantage-container,
  .cb-billboard-container,
  .cb-brief-container,
  .cb-container.-lg,
  .cb-definition-container,
  .cb-description-container,
  .cb-employment-container,
  .cb-featured-container,
  .cb-feedback-container,
  .cb-hero-container,
  .cb-listing-container,
  .cb-modal_box-container,
  .cb-newsfeed-container,
  .cb-nextcase-container,
  .cb-numstat-container,
  .cb-footer-container,
  .cb-rcfeed-container,
  .cb-relcase-container,
  .cb-request-container,
  .cb-smfeed-container,
  .cb-splitshow-container,
  .cb-textpaper-container,
  .cb-topcover-container,
  .cb-tophead-container,
  .cb-work-container,
  .cb-screenshot-container,
  .cb-screenshot-swiper-zone {
    padding: 0 180px;
  }

}


/*********************************************
*********************************************
LOADiNG
*********************************************
**********************************************/
#loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
  /* background-image: url("./img/sunbird/urda4-ejopi.gif"); 
    background-repeat: no-repeat;
    background-position: center;*/
}

#loading .loading-box {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(50vh - 180px);
  display: flex;
  flex-direction: column;
  width: 300px;
}

/*https://youtu.be/D9SImmHEGhg*/
.loading-box video {
  z-index: 101;
  position: relative;
  width: 225px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.loading-box .container {
  position: relative;
  width: 300px;
  height: 60px;
  display: flex;
  justify-content: center;
  /* background: #54497c; */
  align-items: center;
}

.loading-box .dot {
  margin: auto 10px;
  right: 60px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d3d161;
  box-shadow: 0 0 5px #d3d161, 0 0 10px #d3d161, 0 0 40px #d3d161;
  animation: dot-light 1.2s ease-in-out infinite;
}

@keyframes dot-light {
  0% {
    background: #d3d161;
    box-shadow: 0 0 5px #d3d161, 0 0 10px #d3d161, 0 0 40px #d3d161;
  }

  50%,
  100% {
    background: #54497c;
    box-shadow: none;
  }
}

/* .loading-box .container .loading {
    position: relative;
    background: linear-gradient(#616161 0%, #333 10%, #222);
    border: 2px sokid #000;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.5);
  } */
.loading-box .percent {
  position: relative;
  width: calc(100% - 150px);
  height: 5px;
  background: #54497c;
  border-radius: 10px;
  box-shadow: inset 0 0 10px #000;
  overflow: hidden;
  margin-top: auto;
  margin-bottom: auto;
}

.loading-box .percent .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(45deg, #d3d161, #795d10);
  animation: linear-line 6s ease-in-out infinite;
}

@keyframes linear-line {
  0% {
    width: 0;
    left: 0;
  }

  50% {
    width: 101%;
    left: 0;
  }

  100% {
    width: 0%;
    left: 101%;
  }
}

/*********************************************
  *********************************************
  Header
  *********************************************
  **********************************************/
.media-w900 {
  opacity: 1;
}

.media-w899 {
  opacity: 1;
}

header {
  position: fixed;
  width: 100vw;
  z-index: 11;
}

.media-w900 header {
  height: 4rem;
  transition: all 0.3s ease;
}

.media-w900 header:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.media-w900 header .header-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  transition: all 0.3s ease;
  /* clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); */
}

.media-w900 header:hover .header-background {
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(3px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

}

.media-w899 header {
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

header .container {
  position: relative;
  width: 100vw;
  height: 100%;
  transition: all 0.3s ease;
}

.media-w900 header .container {
  padding: 0.6rem 5rem 0.6rem 4rem;
}

.media-w899 header .container {
  padding: 0.3rem 2.8rem 0.3rem 2rem;
}

header .container .zone {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header .logo {
  z-index: 12;
}

header .logo {
  display: flex;
  align-items: center;
  justify-self: center;
}

.media-w900 header .logo {
  width: 2.3rem;
  height: auto;
}

.media-w899 header .logo {
  width: 1.6rem;
  height: auto;
}

header .logo img {
  width: 100%;
  height: 100%;
}

header a.menu {
  color: var(--color-title);
  border-radius: 5%;
  transform: rotateZ(180deg);
}

.media-w900 header .menu {
  font-size: var(--title-font-size);
  right: 1rem;
  opacity: 0.5;
}

.media-w900 header .menu:hover {
  opacity: 1;
  transition: all 0.3s ease;
}

.media-w899 header .menu {
  font-size: 1.2rem;
}

.media-w899 header a {
  display: block;
  font-size: 1.3rem;
  color: var(--color-text);
  position: relative;
  margin-top: 0.15rem;
}

.media-w899 header a p {
  display: block;
  font-size: 0.9rem;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  pointer-events: none;
  position: absolute;
  top: 0.2rem;
  right: 0;
  color: var(--color-text);
  transition: all 0.3s ease;
}

.media-w899 header a:hover p {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.media-w899 header a i {
  opacity: .7;
  transition: all 0.3s ease;
}

.media-w899 header a:hover i {
  opacity: 1;
}

nav {
  display: block;
  background: rgba(23, 29, 39, 0.89);
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 13;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 1.5rem;
  transition: all 0.3s ease;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.media-w900 nav {
  z-index: 13;
  grid-gap: 1.5rem;
}

.media-w899 nav {
  flex-direction: column;
  z-index: 13;
  grid-gap: 0.7rem;
}

nav .title-box {
  position: relative;
  display: flex;
}

.media-w900 nav .title-box {
  justify-content: center;
}

.media-w899 nav .title-box {
  align-items: center;
}

.title-box .shadow-box00 {
  position: absolute;
  top: 0;
  box-shadow: 0 0 10px rgba(255, 246, 120, 0);
  transition: all 0.3s ease;
}

.title-box:hover .shadow-box00 {
  box-shadow: 0 0 10px rgba(255, 246, 120, 0.7);
  transform: scale(0.97);
}

.media-w900 .title-box .shadow-box00 {
  left: 0;
  width: 100%;
  height: 0%;
}

.media-w900 .title-box:hover .shadow-box00 {
  height: 100%;
}

.media-w899 .title-box .shadow-box00 {
  right: 0;
  width: 0%;
  height: 100%;
}

.media-w899 .title-box:hover .shadow-box00 {
  width: 100%;
}

.media-w899 .title-box h4 {
  direction: rtl;
  unicode-bidi: bidi-override;
  transition: all 0.3s ease;
}

.media-w900 .title-box h4:nth-child(2) {
  top: 11.5rem;
}

.media-w899 .title-box h4:nth-child(2) {
  left: 1.6rem;
  font-size: 1.5rem;
}

.media-w900 .title-box:hover h4:nth-child(2) {
  top: 10.9rem;
}

.media-w899 .title-box:hover h4:nth-child(2) {
  left: 1.25rem;
}

.media-w900 .title-box h4:nth-child(3) {
  top: 13.65rem;
  opacity: 0;
  font-size: 0.05rem;
  transform: scale(0);
}

.media-w899 .title-box h4:nth-child(3) {
  left: 6.8rem;
  opacity: 0.4;
  font-size: 0.05rem;
  transform: scale(0);
}

.media-w900 .title-box h4:nth-child(4) {
  top: 14rem;
  font-size: 1.7rem;
  letter-spacing: 0.13rem;
}

.media-w899 .title-box h4:nth-child(4) {
  left: 7rem;
}

.media-w900 .title-box:hover h4:nth-child(4) {
  top: 14.5rem;
  font-size: 1.7rem;
}

.media-w899 .title-box:hover h4:nth-child(4) {
  left: 7.8rem;
}

.nav .title-box h4 {
  display: block;
  opacity: 0.5;
  transition: all 0.3s ease;
  transform: scale(0.87);
  z-index: 13;
}

.nav .title-box:hover h4 {
  opacity: 0.97;
  transform: scale(0.87);
}

.nav .title-box img {
  transition: all 0.5s ease;
  opacity: 0.7;
}

.media-w900 .title-box img {
  height: 24rem;
  width: auto;
}

.media-w899 .title-box img {
  width: 17.5rem;
  height: auto;
  transform: rotateY(180deg);
}

.media-w900 .title-box:hover img {
  transform: scale(0.97);
  opacity: 1;
}

.media-w899 .title-box:hover img {
  transform: scale(0.97) rotateY(180deg);
  opacity: 1;
}

.media-w900 nav a:nth-child(4) .title-box h4:nth-child(4) {
  letter-spacing: 1.07rem;
}

.media-w899 nav a:nth-child(2) .title-box h4:nth-child(2) {
  letter-spacing: 0.68rem;
}

.media-w900 nav .nav-closebtn {
  top: 3rem;
  right: 5rem;
  z-index: 14;
  color: var(--color-text);
  font-size: 2rem;
  transition: all 0.3s ease;
  opacity: 0.65;
}

.media-w899 nav .nav-closebtn {
  top: 1rem;
  right: 3rem;
  z-index: 14;
  color: var(--color-text);
  font-size: 1.75rem;
  transition: all 0.3s ease;
  opacity: 0.65;
}

.media-w900 nav .nav-closebtn:hover,
.media-w899 nav .nav-closebtn:hover {
  opacity: 1;
  transform: scale(0.9);
}

.empty-element00 {
  width: 100px;
  height: 100px;
  background: rosybrown;
  z-index: 15;
  top: 12rem;
}

/*--------------------------------------
  JAVA SCRIPT 調用 (HEADER)
  ---------------------------------------*/
.nav.nav-active {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

@media screen and (min-width: 900px) {
  .media-w900 {
    opacity: 1;
  }

  .media-w899 {
    opacity: 0;
  }
}

@media screen and (max-width: 899px) {
  .media-w900 {
    opacity: 0;
  }

  .media-w899 {
    opacity: 1;
  }
}


/*--------------------------------------
 2025/10/11
  ---------------------------------------*/
.cb-brief-text-zone {
  display: flex;
  flex-direction: column;
  height: fit-content;

}

.cb-brief-grid-col.-left .cb-brief-title,
.cb-brief-grid-col.-right .cb-brief-title {
  color: var(--color-point);
  font-size: 1.30rem;
}

.mb-05 {
  margin-bottom: .5rem;
}

.mb-10 {
  margin-bottom: 1rem;
}

.mb-15 {
  margin-bottom: 1.5rem;
}

.mb-20 {
  margin-bottom: 2rem;
}

.mb-25 {
  margin-bottom: 2.5rem;
}

.mb-30 {
  margin-bottom: 3rem;
}

.mb-35 {
  margin-bottom: 3.5rem;
}

.mb-40 {
  margin-bottom: 4rem;
}


.pb-05 {
  padding-bottom: .5rem;
}

.pb-10 {
  padding-bottom: 1rem;
}

.pb-15 {
  padding-bottom: 1.5rem;
}

.pb-20 {
  padding-bottom: 2rem;
}

.pb-25 {
  padding-bottom: 2.5rem;
}

.pb-30 {
  padding-bottom: 3rem;
}

.pb-35 {
  padding-bottom: 3.5rem;
}

.pb-40 {
  padding-bottom: 4rem;
}

.pb-50 {
  padding-bottom: 5rem;
  /*80*/
}

.pb-60 {
  padding-bottom: 6rem;
}

.pb-70 {
  padding-bottom: 7rem;
}

.pb-75 {
  padding-bottom: 7.5rem;
  /*120 */
}

.pt-05 {
  padding-top: .5rem;
}

.pt-10 {
  padding-top: 1rem;
}

.pt-15 {
  padding-top: 1.5rem;
}

.pt-20 {
  padding-top: 2rem;
}

.pt-25 {
  padding-top: 2.5rem;
}

.pl-05{
  padding-left: .5rem;
}
.pl-10{
  padding-left: 1rem;
}


.-ct.-mb.pt-30,
.pt-30 {
  padding-top: 3rem;
}

.-ct.-mb.pt-35,
.pt-35 {
  padding-top: 3.5rem;
}

.-ct.-mb.pt-40,
.pt-40 {
  padding-top: 4rem;
  /*64*/
}

.pt-50 {
  padding-top: 5rem;
  /*80*/
}

.pt-60 {
  padding-top: 6rem;
}

.pt-70 {
  padding-top: 7rem;
}

.pt-75 {
  padding-top: 7.5rem;
  /*120 */
}

.cb-brief-text-set .cb-brief-box p {
  display: block;
}

.cb-brief-text-set .cb-brief-box .cb-brief-ul-title .character {
  font-size: .6rem;
  margin-top: 10px;
}

.cb-brief-box,
.cb-brief-list {
  display: flex;
  flex-direction: column;
}

.cb-brief-list {
  gap: 4px;
}

.cb-brief-list.-px12 {
  gap: .5rem;
}

.cb-brief-box {
  gap: 1rem;
}

.cb-brief-list .cb-brief-ul-title {
  display: flex;
  align-items: start;
  gap: .5rem;

}

.cb-brief-list .cb-brief-ul-title .img-container {
  width: 28px;
  height: 28px;
  overflow: hidden;
}



.img-container .icon-control {
  font-size: 1.5rem;
  color: var(--color-text);
}

.cb-brief-list .cb-brief-ul-title .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cb-brief-list .s-text {
  font-size: 14px;
  line-height: 16px;
}

.cb-brief-list-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cb-brief-list .cb-brief-list-ul {
  width: 100%;
  padding-left: 1.2rem;
  display: flex;
  gap: .5rem;
  flex-direction: column;
}

.cb-brief-list .cb-brief-list-ul .item {
  display: flex;
  gap: .5rem;
  align-items: first baseline;
}

.cb-brief-list .cb-brief-list-ul .item .alphabetical-order {
  font-size: var(--normal-font-size);
}

.cb-description-container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.cb-description-header.box {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1rem;
}

.cb-description-header.box .s-title {
  font-size: var(--title-font-size);
  margin-left: 7px;
}

.cb-description-box {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.cb-description-box .cb-description-title-box .cb-description-title {
  color: var(--color-point);
  font-family: var(--body-font);
  font-weight: var(--font-medium);
  font-size: var(--title-font-size);
  letter-spacing: -0.009rem;
  line-height: 120%;
}

.cb-description-box .cb-description-title-box {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.cb-description-title-box .icon-control {
  font-size: 1rem;
  color: var(--color-point);
}

.cb-description-box .cb-description-list-zone {
  display: flex;
  height: fit-content;
  width: 100%;
  padding: 3.5rem;
  padding-bottom: 0;
  justify-content: center;
}

.cb-description-box .cb-description-list-zone .cb-description-list-group {
  max-width: 520px;
  height: fit-content;
  position: relative;
}

.cb-description-box .cb-description-list-zone .cb-description-list-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: -16px;
  width: 3px;
  height: 100%;
  background: var(--color-point);
}

.cb-description-list-group .cb-description-list {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}




.cb-description-list .item {
  display: flex;
  gap: .25rem;
  align-items: first baseline;
}

.cb-description-list-group.-ndnum {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.cb-description-list-group .cb-description-list.-ndnum1-1,
.cb-description-list-group .cb-description-list.-ndnum1-2,
.cb-description-list-group .cb-description-list.-ndnum1-3,
.cb-description-list-group .cb-description-list.-ndnum2-1,
.cb-description-list-group .cb-description-list.-ndnum2-2,
.cb-description-list-group .cb-description-list.-ndnum2-3 {
  position: relative;
  gap: 4px;
}

.cb-description-list-group .cb-description-list.-ndnum1-1::before,
.cb-description-list-group .cb-description-list.-ndnum1-2::before,
.cb-description-list-group .cb-description-list.-ndnum1-3::before,
.cb-description-list-group .cb-description-list.-ndnum2-1::before,
.cb-description-list-group .cb-description-list.-ndnum2-2::before,
.cb-description-list-group .cb-description-list.-ndnum2-3::before {

  position: absolute;
  left: -3.25rem;
  color: var(--color-point);
  font-weight: var(--font-bold);
  font-size: var(--normal-font-size);
  top: 0;
}

.cb-description-list-group .cb-description-list.-ndnum1-1::before {
  content: "1.1";
}

.cb-description-list-group .cb-description-list.-ndnum1-2::before {
  content: "1.2";
}

.cb-description-list-group .cb-description-list.-ndnum1-3::before {

  content: "1.3";
}

.cb-description-list-group .cb-description-list.-ndnum2-1::before {
  content: "2.1";
}

.cb-description-list-group .cb-description-list.-ndnum2-2::before {
  content: "2.2";
}

.cb-description-list-group .cb-description-list.-ndnum2-3::before {

  content: "2.3";
}

.cb-description-list .alphabetical-order {
  font-size: var(--normal-font-size);
}

.cb-description-list .item p {
  color: var(--color-point);
  font-weight: var(--font-bold);
}

.cb-description-list.-tur .item {
  align-items: first baseline;
}

.cb-description-list.-tur .item .alphabetical-order.triangle {}

.cb-screenshot-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-screenshot-preview.-iwh {
  max-width: 1200px;
}

.cb-screenshot-preview.beforetext::before,
.cb-screenshot-preview.aftertext::after,
.swiper-slide.beforetext::before,
.swiper-slide.aftertext::after {
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--color-text);
  font-size: 16px;
  padding: 0;
  border-radius: 5px;
  z-index: 2;

}

.cb-screenshot-preview.beforetext.-vnriwc::before,
.cb-screenshot-preview.aftertext.-vnriwc::after,
.swiper-slide.beforetext.-vnriwc::before,
.swiper-slide.aftertext.-vnriwc::after {
  color: #222222;
}

.cb-screenshot-preview.beforetext::before,
.swiper-slide.beforetext::before {
  content: "Before";
}

.cb-screenshot-preview.aftertext::after,
.swiper-slide.aftertext::after {
  content: "After";
}

.p-list-zone {
  width: 100%;
  height: fit-content;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}

.p-list-zone .p-list-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  align-self: center;
}

.p-list-zone .p-list-container.-w100 {
  max-width: 100%;
  align-self: unset;
  gap: 4px;
}
 
.p-list-zone .p-list-container .item.-g-col-1 {
  grid-template-columns: 1fr;
}

.p-list-zone .p-list-container .item.-g-col-2 {
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 4px;
}

.p-list-zone .p-list-container .alphabetical-order:not(.triangle):not(.dot):not(.star):not(.square)  {
  font-size: var(--normal-font-size);
}
.none-order{
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  gap: 4px;
}
.p-list-zone .p-list-container .item.-f-row-2 {
  display: flex;
  gap: 4px;
  align-items: first baseline;
}

.p-list-zone .p-list-container .item .box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px;
}

.alphabetical-order.triangle {
  font-size: 1.12rem;
  margin-top: 2px;
}

.alphabetical-order.dot {
  font-size: 1.75rem;
}

.alphabetical-order.star,
.alphabetical-order.square,
.alphabetical-order.dot {
  align-self: flex-start;
  justify-self: center;
}

.cb-screenshot-swiper-zone {
  width: 100%;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-screenshot-swiper-container.swiper {
  height: fit-content;
}

.cb-screenshot-wrapper {
  max-width: 1200px;
}

.swiper-slide {
  max-width: 1200px;
}

.swiper-slide img,
.swiper-slide video {
  width: 100%;
  height: auto;
}

.swiper-button-next,
.swiper-button-prev {
  color: #7a7a7a !important;
  width: 24px !important;
  height: 24px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

.swiper-button-next svg,
.swiper-button-prev svg {
  width: auto !important;
  height: 12px !important;
}

.swiper-button-next svg {
  margin-left: 2px;
  margin-top: -4px;
}

.swiper-button-prev svg {
  margin-left: -2px;
}

.swiper-button-next {
  right: 12px !important;
}

.swiper-button-prev {
  left: 12px !important;
}




@media (max-width: 1200px) {

  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 16px;
    top: 16px;
    left: 16px;
  }
}

@media (max-width: 1024px) {}

@media (max-width: 980px) {

  .alphabetical-order.square {
    margin-top: -1.5px;
    font-size: 1.65rem;
  }

  .alphabetical-order.star {
    margin-top: 1px;
    font-size: 1.5rem;
  }
}

@media (max-width: 900px) {

  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 14px;
    top: 10px;
    left: 10px;
  }

}

@media (max-width:768px) {
  .cb-brief-ul-title .character {
    font-size: .5rem;
    margin-top: 7px;
  }

  .alphabetical-order.dot {
    margin-top: -1px;
  }

  .alphabetical-order.square {
    margin-top: -2px;
  }

  .pt-75 {
    padding-top: 4rem;
  }

  .pb-75 {
    padding-bottom: 4rem;
  }

  .mt-75 {
    margin-top: 4rem;
  }

  .mb-75 {
    margin-bottom: 4rem;
  }

  .pb-35 {
    padding-bottom: 2.75rem;
  }
}

@media (max-width: 767px) {



  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 14px;
    top: 12px;
    left: 12px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    color: #7a7a7a !important;
    width: 18px !important;
    height: 18px !important;
  }

  .swiper-button-next svg,
  .swiper-button-prev svg {
    width: auto !important;
    height: 10px !important;
  }
}

@media (max-width: 640px) {

  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 12px;
    top: 8px;
    left: 10px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    transform: translateY(120%);
    color: #7a7a7a !important;
    width: 15px !important;
    height: 15px !important;
  }

  .swiper-button-next svg,
  .swiper-button-prev svg {
    width: auto !important;
    height: 8px !important;
  }

  .swiper-button-next svg {
    margin-left: 1px;
    margin-top: -4px;
  }

  .swiper-button-prev svg {
    margin-left: -1px;
  }
}

.swiper-button-next {
  right: 8px !important;
}

.swiper-button-prev {
  left: 8px !important;
}

.cb-description-header.box .s-title {
  margin-left: 5px;
}


@media (max-width: 560px) {
  .pb-35 {
    padding-bottom: 2.5rem;
  }

  .pt-75 {
    padding-top: 3rem;
  }

  .pb-75 {
    padding-bottom: 3rem;
  }

  .mt-75 {
    margin-top: 3rem;
  }

  .mb-75 {
    margin-bottom: 3rem;
  }



  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 10px;
    top: 5px;
    left: 5px;
  }
}

@media (max-width: 420px) {

  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 10px;
    top: 5px;
    left: 5px;
  }
}

@media (max-width: 390px) {

  .cb-screenshot-preview.beforetext::before,
  .cb-screenshot-preview.aftertext::after,
  .swiper-slide.beforetext::before,
  .swiper-slide.aftertext::after {
    font-size: 8px;
    top: 4px;
    left: 4px;
  }
}

@media screen and (min-width: 981px) {
  .alphabetical-order.triangle {
    margin-top: 4px;
  }

  .alphabetical-order.star {
    margin-top: 3px;
  }
}

@media screen and (max-width: 980px) {
  .cb-brief-text-set .cb-brief-box .cb-brief-ul-title .character {
    margin-top: 5px;
  }
}

@media screen and (max-width: 560px) {
  .-mb.cb-description-content {
    padding-top: 11rem;
  }

  .cb-brief-content {
    padding-bottom: 0;
  }
}

@media (max-width: 480px) {}

.figma-link-container {
  margin-top: 1.5rem;
  border: 1px solid var(--color-point);
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  position: relative;
}


.figma-link-container .title-box {
  display: flex;
  gap: 4px;
  width: fit-content;
  height: fit-content;
  padding: 0;
  align-items: center;

}

.figma-link-container .title-box .icon-control,
.figma-link-container .title-box .text {
  color: var(--color-point);
  font-size: 1rem
}

.figma-link-container .title-box .icon-control {
  padding: .5rem 1.5rem .5rem .75rem;
  border-right: 1px solid var(--color-point);
}

.figma-link-container .title-box .text {
  font-size: 1.2rem;
  padding: 0 1rem 0 .5rem;
}

.figma-link-container .figma-link-box {
  padding: 0 1rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.figma-link-container .figma-link-box .link-text {
  color: var(--color-point);
  font-size: 1rem;
  display: inline-block;
  height: 100%;
  position: relative;
}

.figma-link-container .figma-link-box .link-text::after {
  content: "◆";
  position: absolute;
  bottom: 5px;
  left: -10px;
  font-size: .5rem;
  transition: all 0.3s ease;
  opacity: 0;
}

.figma-link-container .figma-link-box .link-text:hover::after {
  opacity: 1;
}




@media (max-width: 768px) {
  .cb-description-header h2 {
    font-size: 54px;
  }
}

@media (max-width: 640px) {
  .cb-description-header h2 {
    font-size: 2.6rem;
  }
}

@media (max-width: 510px) {
  .cb-description-header h2 {
    font-size: 2.6rem;
  }
}

@media (max-width: 440px) {
  .cb-description-header h2 {
    font-size: 2.2rem;
  }
}

.cb-brief-content {
  padding: 240px 0;
}

@media (max-width: 768px) {
  .cb-brief-content {
    padding: 170px 0;
  }
}

@media (max-width: 480px) {
  .cb-brief-content {
    padding: 100px 0;
  }
}
.box .nu {
  padding-top: 1.5px;
}