@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}

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;}



/*Main*/

/*Header*/
body { min-width: 1280px; max-width: 100%; overflow-x: scroll; background: #0b1025;}
header::-webkit-scrollbar{display:none;}
header { position: fixed; top: 0; width:100vw; height: 72px; text-align: center; z-index:300; background: #0b1025; -ms-overflow-style:none;}
header h1 { padding: 14px 80px 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:50px; top: 8px;}
header .spot #login { display: block; height: 72px; margin: 7px 0px; line-height: 45px; 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;}

@media only screen and (max-width:1100px) {
  header .spot {position: absolute; left: 1100px;}
  header h1 { padding: 14px 80px 0; width: 1120px;}
  header h1 a {margin-left: -10px}
}

/*Middle*/
h1, h2 {letter-spacing: -4px; word-spacing:6px}
h3, a { letter-spacing: -2px; word-spacing:4px;}

h1 {font-size:calc(85*1280px/1920); font-family: sans-serif;}
h2 {font-size:calc(48*1280px/1920); font-family: sans-serif, 'Lato'; font-weight: 500}
h3 {font-size: calc(38*1280px/1920)}
p {font-size: calc(16*1280px/1920); font-family: sans-serif; font-weight: lighter}
a {font-size: calc(20*1280px/1920)}

.FixedPosition {position:fixed; left:0; top:calc(50*1280px/1920); background: black; background-size:contain; width:100vw; height: calc(900*1280px/1920);
  z-index: -10; overflow:scroll; -ms-overflow-style:none;}
.FixedPosition::-webkit-scrollbar{display:none;}
.FunPC {color: #fff; font-weight: normal; background: url(../image/FunPC.png) no-repeat 0 calc(-400*1280px/1920); background-size:contain; width:1280px; height: calc(900*1280px/1920); z-index: -10}
.FunPC h1 {padding-top: calc(120*1280px/1920); font-weight:bold; text-align: center; font-size: calc(48*1280px/1920);}
.FunPC h3 {padding-left: calc(410*1280px/1920); padding-top:0.3em; font-weight: lighter;}
.FunPC p {padding-left: calc(410*1280px/1920); padding-top:1em}
.FunPC a {display:block; margin-left: calc(410*1280px/1920); margin-top: calc(39*1280px/1920); padding-left: calc(70*1280px/1920);line-height: calc(70*1280px/1920); width: calc(210*1280px/1920); height: calc(90*1280px/1920);
  background: url(../image/WhiteDown.png) no-repeat 0 0; background-size: contain; color: black; font-size: calc(22*1280px/1920); color:#09173e;}

.Middle img {position:absolute;left: calc(857*1280px/1920); top: calc(736*1280px/1920 + 72px); width : calc(206*1280px/1920); height: calc(206*1280px/1920); z-index: 10}

.Explain {position: relative; background: white; width: 1280px; height: calc(2000*1280px/1920); color:#052535; margin-top: 72px;}
.Explain img.join_logo {position: absolute; top: calc(155*1280px/1920); left: 50%; margin-left: -196px; width: 392px; height: 107px;}
.Explain #exbg {position: absolute; left: 0; bottom: 0; width: calc(906*1280px/1920); height: calc(592*1280px/1920); background-size: contain; background-image: url(/image/contact_bg.png); background-repeat: no-repeat;}
.Explain #contact_info {position: absolute; color: #5a5a5a; top: calc(90*1280px/1920); left: calc(232*1280px/1920); font-size: calc(15*1280px/1920);}
.Explain #contact_info div {font-family: 'Lato'; font-size: calc(30*1280px/1920); font-weight: 500; margin-bottom: calc(22*1280px/1920);}
.Explain #contact_list {position: absolute; color: #5a5a5a; top: calc(90*1280px/1920); left: calc(680*1280px/1920); font-size: calc(15*1280px/1920); width: calc(970*1280px/1920);}
.Explain #contact_list .title {font-family: 'Lato'; font-size: calc(30*1280px/1920); font-weight: 500; margin-bottom: calc(22*1280px/1920);}
.Explain #contact_list table {border: 0; width: 100%; box-sizing: border-box; font-size: calc(15*1280px/1920); border-spacing: 0; margin-bottom: calc(47*1280px/1920);}
.Explain #contact_list table th {border-bottom: calc(1*1280px/1920) solid #666; text-align: center; font-weight: 400; vertical-align: top; height: calc(32*1280px/1920);}
.Explain #contact_list table td {height: calc(94*1280px/1920);}
.Explain #contact_list input {height: calc(62*1280px/1920); line-height: calc(62*1280px/1920); border: calc(1*1280px/1920) solid #adadad; outline: 0; box-sizing: border-box; background: #fff; color: #5a5a5a; padding: 0 calc(28*1280px/1920); width: 100%; font-size: calc(15*1280px/1920);}
.Explain #contact_list textarea {height: calc(270*1280px/1920); border: calc(1*1280px/1920) solid #adadad; outline: 0; box-sizing: border-box; background: #fff; color: #5a5a5a; padding: calc(20*1280px/1920) calc(28*1280px/1920); width: 100%; font-family: 'Lato'; font-size: calc(15*1280px/1920); margin-top: calc(24*1280px/1920); margin-bottom: calc(30*1280px/1920);}
.Explain #contact_list #inquery_submit {width: calc(110*1280px/1920); height: calc(50*1280px/1920); line-height: calc(50*1280px/1920); background: #284fa9; color: #fff; text-align: center; font-family: 'Lato'; font-size: calc(15*1280px/1920); cursor: pointer; border-radius: calc(10*1280px/1920);}
.Explain .terms_content {width: 900px; margin: 0 auto; margin-top: 100px;}

.Explain .join_txts {
	position: absolute; 
	left: 50%; 
	margin-left: calc(-352.50*1280px/1920);
	height: calc(26*1280px/1920);
	line-height: calc(26*1280px/1920);
	font-family: "Noto Sans KR";
	font-size: calc(25*1280px/1920);
	font-weight: 500;
	color: #3062a6;
}
#email_title {top: calc(412*1280px/1920);}
#pw_title {top: calc(622*1280px/1920);}
#pw_re_title {top: calc(750*1280px/1920);}
#name_title {top: calc(913*1280px/1920);}

.Explain .input_outer {
	position: absolute;
	left: 50%;
	margin-left: calc(-352.50*1280px/1920);
	width: calc(705*1280px/1920);
	height: calc(59*1280px/1920);
}
#confirm_btn {
	position: absolute;
	right: 0;
	width: calc(188*1280px/1920);
	height: calc(59*1280px/1920);
	line-height: calc(59*1280px/1920);
	background: #3062a6;
	text-align: center;
	font-family: "Noto Sans KR";
	font-weight: 300;
	font-size: calc(20.83*1280px/1920);
	color: #fff;
	cursor: pointer;
}
.input_blue {
	position: absolute;
	width: calc(705*1280px/1920);
	left: 50%; 
	margin-left: calc(-352.50*1280px/1920);
	height: calc(59*1280px/1920);
	line-height: calc(59*1280px/1920);
	border: calc(1*1280px/1920) solid #3062a6;
	padding: 0 .5em;
	box-sizing: border-box;
	font-family: "Noto Sans KR";
	font-weight: 300;
	font-size: calc(20.83*1280px/1920);
	outline: none;
}
.input_blue::placeholder {
	color: #9d9d9d;
}

#join_email {width: calc(504*1280px/1920);}

#email_confirm {top: calc(450*1280px/1920);}
#confirm_line {top: calc(523*1280px/1920);}
#pw_line {top: calc(661*1280px/1920);}
#pw_re_line {top: calc(789*1280px/1920);}
#name_line {top: calc(952*1280px/1920);}

#terms_title {top: calc(1076*1280px/1920);}
#terms_line {top: calc(1115*1280px/1920); height: calc(218*1280px/1920); background: #f8f8f8; border: 0; outline: 0; box-sizing: border-box;}
#privacy_title {top: calc(1398*1280px/1920);}
#privacy_line {top: calc(1437*1280px/1920); height: calc(218*1280px/1920); background: #f8f8f8; border: 0; outline: 0; box-sizing: border-box;}

#join_btn {
	position: absolute;
	top: calc(1700*1280px/1920);
	width: calc(705*1280px/1920);
	height: calc(88*1280px/1920);
	left: 50%;
	margin-left: calc(-352.5*1280px/1920);
	line-height: calc(88*1280px/1920);
	background: #3062a6;
	text-align: center;
	font-family: "Noto Sans KR";
	font-weight: 500;
	font-size: calc(29.17*1280px/1920);
	color: #fff;
	cursor: pointer;
}

.Explain1 {position:absolute; left:0; top: 0; background:url(../image/Explain1.png) no-repeat calc(-3*1280px/1920) 0; background-size: contain; width: 1280px; height: calc(800*1280px/1920);color:#052535;}
.Explain1 h2 {margin-left: calc(1180*1280px/1920); margin-top: calc(295*1280px/1920)}
.Explain1 p {margin-left: calc(1185*1280px/1920); margin-top: 1em;}

.Explain2 {position:absolute; left:0; top: calc(690*1280px/1920 + 72px); background:url(../image/Explain2.png) no-repeat 0 0; background-size: contain; width: 1280px; height: calc(800*1280px/1920);color:#052535;}
.Explain2 h2 {margin-left: calc(300*1280px/1920); margin-top: calc(275*1280px/1920);}
.Explain2 p {margin-left: calc(305*1280px/1920); margin-top: 1em}

.Explain3 {position:absolute; left:0; top: calc(1488*1280px/1920 + 72px); background:url(../image/Explain3.png) no-repeat 0 0; background-size: contain; width: 1280px; height: calc(800*1280px/1920);color:#052535;}
.Explain3 h2 {margin-left: calc(1100*1280px/1920) ; margin-top:calc(330*1280px/1920);}
.Explain3 p {margin-left: calc(1105*1280px/1920); margin-top: 1em}

.Ready {position:absolute; left:0; top: calc(2286*1280px/1920 + 72px); background:url(../image/Ready.png) no-repeat calc(-3*1280px/1920) 0; background-size: contain;
  width: 1280px; height: calc(425*1280px/1920); color:#052535; }
.Ready h2 {text-align:center; margin-top: calc(130*1280px/1920);width:1280px;}
.Ready a {display:block; margin-left: auto; margin-right: auto;margin-top: calc(50*1280px/1920); padding-left: calc(70*1280px/1920);line-height: calc(70*1280px/1920); width: calc(210*1280px/1920); height: calc(90*1280px/1920);
  background: url(../image/BlueDown.png) no-repeat 0 0; background-size: contain; color: black; font-size: calc(30*1280px/1920); font-size: calc(22*1280px/1920); color:#fff}

/*footer*/
footer a {letter-spacing: 0px; word-spacing:2px;}
footer {position:absolute; left: 0; color:#fff;background: white; width: 1280px; height: calc(360*1280px/1920); z-index:1000}
footer .top {position:absolute; top: 0; left:0; width:1280px; height:calc(108*1280px/1920); text-align: left; background:#071025}
footer .top h2 {position:absolute; left: calc(295*1280px/1920); color: transparent; top: calc(12*1280px/1920); background: url(../image/upSTASYSlogo.png) no-repeat 0 0; background-size: contain; width: calc(280*1280px/1920); height: calc(200*1280px/1920)}
footer .top .footnewmenu {padding-left: calc(530*1280px/1920)}
footer .top .footnewmenu li {display: inline-block;}
footer .top .footnewmenu a {display: block; color: #fff; padding-left: calc(45*1280px/1920); padding-top: 3.2em;font-size: calc(15*1280px/1920); font-weight:lighter;}
footer .top .footmenu {position:absolute; left: calc(1190*1280px/1920); top: 3.2em; padding-top: 0; font-size: calc(15*1280px/1920);}
footer .top .footmenu li {display: inline-block; }
footer .top .footmenu a {display: block; color: #fff; padding-left: calc(45*1280px/1920); font-size: calc(15*1280px/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(109.5*1280px/1920); width:1280px; height:calc(250*1280px/1920); background: #071025; color: #fff;}
footer .btm .info {padding-left: calc(355*1280px/1920); text-align: left; padding-top: calc(40*1280px/1920);}
footer .btm h3 { font-size: calc(20*1280px/1920)}
footer .btm p {padding-top: calc(15*1280px/1920); font-size: calc(15*1280px/1920)}
footer .btm address {padding-top: calc(50*1280px/1920); font-size: calc(17*1280px/1920)}
footer .btm .extra {position:absolute; right:calc(325*1280px/1920); top:3em; font-size: calc(20*1280px/1920); text-align: left;}
footer .btm .extra img {width: calc(30*1280px/1920); height: calc(30*1280px/1920);}
footer .btm .extra ul li:nth-child(2) {padding-left: 1.75em; font-size: calc(20*1280px/1920);}
footer .btm .extra ul li:nth-child(3) {padding-top: calc(30*1280px/1920)}