@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/*Reset*/
html, body{width:100%;}
html{-webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
body{width:100%; background:#fff; min-width:320px; -webkit-text-size-adjust:none;word-wrap:break-word;word-break:break-all;}
body{border:none;font-size:12px;font-family:'Lato', sans-serif; overflow-x:hidden;}
html{min-width: 1000px; min-height: 1000px}

html, body, h1, h2, h3, div, p, ul, li, section, nav, form, button{margin:0;padding:0;}
ul,li{list-style:none; font-family: sans-serif;}
a{color:#000;text-decoration:none;}
a:link,a:hover,a:active{text-decoration:none;}
img{border:0;}
img, button {vertical-align: middle;}
main,header,section,nav,footer{display:block;}
footer {text-align:center;}
.hide { position: absolute; left: -5000px;}

body { min-width: 1280px; max-width: 100%; overflow-x: hidden; background: #0b1025;}
header { position: fixed; width:100vw; height: 72px; text-align: center; background: #0b1025;z-index:3000}
header h1 { position: fixed; left:80px; top: 0; padding: 14px 0 0;}
header h1 a{ display: block;width: 130px; height: 40px; color: transparent; background: url(../image/upSTASYSlogo.png) no-repeat -50px -15px;}
header .lnb {position: absolute; top:0; left:260px; width: 570px;}
header .lnb ul {width:700px;}
header .lnb li {display: inline-block;}
header .lnb li a {display: block; height: 72px; width: 140px; font-size: 18px; color: #fff; line-height: 70px;}
header .lnb li a:hover { color: #fff; font-weight: bold;}
header .lnb li a span { position: relative;}
header .spot { position: absolute; right: 90px; top: 8px;}
header .spot #login { display: block; height: 72px; margin: 7px 0px; line-height: 42px; color:black ;padding-right:0; background: #fff; border-radius: 25px; width:104px; height: 42px; font-size: 18px; }
header .spot .login_layer {position: absolute; display: none; top: 64px; right: 0; background: #fff; width: 306px; height: 292px; border-radius: 10px; box-shadow: 20px 19px 25.6px 6.4px rgba(0, 0, 0, 0.28); font-family: 'Lato' ,'Noto Sans KR';}
header .spot .login_layer .login_title {font-family: 'Noto Sans KR'; font-size: 20px; color: #000; line-height: 28px; position: absolute; top: 24px; left: 26px;}
header .spot .login_layer .layer_close {position: absolute; top: 27px; right: 27px; width: 12px; height: 12px; cursor: pointer;}
header .spot .login_layer input {position: absolute; left: 50%; margin-left: -122px; width: 244px; height: 26px; line-height: 25px; font-family: 'Noto Sans KR'; font-size: 12.5px; border: 0; border-bottom: 1px solid #747474; outline: none; box-sizing: border-box;}
header .spot .login_layer input::placeholder {color: #ababab;}
header .spot .login_layer input[type=text] {top: 77px;}
header .spot .login_layer input[type=password] {top: 117px;}
header .spot .login_layer #login_btn {position: absolute; left: 50%; top: 171px; margin-left: -122px; width: 244px; height: 40px; line-height: 40px; font-family: 'Noto Sans KR'; font-size: 16.67px; font-weight: 600; color: #fff; background: #3a46bb; cursor: pointer; text-align: center; border-radius: 5px;}
header .spot .login_layer .join_bottom {position: absolute; top: 231px; text-align: center; line-height: 12px; width: 100%;}
header .spot .login_layer .join_bottom a {font-family: 'Noto Sans KR'; font-size: 12.5px; color: #ababab; letter-spacing: 0;}

h1, h2 {letter-spacing: calc(-300vw/1280); word-spacing:calc(1000vw/1280)}
h3, a {letter-spacing: calc(-200vw/1280); word-spacing:calc(400vw/1280);}

h1 {font-size:calc(8500vw/1920); font-family: sans-serif;}
h2 {font-size:calc(4000vw/1920); font-family: sans-serif; font-weight: 500;}
h3 {font-size: calc(3800vw/1920); font-family:sans-serif;}
p {font-size: calc(1600vw/1920); font-family:sans-serif; font-weight: lighter}
a {font-size: calc(2000vw/1920)}

.FunPC {position:fixed; left:0; top:72px; color: #fff; font-weight: normal; background: url(../image/FunPC.png) no-repeat 0 calc(-7200vw/1920); background-size:contain; width:100vw; height: calc(90000vw/1920); z-index: -10}
.FunPC h1 {padding-left: calc(40300vw/1920); padding-top: calc(21000vw/1920); font-weight:normal;}
.FunPC h3 {padding-left: calc(41000vw/1920); padding-top:0.3em; font-weight: lighter;}
.FunPC p {padding-left: calc(41000vw/1920); padding-top:1em}
.FunPC a {display:block; margin-left: calc(41000vw/1920); margin-top: calc(3900vw/1920); padding-left: calc(7000vw/1920);line-height: calc(7000vw/1920); width: calc(21000vw/1920); height: calc(9000vw/1920); background: url(../image/WhiteDown.png) no-repeat 0 0;
  background-size: contain; color: black; font-size: calc(2200vw/1920); color:#09173e;}

.Middle img {position:absolute;left: calc(85700vw/1920); top: calc(72000vw/1920 + 72px); width : calc(20600vw/1920); height: calc(20600vw/1920); z-index: 10}

.Explain {position:absolute; left:0; top: calc(82100vw/1920 + 72px); background: white; width: 100vw; height: calc(290000vw/1920);}

.Explain1 {position:absolute; left:0; top:0 ; background:url(../image/Explain1.png) no-repeat calc(-300vw/1920) 0; background-size: contain; width: 100vw; height: calc(80000vw/1920);color:#052535; overflow-x: hidden;}
.Explain1 h2 {margin-left: calc(118000vw/1920); margin-top: calc(29500vw/1920);}
.Explain1 p {margin-left: calc(118500vw/1920); margin-top: 1em;}

.Explain2 {position:absolute; left:0; top: calc(79800vw/1920); background:url(../image/Explain2.png) no-repeat 0 0; background-size: contain; width: 100vw; height: calc(80000vw/1920);color:#052535;}
.Explain2 h2 {margin-left: calc(30000vw/1920); margin-top: calc(27500vw/1920);}
.Explain2 p {margin-left: calc(30500vw/1920); margin-top: 1em}

.Explain3 {position:absolute; left:0; top: calc(239400vw/1920); background:url(../image/Explain3.png) no-repeat 0 0; background-size: contain; width: 100vw; height: calc(80000vw/1920);color:#052535;}
.Explain3 h2 {margin-left: calc(110000vw/1920) ; margin-top:calc(33000vw/1920);}
.Explain3 p {margin-left: calc(110500vw/1920); margin-top: 1em}

.Explain4 {position:absolute; left:0; top: calc(159600vw/1920); background:url(../image/Explain4.png) no-repeat 0 0; background-size: contain; width: 100vw; height: calc(80000vw/1920);color:#052535;}
.Explain4 h2 {margin-left: calc(30000vw/1920); margin-top: calc(27500vw/1920);}
.Explain4 p {margin-left: calc(30500vw/1920); margin-top: 1em}

.Ready {position:absolute; left:0; top: calc(319300vw/1920); background:url(../image/Ready.png) no-repeat calc(100vw/1920) 0; background-size: contain; background-color: #fff;
  width: 100vw; height: calc(42500vw/1920); color:#052535; }
.Ready h2 {text-align:center ; margin-top: calc(13000vw/1920);}
.Ready a {display:block; margin-left: auto;margin-right: auto; margin-top: calc(5000vw/1920); padding-left: calc(7000vw/1920);line-height: calc(7000vw/1920); width: calc(21000vw/1920); height: calc(9000vw/1920); background: url(../image/BlueDown.png) no-repeat 0 0;
  background-size: contain; color: black; font-size: calc(3000vw/1920); font-size: calc(2200vw/1920); color:#fff}

footer a {letter-spacing: 0px; word-spacing:calc(200vw/1280);}
footer {position:absolute; top: calc(443600vw/1920 + 72px); left: 0; color:#fff;background: white; width: 100%;
  height: calc(36000vw/1920); z-index: 1000}
footer .top {position:absolute; top: 0; left:0; width:100vw; height:calc(10800vw/1920); text-align: left; background:#071025}
footer .top h2 {position:absolute; left: calc(29500vw/1920); color: transparent; top: calc(1200vw/1920); background: url(../image/upSTASYSlogo.png) no-repeat 0 0; background-size: contain; width: calc(28000vw/1920); height: calc(20000vw/1920)}
footer .top .footnewmenu {padding-left: calc(53000vw/1920)}
footer .top .footnewmenu li {display: inline-block;}
footer .top .footnewmenu a {display: block; color: #fff; padding-left: calc(4500vw/1920); padding-top: 3.2em;font-size: calc(1500vw/1920); font-weight:lighter;}
footer .top .footmenu {position:absolute; left: calc(119000vw/1920); top: 3.2em; padding-top: 0; font-size: calc(1500vw/1920);}
footer .top .footmenu li {display: inline-block; }
footer .top .footmenu a {display: block; color: #fff; padding-left: calc(4500vw/1920); font-size: calc(1500vw/1920); font-weight:normal;}
footer .top a:hover { color: #fff; font-weight: bold;}

footer hr {display: block; height:10px; border: 0; border-top: 1px solid white; margin: 1em 0; padding: 0;}

footer .btm {position:absolute; left: 0; top: calc(10950vw/1920); width:100vw; height:calc(25000vw/1920); background: #071025; color: #fff;}
footer .btm .info {padding-left: calc(35500vw/1920); text-align: left; padding-top: calc(4000vw/1920);}
footer .btm h3 { font-size: calc(2000vw/1920)}
footer .btm p {padding-top: calc(1500vw/1920); font-size: calc(1500vw/1920); font-weight: 200; font-family: sans-serif;}
footer .btm address {padding-top: calc(5000vw/1920); font-size: calc(1700vw/1920)}
footer .btm .extra {position:absolute; right:calc(32500vw/1920); top:3em; font-size: calc(2000vw/1920); text-align: left;}
footer .btm .extra img {width: calc(3000vw/1920); height: calc(3000vw/1920);}
footer .btm .extra ul li:nth-child(2) {padding-left: 1.75em; font-size: calc(2000vw/1920);}
footer .btm .extra ul li:nth-child(3) {padding-top: calc(3000vw/1920)}