button, input, optgroup, option, select, textarea {
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
}
button, input, select, textarea {
	font: 99%;
}
.kv {
    position: relative;
    font-size: 0;
}
.block-content{
    position: relative;
}
.section {
    position: relative;
}
.section .regAlign{
    font-size: 2vw;
}
.section .bg-img{opacity: 0.5;}
.section > .title{
    position: absolute;
    color: #657ce8;
    left: 1%;
    line-height: 1.15;
    top: 13%;
    text-shadow: 0 0 10px #657ce8;
    font-size: 6.3vw;
    transform: skewX(-8deg);
    font-weight: 100;
    margin-left: 17.67676767676768%;
    z-index: 50;
}
.section > .sub-title{
    position: absolute;
    color: #657ce8;
    left: 1%;
    line-height: 1.15;
    top: 12.2%;
    text-shadow: 0 0 10px #657ce8;
    font-size: 2.8vw;
    font-weight: 400;
    margin-left: 17.67676767676768%;
    z-index: 50;
}
.section > .title .small{
    font-size: 2vw;
} 
.section > .content {
    position: absolute;
    left: 1%;
    top: 45%;
    display: flex;
    margin-left: 17.67676767676768%; 
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 63vw;
    z-index: 50;
}
.section > .content .text-container .title {
    font-size: 1.7vw;
    line-height: 1;
    font-weight: bolder;
}
.section > .content .text-container .text {
    margin-top: 13%;
    font-size: 1.2vw;
}
.section > .content .video-container { 
    position: relative;
    
}
.section > .content .video-container .img{
    border-radius: 2vw;
    overflow: hidden;    box-shadow: 0 0 8px #fff;
}

