html, body, div, p, ul, ol, li, nav, section, article{
    margin:0;
    padding:0;
}
html,body{margin:0;padding:0;background:#F55794; overflow-x:hidden;}

/* 페이지 앵커 */
#nav { position: fixed; right:145px; top:50%; transform: translate(0,-50%); width: 43px; z-index: 9; display:flex;flex-direction:column;gap:10px 0;}
#nav li { margin: 5px 0; list-style:none;}
#nav li:nth-child(1){display:none;}
#nav li:nth-child(6){display:none;}
#nav a { display: block; width: 100%; height:100%;}
#nav a span {display:block; background-image:url('../img/dot.png');width:43px;height:38px;background-position:center;}
#nav li.active a span { background-image:url('../img/dot_on.png'); }


.gnb {position:fixed;width:100%;height:110px;z-index:10;background-color:rgba(245,87,148,0);}
.gnb .menu{position:relative;width:100%;height:100%;max-width:1920px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 80px;box-sizing:border-box;}
.gnb .links{display:flex;gap:0 50px;align-items:center;justify-content:end}
.gnb .menu .logo img{width:100%;}
.gnb .menu .insta img{width:100%;}
.gnb .menu .app img{width:100%;}

.section {position:relative;width:100%;overflow:hidden;height:100vh !important;}
.section .section-inner{display:flex;width:100%;max-width:1920px;margin:0 auto;height:100%;}
.section .section-inner .mo{display:none;width:100%;align-items:center;}
.section .section-inner .mo > div img{width:100%;}
.section .section-inner .pic{position:relative;display:flex;}
.section .section-inner .pic > div{position:relative;}
.section .pic {width:80%;}
.section .pic img{width:100%;}
.fp-tableCell {height:100% !important;}
#section01 {;box-sizing:border-box;}
#section01 .section-inner {justify-content:center;align-items:end;overflow:hidden;}
#section01 .pic{gap:0 10%;align-items:end;left:5%;}
#section01 .pic > div{position:relative;}
#section01 .pic .p01{bottom:10vh;width:30%;}
#section01 .pic .p02{opacity:0;width:60%;}
#section01 .pic .p02.on{animation:.3s move_left linear forwards;}


#section02 .section-inner {justify-content:start;align-items:center;height:100%;box-sizing:border-box;}
#section02 .pic{gap:0 10%;top:3vh;left:12%;}
#section02 .pic .p01{opacity:0;width:30%;}
#section02 .pic .p01.on{animation:.3s move_right linear forwards;}
#section02 .pic .p02{top:85px;width:30%}


#section03 .section-inner {justify-content:start;align-items:center;height:100%;box-sizing:border-box;}
#section03 .pic{gap:0 15%;top:5vh;left:15%;}
#section03 .pic .p01{top:7vh;width:30%;}
#section03 .pic .p02{opacity:0;width:20%;}
#section03 .pic .p02.on{animation:.3s move_left linear forwards;}


#section04 .section-inner {justify-content:start;align-items:center;height:100%;box-sizing:border-box;}
#section04 .pic{gap:0 15%;top:3.5vh;left:10%;}
#section04 .pic .p01{opacity:0;width:20%}
#section04 .pic .p01.on{animation:.3s move_right linear forwards;}
#section04 .pic .p02{top:60px;width:35%;}

#section05 .section-inner {justify-content:start;align-items:center;height:100%;box-sizing:border-box;}
#section05 .pic{gap:0 15%;top:8vh;left:15%;}
#section05 .pic .p01{top:50px;}
#section05 .pic .p02{opacity:0;width:20%}
#section05 .pic .p02.on{animation:.3s move_left linear forwards;}

#section06 .section-inner {justify-content:start;align-items:center;height:100%;padding:0 0 0 70px;box-sizing:border-box;}
#section06 .pic{width:360px;;padding:50px 0 100px 0;}

.hide {display:none !important;}

@media (max-width: 1280px) {
	.section .section-inner {max-width:100%;}
	.section .pic > div img{width:100%}
	
	.gnb .menu .logo {width:13%;}
	.gnb .links {gap:0 10px;}
	.gnb .menu .insta {width:10%;}
	.gnb .menu .app {width:45%;}
	

	
	#nav { position: fixed; right:45px;}
	
	#section01 .pic{width:80%;}
	#section01 .pic .p01{width:30%;}
	#section01 .pic .p02{width:50%;}

	#section02 .pic{width:70%;top:6%;left:15%;}
	#section02 .pic .p01{width:45%;}
	#section02 .pic .p02{width:35%;}
	
	#section03 .pic{width:70%;top:6%;left:15%;}
	#section03 .pic .p01{width:35%;}
	#section03 .pic .p02{width:25%;}
	
	#section04 .pic{width:70%;top:6%;}
	#section04 .pic .p01{width:32%;}
	#section04 .pic .p02{width:40%;}
	
	#section05 .pic{width:70%;top:6%;left:15%;}
	#section05 .pic .p01{width:35%;}
	#section05 .pic .p02{width:25%;}
	
}

@media (max-width: 800px) {
  #nav {transform:scale(.5);right:10px;top:30%;}
 
 .gnb {height:120px;z-index:10;}
 .gnb .menu{position:relative;width:100%;height:100%;max-width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-sizing:border-box;}
 .gnb .menu .logo {width:36.4vw;}
 .gnb .menu .logo img{width:90%;}
 .gnb .links{display:flex;gap:0 20px;}
 .gnb .links .insta {width:7.2vw;text-align:right;}
 .gnb .links .app {width:26.2vw;text-align:right;}
 .gnb .links .insta img{width:100%;}
 .gnb .links .app img{width:100%;}


 .section .section-inner .pic{display:none;}


 .section {height:100% !important;}
 .section .section-inner{max-width:100%;padding:0 0 5vh 0;box-sizing:border-box;align-items:end !important;}
 .section .section-inner .mo{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
 .section .section-inner .mo > div{position:relative;}
 .section .section-inner .mo img{object-fit:contain}

  #section01 {box-sizing:border-box;} 
  #section01 .section-inner {height:100%;padding:0;} 
  #section01 .mo{justify-content:space-between;box-sizing:border-box;gap:20px 0;}
  #section01 .mo .p01{width:35%;}
  #section01 .mo .p02{width:60%;opacity:0;}
  #section01 .mo .p02.on{animation:.3s move_up linear forwards;}
  
  #section02 .section-inner {height:100%;} 
  #section02 .mo{justify-content:center;gap:20px 0;}
  #section02 .mo .p01{width:40%;margin-bottom:10%;}
  #section02 .mo .p02{width:55%;opacity:0;}
  #section02 .mo .p02.on{animation:.3s move_up linear forwards;}

  #section03 .section-inner {height:100%;} 
  #section03 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section03 .mo .p01{width:40%;margin-bottom:19%;}
  #section03 .mo .p02{width:31%;opacity:0;}
  #section03 .mo .p02.on{animation:.3s move_up linear forwards;}

  #section04 .section-inner {height:100%;} 
  #section04 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section04 .mo .p01{width:40%;margin-bottom:20.5%;}
  #section04 .mo .p02{width:40.5%;opacity:0;}
  #section04 .mo .p02.on{animation:.3s move_up linear forwards;}
  
  #section05 .section-inner {height:100%;} 
  #section05 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section05 .mo .p01{width:40%;margin-bottom:14.5%;}
  #section05 .mo .p02{width:31%;opacity:0;}
  #section05 .mo .p02.on{animation:.3s move_up linear forwards;}


  #section06 .section-inner {padding:20px 0 60px 20px;}
  #section06 .section-inner .mo{align-items:start;}
  #section06 .pic{}

}

@media (max-width: 640px) {
  #nav {transform:scale(.5);right:10px;top:30%;}
 
 .gnb {height:80px;z-index:10;}
 .gnb .menu{position:relative;width:100%;height:100%;max-width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 20px;box-sizing:border-box;}
 .gnb .menu .logo {width:36.4vw;}
 .gnb .menu .logo img{width:90%;}
 .gnb .links{display:flex;gap:0 20px;}
 .gnb .links .insta {width:7.2vw;text-align:right;}
 .gnb .links .app {width:26.2vw;text-align:right;}
 .gnb .links .insta img{width:100%;}
 .gnb .links .app img{width:100%;}


 .section .section-inner .pic{display:none;}


 .section {height:100% !important;}
 .section .section-inner{max-width:100%;padding:0 0 5vh 0;box-sizing:border-box;align-items:end !important;}
 .section .section-inner .mo{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;}
 .section .section-inner .mo > div{position:relative;}
 .section .section-inner .mo img{object-fit:contain}

  #section01 {box-sizing:border-box;} 
  #section01 .section-inner {height:100%;padding:0;} 
  #section01 .mo{justify-content:space-between;box-sizing:border-box;gap:20px 0;}
  #section01 .mo .p01{width:45%;}
  #section01 .mo .p02{width:80%;opacity:0;}
  #section01 .mo .p02.on{animation:.3s move_up linear forwards;}
  
  #section02 .section-inner {height:100%;} 
  #section02 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section02 .mo .p01{width:50%;margin-bottom:9.5%;}
  #section02 .mo .p02{width:80%;opacity:0;}
  #section02 .mo .p02.on{animation:.3s move_up linear forwards;}

  #section03 .section-inner {height:100%;} 
  #section03 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section03 .mo .p01{width:50%;margin-bottom:18.5%;}
  #section03 .mo .p02{width:45%;opacity:0;}
  #section03 .mo .p02.on{animation:.3s move_up linear forwards;}

  #section04 .section-inner {height:100%;} 
  #section04 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section04 .mo .p01{width:56%;margin-bottom:20%;}
  #section04 .mo .p02{width:45%;opacity:0;}
  #section04 .mo .p02.on{animation:.3s move_up linear forwards;}
  
  #section05 .section-inner {height:100%;} 
  #section05 .mo{justify-content:center;gap:20px 0;top:20px;}
  #section05 .mo .p01{width:50%;margin-bottom:13.5%;}
  #section05 .mo .p02{width:45%;opacity:0;}
  #section05 .mo .p02.on{animation:.3s move_up linear forwards;}


  #section06 .section-inner {padding:20px 0 60px 20px;}
  #section06 .section-inner .mo{align-items:start;}
  #section06 .pic{}

}

@keyframes move_left {
	0% {
		opacity:0;
		right:-150px;
	}
	100%{
		opacity:1;
		right:0;
	}
}
@keyframes move_right {
	0% {
		opacity:0;
		left:-150px;
	}
	100%{
		opacity:1;
		left:0;
	}
}
@keyframes move_up{
	0% {
		opacity:0;
		bottom:-150px;
	}
	100%{
		opacity:1;
		bottom:0;
	}
}