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


/*
font-family: 'Nanum Gothic', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Roboto', sans-serif;
*/

html{overflow-y: scroll; margin:0; padding:0;}
html, body {height:100%;font-family: 'Nanum Gothic','나눔고딕',Sans-Serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,span,button,th,td,a {border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{letter-spacing:-1px;}
body {height:100%; font-size:15px; color:#222222; line-height:1.5; background:#ffffff; padding:0; margin:0;}
img{max-width:100%;max-height:100%;vertical-align:top;}
fieldset{margin:0;padding:0;border:0;}
textarea {border:1px solid #dddddd; padding:8px 0 9px 3px; margin:0; resize: none;}

ul,ol{list-style-type:none;}
dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}


select{margin-right:3px; height:40px; border:1px solid #dddddd; padding:2px 8px 3px 4px; vertical-align:middle; }
a,
a:link,
a:visited,
a:active{color:#2c2c2c;text-decoration:none;background-color:none;font-weight:300;}
a:focus{color:#2c2c2c;text-decoration:none;font-weight:300;background-color:none;}
a:hover{text-decoration:underline;}
legend{visibility:hidden;overflow:hidden;top:-9999px;left:-9999px;width:0;height:0;font-size:0;line-height:0;}
hr{visibility:hidden;overflow:hidden;position:absolute;top:-9999px;left:-9999px;width:0;height:0;font-size:0;line-height:0;}
caption{overflow:hidden;visibility:hidden;width:0;height:0;font-size:0;line-height:0;}
em,address{font-style:normal;}
button{overflow:visible;padding:0;border:0;background:transparent;font-size:12px;  cursor:pointer; vertical-align: middle; margin:0 4px 0 8px;}
table{table-layout:fixed;border-collapse:collapse;}
input[type="text"] {border:1px solid #dddddd; height:50px; padding:2px 0 0 3px; font-size:13px; vertical-align: middle; border-radius:10px;box-sizing: border-box;}
input[type="File"] {background:#ffffff; border:1px solid #dddddd; height:35px; padding:2px 0 0 3px; font-size:13px; vertical-align: middle;}
input[type="password"] {border:1px solid #dddddd; height:50px; padding:2px 0 0 3px; font-size:13px; border-radius:10px; box-sizing: border-box;}
input[type="checkbox"] {border:1px solid #dddddd; vertical-align:middle; width:20px; height:20px; border-radius:5px;}
input[type="radio"] {border:1px solid #dddddd; margin-top:-1px; vertical-align:middle;}

strong {font-weight:700;}

/*a:focus{ outline: 3px dotted red}*/
.clfix:after {content: "."; display: block; height: 100%; clear: both; visibility: hidden;}
.clfix {display: inline-block;}
.clfixb {display: block;}
* html .clfix {height: 1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/
* html #container{height:100%;} /* IE7 hack*/
* html #content {height:1%;}
.fl {float:left;}
.fr {float:right;}
.cl {clear:both;}
.rel {position:relative;}
.ac {text-align:center;}
.ar {text-align:right !important;}
.al {text-align:left;}
.at {vertical-align:top;}
.am {vertical-align:middle;}
.ab {vertical-align:bottom  !important;}
.hand {cursor:pointer;}
.bgnone {background:none !important;}
.brnone {border:none !important;}
.brrnone {border-right:none;}
.bbline {background:#ffffff; border-top:1px solid #dddddd; margin:0; padding:0; width:100%; display:inline-block;}
.b {font-weight:700;}
.n {font-weight:normal;}
.u {text-decoration:underline;}
.lt1{ letter-spacing: -1px !important;}
.invisible{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0;}
.hide{display: none !important;}
caption, legend {width:0; height:0; line-height:0; overflow:hidden; visibility:hidden; font-size:0;}


.loginarea {position:fixed; top:0; width:100%; border-bottom:1px solid #e1e1e1; background:#ffffff; box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1); }
.loginarea .inner {width:1200px; height:370px; margin:0 auto; border-left:1px solid #e1e1e1; border-right:1px solid #e1e1e1;}
.loginarea .inner .loginbox {position:relative; display:inline-block; width:660px; height:310px; padding:60px 0 0 0 ; text-align:center;}
.loginarea .inner .loginbox h3 {font-family: 'Noto Sans KR', sans-serif; font-weight:700; font-size:28px; padding-bottom:20px;}
.loginarea .inner .loginbox ul {margin:10px auto 0 auto; width:440px;}
.loginarea .inner .loginbox ul li {font-size:14px; font-weight:700; float:left;}
.loginarea .inner .loginbox ul li input {margin:0 10px 10px 0;}
.loginarea .inner .loginbox ul li input[type="checkbox"] {margin-top:10px;}
.loginarea .inner .loginbox ul li:nth-child(3) {float:right; font-weight:700; margin-top:-60px;}
.loginarea .inner .loginbox .loginbtn {display:block; width:110px; height:110px; line-height:100px; background:#373737; color:#ffffff; font-family: 'Noto Sans KR', sans-serif; font-weight:500; font-size:18px; border-radius:10px;}
.loginarea .inner .loginbox .infoB {position: absolute; bottom:0; width:100%; height:60px; text-align:center; font-size:13px;}
.loginarea .inner .loginbox .infoB a {font-weight:700; color:#689b04;}

.loginarea .inner .infobox { width:539px; height:370px; float:right; border-left:1px solid #e1e1e1; background:#f7f7f7; padding:60px 60px 0 60px; box-sizing: border-box;}
.loginarea .inner .infobox h4 {font-family: 'Noto Sans KR', sans-serif; font-weight:500; font-size:18px;}
.loginarea .inner .infobox h4 span {display:inline-block; font-family: 'Roboto', sans-serif; font-weight:700; font-size:28px; margin-left:50px;}
.loginarea .inner .infobox ul {margin-top:30px;}
.loginarea .inner .infobox ul li {font-weight:700;}
.loginarea .inner .infobox ul.icon23 li {float:left; width:33.3%; text-align:center;}
.loginarea .inner .infobox ul.icon23 li span {display:block; font-family: 'Noto Sans KR', sans-serif; font-weight:500; font-size:18px; padding-top:10px;}

.top_tit {width:1200px; text-align:center; padding:80px 0 0px 0; margin:0 auto;}
.bgcw {width:100%; padding:90px 0 100px 0;}
.bgcg {width:100%; padding:90px 0 100px 0; background:#f7f7f7;}

#login_container {padding:0 0 80px 0; margin-top:400px;}
#login_container .inner .ac {text-align:center; margin:70px auto 0 auto;}
#login_container .inner .ac a {margin:0 10px;}
#login_container .inner {width:1200px; margin:0 auto; font-family: 'Noto Sans KR', sans-serif; font-weight:400; font-size:20px;}
#login_container .inner .tit {font-weight:700; font-size:30px; text-align:center; margin:0 auto 70px auto;}
#login_container .inner .tit span {font-weight:500; font-size:24px; font-style:italic; display:inline-block; color:#ffffff; line-height:40px; padding:0 20px; margin-top:10px;}
#login_container .inner .txt {margin-bottom:40px;}
#login_container .inner ul li {margin-bottom:7px;}
#login_container .inner ul li.imgli {margin-top:40px;}

.bgd_01 {background:url('/asp/suvila/com/images_23/bg_login01.png') no-repeat right 130px;}
.bgd_01 .tit span {background:#1464f6;}
.bgd_02 {background:url('/asp/suvila/com/images_23/bg_login02.png') no-repeat right 160px;}
.bgd_02 .tit span {background:#96c933;}
.bgd_03 {background:url('/asp/suvila/com/images_23/bg_login03.png') no-repeat right 160px;}
.bgd_03 .tit span {background:#4648a5;}
.bgd_04 {background:url('/asp/suvila/com/images_23/bg_login04.png') no-repeat right 150px;}
.bgd_04 .tit span {background:#a79c67;}
.bgd_05 {background:url('/asp/suvila/com/images_23/bg_login05.png') no-repeat right 120px;}
.bgd_05 .tit span {background:#e76d41;}