@charset "utf-8";

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

#wrap {width:100%;min-width:1340px;margin:0 auto;overflow-x:auto;}

#wrap #header {max-width:1903px;}

#PF002 .ani:not(.imgList) {transform:translateX(400px);opacity:0;}
#PF002 .ani.imgList > .img {transform:translateX(400px);opacity:0;}

#PF002 {width:100%;position:relative;}
#PF002 .inner {position:relative;width:1340px !important; margin:0 auto;} 
#PF002 .section {position:relative; }
#PF002 .first {overflow:hidden;width:100%;height:3347px;padding:0;box-sizing:border-box;position:relative;}
#PF002 .first [class*="bg"] {width:auto;height:1080px;position:absolute;top:0;z-index:2;}
#PF002 .first .bgLeft {width:66.8%;left:0;background-color:#f26e50;}
#PF002 .first .bgRight {width:34.2%;right:0;background-color:#8b79c7;z-index:1;}
#PF002 .first .conWrap {position:absolute; top:0; left:14%; width:1340px; height:100%;}
#PF002 .first .bgLeft .animateWrap {position:absolute;top:215px;right:0; width:100%;}
#PF002 .first .bgLeft .animateWrap .imgWrap {position:absolute;top:0;right:-30px; width:380px;}
#PF002 .first .bgRight .animateWrap {position:absolute;top:215px;left:0; width:100%;}
#PF002 .first .bgRight .animateWrap .imgWrap {position:absolute;top:0;left:0; width:380px;}
#PF002 .first .txtWrap {position:absolute;top:239px;left:0; width:1340px;}
#PF002 .first .txtWrap .txt {font-size:25px;font-weight:700;color:#fff;line-height:1.48;}
#PF002 .first .txtWrap .tit {font-size:65px;font-weight:500;color:#fff;line-height:1.0625;letter-spacing:-4px;}
#PF002 .first .animateWrap [class*="txt"] {position:absolute;top:385px;z-index:1;font-size:60px;font-weight:100;color:#fff;line-height:1.05;transform-origin:50% 50%;white-space:nowrap;}
#PF002 .first .animateWrap .txt01 {right:381px;opacity:1;text-align:right;text-shadow:40px 40px 80px rgba(0, 0, 0, 0.56);}
#PF002 .first .animateWrap .txt02 {left:264px;opacity:.2;text-align:left;text-shadow:40px 40px 80px rgba(0, 0, 0, 0.96);}
#PF002 .first .animateWrap .frameWrap {width:350px;height:720px;padding:10px;box-sizing:border-box;position:absolute;top:0;left:0;z-index:2;background-color:#fff;border-radius:23px;opacity:.15;}
#PF002 .first .animateWrap .frameWrap .frame {width:100%;height:100%;}
#PF002 .first .animateWrap .frameWrap.on {z-index:3;opacity:1;box-shadow:8px 36px 6px rgba(0, 0, 0, 0.16);}
#PF002 .first .animateWrap .frame02 {left:-120px;}

#PF002 .first .experience {width:100%;position:absolute;top:1080px;left:0;}
#PF002 .first .experience .expBgLeft {width:34.2%;height:100%;display:block;position:absolute;top:0;left:0;z-index:2;background-color:#f26e50;}
#PF002 .first .experience .triangle {display:block;position:absolute;right:-55px;top:50%;transform:translateY(-50%);z-index:1;}
#PF002 .first .experience .expBgRight {overflow:hidden; width:66.8%;height:100%;display:block;position:absolute;top:0;right:0;background-color:#8b79c7;}
#PF002 .first .experience .inner {width:1393px;height:1080px;margin:0 auto;position:relative;z-index:3;}
#PF002 .first .experience .inner .txtBox {width:100%;position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%, -50%);}
#PF002 .first .experience [class*="desc"] {font-size:19px;font-weight:300;color:#fff;line-height:1.84; width:360px; text-align:right;word-break:keep-all;}
#PF002 .first .experience .desc02 {margin-top:39px;}
#PF002 .first .experience .line {width:100%;height:1px;display:block;position:absolute;left:0;top:178px;background-color:#fff;transform-origin:0 50%;;}
#PF002 .first .experience .mainTypo {display:block;position:absolute;top:50%;left:34%;z-index:2;font-size:45px;font-weight:700;color:#fff;transform:translateY(-50%);opacity:0;}
#PF002 .first .experience .mainTypo > span {opacity:0;}
#PF002 .first .experience .roundBoxW {position:absolute;top:50%;left:50%;z-index:1;width:355px;height:240px;margin-top:-120px;}
#PF002 .first .experience .roundBoxW .roundTxtBox {width:240px;height:240px;position:absolute;top:0;left:90px;z-index:1;border:4px solid #fff;box-sizing:border-box;border-radius:50%;transform:translateX(-300px);opacity:0;background-color:#8b79c7;}
#PF002 .first .experience .roundTxtBox .roundTxt {width:100%;position:absolute;padding-top:47px;}
#PF002 .first .experience .roundTxtBox p {font-size:30px;font-weight:700;color:#fff;line-height:1.5;text-align:center;}

