/* animate */

.secItem.sec-list .chatList .chatItem,
.secItem.sec-intro .titleBox h1> *,
.secItem.sec-intro .titleBox .logo,
.secItem.sec-character .contentBox .galleryItems .galleryItem,
.secItem.sec-list .fp-tableCell > .wrap{
    transition: all ease-in .5s;
}
header *,
header .cateList .cateItem .btn::after{
   /*  transition: all ease .5s !important; */
}
header .btn * {
    transition: none !important;
}
.ic-hamburger  {
    transition: unset;
}
.secItem.sec-intro .titleBox .logo {
    transition: all ease-in 1s;
}
header .sideBox .btn{
    transition: opacity ease-in 1s !important;
}
/* body:not(.headerON) header .cateList .cateItem,
body:not(.headerON) header .sideBox .btn{
    transition: all ease-out 0s !important;

} */

.characterBox > div{
    transition: all cubic-bezier(0.45, -0.19, 0.31, 1.29) 1s;
}
.secItem.sec-intro .characterBox > div.CHANGE:nth-child(5){
    transition: all cubic-bezier(0.45, -0.19, 0.31, 1.29) 1.2s;
}
body:not(.ONLOAD) .secItem.sec-intro .titleBox h1> *,
body:not(.ONLOAD) .secItem.sec-intro .titleBox .logo {
    opacity: 0;
    transform: translateY(80%);
}
body:not(.fp-viewing-intro) .secItem.sec-intro .characterBox > div:nth-child(2),
.secItem.sec-intro .characterBox > div.CHANGE:nth-child(2){
    opacity: 0;
    background-position: left bottom -80%;
}
body.fp-viewing-intro header {
    background-color: unset;
}
.secItem.sec-intro .characterBox > div.CHANGE:nth-child(1),
.secItem.sec-intro .characterBox > div.CHANGE:nth-child(5) {
    background-position: center bottom 0;
}

body.fp-viewing-intro .secItem.sec-video .characterBox > div:nth-child(1),
body.fp-viewing-intro .secItem.sec-video .characterBox > div:nth-child(1){
    left: -10%;
    top: 10%;
    opacity: 0;
}

body.fp-viewing-intro .secItem.sec-video .characterBox > div:nth-child(2),
body.fp-viewing-intro .secItem.sec-video .characterBox > div:nth-child(2){
    right: -20%;
    top: 10%;
    opacity: 0;
}
body:not(.fp-viewing-vision) .secItem.sec-point .contentBox .flexLeft.pointBox .characterBox >div:nth-child(1){
    background-position: left -200px top 200px;
    opacity: 0;
}
body:not(.fp-viewing-vision) .secItem.sec-point .contentBox .flexRight > div:nth-child(1) .type-flex div.pointBox .characterBox > div:nth-child(1){
    background-size: calc(100% - 80px) auto;
    background-position: top 80px right 0;
    opacity: 0;
}
body:not(.fp-viewing-vision) .secItem.sec-point .contentBox .flexRight > div:nth-child(2).pointBox .characterBox > div:nth-child(1){
    opacity: 0;
    background-position: center top 60px;
}
body:not(.fp-viewing-character) .secItem.sec-character .titleBox .characterBox > div:nth-child(1) {
    transform: translate(-50%,10%);
    opacity: 0;
}






/* response */
.secItem .fp-tableCell > .wrap ,
footer .bnerBox,
footer .infoBox > *{
    
    max-width: 1600px;
    margin: 0 auto;
}
@media only screen and (min-width:19200px) {
    .secItem.sec-intro .characterBox > div:nth-child(2){
        background-size: 1200px auto;
    }
}
@media only screen and (min-width:1600px) {
    html{
        font-size: 13px;

    }
  

}

@media only screen and (max-width:1600px) {

}

@media only screen and (max-width:1200px) {

    html {
        font-size: 11px;
    }


}



@media (orientation: landscape )  {
    
}

@media (orientation: portrait )  {

    .secItem.sec-intro .videoBox video{
        width: calc(100%);
        height: auto;
      }
    @media only screen and (min-width:900px) {
        .fp-tableCell{
            height: calc(var(--vh, 1vh)* 100) !important;
        }
    }
    @media only screen and (max-width:900px) {
    }
    
}

@media only screen and (min-width:1025px) {
    
  .secItem.sec-list .chatList .chatItem:nth-child(5n-4),
  .secItem.sec-list .chatList .chatItem:nth-child(5n-0)
  {transform: translateY(60px);}

  .secItem.sec-list .chatList .chatItem:nth-child(5n-3),
  .secItem.sec-list .chatList .chatItem:nth-child(5n-1)
  {transform: translateY(120px);}

  
  .secItem.sec-list .chatList .chatItem:nth-child(5n-4).HOVER,
  .secItem.sec-list .chatList .chatItem:nth-child(5n-0).HOVER
  {transform: translateY(30px);}

  .secItem.sec-list .chatList .chatItem:nth-child(5n-3).HOVER,
  .secItem.sec-list .chatList .chatItem:nth-child(5n-1).HOVER
  {transform: translateY(90px);}

}

