@charset "utf-8";

#section3 #img6_tab, 
#section3 #img7_tab,
#section3 .tab .animation1,
#section3 .tab .animation2,
#section5 #img8_tab,
#section6 #img9_tab,
#section2 #img2_tab, 
#section2 #img3_tab, 
#section2 #img2_mo, 
#section2 #img3_mo,
#section3 #img4_mo,
#section3 #img5_mo,
#section3 #img6_mo,
#section3 #img7_mo,
#section3 .mo .animation1_1,
#section3 .mo .animation1_2,
#section3 .mo .animation1_3,
#section3 .mo .animation1_4,
#section3 .mo .animation2,
#section5 #img8_mo,
#section5 .motionImg .mo,
#section5 .motionImg .mo,
#section6 #img9_mo,
#section6 .motionImg .mo,
#section6 .motionImg .mo,
.logo_tab,.logo_mo { display: none; }

.parallax-image { height: 100vh; /* padding-top: 52%; */ position:relative; font-size: 0; }
.parallax-image #bgImg .bg { position:absolute; top:0; left:0; width:100%; height: 100vh; object-fit: cover; }
.parallax-image .bg_tab { position:absolute; top:0; left:0; width:100%; height: auto; display: none; }
.parallax-image .bg_mo { position:absolute; top:0; left:0; width:100%; height: auto; display: none; } 
.parallax-image .object { width: 100%; height: 100%;}
#section2 .object img { object-fit: contain; }
#section5 .object img,
#section6 .object img { object-fit: cover; }

.parallax-image #light { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.parallax-image .light1 { background: url(../images/section1_1.png) no-repeat center center / cover; } 
.parallax-image .light2 { background: url(../images/section3_1.png) no-repeat center center / cover; }
.parallax-image .light3 { background: url(../images/section4_1.png) no-repeat center center / cover; }
.parallax-image .light4 { background: url(../images/section5_1.png) no-repeat center center / cover; }
.parallax-image .light5 { background: url(../images/section6_1.png) no-repeat center center / cover; }

#section1 #img1 { position: absolute; top: 62%; left: 50%; transform: translate(-50%,-50%); width: 17%; padding-top: 50px; }
#section2 #img2 { position: absolute; bottom: -30px; right: 0; width: 49%; height: 100%; }
#section2 #img3 { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 55%; height: 100%; }
#section3 #img4 { position: absolute; top: 160px; right: 50%; margin-right: 200px; width: 6.5%; }
#section3 #img5 { position: absolute; top: 105px; left: 50%; margin-left: 375px; width: 8.4%; }
#section3 #img6 { position: absolute; bottom: 0; left: 0; width: 32.8%; }
#section3 #img7 { position: absolute; bottom: 0; right: 0; width: 33.9%; }
#section5 #img8 { position: absolute; bottom: 0; right: 0; height: 100%; }
#section6 #img9 { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; }

/* 모션 */
#section5 .motionImg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#section5 .motionImg > div img { width: unset; height: 100%; display: block; position: absolute; right: 0; top: 0; transform-origin: center center; }
#section5 .motionImg > div img:nth-child(1) { animation: motion2 3s linear infinite alternate; }
#section5 .motionImg > div img:nth-child(2) { right: 40px; animation: motion1 3s linear infinite alternate; }
#section6 .motionImg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#section6 .motionImg > div img { width: unset; height: 100%; display: block; position: absolute; right: 420px; top: 0; transform-origin: center center; }
#section6 .motionImg > div img:nth-child(1) { animation: motion2 3s linear infinite alternate; }
#section6 .motionImg > div img:nth-child(2) { right: 580px; animation: motion1 3s linear infinite alternate; opacity: .8; }

/* 애니메이션 */
#section3 .pc .animation1 img, #section3 .pc .animation2 img {width: 100%;}
#section3 .pc .animation1 { background: url(../images/sec3_heart1.png) no-repeat center center / contain; width: 35%; height: 52%; position: absolute; left: 50%; top: 100px; transform: translateX(-50%); z-index: 20; animation: ani1 1s linear infinite alternate;}
#section3 .pc .animation2 { background: url(../images/sec3_heart2.png) no-repeat center center / 100%; width: 120px; height: 100%; position: absolute; right: 64%; bottom: 0; z-index: 20; animation: ani2 1s linear infinite alternate; margin-bottom: -110px}
#section4 .pc .animation3 { background: url(../images/sec4_heart1.png) no-repeat center center / 100%; width: 15.5%; height: 27.4%; position: absolute; right: 50%; top: 0; margin-right: 430px; z-index: 20; animation: ani3 1s linear infinite alternate;}
#section4 .pc .animation4 { background: url(../images/sec4_heart2.png) no-repeat center center / 100%; width: 20.8%; height: 37.2%; position: absolute; left: 50%; top: 60px; margin-left: 430px; z-index: 20; animation: ani4 1s linear infinite alternate;}
#section4 .pc .animation5 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 20;}
#section4 .pc .animation5 img { width: 100%; }

