@charset "utf-8";

/* reset */
* {margin:0;padding:0;box-sizing:border-box;}
body {width:100%;height:100%;background:#f5f5f5;}
body,input,select,textarea,button,label {font-size:14px;font-family:'Noto Sans KR','Malgun Gothic',Dotum,sans-serif;color:#191919;font-weight:300;}
ul,ol,li{list-style:none;}
img,fieldset,abbr {border:0;}
button {border:0;cursor:pointer}
address,caption,cite,code,em {font-style:normal;font-weight:normal;}
img,input,select,textarea,button,label {vertical-align:middle;}
header,section,nav,hgroup,footer,aside,article,figure {display:block;}
a {color:#191919;text-decoration:none;}

input[type=text]::-ms-clear {display:none;}
input[type=checkbox]:not(old){width:20px;height:20px;margin:0;padding:0;opacity:0;}
input[type=checkbox]:not(old) + em {display:inline-block;margin-top:2px;margin-left:-20px;padding-left:20px;background:url('../images/bg_check.png') no-repeat 50% 50%;min-height:20px;vertical-align:middle;}
input[type=checkbox]:not(old):checked + em {background:url('../images/bg_check_on.png') no-repeat 50% 50%;}
input[type=radio]:not(old){width:20px;height:20px;margin:0;padding:0;opacity:0;}
input[type=radio]:not(old) + em {display:inline-block;margin-top:2px;margin-left:-20px;padding-left:20px;background:url('../images/bg_radio.png') no-repeat 50% 50%;min-height:20px;vertical-align:middle;}
input[type=radio]:not(old):checked + em {background:url('../images/bg_radio_on.png') no-repeat 50% 50%;}
.login_wrap {position:relative;overflow:hidden;background:#eee;}
.login_wrap h1 {position:absolute;left:4.5%;top:3.3%;z-index:7;}
.login_wrap h1 span {display:inline-block;margin-left:7px;font-size:32px;font-weight:bold;color:#fff;vertical-align:middle;letter-spacing:-2px;}
.login_visual {float:left;width:69.7%;}
.login_area {float:left;width:30.3%;}
.visual_slider {position:relative;}
.visual_slider img {width:100%;}
.visual_slider li {overflow:hidden;}

.visual_slider li span {position:relative;width:100%;}
.visual_slider .txt1 {position:absolute;left:65px;bottom:180px;font-size:64px;font-weight:700;color:#fff;letter-spacing:-3.9px;line-height:60px;z-index:1;}
.visual_slider .txt2 {position:absolute;left:68px;bottom:95px;font-size:25px;font-weight:300;color:#fff;line-height:35px;z-index:1;}
.visual_slider .slick-slide.slick-active .txt1 {animation-name:fadeInUp;animation-delay:0.2s;animation-duration:1s;}
.visual_slider .slick-slide.slick-active .txt2 {animation-name:fadeInUp;animation-delay:0.2s;animation-duration:3s;}
.visual_slider .slick-arrow {position:absolute;bottom:40px;width:40px;height:40px;z-index:1;text-indent:-999px;overflow:hidden;}
.visual_slider .slick-prev {right:107px;background:url('../images/ico_prev.png') no-repeat 50% 50%;background-size:10px 20px;}
.visual_slider .slick-next {right:65px;background:url('../images/ico_next.png') no-repeat 50% 50%;background-size:10px 20px;}
.visual_slider .slick-prev:hover,.slick-next:hover {background-color:#121a32;}
.visual_slider .slick-dots {position:absolute;right:178px;bottom:44px;}
.visual_slider .slick-dots li {float:left;margin:0 8px;color:#aaa;}
.visual_slider .slick-dots li.slick-active {color:#fff;margin-top:-4px;}
.visual_slider .slick-dots li i {font-style:normal;cursor:pointer;font-size:14px;}
.visual_slider .slick-dots li.slick-active i{color:#fff; font-size:18px;}

.slick-slider {position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select: none;-ms-user-select:none;user-select: none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.slick-list {position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.slick-slide {position:relative;display:none;float:left;height:90%;min-height:1px;}

.slick-initialized .slick-slide {display:block;}
.login_input {padding:30px 6.5% 6.5%;}
.login_input h2 {margin:9% 0 4%;font-size:20px;color:#191919;text-align:center;}
.login_input li {margin-bottom:8px;}
.login_input li input {width:100%;height:44px;padding-left:10px;border:1px solid #ccc;background:#fff;outline:0;}
.login_input li input::-webkit-input-placeholder {color:#ccc;}
.login_input li input:-ms-input-placeholder {color:#ccc;}
.login_input .item_group {margin-top:5px;}
.login_input .item_group label {padding-top:5px;margin-right:15px;color:#0065bd;cursor:pointer;}
.login_input .item_group label:last-child {margin-right:0;}
.login_input .idsave {position:relative;margin-top:11px;}
.login_input .idsave .right {position:absolute;right:0;top:2px;}
.login_input .idsave .right a:first-child {position:relative;padding-right:12px;margin-right:6px;}
.login_input .idsave .right a:first-child:after {content:"";position:absolute;top:5px;right:0;width:1px;height:13px;background:#191919;}
.login_input .btn_login {display:inline-block;width:100%;height:48px;line-height:48px;margin-top:5%;text-align:center;font-size:18px;color:#fff;font-weight:400;vertical-align:middle;background:#16296f;}
.login_input .btn_login:hover {background-color:#2440a9;}
.login_list {position:absolute;right:0;bottom:0;width:20.3%;}
.login_list li {background:#16296f;font-size:25px;color:#fff;font-weight:500}
.login_list li:nth-child(2n) {background:#2440a9;}
.login_list li a {position:relative;display:block;padding:7% 0 35% 6.5%;color:#fff;}
.login_list li:nth-child(1) a:after {content:"";position:absolute;right:28px;bottom:20px;width:104px;height:120px;background-image:url('../images/ico_list01.png');background-repeat:no-repeat;opacity:0.3;}
.login_list li:nth-child(2) a:after {content:"";position:absolute;right:28px;bottom:20px;width:104px;height:120px;background-image:url('../images/ico_list02.png');background-repeat:no-repeat;opacity:0.3;}
.login_list li:nth-child(3) a:after {content:"";position:absolute;right:26px;bottom:20px;width:111px;height:98px;background-image:url('../images/ico_list03.png');background-repeat:no-repeat;opacity:0.3;}
.login_list li a:hover:after {opacity:0.7;}
.login_list li:hover:nth-child(1) {background-image:url('../images/hover_list01.png');}
.login_list li:hover:nth-child(2) {background-image:url('../images/hover_list02.png');}
.login_list li:hover:nth-child(3) {background-image:url('../images/hover_list03.png');}
.login_footer {position:relative;width:100%;clear:both;background:#ececec}

.login_footer .copy {padding:5px;text-align:center;}
.login_footer .copy address,.login_footer .copy .copyright {font-size:14px;line-height:23px;color:#454545;}
.family_wrap {display:none;position:absolute;left:0;bottom:160px;width:100%;padding:60px 0 55px;background:#fff;z-index:10;}
.family_overlay {display:none;position:fixed;left:0;bottom:35%;width:100%;height:100%;background:#000;z-index:9;opacity:0.75;}
.a11y {position:absolute !important;overflow:hidden;height:1px;width:1px;clip:rect(1px, 1px, 1px, 1px);}
.l-wrap {position:relative;max-width:1180px;padding:0 20px;margin:0 auto;}
.row {margin-left:-10px;margin-right:-10px;}
.col-lg-1 {width:8.33333%;width:calc(100% / 12);}
.col-lg-2 {width:16.66667%;}
[class*=col-] {float:left;min-height:1px;padding-left:10px;padding-right:10px;}
.login_footer .family-category {margin-bottom:15px;padding:15px 0;border:1px solid #E0E0E0;border-width:1px 0;color: #616161;font-size:15px;line-height: 1.5;}
.login_footer .family-list li {font-size:20px;letter-spacing:-.03em;line-height:2.2;}
.login_footer .family-list a {display:block;color:#191919;}
.login_footer .family-list a:hover {color:#0065bd;}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@media only all and (max-width:1850px) {
  .login_input h2 {margin:4% 0 2%;}
  .login_input li input {height:42px;}
}
@media only all and (max-width:1800px) {.login_input .btn_login {height:44px;line-height:44px;}}
@media only all and (max-width:1750px) {
  .login_input h2 {margin:3.5% 0 2%;}
  .login_input li input {height:40px;}
  .login_input .idsave {margin-top:5px;}
  .login_input .btn_login {margin-top:4%;}  
}
@media only all and (max-width:1680px) {
  .login_input h2 {margin:7% 0 4%;}
  .login_input .btn_login {margin-top:3%;}  
  .login_list li a {padding:6% 0 32% 6.5%;}
}
@media only all and (max-width:1620px) {
  .login_list li a {padding:6% 0 32% 6.5%;}
  .login_list li:nth-child(1) a:after,.login_list li:nth-child(2) a:after {width:86px;height:98px;background-size:100%;}
  .login_list li:nth-child(3) a:after {width:86px;height:76px;background-size:100%;}
}
@media only all and (max-width:1550px) {.login_list li a {padding:5% 0 32% 6.5%;}}
@media only all and (max-width:1500px) {
  .login_list li a {padding:5% 0 32% 6.5%;}
  .login_list li:nth-child(1) a:after,.login_list li:nth-child(2) a:after {width:70px;height:80px;}
  .login_list li:nth-child(3) a:after {width:70px;height:62px;}
}
@media only all and (max-width:1460px) {
  .login_visual {width:77.7%;}
  .login_area {width:22.3%;}
  .login_input {padding:30px 4% 4%;}
  .login_list {width:22.3%;}
  .login_list li a {padding:2% 0 27% 6.5%;}
}



@media only all and (max-width:1400px) {.login_list li a {padding:2% 0 26% 6.5%;}}
@media only all and (max-width:1370px) {.login_list li a {padding:2% 0 25% 6.5%;}}
@media only all and (max-width:1320px) {.login_list li a {padding:2% 0 24% 6.5%;}}
@media only all and (max-width:1280px) {
  .login_list li a {padding:2% 0 24% 6.5%;}
  .login_visual {width:calc(100% - 320px);height:645px;}
  .visual_slider img {width:auto;}
  .visual_slider li.slick-slide {height:645px;}
  .visual_slider .txt1 {left:30px;font-size:50px;line-height:50px;letter-spacing:-2px;}
  .visual_slider .txt2 {left:33px;font-size:20px;line-height:26px;}
  .visual_slider .slick-prev {right:120px;}
  .visual_slider .slick-next {right:60px;}
  .visual_slider .slick-dots {right:200px;}
  .login_area {position:absolute;right:0;top:0;width:320px;}
  .login_input {height:290px;padding:25px;overflow:hidden;background:#eee;}
  .login_list {position:relative;width:320px;}
  .login_footer .family-list li {font-size:16px;}
}
/* @media only all and (max-width:1100px) {.login_visual {width:calc(100% - 320px);}}
@media only all and (max-width:1024px) {.login_visual {width:calc(100% - 320px);}}
@media only all and (max-width:950px) {.login_visual {width:67%;}} */
@media only all and (max-width:850px) {
  .visual_slider .slick-prev {right:100px;}
  .visual_slider .slick-next {right:40px;}
  .visual_slider .slick-dots {right:180px;}
}
@media only all and (max-width:767px) {
  .login_wrap h1 span {display:block;margin-left:0;}
  .visual_slider .txt1 {left:20px;font-size:34px;line-height:34px;letter-spacing:-2px;}
  .visual_slider .txt2 {left:23px;font-size:15px;line-height:22px;}
  .visual_slider .slick-prev {left:20px;right:auto;}
  .visual_slider .slick-next {left:80px;right:auto;}
  .visual_slider .slick-dots {bottom:-10000px;}
  .family_wrap {display:none;position:relative;bottom:auto;padding:20px 0;}
  .family_overlay {width:0;}
  .col-lg-1 {width:auto;}
  .col-lg-2 {width:auto;}
  [class*=col-] {float:none;padding-left:10px;padding-right:10px;}
  .login_footer .family-category {margin-bottom:10px;padding:10px 0;border:0;border-bottom:1px solid #E0E0E0;color:#0065bd;font-size:14px;line-height:1.5;font-weight:400;}
  .login_footer .family-list li {font-size:16px;font-weight:400;}
  .login_footer .col-lg-2+.col-lg-2 {margin-top:15px;}
}
@media only all and (max-width:680px) {
  .visual_slider .txt1 {padding-right:55px;}
  .visual_slider .txt2 {padding-right:50px;}
}
@media only all and (max-width:560px) {
  .login_wrap h1 {display:none;}
  .visual_slider .slick-arrow {bottom:-10000px;}
  .visual_slider .txt1,.visual_slider .txt2 {display:none;}
  .login_footer .fmenu {padding:16px 5% 0;}
}
