:root { 
 --header-hei: 12rem; 
 --inner-pd: calc((100% - 1024px) / 2); 
 --color-point: #081E72; 
 --color-point01: #0060FF; 
 --color-txt: #5A5A5A; 
 --color-border:#DFDFDF; 
 --color-bg: #F0F7FF; 
 } 

 /* @media all and (max-width:1280px) { 
 :root { --inner-pd: 15%; } 
 }  */
 @media all and (max-width:1440px) { 
:root { --header-hei: 10rem; --inner-pd: 12%; } 
 } 
 @media all and (max-width:768px) { 
 :root { --inner-pd: 5%; } 
 } 
 @media all and (max-width:500px) { 
 :root { --header-hei: 9rem; } 
 } 

 /*트랜지션*/
#header .btn-app-wr,
#header .btn-app-wr .btn-app-list,
.sroll, .sroll .icon { transition: .3s; } 

/*공통*/
.inner { width: 100%; padding: 0 var(--inner-pd); margin: 0 auto; } 
.flex { display: flex; justify-content: center; align-items: center; } 
.icon, .img { display: inline-block; width: auto; max-width: 100%; } 
.sroll { position: fixed; bottom: 2.7rem; left: 50%; transform: translateX(-50%); z-index: 1; } 
.sroll .img-m { display: none; } 
.fp-viewing-0 .sroll .icon { filter: invert(1) brightness(10); } 
.fp-viewing-7 .sroll { opacity: 0; } 