/* pc keyframes */
@keyframes ani1 { 0% {top:100px} 100% {top:80px;} }
@keyframes ani2 { 0% {bottom:20px} 100% {bottom:0;} }
@keyframes ani3 { 0% {top:0} 100% {top:-15px;} }
@keyframes ani4 { 0% {top:60px} 100% {top:40px;} }
@keyframes motion1 { 0% {transform:translateX(0)} 100% {transform:translateX(40px)} }
@keyframes motion2 { 0% {transform:translateX(0)} 100% {transform:translateX(-40px)} }

/* 텍스트 */
.parallax-image .txt { position: absolute; left: 50%; top: 50%; color: #fff; font-size: 24px; line-height: 1; z-index: 99; text-align: center; line-height: 1.2; }
.parallax-image .txt p { display: inline; }
#section1 .txt { top: 220px; transform: translateX(-50%); }
#section2 .txt { top: 28%; left: 14%; }
#section3 .txt { top: unset; bottom: 20%; transform: translateX(-50%); }
#section4 .txt { top: unset; bottom: 15%;transform: translateX(-50%); }
#section5 .txt { top: 23%; left: 15%; }
#section6 .txt { width: 56%; top: unset; bottom: 10%; transform: translateX(-50%); }

/* 로고 */
.logo_wrap { width: 43%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) !important; }
.logo_wrap img { width: 100%; height: 100%; object-fit: contain; }

/* back */
#back { position: fixed; top: 110px; left: 100px; z-index: 999;}
#back span { font-size: 20px; color: #fff; padding-left: 18px; background: url(../images/back_btn.png) no-repeat 0 8px; }