#PF002 .first .sightWrap {width:100%;padding:0 80px;box-sizing:border-box;position:absolute;top:130px;left:0;}
#PF002 .first .sightWrap .sight {width:100%;height:100%;position:relative;text-align:center;}
#PF002 .first .sightWrap .sight .tit {display:block;font-size:75px;font-weight:500;color:#fff;}
#PF002 .first .sightWrap .sight .txt {margin-top:31px;font-size:19px;font-weight:300;color:#fff;line-height:1.8;}

#PF002 .first .thinkWrap {width:100%;position:absolute;left:0;top:2160px;text-align:center;}
#PF002 .first .thinkWrap:before {content:'';width:100%;height:1px;display:block;position:absolute;top:0;left:0;background-color:#fff;}
#PF002 .first .thinkWrap .left,
#PF002 .first .thinkWrap .right {width:50%;padding:415px 0 223px;box-sizing:border-box;overflow:hidden;}
#PF002 .first .thinkWrap .left {float:left;background-color:#f26e50;}
#PF002 .first .thinkWrap .right {float:right;background-color:#8b79c7;}

#PF002 .first .thinkWrap .left .txt {text-align:right;}
#PF002 .first .thinkWrap .right .txt {text-align:left;}
#PF002 .first .thinkWrap .left .txt > p {margin-right:35px;}
#PF002 .first .thinkWrap .right .txt > p {margin-left:35px;}

#PF002 .first .thinkWrap .underline {text-decoration:underline;}
#PF002 .first .thinkWrap .rounded {width:270px;display:inline-block;padding:19px 60px;box-sizing:border-box;border:1px solid #fff;font-size:28px;font-weight:500;color:#fff;}

#PF002 .first .thinkWrap .left .rounded  {transform:translateX(100%)}
#PF002 .first .thinkWrap .right .rounded {min-width:308.5px;transform:translateX(-100%);}

#PF002 .first .thinkWrap .tit {font-size:35px;font-weight:700;color:#fff;line-height:2;}
#PF002 .first .thinkWrap .txtList {margin-top:72px;}
#PF002 .first .thinkWrap .txtList .txt {width:100%;position:relative;}
#PF002 .first .thinkWrap .txtList .txt + .txt {margin-top:40px;}
#PF002 .first .thinkWrap .txtList .txt > p {display:inline-block;font-size:19px;font-weight:300;color:#fff;line-height:1.84;}

#PF002 .first .thinkWrap .left .rounded {border-right:none;border-radius:175px 0 0 175px;text-align:left;}
#PF002 .first .thinkWrap .right .rounded {border-left:none;border-radius:0 175px 175px 0;text-align:right;}

#PF002 .second {width:100%;padding:180px 10% 180px 15%;box-sizing:border-box;position:relative;background-color:#fff;overflow-x:hidden;}
#PF002 .second .titWrap {text-align:center;}
#PF002 .second .titWrap h2 {font-size:85px;font-weight:500;color:#272727;line-height:1.24;}
#PF002 .second .titWrap h2 ~ p {font-size:25px;font-weight:300;color:#272727;line-height:1.8;word-break:keep-all;}
#PF002 .second .titWrap h2 + p {margin-top:28px;}
#PF002 .second .typoBoxWrap {margin-top:98px;font-size:0;white-space:nowrap}
#PF002 .second .typoBox {width:32.333%;display:inline-block;padding:40px 0 52px;box-sizing:border-box;background-color:#fff;box-shadow:0 0 16px 0 rgba(0, 0, 0, .16);text-align:center;}
#PF002 .second .typoBox {margin-right:0.5%;margin-left:0.5%;}
#PF002 .second .typoBox strong {font-size:31px;font-weight:500;color:#f26e50;}
#PF002 .second .typoBox p {margin-top:9px;font-size:19px;font-weight:300;color:#000;}

