@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

*{margin: 0;padding: 0;}
html, body{font-size: 14px; color: #222;font-family: 'Noto Sans KR',sans-serif;cursor: default;font-weight: normal;}
h1,h2,h3,h4,h5,h6{font-size: 100%;}
ol,ul{list-style: none;}
a{text-decoration: none; color: inherit;}
img,video{vertical-align: bottom;}
address{font-style: normal;}
table{border-collapse: collapse;}
button{background: transparent; border: none;}
/*영문폰트 font-family: 'Inter', sans-serif;*/

wrap{max-width: 100%}
section{}

/***main-wrap-----------------------*/
#main-wrap{position: relative;overflow: hidden;
    background: url(img/Background.jpg) no-repeat center/cover; width:100%; height:100vh;}
.main-text-wrap{position: relative;z-index: 1;
    width: 1500px;margin: auto;color: #fff;
    top: 50%; transform: translateY(-50%);}
.main-title{margin-top: 8em;
    position: relative;width: 500px;}
.main-title img{width: 25%;}
.main-title h2{font-size: 3rem;font-weight: 500;
    position: absolute;left: 32%;top: 0;opacity: 0.8;}
.main-title h3{font-size: 4rem;font-weight: 500;
    font-family: 'Inter', sans-serif;
    position: absolute;left: 32%;bottom: 0;}
.main-iphone{width: 1000px;position: absolute;
    left: 80%;opacity: 0;
    animation: load 1s 0.3s forwards;
    top: 50%; transform: translate(-50%,-50%);}
@keyframes load{to{left: 70%;opacity: 1;}}
.main-iphone img{width: 100%;}
.tag{margin-top: 14em;}
.tag li{line-height: 1.6rem;}
.work{margin-top: 2em;line-height: 1.6rem;}
.work .left{float: left;width: 80px;}

/***리서치 및 솔루션-----------------------*/
#research-wrap{overflow-x: hidden;}
.research{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.research img{width: 100%;}

/***디자인 가이드-----------------------*/
#guide-wrap{overflow-x: hidden;}
.guide{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.guide img{width: 100%;}

/*** 디자인목업-1 -----------------------*/
#design01-wrap{overflow-x: hidden;}
.design01{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.design01 img{width: 100%;}

/*** 앱-1 -----------------------*/
#app01-wrap{overflow-x: hidden;}
.app01{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.app01 img{width: 100%;}

/*** 로그인 영상 -----------------------*/
#splash-video-wrap{overflow-x: hidden;}
.splash-video{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.splash-video video{width: 100%;}

/*** 앱-2 홈  -----------------------*/
#app02-wrap{overflow-x: hidden;}
.app02{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.app02 img{width: 100%;}

/*** 홈 영상 -----------------------*/
#home-video-wrap{overflow-x: hidden;}
.home-video{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.home-video video{width: 100%;}

/*** 앱-3 스토어  -----------------------*/
#app03-wrap{overflow-x: hidden;}
.app03{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.app03 img{width: 100%;}

/*** 매장 영상 -----------------------*/
#store-video-wrap{overflow-x: hidden;}
.store-video{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.store-video video{width: 100%;}

/*** 앱-4 쇼핑  -----------------------*/
#app04-wrap{overflow-x: hidden;}
.app04{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.app04 img{width: 100%;}

/*** 쇼핑 영상 -----------------------*/
#shopping-video-wrap{overflow-x: hidden;}
.shopping-video{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.shopping-video video{width: 100%;}

/*** 앱-5 포인트  -----------------------*/
#app05-wrap{overflow-x: hidden;}
.app05{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.app05 img{width: 100%;}

/*** 포인트 영상 -----------------------*/
#point-video-wrap{overflow-x: hidden;}
.point-video{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.point-video video{width: 100%;}

/*** 앱-6 나의 해빗  -----------------------*/
#app06-wrap{overflow-x: hidden;}
.app06{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.app06 img{width: 100%;}

/*** 나의 해빗 영상 -----------------------*/
#my-video-wrap{overflow-x: hidden;}
.my-video{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.my-video video{width: 100%;}

/*** 마지막 목업  -----------------------*/
#all01-wrap{overflow-x: hidden;}
.all01{width: 100%;position: relative;
    left: 50%;transform: translateX(-50%);}
.all01 img{width: 100%;}












/*@@@@@@@@@@@@@@@@@@@@@@@*/
@media screen and (max-width:1600px){
/***main-wrap-----------------------*/
    .main-text-wrap{ width: 1200px;}
    .main-title{margin-top: 8em;width: 500px;}
    .main-iphone{width: 60%;left: auto;right: -11%;
        transform: translate(0,-45%);}
    @keyframes load{to{left: auto;right: -1%;opacity: 1;}}
    .tag{margin-top: 14em;}}

@media screen and (max-width:1250px){
/***main-wrap-----------------------*/
    .main-text-wrap{transform: none;
        width: auto;top: 15%;left: 7.8%;}
    .main-slogan{width: 500px;}
    .main-slogan img{width: 100%;}
    .main-title{margin-top: 4em;width: 430px;}
    .main-title img{width: 25%;}
    .main-title h2{font-size: 2.5rem;left: 30%;}
    .main-title h3{font-size: 3.5rem;left: 30%;}
    .main-iphone{width: 80%;right: -15%;top: auto;
        bottom: 0;transform: translate(0,0);}
    @keyframes load{to{;right: -5%;opacity: 1;}}
    .tag{margin-top: 10em;}
/***리서치 및 솔루션-----------------------*/
/*    .research{width: 120%;}*/
/***디자인 가이드-----------------------*/
/*    .guide{width: 120%;}*/
}



@media screen and (max-width:840px){
/***main-wrap-----------------------*/
    .main-text-wrap{top: 10%;left: 7.8%;}
    .main-slogan{width: 350px;}
    .main-title{margin-top: 3em;width: 400px;}
    .main-title h2{font-size: 2.2rem;left: 30%;}
    .main-title h3{font-size: 3.2rem;left: 30%;}
    .main-iphone{width: 100%;right: -20%;bottom: -5%;}
    @keyframes load{to{right: -10%;opacity: 1;}}
    .tag{margin-top: 6em;}
    .work{margin-top: 1.5em;}}

@media screen and (max-width:600px){
/***main-wrap-----------------------*/
    .main-text-wrap{top: 10%;left: 5%;}
    .main-slogan{width: 300px;}
    .main-title{margin-top: 3em;width: 320px;}
    .main-title h2{font-size: 1.8rem;left: 30%;}
    .main-title h3{font-size: 2.8rem;left: 30%;}
    .main-iphone{width: 130%;right: auto;left: 62%;}
    @keyframes load{to{
        left: 52%;transform: translateX(-50%);
        right: auto;opacity: 1;}}
    .tag{margin-top: 5em;}
    .work{margin-top: 1.5em;}}

@media screen and (max-width:450px){
/***main-wrap-----------------------*/
    .main-text-wrap{top: 6%;}
    .main-slogan{width: 250px;}
    .main-title{margin-top: 2em;width: 280px;}
    .main-title h2{font-size: 1.5rem;}
    .main-title h3{font-size: 2.5rem;}
    .main-iphone{width: 130%;}
    .tag{margin-top: 4em;}
    .work{margin-top: 1em;}}