.section.kv {
    height: calc(100vh - 130px);
    background-image: url(/upload/webpage/ub/kv_pc.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section.kv .title{ 
    color: #fff;
    text-shadow: 0 0 6px #000;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
    margin: auto;
    width: 100%;
    text-align: center;
    font-size: 4vw;
    font-weight: 500;
}

.section.concept,
.section.feature,
.section.idea,
.section.case,
.section.service,
.section.qa{
    background-color: #f9f9fc;
    width: 100%;
    padding: 0 15.625vw;
    padding-top: 4.2vw;
/*    margin-top: -100vh;*/
}

 
.section.concept > .title,
.section.feature > .title,
.section.idea > .title,
.section.case > .title,
.section.service > .title,
.section.qa > .title{
    color: #000;
    transform: none;
    text-shadow: none;
    position: static;
    margin-left: 0;
    font-size: 2vw;
    font-weight: 600;
    text-align: center;
    padding-bottom: 0.8vw;
/*    margin-top: 4.2vw;*/
    border-bottom: #3252a3 2px solid;
}
.section.concept .text{
    padding: 3.65vw 0;    font-size: 1.14vw;
}
 
.section.feature{ 
    margin-top: auto;    margin-bottom: 0;
} 
.section.feature > .title{
    margin-bottom: 3.65vw;
}
.section.feature .feature-items{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
}
.section.feature .feature-items .items{
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
}
.section.feature .feature-items .items .item{
    width: 47%;
    border: 2px solid #657ce8;
    border-radius: 0.8vw;
    padding: 0.8vw 1vw;
    margin-bottom: 2%;
    font-size: 1.14vw;
}
.section.feature .feature-items .items.items-1 .item{
    background-color: #657ce8;color: #fff;
} 
.section.feature .feature-items .items .item .title{
    font-size: 1.24vw;
}    
.section.feature .feature-items .items .item.item-2 br,
.section.feature .feature-items .items .item.item-4 br,
.section.feature .feature-items .items .item.item-5 br{
    display: none;
}

.section.idea{
    margin-top: auto;       padding-bottom: 4vw;
}
.section.idea > .title{
    margin-bottom: 3.65vw;
}
.section.idea .content{
    position: static;flex-direction: row-reverse;margin-left: auto;
    width: 100%;
}
.section.idea .content.btn-container{
    display: none;
}
.section.idea .content .text-container{
    width: 47%;    position: relative;
}
.section.idea .content .text-container .text{
    margin-top: 0;
}
.section.idea .content .text-container .ub-btn {
    position: absolute;
    left: 17%;
    bottom: 0%;
    width: 77%;    min-width: 315px;
}
.section.idea .content .text-container a.ub-btn:nth-of-type(1){
    transform: translateY(-240%);
}
.section.idea .content .text-container a.ub-btn:nth-of-type(2){
        transform: translateY(-120%);
}
.section.idea .content .video-container{
    width: 50%;
}
.section.idea .content .video-container .img{
    border-radius: 0;
}


.section.case{
    background-color: #fff;
}

.section.service{
    background-color: #fff;
}
.section.service .text{
    padding: 3.65vw 0;    font-size: 1.14vw;
}
.section.service .text .title{
    font-size: 1.24vw;
    margin-bottom: 1vw;
    padding-left: 2.2vw;
    position: relative;
}
.section.service .text .title:before{
    content: "◆";
    font-size: 184%;
    color: #657ce8;
    left: 0;
    position: absolute;
    top: -42%;
}
.section.service .text a{
    word-break: break-all;
}

.case-list{
  width:100%;
  margin: auto;
  padding-bottom: 2vw;
  position: relative;
}
.case-list .title{
  display: inline-block;
  background-color: #25429e;
  padding: 0.2vw 1vw;
  color: #fff;
  position: relative;
  border-radius: 0.4vw;
  text-align: center;
  margin: auto;
  font-size: 200%;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 0) and (max-width: 1440px)
{ 
  .case-list .title{ 
    font-size: 168%; 
  }
}
@media screen and (min-width: 0) and (max-width: 1280px)
{ 
  .case-list .title{ 
    font-size: 162%; 
  }
}
.case-list .text{
  margin-top: 1rem;margin-bottom: 1rem;
}
.case-list .swiper-container .swiper-slide{
  width: 25%; position: relative;
} 
.case-list .swiper-container .swiper-slide .pic-container{
      margin-top: 23%;    position: relative;
}
.case-list .swiper-container .swiper-slide .pic-container .new,
.case-list .swiper-container .swiper-slide .pic-container .logo-img,
.case-list .swiper-container .swiper-slide .pic-container .portrait-img,
.case-list .swiper-container .swiper-slide .icon-3D{
  position: absolute;left: 0; top: 0;
} 
.case-list .swiper-container .swiper-slide .pic-container .new{
  background-color: #25429e;
  color: #fff;
  font-size: 140%;
  text-transform: uppercase;
  padding: 0 0.4vw;
  border-radius: 1vw 1vw 1vw 0;
  transform: translate(10%,-120%);
}
.case-list .swiper-container .swiper-slide .pic-container .pic{
  width: 100%;
}
.case-list .swiper-container .swiper-slide .pic-container .portrait-img{
    border: 4px solid #3252a3;
    width: 22%;
    top: 89%;
    left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);
}
.case-list .swiper-container .swiper-slide .pic-container .logo-img{
  width: 100%;
  top: 108%;
}
.case-list .swiper-container .swiper-slide .icon-3D{
  left: auto;
  top: 15%;
  width: 17%;
  right: 0%;
  transform: translate(-20%, 0%);
  z-index: 111;
} 
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.case-list .swiper-container .swiper-slide .icon-3D .icon-3D-1{
  width:100%;
  animation-name: rotation;
  animation-duration: 2.5s;animation-iteration-count: infinite;animation-timing-function: linear;
}
.case-list .swiper-container .swiper-slide .icon-3D .icon-3D-2{
  position: absolute;
  left: 0;
  top: 0;
}
.case-list .swiper-container .swiper-slide .text{
  margin-top: 33%;
  font-weight: bolder;
  text-align: left;
  display: block;
  padding-left: 0.6vw;
  width: 100%;
  font-size: 110%;    font-size: 1.14vw;
  height: 2rem;    height: calc(1.14vw* 2.4);
}

@media screen and (min-width: 1980px) and (max-width: 3840px) {
  .case-list .swiper-container .swiper-slide .text{
    height: 8rem;
  }
}
.case-list .swiper-container .swiper-slide .text .arrow{
  position: absolute;
  width: 5%;
  transform: rotate(90deg) translateY(-50%);
  right: 3%;
  bottom: 0%;
}
.case-list .swiper-container .swiper-slide a:hover img{
  opacity: 1!important;
}
.case-list .swiper-company-list{
  /* margin-bottom: 2vw; */
}
.case-list .swiper-kol-list{
  margin-bottom: 6vw;
}
.case-list .swiper-kol-list .swiper-slide .pic-container .new{
  background-color: #cc9495;
} 
.case-list .swiper-kol-list .swiper-slide .pic-container .portrait-img{
  border: 6px solid #cc9495;
}
.case-list .swiper-ub-list .swiper-slide .pic-container .new {
    background-color: #8ac1bd;
}
.case-list .swiper-case-list .swiper-slide .pic-container{
/*  margin-top: 0%;*/
}
.case-list .swiper-case-list .swiper-slide .pic-container .new {
    background-color: #ffc107;
    color: #262626;
}
.case-list .swiper-case-list .swiper-slide .text{
  height: auto;
  margin: auto;
  padding: 1rem;
  text-align: center;
}

.section.qa > .title {
    margin-bottom: 3.65vw;
}
.section.qa .search-box{
    color: #3252a3;
    display: flex;
    font-size: 1.24vw;
} 
.section.qa .search-box-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
/*    padding: 0 8vw;*/
    margin: auto;
    width: 52vw;
}
.section.qa .search-box-container .search-box{
    width: 50%;margin-bottom: 1vw;
}
.section.qa .search-box-container .search-box .sub-categories,
.section.qa .search-box-container .search-box .keywords{
    color: #657ce8;border: 1px #657ce8 solid;padding:0 1vw;
}
.section.qa .search-box-container .search-box .keywords{
    width: 35.83vw;
}
.section.qa .search-box-container .search-box .keywords::placeholder{
    color: #657ce8; font-size: 80%;
}
.section.qa .search-box-container .search-box .categories{
    display: flex;    gap: 0.5vw;
}
.section.qa .search-box-container .search-box .category{ 
    border: 1px #657ce8 solid;
    border-radius: 0.5vw;
    color: #657ce8;
    width: 4vw;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
}
.section.qa .search-box-container .search-box .category.selected{
    color: #fff;
    background-color: #657ce8;
}
.section.qa .search-box-container .search-box:nth-of-type(3){
    width: 100%;
}
.section.qa .search-box-container .search-box:nth-of-type(2){
    justify-content: flex-end;
}
.section.qa .search-box-container .search-box .search-button{
    border: 1px #657ce8 solid;
    border-radius: 0.5vw;
    color: #fff;
    width: 4vw;
    text-align: center;
    background-color: #657ce8; 
    margin-left: 1vw;
}
.section.qa .qa-title{
    color: #3252a3;font-size: 1.875vw;
} 
.section.qa .qa-list{
    padding-bottom: 2vw;
}
.section.qa .question,
.section.qa .answer{
    font-size: 1.14vw;
    margin: 0 2.70833333vw;
    color: #3252a3;
} 
.section.qa .question{
    padding-right: 2vw;
	font-weight: 600;
    width: 34vw;
    cursor: pointer;
    position: relative;
}
.section.qa .question:after{
    content: "";
    position: absolute;
    background-image: url(/upload/webpage/ub/arrow_up_blue.svg);
    background-repeat: no-repeat;
    background-position: 100% 76%;
    background-size: contain;
    right: 0;
    top: 50%;
    height: 2vw;
    width: 2vw;
    transform: translateY(-26%) rotate(180deg);
    transition: all 0.2s ease;
}
.section.qa .question.open:after{
    transform: translateY(-26%) rotate(0deg);
}
.section.qa .question .letter{
    font-size: 180%;
}
.section.qa .answer{
    border: 1px solid #3252a3;
    margin: 1vw 5vw;
    padding: 1vw 2vw;
    background-color: #fff;
    color: inherit;
    display: none;
    width: 42vw;
}
.section.qa .answer.open{
    display: block;
}
.section.qa .answer sub{
    vertical-align: super;
}
.section.qa .answer a{
    color: #367eb3;
    text-decoration: underline;
} 