#PF002 .second .timelineBox {padding:240px 0 100px;box-sizing:border-box;position:relative;}
#PF002 .second .timelineBox:before {content:'';width:5px;height:100%;display:block;position:absolute;top:0;left:100px;z-index:1;background-color:#d9d9d8;}
#PF002 .second .timelineBox .roundTxtBox {display:table;table-layout:fixed;position:absolute;top:0;left:50px;font-size:0;}
#PF002 .second .timelineBox .roundTxtBox .round {width:109px;height:109px;display:table-cell;;position:relative;z-index:2;background-color:#f26e50;border-radius:50%;box-shadow:2px 8px 15px 0 rgba(0, 0, 0, 0.16);font-size:31px;font-weight:500;color:#fff;line-height:109px;text-align:center;vertical-align:middle;}
#PF002 .second .timelineBox .roundTxtBox p {display:table-cell;padding-left:49px;box-sizing:border-box;word-break:keep-all;font-size:21px;font-weight:500;color:#f26e50;line-height:1.52;vertical-align:middle;}
#PF002 .second .timelineBox .infoList {margin-top:13px;padding-left:210px;box-sizing:border-box;}
#PF002 .second .timelineBox .info {width:100%;min-height:577px;position:relative;}
#PF002 .second .timelineBox .info + .info {margin-top:140px;}
#PF002 .second .timelineBox .info .typo {font-size:42px;font-weight:500;color:#848484;}
#PF002 .second .timelineBox .info .desc {margin-top:10px;font-size:19px;font-weight:100;color:#6b6b6b;line-height:1.4;}
#PF002 .second .timelineBox .info .desc + .desc {margin-top:13px;}
#PF002 .second .timelineBox .frameWrap {position:absolute;z-index:2;}
#PF002 .second .timelineBox .frameWrap .frameInner {width:245px;height:504px;margin-top:10px;padding:10px;box-sizing:border-box;background-color:#fff;box-shadow:10px 13px 26px 0 rgba(0, 0, 0, 0.16);;border-radius:23px;}
#PF002 .second .timelineBox .frameWrap .frame {width:100%;height:100%;}
#PF002 .second .timelineBox .frameWrap .frame > img {width:100%;}

#PF002 .second .timelineBox .tag {font-size:25px;font-weight:100;color:#cecece;}

#PF002 .second .timeline01 {margin-top:180px;padding-top:190px;}
#PF002 .second .timeline01 .roundTxtBox {z-index:10}
#PF002 .second .timeline01 .infoList {margin-top:96px;}
#PF002 .second .timeline01 .frame01 {left:461px;top:29px;}
#PF002 .second .timeline01 .frame02 {left:740px;top:-68px;}
#PF002 .second .timeline01 .frame03 {left:461px;top:0}
#PF002 .second .timeline01 .frame03 .frameInner {height:540px;display:inline-block;margin-top:0;vertical-align:top;}
#PF002 .second .timeline01 .frame03 .tag {display:inline-block;margin-left:30px;vertical-align:top;}
#PF002 .second .timeline01 .frame03 .imgList {position:absolute;left:14px;top:134px;}
#PF002 .second .timeline01 .frame04 {left:461px;top:0;}
#PF002 .second .timeline01 .frame04 .frameInner {display:inline-block;margin-top:0;position:relative;vertical-align:top;}
#PF002 .second .timeline01 .frame04 .frameInner > .frame {width:auto;height:auto;position:absolute;left:6.5px;bottom:10px;}
#PF002 .second .timeline01 .frame04 .frameInner > .frame > img {width:auto;}
#PF002 .second .timeline01 .frame04 .tag {display:inline-block;margin-left:30px;vertical-align:top;}
#PF002 .second .timeline01 .frame04 .addImage {position:absolute;top:127px;left:253px;z-index:-1;}

#PF002 .second .timeline02 .roundTxtBox {z-index:20;}
#PF002 .second .timeline02 .frame05 {left:461px;top:0}
#PF002 .second .timeline02 .frame05 .frameInner {display:inline-block;margin-top:0;vertical-align:top;}
#PF002 .second .timeline02 .frame05 .tag {display:inline-block;margin-left:30px;vertical-align:top;}
#PF002 .second .timeline02 .imgList {margin-top:51px;font-size:0;white-space:nowrap}
#PF002 .second .timeline02 .imgList .img {display:inline-block;vertical-align:middle;}
#PF002 .second .timeline02 .imgList .img + .img {margin-left:30px;}
#PF002 .second .timeline02 .imgList + .tag {position:absolute;left:960px;top:120px;}
#PF002 .second .timeline02 .imgList .frameWrap {position:relative;}
#PF002 .second .timeline02 .imgList .frameInner {height:487px;padding:7px;}

