@charset "UTF-8";

@media only screen and (max-width:768px) {
#layer.layerOpen {display:none}

html, body {min-width:320px;min-height:960px}
a, button {-webkit-tap-highlight-color:transparent;}
#wrap {width:100%;margin:0 auto}

#header {height:93px;background:rgba(0,0,0,0.4)}
#header h1 {position:relative;left:0;top:0;height:100%;text-align:center}
#header h1 a {width:50%;height:100%;background-size:auto 55.7%;}

#gnb {display:none}
#mobileGnb {display:none;position:absolute;left:0;top:100%;width:100%}
#mobileGnb li {height:93px;text-align:center;font-size:3.3em;line-height:3em}
#mobileGnb li:first-child {background:rgba(15,109,173,0.7)}
#mobileGnb li:last-child {background:rgba(15,109,173,0.6)}
#mobileGnb li a {display:block;height:100%;color:#fff;font-family:NBG}

.btn_noticeClose {position:absolute;right:0;top:20px;width:79px;height:53px;background:url(../images/btn/btn_noticeClose.png) no-repeat center;background-size:auto 41.25%;text-indent:-9999em;cursor:pointer}
.noticeOpen .btn_noticeClose {display:block}

.menuOpen #header, .noticeOpen #header {background:#0f6dad}
.menuOpen .bg {position:absolute;left:0;top:0;display:block;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:115}
.menuOpen #mobileGnb {display:block;}

#pageNav {right:3.65%}

.btn_gnb {display:block;position:absolute;left:10px;top:25px;width:63px;height:43px;background:url(../images/btn/btn_gnb.png) no-repeat center;background-size:50% 50%;text-indent:-9999em;cursor:pointer;z-index:130;-webkit-outline:none;outline:none}

.btn_appDown {overflow:hidden}
.btn_appDown li {width:44.5%}
.btn_appDown li:first-child {float:left;margin-left:3.65%}
.btn_appDown li:last-child {float:right;margin-right:3.65%}
.btn_appDown a {width:100%;height:95px;background-size:contain !important}
.btn_appDown .btn_googlePlay {margin-right:0}
.btn_appDown .btn_appStore {background-position:right 0 !important}

/*#notice {display:block;position:absolute;left:100%;top:0;width:100%;height:100%;padding-top:93px;}*/
#notice {display:block;position:absolute;left:0;top:0;width:100%;height:100%;padding-top:93px;
-ms-transform:translate3d(100%,0,0);-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);-ms-transition:all 0.5s 0.1s;-webkit-transition:all 0.5s 0.1s;transition:all 0.5s 0.1s;}
#notice.open {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
#notice .inner {height:100%;padding:0 3.3%;background:rgba(255,255,255,0.9)}
#notice h1 {height:2.3em;margin-bottom:0.8em;border-bottom:1px solid #bcbcbc;font-size:3.3em;color:#0f77bc;font-family:NBG;font-weight:normal;line-height:3em}

