@charset "UTF-8";
/*-------------------------------------------------
title       : 로그인
Author      : ㅈㅁㅈ
Create date : 2020-03-04
-------------------------------------------------*/
#header { width: 118rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; position: relative; height: 10rem; padding: 2rem 5rem 2rem 0; }

#logo a img { width: 36rem; }

.layerpopup { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }

.layerpopup.active { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; top: 0; z-index: 1000; width: 100%; height: 100%; -webkit-transition: opacity 0.2s, top 0.2s; transition: opacity 0.2s, top 0.2s; }

.layerpopup .group { position: absolute; top: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 90rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; overflow: hidden; overflow-y: auto; top: 10rem; height: 46.5rem; max-height: calc(100% - 20rem); border: 1px solid #ddd; background-color: #fff; }

.layerpopup .group .title { font-size: 1.8rem; margin: 0 -1px; padding: 1.1rem 6rem 1.2rem 3rem; background-color: #27346b; font-weight: 400; color: #fff; }

.layerpopup .group .close { overflow: hidden; position: absolute; right: 3rem; top: 1.25rem; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; }

.layerpopup .group .close::before { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup .group .close:hover::before, .layerpopup .group .close:focus::before { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }

.layerpopup .group .close::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 2.5rem; color: #fff; content: ''; }

.layerpopup .group .item { padding: 3rem; }

.layerpopup#faq .tabmenu { margin-bottom: 3rem; }

.layerpopup#faq .tabmenu li { display: inline-block; margin-right: 0.5rem; vertical-align: top; }

.layerpopup#faq .tabmenu li.active a { border-color: #0ea79e; background-color: #0ea79e; color: #fff; }

.layerpopup#faq .tabmenu a { height: 4.4rem; border: 1px solid #e1e6eb; line-height: 4.2rem; float: left; padding: 0 2rem; background-color: #f8f8f8; font-weight: 400; -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup#faq .tabmenu a:hover, .layerpopup#faq .tabmenu a:focus { border-color: #000; background-color: #fff; color: #000; }

.layerpopup#faq .list { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }

.layerpopup#faq .list.active { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }

.layerpopup#faq .list.active + .active > ul { border-top: 0 none; }

.layerpopup#faq .list > ul { border-top: 1px solid #000; }

.layerpopup#faq .list > ul > li { border-bottom: 1px solid #e8e8e8; }

.layerpopup#faq .list > ul > li.active .q::before { background-color: #0ea79e; }

.layerpopup#faq .list > ul > li.active .a { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; padding-top: 2rem; padding-bottom: 2rem; background-color: #fbfbfb; }

.layerpopup#faq .list > ul ul { margin: 0.5rem 0; }

.layerpopup#faq .list .q { display: block; position: relative; padding: 1.25rem 5rem 1.25rem 6rem; font-weight: 500; color: #333; line-height: 3rem; word-break: keep-all; -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup#faq .list .q::after { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup#faq .list .q:hover::after, .layerpopup#faq .list .q:focus::after { -webkit-transform: rotate(180deg) translateY(2px); transform: rotate(180deg) translateY(2px); }

.layerpopup#faq .list .q::before { font-size: 1.6rem; position: absolute; left: 2rem; top: auto; width: 3rem; height: 3rem; border-radius: 100%; background-color: #27346b; font-weight: 600; color: #fff; content: 'Q'; text-align: center; line-height: 2.6rem; vertical-align: top; -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup#faq .list .q::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; font-size: 1.8rem; right: 1.5rem; content: ''; }

.layerpopup#faq .list .a { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: relative; padding: 0 2rem 0 6rem; border-top: 1px solid #e8e8e8; -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup#faq .list .a::before { font-size: 1.6rem; position: absolute; left: 2rem; top: auto; width: 3rem; height: 3rem; font-weight: 600; content: 'A'; text-align: center; line-height: 2.6rem; vertical-align: top; -webkit-transition: all 0.2s; transition: all 0.2s; }

.layerpopup#guide .group { width: 65rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }

.layerpopup#guide .list > li { position: relative; padding-left: 4.5rem; }

.layerpopup#guide .list > li + li { margin-top: 2rem; }

.layerpopup#guide .label { display: block; margin-bottom: 1rem; font-weight: 400; color: #333; line-height: 3rem; }

.layerpopup#guide .label span { position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 100%; background-color: #0ea79e; color: #fff; text-align: center; }

.layerpopup#guide p img { display: inline-block; margin: 1rem 0; }

.bul1 > li { position: relative; padding-left: 1rem; text-align: left; }

.bul1 > li::before { position: absolute; left: 0; top: auto; content: ''; }

.bul1 > li::before { content: '-'; }

.bul2 { padding-left: 1.5rem; }

.bul2 > li { list-style: decimal; }

.bul2 > li + li { margin-top: 0.5rem; }

#contents { position: relative; z-index: 0; padding-top: 5rem; background-color: #f8f8f8; }

#contents::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; height: 24rem; background: -webkit-gradient(linear, left top, right top, color-stop(48%, #06a888), color-stop(52%, #1b8fc4)); background: linear-gradient(to right, #06a888 48%, #1b8fc4 52%); }

#contents .section { width: 118rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; }

.form-textbox { width: 100%; height: 5rem; padding: 0 1rem; border: 1px solid #bbb; -webkit-transition: all 0.2s; transition: all 0.2s; }

.form-textbox:focus, .form-textbox:active { border-color: #000; }

.section1 { display: inline-block; width: calc(100% + 0px); display: block; overflow: hidden; position: relative; z-index: 0; padding: 3rem 2rem; -webkit-box-shadow: 0.5rem 2rem 2rem rgba(0, 0, 0, 0.05); box-shadow: 0.5rem 2rem 2rem rgba(0, 0, 0, 0.05); background-color: #fff; }

.section1 > * { clear: none; float: left; width: calc(33.33333% - 0px); margin-right: 0px; }

.section1 > *:nth-child(n + 4) { margin-top: 0px; }

.section1 > *:nth-child(2n + 1) { clear: none; }

.section1 > *:nth-child(3n + 1) { clear: both; }

.section1 .title { font-size: 2.4rem; margin-bottom: 1rem; font-weight: 400; color: #333; }

.section1 .form-textbox { margin-top: 1rem; }

.section1 .txt { display: block; margin-top: 1.5rem; color: #999; }

.section1 .group { padding: 0 2rem; }

.section1 .desc { display: none; }

.section1 .links { display: block; margin-top: 1.5rem; }

.section1 .links a { display: inline-block; color: #333; vertical-align: middle; }

.section1 .links a::after { display: inline-block; width: 0.1rem; height: 1.3rem; margin: 0 1.5rem; background-color: #ccc; content: ''; vertical-align: middle; }

.section1 .links a:last-child::after { display: none; }

.section1 .links a[href="#faq"]::before { font-size: 1.1rem; display: inline-block; position: relative; margin-top: -0.25rem; width: 1.6rem; height: 1.6rem; margin-right: 0.5rem; border-radius: 100%; background-color: #bbb; font-weight: 700; color: #fff; content: '?'; text-align: center; line-height: 1.5rem; vertical-align: middle; }

.section1 .links a[href="#faq"]::after { display: none; }

.section1 .links a[href="#guide"] { display: block; }

.section1 .btn { height: 5rem; border: 2px solid #656565; line-height: 4.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.7rem; display: inline-block; min-width: 100%; padding: 0 1rem; background-color: #656565; color: #fff; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; margin-top: 1rem; font-weight: 400; }

.section1 .btn:hover, .section1 .btn:focus { background-color: transparent; color: #656565; }

.section1 .btn.btn1 { border-color: #0ea79e; background-color: #0ea79e;}

.section1 .btn.btn1:hover, .section1 .btn.btn1:focus { background-color: #fff; color: #0ea79e; }

.section1 .btn.btn3 { border-color: #284d9e; background-color: #284d9e; }

.section1 .btn.btn3:hover, .section1 .btn.btn3:focus { background-color: #fff; color: #284d9e; }

.section1 .btn.btn4 { border-color: #178dc1; background-color: #178dc1; }

.section1 .btn.btn4:hover, .section1 .btn.btn4:focus { background-color: #fff; color: #178dc1; }

.section1 .btn.btn5 { border-color: #ec6458; background-color: #ec6458; font-size: 1.6rem; height: 5.5rem; line-height:2.5rem;}

.section1 .btn.btn5:hover, .section1 .btn.btn5:focus { background-color: #fff; color: #ec6458; }

.section1 .btn + .links { margin-top: 1.5rem; }

.section1.type1::before { position: absolute; right: 0; top: 0; z-index: 1; width: calc(100% - 33.333%); height: 100%; background-color: #000; content: ''; opacity: 0.7; }

.section1.type1 .desc { display: block; position: absolute; right: 0; bottom: 0; z-index: 2; width: calc(100% - 33.333%); padding: 10.5rem 2rem 4.5rem 44.5rem; background: url("../../images/login/section1.png") no-repeat 6rem bottom; font-size: 1.8rem; font-weight: 400; color: #fff; word-break: keep-all; }

.section2 { position: relative; margin-top: 5rem; padding-bottom: 5rem; }

.section2 .title { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 300; color: #999; }

.section2 .title strong { font-size: 2.4rem; margin-right: 1rem; font-weight: 500; color: #333; }

.section2 .btn_layerpopup { height: 3rem; border: 1px solid #178dc1; line-height: 2.8rem; position: absolute; right: 0; top: 0; padding: 0 2rem; border-radius: 3rem; background-color: #178dc1; color: #fff; -webkit-transition: all 0.2s; transition: all 0.2s; }

.section2 .btn_layerpopup::before { font-size: 1.1rem; display: inline-block; position: relative; margin-top: -0.25rem; width: 1.6rem; height: 1.6rem; margin-right: 0.5rem; border-radius: 100%; background-color: #fff; font-weight: 700; color: #178dc1; content: '?'; text-align: center; line-height: 1.5rem; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }

.section2 .btn_layerpopup:hover, .section2 .btn_layerpopup:focus { background-color: #fff; color: #178dc1; }

.section2 .btn_layerpopup:hover::before, .section2 .btn_layerpopup:focus::before { background-color: #178dc1; color: #fff; }

.section2 .btn_layerpopup2{ height: 3rem; border: 1px solid #0a8c82; line-height: 2.8rem; position: absolute; right: 0; top: 0; padding: 0 2rem; border-radius: 3rem; background-color: #0ba296; color: #fff; -webkit-transition: all 0.2s; transition: all 0.2s;}

.section2 .btn_layerpopup2::before {background: url('/isc/static/images/ico_chetbot.gif') center top no-repeat;content:'';clear: both;font-size: 1.1rem;display: inline-block;position: relative;margin-top: -0.25rem;width: 1.6rem;height: 1.6rem;margin-right: 0.5rem;/* background-color: #fff; */font-weight: 700;color: #178dc1;text-align: center;line-height: 1.5rem;vertical-align: middle;-webkit-transition: all 0.2s;transition: all 0.2s;}

.section2 .btn_layerpopup2:hover, .section2 .btn_layerpopup:focus { background-color: #fff; color: #178dc1; }

.section2 .btn_layerpopup2:hover::before, .section2 .btn_layerpopup:focus::before { background: url('/isc/static/images/ico_chetbot_on.gif') center top no-repeat; color: #fff; }

.section2 .list { display: table; width: calc(100% + 0px); table-layout: fixed; padding: 3rem 4rem; background-color: #fff; table-layout: inherit; }

.section2 .list > * { display: table-cell; padding-right: 0px; vertical-align: top; }

.section2 .list li { white-space: nowrap; letter-spacing: -0.05rem; }

.section2 .list li:last-child::after { display: block; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #ddd; content: ''; }

.section2 .list span { display: block; position: relative; padding: 0 2.5rem; }

.section2 .list .link {background: url(../../images/login/ico_link.gif) no-repeat; background-position:23.5rem .6rem;}

.section2 .list span::before { position: absolute; left: 0; top: 0.6rem; width: 1rem; height: 1rem; border-radius: 100%; background-color: #0ea79e; content: ''; }

.section2 .list span::after { position: absolute; left: 0.5rem; top: 0.6rem; width: 1rem; height: 1rem; border-radius: 100%; background-color: #284d9e; content: ''; }

.section2 .list span:nth-child(n + 2) { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #ddd; }

.section2 .list span:nth-child(n + 2)::before, .section2 .list span:nth-child(n + 2)::after { top: 2.1rem; }

#footer { width: 118rem; max-width: calc(100% - 2rem); margin-left: auto !important; margin-right: auto !important; padding-bottom: 1rem; }

#fnb { position: relative; z-index: 0; margin-bottom: 2rem; line-height: 5rem; }

#fnb::before { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; background-color: #e7e7e7; }

#fnb .btn { height: 5rem; border: 1px solid #0ea79e; line-height: 4.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5rem; display: inline-block; min-width: 16.5rem; padding: 0 3rem; background-color: #0ea79e; color: #fff; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; margin-right: 3rem; vertical-align: top; }

#fnb .btn:hover, #fnb .btn:focus { background-color: transparent; color: #0ea79e; }

#fnb .txt { display: inline-block; vertical-align: top; }

#fnb .txt a { height: 2.2rem; border: 1px solid #178dc1; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.3rem; display: inline-block; min-width: 9.5rem; padding: 0 2rem; background-color: #178dc1; color: #fff; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative; top: -0.2rem; margin-left: 1rem; border-radius: 2.2rem; }

#fnb .txt a:hover, #fnb .txt a:focus { background-color: transparent; color: #178dc1; }

#fnb .txt a::after { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; content: ' '; }

@media (max-width: 1280px) { .section1.type1 .desc { padding: 6rem 2rem 5rem 35rem; background-size: auto 16rem; }
  .section1.type1 .desc br { display: none; } }

@media (max-width: 1120px) { .section2 .list { display: inline-block; width: calc(100% + 0px); }
  .section2 .list > * { clear: none; float: left; width: calc(33.33333% - 0px); margin-right: 0px; }
  .section2 .list > *:nth-child(n + 4) { margin-top: 0px; }
  .section2 .list > *:nth-child(2n + 1) { clear: none; }
  .section2 .list > *:nth-child(3n + 1) { clear: both; }
  .section2 .list li:nth-child(4) { width: 66.666%; }
  .section2 .list li:nth-child(n + 4) { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #ddd; } }

@media (max-width: 680px) { .section1 { display: block; width: 100%; padding: 2rem 0; }
  .section1 > * { display: block; clear: none; float: none; width: 100%; margin-right: 0; }
  .section1 > * + * { margin-top: 1rem; }
  .section1 .title { margin-bottom: 0.5rem; }
  .section1 .txt { min-height: 0; }
  .section1 .group:nth-child(n+2) { margin-top: 2rem; }
  .section1.type1::before, .section1.type1 .desc, .section1.type1 .group.group:nth-child(n+2) { display: none; }
  .section2 { margin-top: 2rem; padding-bottom: 2rem; }
  .section2 .title span { display: block; word-break: keep-all; }
  .section2 .list { display: block; width: 100%; padding: 1rem 2rem 1.5rem; }
  .section2 .list > * { display: block; clear: none; float: none; width: 100%; margin-right: 0; }
  .section2 .list > * + * { margin-top: 0px; }
  .section2 .list li { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 none !important; }
  .section2 .list li:last-child::after { display: none; }
  .section2 .list span { margin: 0 !important; padding: 0.5rem 0 0.5rem 2rem; border: 0 none !important; }
  .section2 .list span::before, .section2 .list span::after { top: 1.15rem; }
  .section2 .list .link {background-position:23.5rem .9rem;}
  #fnb .btn { display: block; margin: 0 -1rem; }
  #fnb .txt { padding: 1.5rem 0 2rem; line-height: 1.2; }
  #fnb .txt a { display: block; width: 12rem; margin: 1.5rem 0 0; } }