@media only screen and (max-width:1024px) {
    

    .ic-hamburger{
        display: block;
    }


    header{
        background-color: rgba(255, 255, 255, .5);
    }
    body.headerON {
        height: 100vh !important;
        overflow: hidden !important;
    }
    body.headerON header{
        background-color: rgba(255, 255, 255, .8) !important;
        backdrop-filter: blur(5px);
    }
    header > .wrap{
        height: 60px;
        padding-top: 17px;
        padding-bottom: 17px;
    }
    body:not(.headerON) header .cateList .cateItem,
    body:not(.headerON) header .sideBox .btn{
        height: 0;
        opacity: 0;
        width: 0;
        margin-top: -40px;
    }
    body[data-location="term"]:not(.headerON) header .sideBox .btn {
        height: unset;
        opacity: unset;
        width: unset;
        margin-top: unset;
    }
    header .logo{
        height: 30px;
    }

    header .cateList{
        gap: 15px;
        margin-right: unset;
    }

    body.headerON header .cateList .cateItem,
    body.headerON header .sideBox .btn{
        display: block;
    }
    body.headerON header{
        height: 100%;
    }
    body.headerON header > .wrap{
        height: 100%;
    }
    body.headerON header > .wrap,
    body.headerON header .cateList {
        flex-direction: column !important;
    }
    body.headerON header .cateList,
    body.headerON header .sideBox{
        justify-content: center;
        width: 100%;
    }
    body.headerON header .cateList .cateItem {
        margin: 0 auto;
    }
    body.headerON header .sideBox .btn {
        width: 100%;
        text-align: center;
    }




    .titleBox{
        padding-bottom: 30px;
    }
    .titleBox > *:nth-child(1){
        margin-bottom: unset;
    }

    .secItem.sec-intro .fp-tableCell > .wrap {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 0;
    }
    .secItem.sec-intro .titleBox {
        text-align: center;
        padding-bottom: 20vh;
    }
    .secItem.sec-intro .titleBox h1 {
        height: 5ch;
    }
    .secItem.sec-intro .titleBox .btn{
        margin-top: 5vh;
    }
    .secItem.sec-intro .titleBox .logo{
        height: 80px;
        margin-top: unset;
        background-position: center;
    }
    .secItem.sec-intro .characterBox > div:nth-child(1), .secItem.sec-intro .characterBox > div:nth-child(5){
        background-size: 1024px auto;
    }
    .secItem.sec-intro .characterBox > div:nth-child(1){bottom: -40px;}
    .secItem.sec-intro .characterBox > div:nth-child(2){
        width: 100%;
        height: 50%;
        background-size: auto 90%;
        background-position: center bottom;
        right: 0;

    }


    .secItem.sec-video .fp-tableCell > .wrap{
        padding: 80px 20px 160px;
    }
    .secItem.sec-video .videoBox{
        padding: 0 0 100px;
    }
    .secItem.sec-video .characterBox > div:nth-child(1), .secItem.sec-video .characterBox > div:nth-child(2){
        width: 100%;
        height: 160px;
        top: unset;
    }
    .secItem.sec-video .characterBox > div:nth-child(1){
        bottom: 40px;
    }
    .secItem.sec-video .characterBox > div:nth-child(2){
        bottom: -400px;
        
    }
    .secItem.sec-video .partnerItems{
        flex-direction: column;
        width: 100%;
        text-align: center;
        gap: 24px;
    }
    .secItem.sec-video .partnerItems .partnerItem {
        width: 100%
    }




    .secItem.sec-point .type-flex.direc-row,
    .secItem.sec-point .flexRIght{
        flex-direction: column;
        flex-direction: column !important;
        width: 100%;
    }
    .secItem.sec-point .type-flex.direc-col{
        flex-direction: row;
    }

    .secItem.sec-point .contentBox .pointBox{
        padding: 20px;
        border-radius: 24px;
    }
    .secItem.sec-point .contentBox .pointBox .icon{
        width: 40px;
        height: 40px;
        right: 20px;
        top: 20px;
    }
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1) > .pointBox:nth-child(1) .icon{
        position: unset;
        width: 40px;
        height: 40px;
        margin-bottom: 20px;
    }
    .secItem.sec-point .contentBox .flexLeft.pointBox {
        padding-bottom: 280px;
        width: 100%;
    }
    .secItem.sec-point .contentBox .flexLeft.pointBox .btn{
        right: 20px;
        bottom: 20px;
    }
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1) > .pointBox:nth-child(1) .textBox {
        position: unset;
        width: 100%;
    }
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1) > div:nth-child(2){
        width: 100%;
    }
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1) > .pointBox:nth-child(1){
        padding-bottom: 100px;
        width: 100%;
    }
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1) .type-flex div.pointBox .characterBox > div:nth-child(1) {
        right: 0;
        bottom: 0;
        top: unset;
        width: 100%;
        height: 200%;
        background-size: contain;
        background-position: center bottom 10px;
    }    
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1) a.pointBox{
        width: 80px;
        height: 80px;
    }
    
    .secItem.sec-point .contentBox .flexRight > div:nth-child(1){
        height: unset;
    }
    .secItem.sec-point .contentBox .flexRight > div:nth-child(2).pointBox{
        padding-bottom: 100px;
    }

    
    .secItem.sec-list .fp-tableCell > .wrap{
        padding-top: 40px;
    }
    .secItem.sec-list .chatList{
        grid-template-columns: repeat(3, 1fr);;
        padding-top: 20px;
    }
    .secItem.sec-list .chatList .chatItem{
        padding-top: 14px;
        padding-left: 14px;
        padding-right: 14px;
    }
    .secItem.sec-list .chatList .chatItem:nth-child(3n),
    .secItem.sec-list .chatList .chatItem:nth-child(3n-2){
        transform: translateY(30px);
    }
    .secItem.sec-list .sortBox{
        position: unset;
        transform: unset;
        text-align: center;
        box-shadow: unset;
        padding: unset;
        background-color: unset;
        overflow: unset;
        white-space: normal;
    }
    .secItem.sec-list .sortBox .btn{
        margin-bottom: 5px;
    }
    .secItem.sec-list .sortBox .btn:not(.ACTIVE){
        background-color: #fff;
    }


    .secItem.sec-character::after{
        top: -5%;
    }
    .secItem.sec-character .fp-tableCell > .wrap{
        padding: 20px;
    }
    .secItem.sec-character .titleBox{
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }
    .secItem.sec-character .titleBox > *{
        width: 100%;
    }
    .secItem.sec-character .fp-tableCell{
        padding-bottom: 40vh;
        background-size: auto 38vh;
        background-position: bottom right 20px;
    }



    .secItem.sec-faq,
    .secItem.sec-faq .fp-tableCell{
        height: fit-content !important;
    }
    .secItem.sec-faq .fp-tableCell{
        padding-bottom: 100px;
    }
    .secItem.sec-faq .contentBox{
        padding: 0;
    }
    .secItem.sec-faq .contentBox .faqList .faqItem .wrap{
        padding: 16px;
        padding-right: 80px;
    }

    footer .bnerBox{

        flex-direction: column !important;
    }
    footer .bnerBox > * {
        width: 100% !important;
    }
    footer .bnerBox, footer .infoBox >*{
        padding-left: 20px;
        padding-right: 20px;
    }
    footer .bnerBox .characterBox > div:nth-child(1){
        top: -180px;
        width: 100%;
        height: 220px;
    }
    footer .infoBox .topBox .sitemap,
    footer .infoBox .bottomBox{
        flex-direction: column !important;
        text-align: center;
        gap: 6px;
    }
    footer .infoBox .bottomBox h6 {
        width: 100%;
        text-align: center;
    }
    footer .infoBox .topBox .sitemap .siteItem,
    footer .infoBox .topBox .moreFrame {
        margin: 0 auto;
    }
    footer .infoBox .topBox * {}
    footer .infoBox .topBox .logo{
        width: 100%;
        background-position: center;
    }
}



@media only screen and (max-width:600px) {
    html{
        font-size: 10px;
    }

    h1 {
        font-size: 3.4rem;
        line-height: 5rem;
    }
    h2 {
        font-size: 3rem;
        line-height: 3.8rem;
    }
    h3 {
        font-size: 2.4rem;
        line-height: 3.2rem;
    }
    h4{
        font-size: 2rem;
        line-height: 2.6rem;
    }


    
    .ic-hamburger{
        right: 12px;
    }
    .ic-hamburger div{
        width: 25px;
    }

    
    .secItem.sec-list .chatList{
        grid-template-columns:repeat(2, 1fr);
    }
    
    .secItem.sec-list .chatList .chatItem:nth-child(2n-1){
        transform: translateY(30px);
    }

    .secItem.sec-character::after{
        height: calc((var(--vh, 1vh)* 130));
    }
    .secItem.sec-faq .contentBox .faqList .faqItem .question .btn{
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}

@media only screen and (max-width:400px) {

    .secItem.sec-list .chatList{
        grid-template-columns:repeat(1, 1fr);
    }
}