:root {
    --fs_title:28px;
    --fs_subtitle:20px;
    --fs_basic:14px;
    --fc_descript:12px;
    --bc_main:#076AEB;
}

body {
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    font-family:'NanumSquare';
    font-size:var(--fs_basic);
    font-weight:200;
}

ul {
    margin:0;
    padding:0;
    list-style:none;
}

p {
    margin:0;
    padding:0;
}

a {
    text-decoration:none;
    color:#000;
}

a:hover, a:active, a:focus {
    text-decoration:none;
}

#wrap {display:block; width:100%; height: auto; height:100%;}
.inner {width:100%; max-width:1280px; padding: 0px 50px; margin:auto; text-align: center; box-sizing: border-box;}
.strong {font-weight: 700;}

header {display: block; position: fixed; width: 100%; padding: 25px 50px; border-bottom: 1px solid rgba(255,255,255,0.2); box-sizing: border-box; overflow: hidden; z-index: 100;}
header .logo {display: inline-block; float: left; height: 52px;}
header .logo a {display: inline-block; width: 113px; height: 40px; padding: 0; background: url(../img/logo_wh.svg) no-repeat 0 15px;}
header .logo a:hover {opacity: 0.9;}
header .menu {display: inline-block; float: right; height: 52px;}
header .menu a {display: inline-block; width: 52px; height: 52px; margin-right: 10px; border-radius: 100px; background-repeat: no-repeat; background-size: cover;}
header .menu a.and {background-image: url(../img/head_play.svg);}
header .menu a.ios {background-image: url(../img/head_app.svg);}
header .menu a.naver {background-image: url(../img/head_naver_wh.svg);}
header .menu a.youtube {background-image: url(../img/head_tube_wh.svg);}
header .menu a.insta {background-image: url(../img/head_insta_wh.svg);}
header .menu a:last-child {margin-right: 0;}
header .menu a:hover {box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;}

header.on {background: rgba(255,255,255,1.0); border-bottom: 1px solid rgba(0,0,0,0.1);}
header.on .logo a {background: url(../img/logo.svg) no-repeat 0 15px;}
header.on .menu a.naver {background-image: url(../img/head_naver.svg);}
header.on .menu a.youtube {background-image: url(../img/head_tube.svg);}
header.on .menu a.insta {background-image: url(../img/head_insta.svg);}

#main {display: block; width: 100%; height: 750px; color: #fff; background: var(--bc_main);}
#main .inner {position: relative; height: 100%;}
#main .title {display: inline-block; position: absolute; left: 50px; bottom: 140px; right: auto; top: auto; width: auto; z-index: 10;}
#main .title li.pc {display: inline-block; width: 100%; margin-bottom: 20px; font-size: var(--fs_title); font-weight: 200; text-align: left;}
#main .title li.pc img {padding-left: 15px; margin-top: -25px;}
#main .title li.mb {display: none; width: 100%; margin-bottom: 20px; font-size: var(--fs_basic); text-align: center;}
#main .title li.mb p:first-child span {display: inline-block; width: 100%; max-width: 240px; padding: 10px; margin-bottom: 20px; color: var(--bc_main); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 100px; background: #fff; box-sizing: border-box;}

#main .title li.txt {margin-top: 0; text-align: left;}
#main .title li.txt p {padding-left: 20px; margin-bottom: 10px; font-size: var(--fs_subtitle); font-weight: 100; background: url(../img/dot.svg)no-repeat 0 6px;}
#main .title li:last-child {margin-top: 50px;}
#main .title li.btn-wrap {display: inline-block; width: auto;}
#main .title li.btn-wrap a {display: inline-block; width: 187px; padding: 18px 35px 18px 70px; font-size: var(--fs_basic); color: var(--bc_main); text-align: center; background-color: #fff; border: 1px solid #eee; border-radius: 100px; background-repeat: no-repeat; box-sizing: border-box;}
#main .title li.btn-wrap a.and {background-image: url(../img/play_store_bl.svg); background-position: 30px 12px; margin-right: 10px;}
#main .title li.btn-wrap a.ios {background-image: url(../img/app_store_bl.svg); background-position: 30px 12px;}
#main .title li.btn-wrap a:hover {box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.15) inset;}