/* top */
.gotop { display: none; overflow: hidden; position:fixed; right:0; bottom:60px; width:60px; height:60px; margin-right:60px; z-index:999; background-color: #fff; border-radius: 25px; box-shadow: 0px 15px 30px 0 rgba(0, 0, 0, 0.3); }
.gotop:before { display: block; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 19px; height: 26px; background: url(../images/top_btn.png) no-repeat center center/cover; transition: top .6s ease; }
.gotop:after { display: block; content: ""; position: absolute; top: 150%; left: 50%; transform: translate(-50%, -50%); width: 19px; height: 26px; background: url(../images/top_btn.png) no-repeat center center/cover; transition: top .6s ease; }
.gotop:hover:before {top: -150%;}
.gotop:hover:after {top: 50%;}

@media screen and (max-width:1920px){
  /* .parallax-image { padding-top: 56%; }
  #section6.parallax-image #bgImg .bg { height: unset; } */
}

@media screen and (max-width:1550px){
  #section3 .pc .animation2 { animation: ani2 1s linear infinite alternate; }
  @keyframes ani2 { 0% {bottom:20px} 100% {bottom:0;} }
  #section4 .pc .animation3 { margin-right: 220px; }
  #section4 .pc .animation4 { margin-left: 230px; }
  #section4 .pc .animation5 { width: 45%; }
  #section5 .motionImg > div img { opacity: .4; }
  #section6 .motionImg > div img { right: 215px; }
  #section6 .motionImg > div img:nth-child(2) { right: 235px; }
}

@media screen and (max-width:1023px){
  /* .parallax-image { height: 100vh; padding-top: 0; object-fit: cover; } */
  /* .parallax-image #bgImg .bg { height: 100vh; } */
  .bg {display: none;}
  .parallax-image .bg_tab { display: block; height: 100vh;}
  #section5 .object img,
  #section6 .object img { object-fit: unset; }

  #section1 .txt { top: unset; left: 50%; bottom: 150px; transform: translateX(-50%); margin-left: 0; }
  #section2 .txt { top: unset; bottom: 14%; left: 50%; transform: translateX(-50%); }
  #section3 .txt { width: 51%; top: unset; bottom: 14%; transform: translateX(-50%); margin-left: 0; }
  #section4 .txt { width: 52%; bottom: 14%; transform: translateX(-50%); margin-left: 0; }
  #section5 .txt { top: unset; bottom: 95px; left: 50%; transform: translateX(-50%); }
  #section6 .txt { width: 80%; bottom: 100px; transform: translateX(-50%); margin-left: 0; }

  #section1 #img1 { width: unset; top: 48%; padding-top: 0; }
  #section2 #img2 { display: none; }
  #section2 #img2_tab { display: block; position:absolute; bottom: 0; right: 0; width: 72%; height: 100%; }
  #section2 #img3 { display: none; }
  #section2 #img3_tab { display: block; position:absolute; top: 44%; left: 0; transform: translateY(-50%); margin-left: -100px; width: 84%; height: 100%; }
  #section3 #img4 { width: 10.2%; top: 160px; margin-right: 110px; }
  #section3 #img5 { width: 12.8%; top: 125px; margin-left: 205px; }
  #section3 #img6, #section3 #img7 { display: none; }
  #section3 #img6_tab, #section3 #img7_tab { display: block; }
  #section3 #img6_tab { position:absolute; bottom: 80px; left: 0; }
  #section3 #img7_tab { position:absolute; bottom: 80px; right: 0; }
  #section3 .pc .animation1, #section3 .pc .animation2 { display: none; }
  #section3 .tab .animation1  { display: block; background: url(../images/sec3_heart1_tab.png) no-repeat center center / contain; width: 50.7%; height: 50%; position: absolute; left: 50%; top: 30px; transform: translateX(-50%); z-index: 20; animation: ani1 1s linear infinite alternate;}
  #section3 .tab .animation2 { display: block; background: url(../images/sec3_heart2_tab.png) no-repeat center center; width: 84px; height: 84px; position: absolute; bottom: 465px; right: 50%; margin-right: 10px; background-size: contain; animation: ani2 1s linear infinite alternate; }
  #section4 .pc .animation3 { width: 29%; height: 21%; top: 85px; margin-right: 75px; animation: ani3 1s linear infinite alternate; }
  #section4 .pc .animation4 { width: 33%; height: 25%; top: 150px; margin-left: 100px; animation: ani4 1s linear infinite alternate; }
  #section4 .pc .animation5 { width: 75%; }
  #section5 #img8 { display: none; }
  #section5 #img8_tab { display: block; width: 100%; height: 81.9%; position:absolute; bottom: 0; left: 0; }
  #section6 #img9 {display: none;}
  #section6 #img9_tab {display: block; width: 100%; height: 86.7%; position:absolute; top: 0; left: 0; }
  #section5 .motionImg > div img,
  #section6 .motionImg > div img { width: 100%; height: 100%; }
  #section6 .motionImg > div img { right: 80px; }
  #section6 .motionImg > div img:nth-child(2) { right: 115px; }
  /* tab keyframes */
  @keyframes ani1 { 0% {top:30px} 100% {top:10px;} }
  @keyframes ani2 { 0% {bottom:465px} 100% {bottom:445px;} }
  @keyframes ani3 { 0% {top:85px} 100% {top:70px;} }
  @keyframes ani4 { 0% {top:150px} 100% {top:130px;} }
  .logo_wrap { width: 100%; }
  .logo_wrap .logo { display: none; }
  .logo_wrap .logo_tab { display: block; width: 90%; margin: 0 auto; }

  #back { top: 80px; left: 40px; }
  #back span { font-size: 18px; padding-left: 14px; background-position: 0 7px; }
  .gotop { bottom:60px; width:50px; height:50px; margin-right:40px; border-radius: 20px; }
  .gotop:before,.gotop:after { width: 15px; height: 21px;}
}

@media screen and (max-width:767px){
  .parallax-image .bg_tab { display: none; }
  .parallax-image .bg_mo { display: block; height: 100vh; }
  .parallax-image .txt { font-size: 18px; }

  #section1 .txt { width: 75%; bottom: 120px; }
  #section2 .txt { width: 100%; padding: 0 10px; box-sizing: border-box; }
  #section3 .txt { width: 80%; }
  #section4 .txt { width: 90%; }
  #section5 .txt { width: 100%; }
  #section6 .txt { width: 85%; bottom: 80px; }

  #section1 #img1 { width: 50%; }
  #section2 #img2, #section2 #img3, #section2 #img2_tab, #section2 #img3_tab { display: none; }
  #section2 #img2_mo, #section2 #img3_mo { display: block; }
  #section2 #img2_mo { position:absolute; bottom: 150px; right: 0; }
  #section2 #img3_mo { position:absolute; bottom: 145px; left: 0; }
  #section3 #img4, #section3 #img5, #section3 #img6_tab, #section3 #img7_tab { display: none; }
  #section3 #img4_mo { display: block; position:absolute; top: 140px; left: 75px; }
  #section3 #img5_mo { display: block; position:absolute; top: 85px; right: 55px; }
  #section3 #img6_mo { display: block; position:absolute; bottom: 150px; left: 0; }
  #section3 #img7_mo { display: block; position:absolute; bottom: 315px; right: 0; }
  #section3 .tab .animation1, #section3 .tab .animation2 { display: none; }
  #section3 .mo .animation1_1 { display: block; width: 33px; height: 33px; background: url(../images/sec3_heart1_1.png) no-repeat center center; position: absolute; top: 40px; left: 32%; animation: ani1_1 1s .2s linear infinite alternate; }
  #section3 .mo .animation1_2 { display: block; width: 35px; height: 35px; background: url(../images/sec3_heart1_2.png) no-repeat center center; position: absolute; top: 145px; right: 35%; animation: ani1_2 1s linear infinite alternate; }
  #section3 .mo .animation1_3 { display: block; width: 54px; height: 54px; background: url(../images/sec3_heart1_3.png) no-repeat center center; position: absolute; top: 230px; right: 37%; animation: ani1_3 1s .4s linear infinite alternate; }
  #section3 .mo .animation1_4 { display: block; width: 39px; height: 39px; background: url(../images/sec3_heart1_4.png) no-repeat center center; position: absolute; top: 285px; left: 26%; animation: ani1_4 1s linear infinite alternate; }
  #section3 .mo .animation2 { display: block; background: url(../images/sec3_heart2_mo.png) no-repeat center center; width: 49px; height: 49px; position: absolute; bottom: 200px; right: 50%; margin-right: -120px; z-index: 20; animation: ani2 1s linear infinite alternate; }
  #section4 .pc .animation3 { width: 34%; top: 60px; margin-right: 39px; animation: ani3 1s linear infinite alternate; }
  #section4 .pc .animation4 { width: 50%; top: 100px; margin-left: 0; animation: ani4 1s linear infinite alternate; }
  #section4 .pc .animation5 { width: 100%; top: 47%; }
  #section5 #img8_tab { display: none; }
  #section5 #img8_mo { display: block; width: 100%; height: 82.6%; position:absolute; bottom: 0; left: 0; }
  #section5 .motionImg .pc { display: none;}
  #section5 .motionImg .mo { display: block;}
  #section5 .motionImg > div img:nth-child(2) { right: 20px; } 
  #section6 #img9_tab { display: none; }
  #section6 #img9_mo { display: block; width: 100%; height: 70.3%; position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); }
  #section6 .motionImg .pc { display: none;}
  #section6 .motionImg .mo { display: block;}
  #section6 .motionImg > div img:nth-child(2) { right: 20px; } 
  /* mo keyframes */
  @keyframes ani1_1 { 0% {top:40px} 100% {top:30px;} }
  @keyframes ani1_2 { 0% {top:145px} 100% {top:125px;} }
  @keyframes ani1_3 { 0% {top:230px} 100% {top:215px;} }
  @keyframes ani1_4 { 0% {top:285px} 100% {top:265px;} }
  @keyframes ani2 { 0% {bottom:200px} 100% {bottom:180px;} }
  @keyframes ani3 { 0% {top:60px} 100% {top:45px;} }
  @keyframes ani4 { 0% {top:100px} 100% {top:80px;} }
  @keyframes motion1 { 0% {transform:translateX(0)} 100% {transform:translateX(20px)} }
  @keyframes motion2 { 0% {transform:translateX(0)} 100% {transform:translateX(-20px)} }
  .logo_wrap .logo_tab { display: none; }
  .logo_wrap .logo_mo { display: block; }

  #back { top: 60px; left: 20px; }
  #back span { font-size: 16px; background-position: 0 4px; }
  .gotop { width: 40px; height: 40px; bottom:40px; margin-right:16px; border-radius: 16px; }
  .gotop:before,.gotop:after { width: 13px; height: 17px;}
}

@media screen and (max-width:374px){
  #section2 #img2_mo, #section2 #img3_mo { width: 100%; }
  #section3 #img6_mo { width: 50%; }
  #section3 #img7_mo { width: 45%; }
}

@media screen and (min-width:1921px){
  #section2 #img2,
  #section2 #img3,
  #section3 #img4,
  #section3 #img5,
  #section3 #img6,
  #section3 #img7,
  #section5 #img8 { width: unset; }
  #section2 #img2 { height: 100%; left: 50%; right: unset; }
  #section3 .pc .animation1 {background-size: contain;}
  #section6 .object { width: 1888px; height: 100%; position: relative; top: 0; left: 50%; transform: translateX(-50%); display: inline-block; }
  #section6 .object img { object-fit: contain; }
}
@media screen and (min-width:2800px){
  #section3 #img6 { left: 20%; }
  #section3 #img7 { right: 20%; }
}