@media screen and (min-width: 0) and (max-width: 1024px)
{ 
  .case-list{ 
    width: 85.648%;
  } 
  .case-list .title{
    border-radius: 2.4vw;font-size: 160%;
  }
  .case-list .swiper-container .swiper-slide .pic-container {
    margin-top: 40px; 
  }
  .case-list .swiper-container .swiper-slide .pic-container .new{
    padding: 0 1.4vw;        font-size: 120%;
    border-radius: 3vw 3vw 3vw 0;
  }
  .case-list .swiper-container .swiper-slide .icon-3D{
    width: 24%;
  }
  .case-list .swiper-company-list {
    margin-bottom: 5vw;    
  }
  .case-list .swiper-container .swiper-slide .text{
    height: 4rem;        font-size: 3.733333333333333vw;
  }
  .case-list .button-prev, .case-list .button-next{
    top: 48%;
  }
  .button-prev, .button-next{
    width: 6vw;
    height: 6vw;
  }
}
    



@media screen and (max-width: 640px) { 
    .loading{
        top: 72px;
    }
    .section.concept, .section.feature, .section.idea,.section.case,.section.service,.section.qa{
        width: 100%; padding-top: 4vh;
        padding-left: 0;
        padding-right: 0;
    }
    .section.concept > .title,
    .section.feature > .title,
    .section.idea > .title,
    .section.case > .title,
    .section.service > .title,
    .section.qa > .title{
        font-size: 5.333333333333333vw;    padding-bottom: 1.8vw;
    }

    .section.concept .text{
        font-size: 3.733333333333333vw;
        padding: 8.65vw 6.65vw;
    }
    .section.feature{
        margin-bottom: 0;
    }
    .section.feature > .title{
        margin-bottom: 8.65vw;
    }
    .section.feature .feature-items{
        margin-left: 6.65vw;margin-right: 6.65vw;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .section.feature .feature-items .items{
        width: 100%;
    }
    .section.feature .feature-items .items .item{
        font-size: 3.733333333333333vw;    border-radius: 2.8vw;            padding: 1.8vw 1vw 1.8vw 4vw;   margin-bottom: 6%;    width: 43%;
    }
    .section.feature .feature-items .items .item .title{
        font-size: 4.15vw;
    }    
    .section.feature .feature-items .items .item.item-2 br,
    .section.feature .feature-items .items .item.item-4 br,
    .section.feature .feature-items .items .item.item-5 br{
        display: block;
    }

    .section.idea > .title{
        margin-bottom: 8.65vw;
    }
    .section.idea .content{
        flex-direction: column;
    }
    .section.idea .content .text-container,
    .section.idea .content .video-container{
        width: auto;
        margin: 0 10.6666vw;
    }
    .section.idea .content .video-container{
        margin-top: 10.6666vw;
    }
    .section.idea .content .text-container .ub-btn{
        display: none;
    }
    .section.idea .content.btn-container{
        display: flex;
        gap: 9vw;
        padding-top: 9vw;
        padding-bottom: 9vw;
        margin: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
    }
    .section.idea .content.btn-container .ub-btn{
        width: 18.3rem;
    } 
    .section.idea .content.btn-container .ub-btn ._text{
        font-size: 5vw;
        left: 47%;
        transform: translateX(-61%) translateY(-3%);
    }
    .section.idea .content.btn-container .ub-btn ._icon{
        height: 4rem; width: 4rem;transform: translateY(3%);
    }

    .section.case > .title{
      margin-top: 5vw;  margin-bottom: 8.65vw; 
    } 

    .section.service .text{
        font-size: 3.733333333333333vw;
        padding: 8.65vw 6.65vw;
    }
    
    .section.service .text .title{
        font-size: 4.15vw;     padding-left: 8.6vw;
    }
    .section.service .text .title:before{
        font-size: 226%;    top: -59%;
    }


    .section.qa .search-box-container { 
        width: 61.35vw;
    }
    .section.qa .search-box-container .search-box{
        width: 100%;justify-content: space-between;        margin-bottom: 4vw;
    }
    .section.qa .search-box-container .label,
    .section.qa .search-box-container .search-box .category,
    .section.qa .search-box-container .search-box .sub-categories, .section.qa .search-box-container .search-box .keywords,
    .section.qa .search-box-container .search-box .search-button{
        font-size: 4vw;
    }
    .section.qa .search-box-container .search-box .category{
        width: 12vw;    border-radius: 1.5vw;
    }
    .section.qa .search-box-container .search-box:nth-of-type(2){
        justify-content: space-between;    
    }
    .section.qa .search-box-container .search-box:nth-of-type(2) select{
        width: 24.5vw;border-radius: 1.5vw;
    }
    .section.qa .search-box-container .search-box .keywords{
        width: 61.3vw;        height: 9vw;
    }
    .section.qa .search-box-container .search-box:nth-of-type(3){
        display: block;
    }
    .section.qa .search-box-container .search-box .search-button{
        display: block;width: 16vw;   margin: auto;     margin-top: 4vw;
    }
    .section.qa .qa-title,
    .section.qa .qa-list{
        width: 72vw;margin: auto;
    } 
    .section.qa .qa-title{
        font-size: 4.8vw;
    }
    .section.qa .qa-list{
        font-size: 3.733333333333333vw;width: 80vw;    padding-bottom: 12vw;
    }
    .section.qa .question, .section.qa .answer{
        font-size: 3.2vw;width: 76vw;
    }
    .section.qa .question{padding-right: 8vw;}
    .section.qa .question:after{
        height: 4vw;
        width: 4vw;top: 4vw;    transform: rotate(180deg);
    }
    .section.qa .question:after{
        height: 4vw;
        width: 4vw;top: 4vw;    transform: rotate(180deg);
    }
    .section.qa .question.open:after {
        transform: rotate(0deg);
    }
    .section.qa .answer{
        width: 74vw;
    }
}


.btn{

}

.c-button {
    align-items: center;
    border-radius: 7rem;
    color: #fff !important; 
    display: flex;
    overflow: hidden;
    padding: 1.1vw;    padding: 0.8vw 1.1vw;
    position: relative;
    text-decoration: none;
    width: auto;
    box-shadow: 0 0 5px #657ce8;transition: all .35s;
}

@media (max-width: 640px) {
    .c-button {
        width:24.3rem
    }
}
@media screen and (min-width: 1280px) {
/*//For Big TV's (HD Screens) */
    .c-button {
        padding: 0.5vw;
    }
}
@media screen and (min-width: 3840px) {
/*    //For 4K Displays (Ultra HD)*/
    .c-button {
        padding: 1.1vw;
    }
    .c-button ._icon{
        transform: scale(1.5);
    }
} 


.c-button:before {
    background-color: #657ce8; 
    border-radius: 7rem;
    content: "";
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    transition: opacity .5s;
    width: 100%
}

.c-button.-black {
    color: #fefefe;
    color: var(--color-white-1)
}

.c-button.-black:before {
    background-color: #2e2e2e;
    background-color: var(--color-black-2)
}

.c-button.-black ._icon:before {
    border-color: #fefefe;
    border-color: var(--color-white-1);
    opacity: .3
}

.c-button.-gray:before {
    background-color: #f1f1f1
}

.c-button ._border {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .5s;
    width: 100%
}

.c-button ._border ._rect {
    stroke-dashoffset: 0!important;
    stroke: #289b8f;
    stroke: var(--color-green-1);
    stroke-width: 1;
    fill: none;
    height: calc(100% - 2px);
    transform: translate(1px,1px);
    width: calc(100% - 2px)
}

.c-button ._text { 
    font-size: 1.6vw;
    font-weight: 400;
    letter-spacing: .06em;
    line-height: 1; 
    left: 50%;
    position: relative;
    transform: translateX(-55%);
}

@media (max-width: 640px) {
    .c-button ._text {
        font-size:1.5rem
    }
}

.c-button ._icon {
    align-items: center;
    display: flex;
    height: 3.6rem;
    justify-content: center;
    margin-left: auto;
    position: relative;
    width: 3.6rem
}

.c-button ._icon:before {
    border: 2px solid #ffffff;
    border-radius: 50%;
    content: "";
    background-color: rgba(255, 255, 255, 0.3);
    display: block;
    height: 94%;
    left: 0;
    position: absolute;
    top: 0;
    transition: opacity .5s;
    width: 94%;    box-sizing: border-box;
}

.c-button ._icon ._arrow {
    fill: currentColor;
    height: .5rem;
    width: 1.2rem
}

@media (max-width: 640px) {
    .c-button ._icon ._arrow {
        height:.8rem;
        width: 1.6rem;
        transform: translateY(-14%);
    }
}

.c-button ._icon ._iconBorder {
    height: 94%;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(-90deg);
    width: 94%;
}

.c-button ._icon ._iconBorder ._circle {
    stroke: #657ce8; 
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 185.943;
    stroke-dashoffset: -185.943;transition: all .35s;transform: scale(.88) translate(0%, 4%);
    
}
.c-button.is-on ._icon ._iconBorder ._circle{
    stroke-dashoffset: 0;
}

.c-button.is-external ._icon ._arrow {
    transform: rotate(-45deg)
}

.c-button.is-on {
    color: #657ce8 !important;text-decoration: none;
}

.c-button.is-on:before {
    opacity: 1;
    background-color: #fff;
}

.c-button.is-on ._border {
    opacity: 1
}

.c-button.is-on ._icon:before {
    opacity: 0
}

.c-button .regAlign{
    font-size: 1vw !important;
}