@charset "utf-8";

/* Reset */
html,body {width:100%;height:100%;font-size:16px;color:#000;line-height:1.3;-webkit-text-size-adjust:none;}

/* Common */
.wd100 {width:100% !important;}

.highLightsColorTy01 {color:#5bedf5 !important;}

[class*="hasBackgroundObject"]:before {content:'';width:100%;display:block;position:absolute;left:0;bottom:0;background-color:#f5f5f5;}
.hasBackgroundObjectTy01:before {height:89%;}
.hasBackgroundObjectTy02:before {height:45%;}

#wrap {width:100%;overflow-x:hidden;}
.inner {width:1400px;margin:0 auto;}

/* 003 */
#PF003 {overflow:hidden;}
#PF003 .visual {width:100%;height:100vh;position:relative;}
#PF003 .visual .inner {position:fixed;width:100%;height:100%;background:url(images/visual.optimized.webp) 0 0 no-repeat;background-size:cover;}
#PF003 .projectInfo {position:absolute;top:200px;left:242px;}
#PF003 .projectInfo .owner {font-size:18px;font-weight:700;color:#fff;}
#PF003 .projectInfo .projectName {margin-top:16px;font-size:26px;font-weight:700;color:#fff;}
#PF003 .projectInfo .projectName > strong {font-weight:700;}
#PF003 .projectInfo .mainTxt {margin-top:52px;font-size:0;line-height:0;}
#PF003 .projectInfo .mainTxt > span {display:inline-block;position:relative;font-size:11.7vh;font-weight:700;color:#fff;transform-origin:50% 100%;overflow:hidden;vertical-align:middle;line-height:1.17;}
#PF003 .projectInfo .mainTxt .animateLogo {width:360px;height:115px;display:inline-block;margin-left:-4px;position:relative;text-align:center;vertical-align:middle;}
#PF003 .projectInfo .mainTxt .animateLogo .line {width:100%;height:13px;display:block;position:absolute;top:50%;left:50%;background-color:rgba(255, 255, 255 ,.1);transform:translate(-50%, -50%);}
#PF003 .projectInfo .mainTxt .animateLogo .animateTxt {display:block;position:absolute;line-height:1;overflow:hidden;opacity:0;}
#PF003 .projectInfo .mainTxt .animateLogo .animateTxt > em {display:block;font-size:60px;font-weight:700;color:#fff;}
#PF003 .projectInfo .mainTxt .animateLogo .n01 {top:26px;left:52px;}
#PF003 .projectInfo .mainTxt .animateLogo .n02 {top:26px;left:92px;}
#PF003 .projectInfo .mainTxt .animateLogo .o {top:26px;left:132px}
#PF003 .projectInfo .mainTxt .animateLogo .t {top:26px;left:197px;}
#PF003 .projectInfo .mainTxt .animateLogo .a {top:26px;left:228px}
#PF003 .projectInfo .mainTxt .animateLogo .k {top:26px;left:282px;}
#PF003 .projectInfo .mainTxt .imgTxt {margin-left:-4px;}
#PF003 .projectInfo .mainTxt .imgTxt > img {display:block;margin-top:8px;}
#PF003 .projectInfo .staffInfo {margin-top:14.1vh;}
#PF003 .projectInfo .staffInfo .staffList > li + li {margin-top:10px;}
#PF003 .projectInfo .staffInfo .role {width:90px;display:block;font-size:14px;color:#ccc;float:left;}
#PF003 .projectInfo .staffInfo .staff {font-size:14px;font-weight:700;color:#fff;overflow:hidden;}

#PF003 .visual ~ .section {padding-top:250px;position:relative; background-color:#ffffff;}
#PF003 #BI {margin-top:0;padding:250px 0 150px;}
#PF003 #BI .txtWrap {width:100%;}
#PF003 #GOAL {padding-bottom:250px}
#PF003 #GOAL .paragraph:after {content:'';display:block;clear:both;}
#PF003 #GOAL .thumb {float:right;box-shadow:15px 26px 120px 0px rgba(0, 0, 0, 0.2);transform:translateX(40%);opacity:0;}
#PF003 #DIFFERENCE {padding-top:0;}
#PF003 #DIFFERENCE .paragraph .conWrap {margin-top:175px;}
#PF003 #DIFFERENCE .paragraph .conWrap .imgWrap {position:relative;}
#PF003 #DIFFERENCE .paragraph .conWrap .imgWrap img {position:relative; z-index:1;}
@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
#PF003 #DIFFERENCE .paragraph .conWrap .imgWrap .colorBall {position:absolute;left:410px;bottom:180px;z-index:0;width:70px;height:70px;border-radius:70px;background-color:rgb(36,211,221);
-webkit-animation: scale-up-center .5s cubic-bezier(0.470, 0.000, 0.745, 0.715) infinite alternate both;
animation: scale-up-center .5s cubic-bezier(0.470, 0.000, 0.745, 0.715) infinite alternate both;
}
#PF003 #DIFFERENCE .paragraph .conWrap [class*="conTxt"] {position:static;transform:translateY(0);opacity:1;}
#PF003 #DIFFERENCE .paragraph .conWrap [class*="conTxt"] img {position:absolute;top:0;}
#PF003 .paragraph .conWrap .conTxt01 img {left:30px;}
#PF003 .paragraph .conWrap .conTxt02 img {left:50%;}
#PF003 .paragraph .conWrap .conTxt03 img {left:75%;}

#PF003 #DIFFERENCE .iconQuotes span {position:absolute; display:block; top:-50px; left:0; width:29px; height:24px; background:url("images/icon_quotes.png") no-repeat center;transform:translateX(50px);opacity:0;}
#PF003 #DIFFERENCE .iconQuotes .icon02 {left:48%;}
#PF003 #DIFFERENCE .iconQuotes .icon03 {left:73%;}

#PF003 #CONCEPT .paragraph {vertical-align:top;}
#PF003 #CONCEPT .paragraph {padding-bottom:180px;box-sizing:border-box;border-bottom:2px solid #eaeaea;}
#PF003 #CONCEPT .paragraph .imgWrap {margin-top:150px;transform:translateY(15px);opacity:0;}
#PF003 #CONCEPT .lineWrap {width:60px;height:60px;position:absolute;top:0;right:0;}
#PF003 #CONCEPT .lineWrap [class*="line"] {display:block;position:absolute;background-color:#000;}
#PF003 #CONCEPT .lineWrap .line01 {width:60px;height:10px;top:0;left:0;transform-origin:0 50%;transform:scaleX(0);}
#PF003 #CONCEPT .lineWrap .line02 {width:10px;height:50px;top:10px;right:0;transform-origin:50% 0;transform:scaleY(0);}
#PF003 #CONCEPT .paragraph .tit [class*="innerTxt"] {display:inline-block;}
#PF003 #CONCEPT .ctWrap > span {transform:translateX(30%);}
#PF003 #CONCEPT_TYPE_02 {padding-bottom:250px;}
#PF003 #CONCEPT_TYPE_02 .paragraph .imgWrap {transform:translateY(15px);opacity:0;}
#PF003 #TYPE {padding:200px 0;background-color:#eef6f6;}

#PF003 #TYPE .imgWrap {padding:116px 0 126px;background-color:#ffffff;box-shadow:25px 43px 120px 0px rgba(36, 76, 80, 0.05);transform:translateX(30%);opacity:0;}
#PF003 #TYPE .imgWrap img {opacity:0;display:block;margin:0 auto;}
#PF003 #TYPE .lineWrap {width:155px;height:96px;position:absolute;top:65px;right:0;}
#PF003 #TYPE .lineWrap [class*="line"] {display:block;position:absolute;background-color:#24d3dd;}
#PF003 #TYPE .lineWrap .line01 {width:155px;height:10px;top:0;left:0;transform-origin:0 50%;transform:scaleX(0);}
#PF003 #TYPE .lineWrap .line02 {width:10px;height:86px;top:10px;right:0;transform-origin:50% 0;transform:scaleY(0);}
#PF003 #DESIGN {padding-bottom:250px;}
#PF003 #DESIGN .txtWrap {min-height:695px;}
#PF003 #DESIGN .txtWrap .txt {font-weight:400;}
#PF003 #DESIGN .lineWrap {width:300px;height:80px;margin-top:145px;position:relative;}
#PF003 #DESIGN .lineWrap [class*="line"] {display:block;position:absolute;background-color:#24d3dd;}
#PF003 #DESIGN .lineWrap .line01 {width:10px;height:80px;bottom:0;left:0;transform-origin:0 100%;transform:scaleY(0);}
#PF003 #DESIGN .lineWrap .line02 {width:295px;height:10px;bottom:0;left:10px;transform-origin:100% 0;transform:scaleX(0);}
#PF003 #DESIGN .thumb {position:absolute;top:0;right:-8%;box-shadow:15px 26px 120px 0px rgba(0, 0, 0, 0.3);transform-origin:100% 50%;transform:translateX(100%);opacity:0;overflow:hidden;}
#PF003 #DESIGN .thumb:before {content:'';width:100%;height:100%;display:block;position:absolute;top:0;left:0;background-color:#000;transition:350ms transform ease}
#PF003 #DESIGN .thumb.on:before {transform:translateX(-100%);}
#PF003 #DESIGN .conWrap .imgWrap img {display:inline-block;transform:translateX(30%);opacity:0;}
#PF003 #DESIGN .conWrap .imgWrap img + img {margin-left:70px;}
#PF003 #DESIGN .conWrap .pageWrap {min-height:2553px;margin-top:280px;position:relative;}
#PF003 #DESIGN .conWrap .pageWrap [class*="pageList"] {position:absolute;top:0;}
#PF003 #DESIGN .conWrap .pageWrap .pageList01 {left:-260px;}
#PF003 #DESIGN .conWrap .pageWrap .pageList02 {left:50%;transform:translateX(-50%);}
#PF003 #DESIGN .conWrap .pageWrap .pageList03 {right:-260px;}
#PF003 #DESIGN .conWrap .pageWrap [class*="pageList"] .page {position:relative;}
#PF003 #DESIGN .conWrap .pageWrap [class*="pageList"] .page + .page {margin-top:80px;}
#PF003 #MOBILE {padding:250px 0 200px;position:relative;background-color:#1a1a1a;}
#PF003 #MOBILE .slideLine {width:10px;height:220px;display:block;position:absolute;top:-360px;left:8px;z-index:1;background-color:#24d3dd;transform-origin:0 0; transform:scaleY(0);}
#PF003 #MOBILE .txtWrap .txt {color:#fff;}
#PF003 #MOBILE .conWrap {margin-top:0;}

#PF003 #MOBILE .conWrap .pageWrap {margin-top:200px;position:relative;}
#PF003 #MOBILE .conWrap .pageWrap .pageList02 {margin-top:70px;}
#PF003 #MOBILE .conWrap .pageWrap [class*="pageList"] .page {position:relative;display:inline-block;margin-left:7.5%;}
#PF003 #MOBILE .conWrap .pageWrap [class*="pageList"] .page:first-of-type{margin-top:-40px; margin-left:0;}
#PF003 #MOBILE .conWrap .pageWrap [class*="pageList"] .page:nth-of-type(2){margin-top:70px;}
#PF003 #MOBILE .conWrap .pageWrap [class*="pageList"] .page:nth-of-type(3){margin-top:-140px;}
#PF003 .conWrap .pageWrap .page .motionBg {position:absolute;width:100%;height:100%;z-index:0;transform-origin:0 0;transform:scale(0);}
#PF003 .conWrap .pageWrap .page img {opacity:0;position:relative;z-index:1;box-shadow:15px 26px 105px 0px rgba(0, 0, 0, 0.1);}
#PF003 .conWrap .pageWrap .page .bgBk {background-color:#000;}
#PF003 .conWrap .pageWrap .page .bgMint {background-color:#24d3dd; border-radius:35px;}

#PF003 .paragraph {position:relative;}
#PF003 .paragraph .thumb,
#PF003 .paragraph .txtWrap,
#PF003 .paragraph .giudeText {display:inline-block;vertical-align:middle;}
/* #PF003 .paragraph .txtWrap {margin-right:11.5%;} */
#PF003 .paragraph .label {display:block;font-size:24px;font-weight:700;color:#24d3dd;}
#PF003 .paragraph .tit {display:inline-block;margin-top:40px;font-size:50px;font-weight:700;line-height:1;}
#PF003 .paragraph .txtWrap [class*="txt"] {font-size:16px;font-weight:100;line-height:1.5;}
#PF003 .paragraph .txt {margin-top:50px;}
#PF003 .paragraph .txt + .txt {margin-top:43px;}
#PF003 .paragraph .txtTy02 {display:inline-block;}
#PF003 .paragraph .tit + .txtTy02 {margin:40px 0 0 80px;}
#PF003 .paragraph .tit .line {width:182px;height:8px;display:inline-block;margin:0 17px;background-color:#24d3dd;vertical-align:middle;transform-origin:0 0;transform:scaleX(0);}

#PF003 .paragraph .conWrap {margin-top:128px;position:relative;}
#PF003 .paragraph .conWrap [class*="conTxt"] {position:absolute;top:0;transform:translateY(50px);opacity:0;}

#PF003 .paragraph .conWrap .BILogoWrap {width:100%;height:500px;margin-top:90px;position:relative;background-color:#111;box-shadow:15px 26px 120px 0px rgba(0, 0, 0, 0.3);}
#PF003 .paragraph .BILogoWrap .frame {position:absolute;top:190px;left:50%;margin-left:-104px;width:245px;height:105px;display:block;transform:translateX(-450px);}
#PF003 .paragraph .BILogoWrap .frame span {opacity:0;position:absolute;display:block;background-color:#ffffff;}
#PF003 .paragraph .BILogoWrap .frame .lineTop {top:0; left:0; width:100%; height:10px; transform-origin:0 50%; transform:scaleX(0);}
#PF003 .paragraph .BILogoWrap .frame .lineRight {right:0; width:10px; height:100%;transform-origin:50% 0;transform:scaleY(0)}
#PF003 .paragraph .BILogoWrap .frame .lineBottom {right:0; bottom:0; width:100%; height:10px; transform-origin:100% 0; transform:scaleX(0)}
#PF003 .paragraph .BILogoWrap .frame .lineLeft {left:0; bottom:0; width:10px; height:100%; transform-origin:0% 100%; transform:scaleY(0)}
#PF003 .paragraph .BILogoWrap .imgWrap {position:absolute;top:209px;right:50%;display:block;margin-right:-187px;transform:translateX(400px);opacity:0;}

#PF003 .paragraph .colorList {width:809px;height:150px;position:absolute;top:0px;left:-260px;font-size:0;}
#PF003 .paragraph .colorList .color {height:100%;display:block;position:absolute;right:0;transform-origin:100% 0;transform:scaleX(0);}
#PF003 .paragraph .colorList .color1 {right:43%;}
#PF003 .paragraph .colorList .color2 {right:39%;}
#PF003 .paragraph .colorList .color3 {right:33%;}
#PF003 .paragraph .colorList .color4 {right:29%;}
#PF003 .paragraph .colorList .color5 {right:18%;}
#PF003 .paragraph .colorList .color6 {right:7%;}
#PF003 .paragraph .colorList .color7 {right:-8px;}
#PF003 .paragraph .sloganWrap {margin-left:700px;transform:translateX(30%);opacity:0;}

#PF003 .ctWrap {margin-top:150px;font-size:0;text-align:center;vertical-align:top;}
#PF003 .ctWrap > span {display:inline-block;width:33.333%;transform:translateX(-30%);opacity:0;}

#CONCEPT_TYPE_02 .giudeText {position:relative;margin-left:20px;}
#CONCEPT_TYPE_02 .giudeText [class*="line"] {position:absolute;width:100%;height:auto;}
#CONCEPT_TYPE_02 .giudeText .lineBox {left:-20px;transform-origin:50% 50%;transform:scaleX(0);opacity:0;}
#CONCEPT_TYPE_02 .giudeText .lineSide {top:-20px;transform-origin:0% 0%;transform:scaleX(0);opacity:0;}

#CONCEPT_TYPE_02 .conWrap:after {content:'';display:block;clear:both;}
#CONCEPT_TYPE_02 .thumb {float:right;}
#CONCEPT_TYPE_02 .thumb img {display:block;}
#CONCEPT_TYPE_02 .thumb img + img {margin-top:83px;transform:translateX(50%);opacity:0;}



@media screen and (max-width:1420px) and (min-width:1366px){
    .inner {width:100%;}
    #PF003 .projectInfo {left:10%;}
    #PF003 #DESIGN .conWrap .imgWrap img + img {margin-left:4%;}
    #PF003 .paragraph .tit + .txtTy02 {width:50%; margin:40px 0 0 2%;}
    #PF003 .paragraph .tit + .txtTy02 br {display:none;}
}
@media screen and (max-width:1365px){
    #wrap {width:1340px; overflow-x:scroll;}
    /* .inner {width:1400px;} */
    .inner {width:100%;}
    /* #CONCEPT_TYPE_02 .thumb {margin-left:263px;} */
    #PF003 .paragraph .tit + .txtTy02 {width:auto; margin:40px 0 0 80px;}
    #PF003 .paragraph .tit + .txtTy02 br {display:inherit;}
}

@media screen and (max-width:767px){
    #wrap {width:100%;overflow-x:hidden;}
    .inner {box-sizing:border-box;width:100%;padding-right:20px;padding-left:20px;}
    #PF003 .visual .inner {background-position:center;}
    #PF003 .projectInfo {top:120px;left:24px;right:24px;}
    #PF003 .projectInfo .mainTxt > span {font-size:14vw;}
    #PF003 .projectInfo .mainTxt .animateLogo {width:72vw;max-width:290px;margin-left:0;}
    #PF003 .projectInfo .mainTxt .imgTxt > img {max-width:100%;height:auto;}
    #PF003 .projectInfo .staffInfo {margin-top:10vh;}
    #PF003 .visual ~ .section,#PF003 #BI,#PF003 #TYPE,#PF003 #MOBILE {padding-top:100px;padding-bottom:100px;}
    #PF003 .paragraph .tit + .txtTy02 {box-sizing:border-box;width:auto;margin:30px 0 0;}
    #PF003 #GOAL .thumb,#PF003 #CONCEPT_TYPE_02 .thumb {float:none;max-width:100%;transform:none;}
    #PF003 #DESIGN .thumb {position:relative;right:auto;max-width:100%;}
    #PF003 #DESIGN .conWrap .pageWrap {min-height:0;margin-top:100px;}
    #PF003 #DESIGN .conWrap .pageWrap [class*="pageList"] {position:relative!important;right:auto!important;left:auto!important;transform:none!important;}
    img,video,svg {max-width:100%;height:auto;}
}