.tit { margin-bottom: 4rem; line-height: 9.4rem; color: var(--color-point); font-size: 8.1rem; font-weight: 900; } 
.txt { line-height: 2.8rem; color: var(--color-txt); font-size: 2rem; font-weight: 500; } 
.txt strong { color: #000; font-weight: 600; } 



@media all and (max-width:1600px) { 
.tit { line-height: 8.4rem; font-size: 7.1rem; } 
 } 
/* @media all and (max-width:1280px) { 
 .tit { line-height: 7.4rem; font-size: 6.1rem; } 
 .txt { line-height: 2.6rem; font-size: 1.8rem; } 
 }  */
 @media all and (max-width:1440px) { 
 .tit { margin-bottom: 3rem; line-height: 6.4rem; font-size: 5.1rem; } 
 .sroll .img-pc { display: none; } 
 .sroll .img-m { display: block; } 
 } 
 @media all and (max-width:768px) { 
 .sroll { width: 6rem; } 
 .tit { line-height: 9.4rem; font-size: 8.1rem; } 
 .txt { line-height: 3.2rem; font-size: 2.2rem; } 
 } 
 @media all and (max-width:600px) { 
 .tit { line-height: 7.4rem; font-size: 6.1rem; } 
 } 
 @media all and (max-width:500px) { 
 .tit { line-height: 1.2; margin-bottom: 2rem; font-size: 5.6rem; } 
 .txt { width: 70%; line-height: 1.5; font-size: 1.8rem; } 
 .txt br { display: none; } 

 } 

/*헤더*/
.fp-viewing-0 #header .logo { background: url(/img/logo_w.svg)no-repeat center / contain; } 
.fp-viewing-0 #header .btn-app-wr { opacity: 0; visibility: hidden; } 

#header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-hei); transition: .3s; z-index: 2; } 
#header .inner { align-items: flex-end; justify-content: space-between; width: 100%; height: 100%; padding: 0 var(--inner-pd) 1.3rem; } 
#header .logo { width: 20rem; height: 5rem; background: url(/img/logo_c.svg)no-repeat center / contain; } 
#header .btn-app-wr { position: relative; opacity: 1; visibility: visible; cursor: pointer; } 
#header .btn-app-wr .btn-app { width: 17rem; height: 5rem; border-radius: 5rem; background-color: var(--color-point); color: #fff; font-size: 1.8rem; font-weight: 500; } 
#header .btn-app-wr .btn-app .icon-dw { margin-left: 1rem; } 
#header .btn-app-wr .btn-app-list { position: absolute; top: 6rem; right: 0; padding:0 1rem; background: var(--color-point); border-radius: 1rem; overflow: hidden; } 
#header .btn-app-wr .btn-app-list li { padding: 1rem; } 
#header .btn-app-wr .btn-app-list li:first-child { border-bottom: 1px solid #3f5195; } 

.fp-viewing-7 #header { transform: translateY(-100%); } 

@media all and (max-width:1440px) { 
 #header .logo { width: 17rem; } 
 #header .btn-app-wr .btn-app { width: auto; height: auto; padding: 0.5rem 2rem; font-size: 1.6rem; } 
 #header .btn-app-wr .btn-app .icon-dw { width: 14rem; height: 4rem; width: 2rem; margin-left: .5rem; } 
 } 

@media all and (max-width:500px) { 
 #header .inner { align-items: center; padding: 1.3rem var(--inner-pd); } 
 #header .btn-app-wr .btn-app { width: auto; height: auto; padding: 0.5rem 2rem; font-size: 1.6rem; } 
 #header .btn-app-wr .btn-app .icon-dw { width: 14rem; height: 4rem; width: 2rem; margin-left: .5rem; } 
 } 


/*섹션 공통*/
#fullpage { height: 100vh !important; } 

.section .inner { align-items: flex-start; justify-content: space-between; max-height: 58rem; height: 100%; } 
.section .box-img { margin-top: auto; transform: translateX(50%); opacity: 0; } 
.section.on .box-img { animation: boxani 0.8s ease 0s 1 normal forwards running; } 
.section.fp-completely .box-img { animation: boxani 0.8s ease 0s 1 normal forwards running; } 
@keyframes boxani { 
 100% { transform: translateX(0); opacity: 1; } 
 } 

@media all and (max-width:1600px) { 
.section .inner { max-height: 49rem; margin-top: 3rem; } 
 } 
/* @media all and (max-width:1280px) { 
.section .box-img { width: 50%; } 
 }  */
@media all and (max-width:1440px) { 
 .section .inner { max-height: 35rem; } 
 .section .box-img { width: 42%; } 
 } 
@media all and (max-width:768px) { 
 .section .inner { max-height: 70vh; margin-top: 5vh; } 
 .section .box-img { position: absolute; right: 0; bottom: 8vh; width: 60%; } 
 .section .tit-wr { width: 100%; } 
 } 
 @media all and (max-width:500px) { 
 .section .inner { max-height: 64vh; } 
 } 



#section1 { background:url(/img/main_bg.jpg)no-repeat center / cover; } 
#section1 .tit { margin-bottom: 7rem; color: #fff; } 
#section1 .app-wr { justify-content: space-between; align-items: flex-start; } 
#section1 .app-wr .tit { margin-left: .5rem; margin-bottom: 1rem; line-height: 2.8rem; font-size: 1.8rem; font-weight: 700; } 
#section1 .app-down-wr .app { display: inline-block; padding: 1.8rem 3rem; border-radius: 5rem; background-color: #000; } 
#section1 .app-down-wr .app-ios { margin-right: 1rem; } 
#section1 .app-down-wr .site-wr { margin-top: 3rem; } 
#section1 .app-down-wr .site-wr .site { display: inline-flex; height: 7.6rem; } 
#section1 .app-down-wr .site-wr .site .icon { width: 1rem; margin-left: 1rem; } 
#section1 .qr-down .flex { width: 19rem; height: 19rem; padding: 1rem; border-radius: 1.6rem; background-color: #fff; } 
#section1 .tit { color: #fff; } 

@media screen and (any-pointer:coarse) { 
 #section1 .qr-down { display: none; } 
 } 
 @media all and (max-width:1440px) { 
 #section1 .app-down-wr .app { width: auto; padding: 1rem 2rem; } 
 #section1 .app-down-wr .app .icon { height: 3rem; } 
 #section1 .app-wr .tit { margin-bottom: 0.5rem; } 
 #section1 .app-wr .app-down-wr { display: flex; } 
 #section1 .app-down-wr .site-wr { margin-top: 0; margin-left: 2rem; } 
 #section1 .app-down-wr .site-wr .site { height: 5rem; } 
 } 
@media all and (max-width:768px) { 
 #section1 { background:url(/img/main_bg_m.jpg)no-repeat center / cover; } 
 #section1 .app-wr .app-down-wr { display: block; } 
 #section1 .app-down-wr .app .icon { height: auto; } 
 #section1 .app-down-wr .site-wr { margin-top: 3rem; margin-left: 0; } 
 } 
 @media all and (max-width:600px) { 
 #section1 .app-down-wr .app { width: 27rem; } 
 #section1 .app-down-wr .app-ios { margin-right: .5rem; margin-bottom: 1rem; } 
 } 
 @media all and (max-width:500px) { 
 #section1 .app-down-wr { width: 100%; } 
 #section1 .app-down-wr .app { width: auto; } 
 #section1 .app-down-wr .app-wr .app .icon { width: 11rem; } 
 #section1 .app-down-wr .app.site { width: auto; height: 6.6rem; } 
 } 

 @media all and (max-width:400px) { 
 #section1 .tit { margin-bottom: 3rem; font-size: 4.9rem; } 
 
 } 
 
 
 @media all and (max-width:500px) { 
 #section5 .box-img { margin-right: 2rem; } 
 } 

#section8 { border-top: 1px solid #E3EAF1; } 
#section8 .inner { padding-top: 4rem; padding-bottom: 4rem; } 
#section8 ul:not(:last-of-type) { margin-bottom: 1rem; } 
#section8 ul li { line-height: 2rem; color: var(--color-txt); font-size: 1.4rem; } 

@media all and (max-width:768px) { 
 #section8 .inner { margin-top: 0; } 
 } 
 @media all and (max-width:500px) { 
 #section8 ul li { line-height: 2.2rem; color: var(--color-txt); font-size: 1.6rem; } 
 }