#PF002 .second .timeline03 .roundTxtBox {z-index:30}
#PF002 .second .timeline03 .imgList {margin-left:210px;font-size:0;white-space:nowrap}
#PF002 .second .timeline03 .imgList .img {display:inline-block;vertical-align:middle;}
#PF002 .second .timeline03 .imgList .img + .img {margin-left:30px;}
#PF002 .second .timeline03 .imgList .frameWrap {position:relative;}
#PF002 .second .timeline03 .imgList .frameInner {height:505px;padding:7px;}

#PF002 .second .timeline04 {padding-top:190px;}
#PF002 .second .timeline04:before {content:none;}
#PF002 .second .timeline04 .roundTxtBox {z-index:40}
#PF002 .second .timeline04 .imgList {padding-left:210px;box-sizing:border-box;font-size:0;white-space:nowrap}
#PF002 .second .timeline04 .imgList .img {display:inline-block;vertical-align:middle;}
#PF002 .second .timeline04 .imgList .img + .img {margin-left:30px;}
#PF002 .second .timeline04 .imgList .frameWrap {position:relative;}
#PF002 .second .timeline04 .imgList .frameInner {height:487px;padding:7px;}

#PF002 .third {width:100%;height:1716px;margin:0 auto;padding:160px 0 0;box-sizing:border-box;background-color:#f8f8f7;overflow:hidden;}
#PF002 .third .titWrap {padding-left:60px;box-sizing:border-box;}
#PF002 .third .titWrap h2 {font-size:85px;font-weight:500;color:#272727;}
#PF002 .third .titWrap h2 + p {margin-top:17px;font-size:25px;font-weight:500;color:#000;}
#PF002 .third .imgList {width:100%;margin-top:121px;position:relative;}
#PF002 .third .imgList [class*="img"] {position:absolute;transform:translateX(400px);opacity:0;}
#PF002 .third .imgList .img01 {top:0;left:0;}
#PF002 .third .imgList .img02 {top:0;left:465px;} 
#PF002 .third .imgList .img03 {top:410px;left:465px;}
#PF002 .third .imgList .img04 {top:0;left:930px;}
#PF002 .third .imgList .img05 {top:303px;left:930px;}
#PF002 .third .imgList img {width:420px;}

@media screen and (min-width:1670px) {
  #PF002 .first .experience .roundTxtBox {left:80%;}
}

@media screen and (max-width:1366px) {
  #PF002 .second {padding:180px 0;}
}

@media screen and (max-width:767px) {
  #wrap {min-width:0;overflow-x:hidden;}
  #PF002 .first .bgLeft {width:50%!important;z-index:3!important;}
  #PF002 .first .bgRight {width:50%!important;z-index:1!important;}
  #PF002 .inner,#PF002 .first .experience .inner {box-sizing:border-box;width:100%!important;}
  #PF002 .first .conWrap,#PF002 .first .txtWrap {box-sizing:border-box;width:100vw!important;}
  #PF002 .first .conWrap {left:0;z-index:10;}
  #PF002 .first .txtWrap {z-index:10;padding:0 24px;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.4);}
  #PF002 .first .txtWrap .txt {font-size:18px;white-space:nowrap;}
  #PF002 .first .txtWrap .tit {font-size:48px;letter-spacing:-2px;word-break:keep-all;}
  #PF002 .first .bgLeft .animateWrap,#PF002 .first .bgRight .animateWrap {z-index:1;}
  #PF002 .first .bgLeft .animateWrap .imgWrap,#PF002 .first .bgRight .animateWrap .imgWrap {width:44vw;}
  #PF002 .first .animateWrap [class*="txt"] {font-size:32px;}
  #PF002 .first .animateWrap .txt01 {right:44vw;}
  #PF002 .first .animateWrap .txt02 {left:44vw;}
  #PF002 .first .experience .inner {padding:0 20px;}
  #PF002 .first .experience .mainTypo {left:24px;font-size:30px;}
  #PF002 .first .experience .roundBoxW {right:12px;left:auto;transform:scale(.72);transform-origin:right center;}
  #PF002 .first .sightWrap {padding:0 24px;}
  #PF002 .first .sightWrap .sight .tit {font-size:42px;}
  #PF002 .second {padding:100px 24px;}
  #PF002 .second .titWrap h2 {font-size:48px;}
  #PF002 .second .typoBoxWrap {white-space:normal;}
  #PF002 .second .typoBox {display:block;width:100%;margin:16px 0;}
  #PF002 .third .imgList {display:grid;grid-template-columns:1fr;gap:24px;}
  #PF002 .third .imgList [class*="img"] {position:relative!important;top:auto!important;left:auto!important;}
  #PF002 img,#PF002 video {max-width:100%;height:auto;}
}