html, body{margin: 0; padding: 0;}
body{color: #d7e7f3; font-family: 'Nanum Gothic', sans-serif; font-size: 22px; text-align: center; min-width: 320px; }
a{text-decoration: none; font-weight: 500;	transition: color 0.25s ease; }
a:hover{color: #fff;}
h1{font-weight: 500; letter-spacing: 1px; text-transform: uppercase; -webkit-font-smoothing: subpixel-antialiased;}
h2{font-weight: 300; color: #779dba;-webkit-font-smoothing: subpixel-antialiased;}
h3{font-weight: 500; line-height: 1.5em; color: #d7e7f3; -webkit-font-smoothing: subpixel-antialiased;}
div.block{position: relative;height: 100vh;	 box-sizing: border-box; }
div.block svg{position: absolute;bottom: 50px;width: 30px;z-index: 700; animation: chevronAnimation 4s ease-in-out 0s infinite; margin-left:-15px;}
div.block svg path{fill: #fff;}

.content01{background: url(https://www.flipfocus.co.kr/image/index/img_bg_01.png), linear-gradient(135deg,  #6d39cf 0%, #6d39cf 48%, #a047d4 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d39cf', endColorstr='#a047d4', gradientType=1); ;background-size: cover; background-position: center; position: relative; width:100%; padding-top:25vh; 	padding: 9vh 15vw 0 15vw; box-sizing: cover;}
.content01 h1{font-weight: bold; letter-spacing: 12px; color:#fff; font-size: 2em;}
.content01 h2{letter-spacing: 5px; color:#fff; font-size:0.7em;}
.topLeft{position: absolute; left:15px; top:15px;}
.topLeft img{width:80px;}
.floatImg{margin-top:20%; width:100%;}
.floatImg img:first-child{position: absolute;  left:50%;  z-index: 100;  width:100%; transform: translate(-30%);  }
.floatImg img:last-child{position:absolute; left:50%;  z-index:200; width:60%; transform: translate(-105%); }
.floatImg02{width:100%;}

.content02{padding:5vh 0; box-sizing: border-box; overflow: hidden;}
.content02 h1{color:#3b2660; font-weight: 600; font-size: 5vw; line-height: 1.5em; letter-spacing: -0.5px;}
.content02 h3{color:#4c4c4c; font-size:3.5vw; }
.content02 img{width:320px;}

.content03{background: url(https://www.flipfocus.co.kr/image/index/img_bg_02.png), linear-gradient(135deg,  #644a90 0%, #423b90 48%, #2b2464 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d39cf', endColorstr='#a047d4', gradientType=1); ;background-size: cover; background-position: center; position: relative; width:100%; padding: 3vh 5vw 25vw 5vw; background-attachment:fixed; box-sizing: border-box; overflow: hidden}
.content03 h1{font-weight: 600; font-size: 5vw; line-height: 1.5em; letter-spacing: -0.5px; color:#fff;}
.content03 h3{font-size:3vw; padding:5vw 0;}
.imgApp img{position:absolute; bottom:0; left:50%; transform:translate(-50%); width:90%; max-width: 1800px;}
.content04{padding:5vh 0;}
.content04 h1{color:#3b2660; font-weight: 600; font-size: 5vw; line-height: 1.5em; letter-spacing: -0.5px;}
.content04 h3{color:#4c4c4c; font-size:3.5vw; }

.content04 img{width:33%; max-width:500px;}
.btn_purchase{display: none;}
.btn_purchase button{background: #6637ba; color:#fff; padding:15px 60px; border: none; border-radius: 30px/50%; font-size: 20px; outline: 0; cursor: pointer;}

.rightSide{position: fixed; right:10px; bottom:5vh; width:155px; text-align: center; cursor: pointer; z-index: 1500; display: none;}
.rightSide .rightside_move{animation-name:rightmove; animation-duration: 5s; animation-iteration-count: infinite; transform:translate3d(0,0,0);}
.bottomFix{position: fixed; bottom:0; text-align: center; background:linear-gradient(135deg,  #6d39cf 0%, #6d39cf 48%, #a047d4 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6d39cf', endColorstr='#a047d4', gradientType=1);; height:40px; width:100%; box-sizing: border-box; cursor: pointer; opacity: 0.7;}
.bottomFix span{font-size:20px; color:#fff; line-height: 2em;}

/**
 * keyframes
 */
@keyframes chevronAnimation {
	0% {transform: translate(0,0) scale(1.0,1.0);}
	50% {transform: translate(0,5px) scale(0.8,0.8);}
	100% {transform: translate(0,0) scale(1.0,1.0);}
}
@keyframes rightmove{
    0%{transform:translate3d(0,15px,0);}
    25%{transform:translate3d(0,-15px,0);}
    50%{transform:translate3d(0,15px,0);}
    75%{transform:translate3d(0,-15px,0);}
    100%{transform:translate3d(0,15px,0);}
}

/**
 * Responsiveness
 */
@media screen and (min-width: 764px){
    .content01 h1{font-size: 3em;}
    .content01 h2{font-size:0.7em; letter-spacing: 12px;}
    .content02 h1{font-size: 30px;}
    .content02 h3{font-size:15px;}
    .content02 img{width:600px;}
    .content03 h3, .content04 h3 {font-size:2vw;}
    .content04 h1{font-size:40px;}
}

@media screen and (min-width: 1024px){
	body{font-size: 18px; line-height: 27px;}
    .content01 h1{font-size: 4em;}
    .content01 h2{font-size:1em; letter-spacing: 12px;}
    .content01{position: relative;}
    .floatImg{margin-top:5vh;}
    .floatImg img:first-child{position: absolute;  left:50%; height:80vh;  z-index: 100;   transform: translate(-32%); width:auto;}
    .floatImg img:last-child{position:absolute; left:50%; height:70vh;  z-index:200;  transform: translate(-107%); width:auto; margin-top:10vh;}
    .rightSide{display: block;}
    .floatImg{display: block;}
    .bottomFix{display: none;}
    .content02{width:1020px; margin:0 auto; text-align: right; overflow: unset;}
    .content02In{position: relative; width:100%;}
    .content02 .txtBox{text-align: left; border:5px solid #e5e5e5; width:570px; padding:40px 0 40px 30px; position: absolute; top:15%; z-index: 500; box-sizing: border-box}
    .content02In:nth-child(1) .txtBox{left:0;}
    .content02 img{width:500px; box-shadow:1px 1px 5px #c6c6c6;}
    .content02In:nth-child(2) .txtBox{padding:40px 0 40px 80px; position: absolute; right:0; }
    .content02In:nth-child(2){text-align: left;}
    .content03{padding:15vh 5vw 500px; width:100%;}
    .content03 h1{font-size: 2.5em; }
    .content03 h3, .content04 h3 {font-size:1em; line-height: 2em; padding:2vw 0;}
    .content04 h3{padding:1vh 0;}
    .btn_purchase{display: block; padding:5vh 0;}
}