/* header */
.header .gnb_wrap .ar { border-top: 2px solid transparent; border-bottom: 2px solid #121214; } 

/* sect01 */
.sect01 .bg-img { background-image: url(/image/banner/ar_banner01.png); } 

/* sect02 */
.sect02 { padding: 16rem 4rem 12rem; } 
.sect02 .guide { display: flex; flex-direction: column; align-items: center; } 
.sect02 .sect_title { text-align: center; } 
.sect02 .video-wrap { width: fit-content; position: relative; display: flex; margin-top: 8rem; justify-content: center; } 
.sect02 .video-wrap video { display: flex; width: 100%; max-width: 96rem; border-radius: 2.4rem; overflow: hidden; } 
.sect02 .video-wrap img { width: 40rem;; position: absolute; bottom: -8rem; left:-18rem; } 

@media all and (max-width:768px){
 .sect02 { padding: 8rem 2rem 6rem; } 
 .sect02 .video-wrap { width: 80%; margin-top: 4.8rem; } 
 .sect02 .video-wrap img { width: 24rem; bottom: -4rem; left:-12rem; } 
 }

/* sect03 */
.sect03 { padding: 16rem 4rem 12rem; } 
.sect03 .guide { display: flex; flex-direction: column; align-items: center; } 
.sect03 .sect_title { text-align: center; } 
.sect03 .diagram-wrap { width: 100%; display: flex; justify-content: space-between; gap: 2.4rem; font-size: 2.4rem; font-weight: 600; margin-top: 8rem; align-items: center; } 
 .sect03 .diagram-wrap span { width: 7.2rem; } 
.sect03 .diagram-wrap .diagram01 { width: 30rem; border-radius: 2.4rem; background: #FFF; box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.08); padding: 4rem; display: flex; flex-direction: column; gap: 2.4rem; align-items: center; } 
.sect03 .diagram-wrap .diagram01 p { text-align: center; } 
.sect03 .diagram-wrap .diagram01 img { width: 22rem; } 
.sect03 .diagram-wrap .diagram02 { position: relative; width: 56rem; height: 36rem; } 
.sect03 .diagram-wrap .diagram02 img { opacity: 0.9; backdrop-filter: blur(10px); filter: drop-shadow(0 4.486px 17.944px rgba(0, 0, 0, 0.12)); } 
.sect03 .diagram-wrap .diagram02 img:nth-child(1) { width: 35rem; position: absolute; top: 0; left: 0; } 
.sect03 .diagram-wrap .diagram02 img:nth-child(2) { width: 26rem; position: absolute; bottom: 0; left: 6rem; } 
.sect03 .diagram-wrap .diagram02 img:nth-child(3) { width: 20rem; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } 
.sect03 .diagram-wrap .diagram03 ul { display: flex; flex-direction: column; gap: 2.4rem; } 
.sect03 .diagram-wrap .diagram03 ul li { display: flex; width: 28rem; padding: 2.4rem 3.2rem; align-items: center; gap: 2rem; border-radius: 2.4rem; background: #FFF; box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.08); } 
.sect03 .diagram-wrap .diagram03 img { width: 6rem; } 

@media all and (max-width:768px){
 .sect03 { padding: 8rem 2rem 6rem; } 
 .sect03 .diagram-wrap { flex-direction: column; margin-top: 4.8rem; } 
 .sect03 .diagram-wrap span { transform: rotate(90deg); } 
 .sect03 .diagram-wrap .diagram01 { width: 100%; max-width: 48rem; } 
 .sect03 .diagram-wrap .diagram01 img { max-width: 32rem; } 
 .sect03 .diagram-wrap .diagram02 { width: 100%; max-width: 56rem; } 
 .sect03 .diagram-wrap .diagram03 { width: 100%; display: flex; justify-content: center; } 
 .sect03 .diagram-wrap .diagram03 ul { width: 100%; flex-direction: row; justify-content: center; } 
 .sect03 .diagram-wrap .diagram03 ul li { width: calc(50% - 2.4rem/2); max-width: 28rem; } 
 }

@media all and (max-width:500px){
 .sect03 .diagram-wrap .diagram03 ul { flex-direction: column; align-items: center; } 
 .sect03 .diagram-wrap .diagram03 ul li { width: 100%; max-width: 32rem; } 
 }


/* sect04 */
.sect04 { padding: 12rem 4rem; } 
.sect04 .guide { display: flex; flex-direction: column; align-items: center; } 
.sect04 .sect_title { text-align: center; } 
.sect04 .btn-wrap { display: flex; gap: 2rem; font-size: 1.8rem; font-weight: 500; margin-top: 3.2rem; } 
.sect04 .btn-wrap button { width: 20rem; height: 6.4rem; border-radius: 0.8rem; border: 1px solid #E6E6ED; background: #FFF; } 
.sect04 .btn-wrap button a { display: flex; align-items: center; justify-content: center; gap: 1.2rem; height: 100%; } 
.sect04 .app-wrap { display: flex; flex-wrap: wrap; margin-top: 8rem; row-gap: 4.8rem; } 
.sect04 .app-wrap li { width: 20%; text-align: center; } 
.sect04 .app-wrap img { width: 14rem; } 
.sect04 .app-wrap p { font-size: 1.8rem; font-weight: 500; margin-top: 1.2rem; } 
.sect04 .app-wrap li:nth-child(9) img, li:nth-child(11) img, li:nth-child(13) img, li:nth-child(14) img { filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.12)); } 


@media all and (max-width:768px){
 .sect04 { padding: 8rem 2rem; } 
 .sect04 .app-wrap img { width: 8rem; } 
 }

@media all and (max-width:500px){
 .sect04 .app-wrap li { width: calc(100%/3); } 
 }

/* sect05 */
.sect05 { padding: 12rem 4rem 16rem; } 
.sect05 .guide { display: flex; gap: 12rem; align-items: center; } 
.sect05 .cont-wrap { width: 100%; } 
.sect05 .cont-wrap ul { display: flex; gap: 4rem; } 
.sect05 .cont-wrap ul li { position: relative; width: 24rem; } 
.sect05 .cont-wrap ul li .app { position: relative; width: 100%; max-width: 24rem; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12)); object-position: bottom; object-fit: cover; aspect-ratio: 1 / 2; } 
.sect05 .cont-wrap ul li:nth-child(-n+2) .app { object-fit: fill; } 
.sect05 .cont-wrap ul li .expand { width: 28rem; height: auto; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); } 
.sect05 .cont-wrap ul li video { width: 100%; border-radius: 32px; border: 8px solid #FFF; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12)); } 

@media all and (max-width:768px){
 .sect05 { padding: 6rem 2rem 8rem; } 
 .sect05 .guide { flex-direction: column; gap: 4.8rem; } 
 }

/* sect06 */
.sect06 .sect_title { text-align: center; } 
.sect06 .swiper-slide .app-wrap.row { flex-direction: column; } 
.sect06 .swiper-slide .app-wrap.row img, .sect06 .swiper-slide .app-wrap.row video { width: 100%; max-width: 27rem; height: 13.5rem; } 

@media all and (max-width:768px){
 .sect06 { padding: 8rem 2rem; } 
 }

/* sect07 */
.sect07 { padding: 16rem 4rem; } 
.sect07 .guide { display: flex; gap: 12rem; align-items: center; justify-content: space-between; } 
.sect07 .screen-wrap { width: 100%; max-width: 56rem; position: relative; display: flex; justify-content: center; } 
.sect07 .screen-wrap .frame { width: 24rem; height: 50rem; border-radius: 3.2rem; border: 0.8rem solid #121214; background: #FFF; } 
.sect07 .screen-wrap .txt-wrap { text-align: center; margin-top: 3.2rem; } 
.sect07 .screen-wrap .txt-wrap h4 { font-size: 1.4rem; } 
.sect07 .screen-wrap .txt-wrap h5 { font-size: 1rem; color: #71727D; font-weight: 500; margin-top: 0.4rem; } 
.sect07 .screen-wrap .theme-wrap { width: 100%; position: absolute; top: 13rem; left: 50%; transform: translateX(-50%); } 
.sect07 .screen-wrap .swiper-pagination { top: 38rem; } 
.sect07 .screen-wrap .swiper-pagination-bullet-active { background: #46C8EB; } 
.sect07 .screen-wrap .bottom-bar { width: 24rem; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 0 2rem; } 
.sect07 .screen-wrap .bottom-bar button { width: 100%; display: flex; height: 3.6rem; padding: 0.8rem 1.6rem; justify-content: center; align-items: center; color: #FFF; font-size: 1rem; background: #46C8EB; border-radius: 0.8rem; cursor: default; } 
.sect07 .screen-wrap .bottom-bar .bar { display: flex; align-items: center; justify-content: center; padding: 1.2rem 0.6rem; } 
.sect07 .screen-wrap .bottom-bar .bar::after { content: ''; width: 8rem; height: 0.4rem; background: #121214; border-radius: 0.2rem; } 

@media all and (max-width:768px){
 .sect07 { padding: 8rem 2rem; } 
 .sect07 .guide { flex-direction: column; align-items: flex-start; gap: 4.8rem; } 
 .sect07 .screen-wrap { margin: 0 auto; } 
 }

/* sect09 */
.sect09 .bg-img { background-image: url(/image/banner/ar_banner02.png); } 

/* sect10 */
.sect10 { padding: 16rem 4rem; } 
.sect10 .top-wrap { display: flex; gap: 12rem; align-items: center; } 
.sect10 .top-wrap .img-wrap { width: 100%; max-width: 58rem; position: relative; } 
.sect10 .top-wrap .img-wrap div { position: absolute; } 
.sect10 .top-wrap .img-wrap .photo-card { display: inline-block; width: 45rem; top: 0; left: 0; animation: floating 2s ease-in-out infinite; } 
@keyframes floating { 
 0% { transform: translateY(0); } 
 50% { transform: translateY(-2rem); } 
 100% { transform: translateY(0); } 
 }
.sect10 .top-wrap .img-wrap .shadow { margin-left: 10%; animation: shadow-scale 2s ease-in-out infinite; } 
@keyframes shadow-scale { 
 0% { transform: translateX(-50%) scale(1); opacity: 1; } 
 50% { transform: translateX(-50%) scale(0.8); opacity: 0.6; } 
 100% { transform: translateX(-50%) scale(1); opacity: 1; } 
 }
.sect10 .top-wrap .img-wrap .logo { width: 100%; max-width: 40rem; top: 0; right: 0; } 
.sect10 .top-wrap .img-wrap .keyring { width: 100%; max-width: 18rem; bottom: 2rem; left: 0; } 
.sect10 .bottom-wrap { display: flex; justify-content: space-between; margin-top: 8rem; gap: 4rem; align-items: center; } 
.sect10 .bottom-wrap .app-wrap { display: flex; gap: 4rem; } 
.sect10 .bottom-wrap .app-wrap li { width: 100%; max-width: 20rem; } 
.sect10 .bottom-wrap .img { width: 100%; max-width: 60rem; } 
.sect10 .annotation { color: #9697A3; font-size: 1.4rem; margin-top: 3.2rem; text-align: right; } 

@media all and (max-width:768px){
 .sect10 { padding: 8rem 2rem; } 
 .sect10 .top-wrap { flex-direction: column-reverse; gap: 4.8rem; } 
 .sect10 .bottom-wrap { margin-top: 3.2rem; } 
 .sect10 .bottom-wrap .app-wrap { gap: 2rem; } 
 }

 @media all and (max-width:500px){
 .sect10 .bottom-wrap { flex-direction: column; } 
 }

/* sect11 */
.sect11 .bg-img { background-image: url(/image/banner/ar_banner03.png); } 

/* sect12 */
.sect12 { padding: 16rem 4rem 12rem; } 
.sect12 .guide { display: flex; gap: 12rem; align-items: center; } 
.sect12 .img { width: 100%; max-width: 54rem; } 

@media all and (max-width:768px){
 .sect12 { padding: 8rem 2rem 6rem; } 
 .sect12 .guide { flex-direction: column-reverse; gap: 4.8rem; } 
 }

/* sect13 */
.sect13 { padding: 16rem 4rem; } 
.sect13 .guide { display: flex; gap: 12rem; align-items: center; } 
.sect13 .img { width: 100%; max-width: 56rem; height: 52rem; position: relative; display: flex; justify-content: center; } 
.sect13 .img .effect { width: 100%; max-width: 40rem; } 
.sect13 .img .image { width: 100%; max-width: 56rem; position: absolute; bottom: 20rem; left: 50%; transform: translateX(-50%); animation: saurus 2s ease-in-out infinite; } 
@keyframes saurus { 
 0% { transform: translate(-50%, 0); } 
 50% { transform: translate(-50%, -2rem); } 
 100% { transform: translate(-50% ,0); } 
 }

 @media all and (max-width:768px){
 .sect13 { padding: 8rem 2rem; } 
 .sect13 .guide { flex-direction: column; gap: 4.8rem; } 
 }

/* sect15 */
.sect15 { padding: 12rem 4rem 16rem; } 
.sect15 .guide { display: flex; gap: 12rem; align-items: center; } 
.sect15 .img { width: 100%; max-width: 56rem; } 

@media all and (max-width:768px){
 .sect15 { padding: 6rem 2rem 8rem; } 
 .sect15 .guide { flex-direction: column; gap: 4.8rem; } 
 }

 /* sect17 */
.sect17 { padding: 16rem 4rem; } 
.sect17 .guide { display: flex; gap: 12rem; align-items: center; } 
.sect17 .img { width: 100%; max-width: 64rem; } 

@media all and (max-width:768px){
 .sect17 { padding: 8rem 2rem; } 
 .sect17 .guide { flex-direction: column; gap: 4.8rem; } 
 }