#main .visual li {display: inline-block; position: absolute;}
#main .visual li.ico_main {bottom: 70px; right: 180px; left: auto; z-index: 10;}
#main .visual li.ico_sub {bottom: 295px; right: 50px; left: auto; z-index: 0;}
#main .visual li.ico_main img {width: 440px;}
#main .visual li.ico_sub img {width: 210px;}

#main .phone {display: inline-block; position: absolute; right: 50px; bottom: 55px; width: 100%; height: 100%; overflow: hidden;}
#main .phone li {display: inline-block; position: absolute; right: 0; bottom: 0; left: auto; top: auto; width: auto; height: auto;}
#main .phone li:nth-child(1) {right: 422px; bottom: 62px; transition: right 0.5s ease; opacity: 0.5;}
#main .phone li:nth-child(2) {right: 235px; bottom: 20px; transition: right 0.5s ease;}

#app {display: block; width: 100%; height: auto; padding: 100px 0 80px calc((100% - 1280px)/2); box-sizing: border-box;}
#app .tit {margin-bottom: 45px; font-size: var(--fs_subtitle); font-weight: 700;}

#app .swiper-slide {display: inline-block; opacity: 0.7;}
#app .swiper-slide img {width: 100%;}
#app .swiper-slide.swiper-slide-active {opacity: 1.0;}

#bn_btn {display: block; width: 100%; height: auto; padding: 30px 25px; font-size: var(--fs_subtitle); font-weight: 100; color: #fff; text-align: center; background-color: var(--bc_main); box-sizing: border-box;}