.popContent > dl {margin-bottom:15px}
.popContent > dl:nth-child(3) {margin-bottom:0}
.popContent > dl > dt {margin-bottom:0.5em;font-size:3.3em}
.popContent > dl > dd {font-size:2.3em;font-family:NBG;line-height:1.2}
.popContent dt span, .popContent dd strong {color:#0f77bc}

.popContent .note span {font-size:0.94em}
.popContent dd p {margin-bottom:0.5em}

.step {overflow:hidden;padding-top:0px}
.step li {width:23%;margin-left:15.5%}
.step li:first-child {margin-left:0}
.step li img {width:100%}

.contact li dl {height:auto;padding:0 0 0 20%;background-size:contain !important}
.contact li dt {margin-bottom:0.1em;font-size:0.8em}
.contact li dd {font-size:1.1em;letter-spacing:-1px}

.content {
-ms-transition:transform 0.8s 0s;-webkit-transition:transform 0.8s 0s;transition:transform 0.8s 0s;
-ms-transition-timing-function:"ease";-webkit-transition-timing-function:"ease";transition-timing-function:"ease"
}

#section01 {background-image:url(../images/bg/bg_introM.png)}
#section01 h1 {top:16.8%;height:175px;background-size:92.7% auto}
#section01 .btn_appDown {bottom:7%}


#section02 dl {height:40%;background:url(../images/txt/txt_section02M.png) no-repeat center top;background-size:71% auto}
#section02 .phone {width:405px;padding:0 25px 0 28px;margin-left:-230px;background-size:100% auto}
#section02 .phone .inner {margin-top:83px}


#section03 dl {height:40%;background:url(../images/txt/txt_section03M.png) no-repeat center top;background-size:86% auto}
#section03 .phone {display:none}
#section03 .mobilePhone {display:block;position:absolute;left:0;top:45%;width:100%;height:60%;padding:0 15%;box-sizing:border-box}
#section03 .mobilePhone ol {position:relative;overflow:hidden;width:100%;height:100%}
#section03 .mobilePhone li {position:absolute;left:100%;top:0;width:100%;height:100%;text-align:center}
#section03 .mobilePhone li:first-child {left:0}
#section03 .mobilePhone img {height:86%}

#section03 .btnWrap {display:block}
#section03 .btnWrap button {display:block;position:absolute;top:35%;width:60px;height:114px;cursor:pointer;-webkit-outline:none;outline:none}
#section03 .btnPrev {left:4.5%;background:url(../images/btn/btn_prev.png) no-repeat center;background-size:50% 50%}
#section03 .btnNext {right:4.5%;background:url(../images/btn/btn_next.png) no-repeat center;background-size:50% 50%}


#section04 {background:#efefef url(../images/bg/bg_section04M.png) no-repeat center bottom;background-size:100% auto}
#section04 dl {height:40%;background:url(../images/txt/txt_section04M.png) no-repeat center top;background-size:73% auto}


#section05 .inner {top:15.8%;height:60%}
#section05 dl {height:100%;background:url(../images/txt/txt_section05M.png) no-repeat center top;background-size:auto 100%}
#section05 .btn_appDown {top:115%}

.popContent .btnZone {padding-top:15px;border-top:1px solid #bcbcbc}
.popContent .btnZone p {height:20px;background-size:auto 100%}

.popContent .btn_appDown li {width:49.6%}
.popContent .btn_appDown li:first-child {margin-left:0.4%}
.popContent .btn_appDown li:last-child {margin-right:0.4%}
}


@media only screen and (max-width : 639px) and (min-width: 600px) {
html, body {min-height:900px}

#header, #mobileGnb li {height:88px}
.btn_gnb {left:9px;top:24px;width:59px;height:40px}
.btn_noticeClose {top:19px;width:74px;height:50px}

.btn_appDown a {height:73px}

#notice {padding-top:88px}

#section02 .phone {width:380px;padding:0 24px 0 26px;margin-left:-216px}
#section02 .phone .inner {margin-top:78px}

#section03 .btnWrap button {width:56px;height:107px}
}

@media only screen and (max-width : 599px) and (min-width: 560px) {
html, body {min-height:840px}

#header, #mobileGnb li {height:82px}
.btn_gnb {left:9px;top:22px;width:55px;height:37px}
.btn_noticeClose {top:18px;width:69px;height:47px}

.btn_appDown a {height:68px}

#notice {padding-top:82px}

#section02 .phone {width:355px;padding:0 22px 0 25px;margin-left:-201px}
#section02 .phone .inner {margin-top:72px}

#section03 .btnWrap button {width:53px;height:100px}
}

@media only screen and (max-width : 559px) and (min-width: 520px) {
html, body {min-height:780px}

#header, #mobileGnb li {height:76px}
.btn_gnb {left:8px;top:21px;width:51px;height:35px}
.btn_noticeClose {top:16px;width:64px;height:43px}

.btn_appDown a {height:63px}

#notice {padding-top:76px}

#section02 .phone {width:329px;padding:0 21px 0 23px;margin-left:-187px}
#section02 .phone .inner {margin-top:67px}

#section03 .btnWrap button {width:49px;height:93px}
}

@media only screen and (max-width : 519px) and (min-width: 480px) {
html, body {min-height:720px}

#header, #mobileGnb li {height:70px}
.btn_gnb {left:8px;top:19px;width:47px;height:32px}
.btn_noticeClose {top:15px;width:59px;height:40px}

.btn_appDown a {height:58px}

#notice {padding-top:70px}

#section02 .phone {width:304px;padding:0 19px 0 21px;margin-left:-173px}
#section02 .phone .inner {margin-top:62px}

#section03 .btnWrap button {width:45px;height:86px}
}

@media only screen and (max-width : 479px) and (min-width: 440px) {
html, body {min-height:660px}

#header, #mobileGnb li {height:64px}
.btn_gnb {left:7px;top:17px;width:43px;height:29px}
.btn_noticeClose {top:14px;width:54px;height:37px}

.btn_appDown a {height:53px}

#notice {padding-top:64px}

#section02 .phone {width:279px;padding:0 17px 0 19px;margin-left:-158px}
#section02 .phone .inner {margin-top:57px}

#section03 .btnWrap button {width:41px;height:78px}
}

@media only screen and (max-width : 439px) and (min-width: 400px) {
html, body {min-height:600px}

#header, #mobileGnb li {height:58px}
.btn_gnb {left:6px;top:16px;width:39px;height:27px}
.btn_noticeClose {top:13px;width:49px;height:33px}

.btn_appDown a {height:50px}

#notice {padding-top:58px}

#section02 .phone {width:253px;padding:0 16px 0 18px;margin-left:-144px}
#section02 .phone .inner {margin-top:52px}

#section03 .btnWrap button {width:38px;height:71px}
}

@media only screen and (max-width : 399px) and (min-width: 360px) {
html, body {min-height:540px}

#header, #mobileGnb li {height:53px}
.btn_gnb {left:6px;top:14px;width:35px;height:24px}
.btn_noticeClose {top:11px;width:44px;height:30px}

.btn_appDown a {height:44px}

#notice {padding-top:53px}

#section02 .phone {width:228px;padding:0 14px 0 16px;margin-left:-129px}
#section02 .phone .inner {margin-top:47px}

#section03 .btnWrap button {width:34px;height:64px}
}

@media only screen and (max-width : 375px) {
html, body {min-height:563px}

.btn_appDown a {height:46px}

.step li {width:21%;margin-left:18.5%}
}

@media only screen and (max-width : 359px) {
html, body {min-height:480px}

#header, #mobileGnb li {height:47px}
.btn_gnb {left:5px;top:13px;width:31px;height:21px}
.btn_noticeClose {top:10px;width:39px;height:27px}

.btn_appDown a {height:39px}

#notice {padding-top:47px}

#section02 .phone {width:203px;padding:0 13px 0 14px;margin-left:-115px}
#section02 .phone .inner {margin-top:41px}

#section03 .btnWrap button {width:35px;height:67px}
}