@charset "UTF-8";

/* reset */
* { -webkit-box-sizing:border-box; box-sizing:border-box; }
html, body{ margin:0; padding:0; font-size:0; }
a, a:link, a:visited, a:active{ text-decoration:none; }
ul, li{ list-style:none; margin:0; padding:0; vertical-align:middle; }
p{ margin:0; padding:0; } button{ outline:none; cursor:pointer; }
.bg{ background-position:center center; background-size:cover; background-repeat:no-repeat; }
.contents-wrap{ position:relative; }
.flex-box{ display:flex; } 
p, a, h1, h2, h3, h4, h5, h6, button {transform: skew(-0.1deg);}
*:focus { outline: none;}

body { background-color: #fff;font: 1.2em/1.3em 'NanumSquare', 'Noto Sans KR', sans-serif;   font-style: normal;     font-variant-ligatures: normal;     font-variant-caps: normal;     font-variant-numeric: normal;     font-variant-east-asian: normal;     font-weight: normal;     font-stretch: normal;     font-size: 1.2em;     line-height: 1.3em;     font-family: NanumSquare, sans-serif; letter-spacing: -0.5px;    }
body .login_bg{width:100%; top:0; left:0; right:0; bottom:0; background-image: url("/images/login/login_back.png") ;background-position: right bottom;background-repeat:  no-repeat;background-size: 50%;    position: absolute;min-height: 650px;height: 100vh;}

/* 로그인 영역 */
.login-page {  width: 360px; padding: 10% 0 0; margin: auto;}
.login_logo {width:224px; height:89px;margin-bottom:10px; text-decoration: none; font-weight: 700; font-size: 36px; line-height: 52px; color: #000000 !important; letter-spacing: -2px;}
.login-form { position: relative; margin: 0 auto;   text-align: center; }
.login-form h1{font-size:22px;line-height: 26px; font-weight:700;color:#0071e3;margin:0; margin-bottom:23px; padding-left:2px;}
.login-form input {   font-family: NanumSquare, sans-serif;outline: 0;  background: #fff;  width: 345px; height:40px; line-height: 40px;  margin: 0 0 15px; padding: 15px;  box-sizing: border-box;  font-size: 14px;border:1px solid #3991e9; border-radius: 20px;padding-left: 54px;}
input.in_id_style {background-image: url('/images/login/user_b.svg');background-repeat: no-repeat; background-size: 20px;background-position: 20px;}
input.in_pw_style {background-image: url("/images/login/password.svg");background-repeat: no-repeat;background-size: 20px;background-position: 20px;}


.select-page {  width: 880px; padding: 10% 0 0; margin: auto;}

/* checkboxes */
label {  cursor: pointer;  display: inline-block;   position: relative; padding-left: 25px;  margin-right: 10px; }
label:before {  content: "·"; width: 15px;   height: 15px; font-size: 33px;  left: 0; color: #ccc; vertical-align: -6px; margin-right: 3px;}
input[type=checkbox] {  display: none;  }
.keep_check{text-align: left; margin: 0 0 23px 29px;}
.keep_check .input_keep {position: absolute; top: 2px; left: 3px;width: 15px;height: 15px;}
.keep_check .keep_text {  display: inline-block; font-size: 14px;  font-weight: normal; line-height: 19px; color: #555;padding-left: 33px;}
.keep_check input:checked+.keep_text::before {  background-image:url("/images/login/checkbox_1.svg");background-repeat: no-repeat; width: 21px; height: 21px;}
.keep_check .keep_text::before {background-image: url("/images/login/checkbox_0.svg"); content: ''; position: absolute;  top: -2px; left: 0;background-repeat: no-repeat; width: 21px;  height: 21px;}

/* login buttons */

.login-form  a {  font-family: NanumSquare, sans-serif;text-transform: uppercase;  outline: 0;  background: #019ee3; width: 160px;height: 40px;  border: 0;  line-height: 40px; color: #FFFFFF;  font-size: 14px;  cursor: pointer; border-radius: 20px; text-decoration: none;  padding: 10px 28px 10px 18px;margin:0 0px 23px 0px;}
.login-form  a:hover, .login-form  a:active, .login-form  a:focus { background: #0053a7;}
.login-form .auto_c{width:20px; border:1px solid #8ac0f6;}
.go_login img{vertical-align: -5px; height: 19px; margin-right: 17px;}
.find_pw img{ vertical-align: -4px; height: 19px; margin-right: 17px;}
.login-form a.go_login{width:160px; padding: 10px 38px 10px 19px; margin-right: 20px;}


/* modal */

.overlay { position: absolute;  top: 0; bottom: 0; left: 0; right: 0; transition: opacity 200ms; visibility: hidden; opacity: 0;}
.overlay.light {background: rgba(255, 255, 255, 0.5);}
.overlay .cancel {position: absolute; width: 100%; height: 100%; cursor: default;}
.overlay:target {visibility: visible;opacity: 1;}
.popup {  z-index: 999999;min-height: 320px; margin: 12% auto;   background: #fff;border: 1px solid #798b97; width: 442px; position: relative;border-radius: 4px;}
.pop_header{background:#c8d4dd;padding: 13px; height: 42px;line-height: 16px;}
.popup h2 {  margin-top: 0; color: #2d363d; font-family: NanumSquare, sans-serif;font-size: 16px; font-weight: 500; }
.popup .close { position: absolute; width: 42px; height: 42px;top: 0px; right: 0px;padding:13px; transition: all 200ms; }
.popup .close:hover {opacity: 1;}
.popup .content { padding: 10px; overflow: auto;}
.formgroup_pop{width:100%;}
.intext_tb{width:100%;}
.intext_tb th{width:125px;  font-family: NanumSquare, sans-serif;font-size:14px; font-weight: normal; color:#3d3d3d; text-align: left; vertical-align: top; line-height: 34px; background-image: url("../img/tbdot.svg");background-position: center left; background-size: 4px 4px; background-repeat: no-repeat; }
.thdot{width:4px; height: 4px; border-radius: 2px; background:#b6c2ce; margin:10px; }
.intext_tb label{margin-right:0; padding-left: 0;}
.intext_tb th.bt_top{background-position: 0px 15px; }
.intext_tb th.bt_none{background:none;}
.intext_tb td input{width:190px; height: 24px; line-height: 24px;margin:3px 0; border:1px solid #b6c2ce; border-radius: 4px;}
.intext_tb td ul{ font-size:12px; font-weight: normal; color:#8d8d8d; margin: 7px 0;line-height: 18px;}
ul {margin: 0;}
ul.dashed {  list-style-type: none;}
ul.dashed > li {  text-indent:0;}
ul.dashed > li:before {  content: "-"; text-indent: -5px; margin-right:5px;}

.pop_btn{    width: 100px;   height: 30px;  color: #fff; background: #009ee2;   border-radius: 4px;  border: none;  margin-right: 16px;  line-height: 30px; margin-top:10px;margin-bottom:10px;}
.pop_btn:hover{background:#0053a7;}


/* 선택 영역 */
.select-page {  width: 800px; padding: 10vh 0; margin: auto;}
.select-page a img{padding:5vh 20px; max-width:400px;}
.footer{width:100%; margin:0 auto; text-align: center; padding-bottom:20px;}
.f_logo img{width:170px;}
.footer h2{ font-size: 20px; display: inline; line-height: 22px; color: #777; vertical-align: 27px; margin-left: 10px; font-weight: 700;}
.footer h5{ font-size: 15px; font-weight: 400; line-height: 20px;color: #777;display: inline;vertical-align: 5px;margin-left: -185px;}