footer {display: block; width: 100%; height: auto; padding: 45px 50px; font-size: var(--fc_descript); font-weight: 100; color: #fff; background-color: rgba(0, 0, 0, 0.8); box-sizing: border-box;}
footer .top {margin-bottom: 35px; overflow: hidden;}
footer .top li.logo {display: inline-block; float: left; width: 113px; height: 21px; background: url(../img/logo_foot.svg)no-repeat;}
footer .top li.link {display: inline-block; float: right;}
footer .top li.link a {margin-left: 25px; color: #fff;}
footer .info li {margin-bottom: 5px;}
footer .info li:last-child {margin-bottom: 0px; margin-top: 20px;}

.fl-pc {display: inline-block; position: fixed; right: 35px; bottom: 35px; width: 100px; z-index: 100;}
.fl-pc li {display: block; margin-bottom: 20px; cursor: pointer;}
.fl-pc li:last-child {margin-bottom: 0;}
.fl-pc li img {width: 100%; max-width: 100px;}

.fl-mb {display: none; position: fixed; bottom: 0; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 40px; border-top: 1px solid rgba(255,255,255,0.2); background-color: #333; z-index: 100;}
.fl-mb li {width: 50%; height: 100%; text-align: center; border-right: 1px solid rgba(255,255,255,0.2); box-sizing: border-box;}
.fl-mb li:last-child {border-right: none;}
.fl-mb li a {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff; font-size: 12px;}
.fl-mb li a .ico {display: inline-block; width: 18px; height: 18px; margin-right: 4px;}

.pop {display: none; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); box-sizing: border-box; z-index: 100;}
.pop.on {display: flex;}
.pop .mk {display: inline-block; width: 100%; max-width: 720px; height: auto; background: #fff; border-radius: 15px; overflow: hidden;}
.pop .mk .top {padding: 30px; color: #fff; background: var(--bc_main); box-sizing: border-box;}
.pop .mk .top .pop-close {position: relative; margin-bottom: 15px;}
.pop .mk .top .pop-close .logo {display: inline-block; width: 113px; height: 40px; padding: 0; background: url(../img/logo_wh.svg) no-repeat 0 15px;}
.pop .mk .top .pop-close .btn-close {display: inline-block; position: absolute; right: 0; width: 40px; height: 40px; background-image: url(../img/pop-close.svg); background-repeat: no-repeat; cursor: pointer;}
.pop .mk .top .mk-noti li {display: block; margin-bottom: 5px;}
.pop .mk .top .mk-noti li:last-child {margin-bottom: 0;}
.pop .mk .con {display: block; padding: 120px 30px; text-align: center; box-sizing: border-box;}
.pop .mk .con .mail {margin-bottom: 60px; font-size: 18px; font-weight: 100;}
.pop .mk .con .mail:last-child {margin-bottom: 0;}
.pop .mk .con .mail p:last-child {margin-top: 12px; font-size: 28px; font-weight: 800; text-decoration: underline;}

/*scroll*/
::-webkit-scrollbar {width:5px;} 
::-webkit-scrollbar-thumb {background-color:#cccccc; border-radius:10px;}
::-webkit-scrollbar-track {background-color:#fafafa; border-radius:5px; box-shadow:inset 0px 0px 1px rgba(0,0,0,0.1);}

@media screen and (max-width:1280px) {
    #app {padding: 80px 0 60px 80px;}
}

@media screen and (max-width:1024px) {
    #main .visual li.ico_main {bottom: 120px; right: 110px;}
    #main .visual li.ico_sub {bottom: 405px; right: 100px;}
    #main .visual li.ico_main img {width: 320px;}
    #main .visual li.ico_sub img {width: 142px;}
}

@media screen and (max-width:1000px) {
    #main .phone li:nth-child(1) {right: 10px;}
    #main .phone li:nth-child(2) {right: 10px;}
}

@media screen and (max-width:800px) {
    .inner {padding: 0 20px;}

    header {padding: 20px;}
    header .logo {height: 40px;}
    header .logo a {width: 50px; height: 40px; padding: 0; background: url(../img/sb_wh.svg) no-repeat 0 0px;}
    header .menu {height: 40px;}
    header .menu a {width: 40px; height: 40px; margin-right: 5px;}
    header.on {background: rgba(255,255,255,1.0);}
    header.on .logo a {background: url(../img/sb.svg) no-repeat 0 0px;}
    
    #main {height: 1000px;}
    #main .title {position: relative; left: 0; bottom: 0; top: 160px; right: 0; width: 100%; max-width: 300px;}
    #main .title li.mb {display: inline-block;}
    #main .title li.pc {display: none;}

    #main .title li.txt {margin-top: 455px;}
    #main .title li.txt p {font-size: var(--fs_basic); background: url(../img/dot.svg)no-repeat 0 2px;}

    #main .title li:last-child {margin-top: 15px;}

    #main .title li.btn-wrap a {width: 100%;}
    #main .title li.btn-wrap a.and {margin-right: 0px; margin-bottom: 15px;}

    #main .visual li.ico_main {bottom: 420px; right: 0; left: 0;}
    #main .visual li.ico_sub {bottom: 330px; right: 0; left: 0;}
    #main .visual li.ico_main img {width: 250px;}
    #main .visual li.ico_sub img {width: 142px;}

    #main .phone {right: 0; bottom: 0;}
    #main .phone li {width: 300px; height: 500px; left: 0; top: 0; margin: 275px auto 0 auto;}
    #main .phone li:nth-child(1) {display: none;}
    #main .phone li:nth-child(2) {display: none;}

    #app {padding: 50px 0 50px 50px;}

    footer {padding: 40px 20px 60px 20px;}

    .fl-pc {display: none;}
    .fl-mb {display: flex;}

    .pop .mk {height: 100%; border-radius: 0; overflow: auto;}
    .pop .mk .top .pop-close {margin-bottom: 25px;}
    .pop .mk .top .mk-noti li {margin-bottom: 15px;}
    .pop .mk .con .mail p:last-child {font-size: 20px;}
}

@media screen and (max-width:640px) {
}