@charset "utf-8";

/* ie9 업그레이드 안내창 */
.lowIE-update {position:fixed;top:0;left:0;z-index:7000;width:100%;height:100%;}
.lowIE-update .update-cont {position:relative;margin:10% auto 0;width:418px;height:148px;border:1px solid #000;background:#fcf9bc;color:#000;padding:30px 50px 30px 20px;text-align:center;z-index:7100}
.lowIE-update .update-cont p {padding-left:50px;line-height:1.2;text-align:left;}
.lowIE-update .update-cont .tit {padding-bottom:5px; font-size:14px; }
.lowIE-update .update-cont .txt {margin-bottom:35px; font-size:14px; }
.lowIE-update .update-cont .btn-upgrade {color:#000;display:block;}
.lowIE-update .update-cont .btn-upgrade .atxt {border-bottom:2px solid #807638}
.lowIE-update .update-cont .btn-upgrade span.ico {display:inline-block;*display:inline;*zoom:1;width:15px;height:12px;vertical-align:middle;background:url(../_Img/ico_uparr.gif) no-repeat 0 0;padding-left:9px;}
.lowIE-update .update-cont .chk-uclose {display:block;text-align:right;margin-top:15px;}
.lowIE-update button {position:absolute;bottom:0;right:0;width:40px;height:40px;  border:0;}

.div-abs {position:absolute;}
.div-wrap {position:relative;width:100%;text-align:center;margin:0 auto 0 auto; }
.div-cont {position:relative;text-align:left;margin:0 auto 0 auto;}
.div-cont:after {clear:both;content:"";display:block;}
.limit {max-width:1100px; margin:0 auto; -webkit-transition:all 0.3s;transition: all 0.3s;}
.limit:after {clear:both;content:"";display:block;}
header{display:block !important;position:fixed !important; width:100% !important;z-index:99999;box-shadow:0 3px 3px rgba(0, 0, 0, .1);background:#fff;}
.header { height:68px; width:100%; max-width:1200px; position:relative;background:#fff; margin:0 auto; }
#logo { display:block; position:absolute; left:60px; top:10px; height:48px; z-index:1000; }
#logo img { width:212px; height:48px; }
#header .menu { display:block; position:absolute; top:19px; right:60px;}
#header .menu a { font-size:28px; line-height:30px; }
@media only screen and (min-width:1000px) and (max-width:1400px){
	#logo {left:20px;transition:left .3s ease}
	#header .menu {right:20px;transition:right .3s ease}
}

@media only screen and (max-width:999px) {
	#logo{left:10px;transition:left .3s ease}
	#header .menu {right:10px;transition:right .3s ease}
}

@media only screen and (max-width:768px) {
	header {position:relative !important;}
}

/* top menu */
.topmenu {position:relative; display:inline-block; margin:0 auto; padding-left:10%; }
.topmenu a {text-decoration:none;}
.topmenu > li {float:left; width:auto; text-align:center; position:relative; display:block; padding:0 36px; line-height:100%; transition:padding .3s ease; }
.topmenu > li > a:hover, .topmenu > li.active > a { color:#0a5bbc; }

/* .topmenu > li > a {display:block; font-size:0.9375rem; line-height:30px; color:#000; padding:20px 0px 18px; text-align:center; font-weight:600; font-family:"WF Sans"; } */
.topmenu > li > a {display:block; font-size:1.0625rem; line-height:30px; color:#3a3a3a; padding:20px 0px 18px; text-align:center; font-weight:400; font-family:"WF Godo"; }
.topmenu > li:hover > a { color:#0a5bbc; font-weight:400;}
.nav-depth { position:absolute; overflow:hidden; z-index:1001; height:0; transition:height 0.5s; }
.nav-depth ul { } 

.nav-depth li { float:left; padding:15px 15px; width:auto; text-align:center; line-height:20px; position:relative; display:block; font-size:0.875rem; }
.nav-depth li a { color:#fff; }
.nav-depth li a:hover {text-decoration:underline; }
.bg-nav-depth {position:absolute; width:100%; left:0; top:68px; background-color:rgba(0, 0, 0, .55); z-index:100; height:0; overflow:hidden; transition:height 0.5s;}
#arrow { display:block; position:absolute; bottom:0px; height:2px; border-style:solid; border-width:0 5px 5px 5px; border-color:transparent transparent #303030 transparent; padding:0; line-height:0; z-index:1000;}


@media only screen and (min-width:1000px) and (max-width:1200px){
	.topmenu > li { padding: 0 30px; } 
}

@media only screen and (max-width:999px) {
	.topmenu {display:none;}
	#arrow {display:none;}
}
@media only screen and (min-width: 1700px){
	.topmenu {font-size:100%;}
}

/* ebook */
.ebook-wrap {position:absolute; display:block; top:17px; right:110px; padding:2px 12px; background:#ffd648; transition: right .3s ease;}
.ebook-wrap a {display:block; font-size:14px; line-height:30px;}
.ebook-wrap a span.fa { color:#464646;}
.ebook-wrap a span.txt {display: inline-block; color: #333; padding: 0 0 0 4px; text-transform:uppercase; font-family: 'Nanum Gothic','나눔고딕','Malgun Gothic','맑은 고딕',"돋움",Dotum,Verdana,Arial,helvetica,clean,sans-serif;}
@media only screen and (min-width:1000px) and (max-width:1400px){
	.ebook-wrap {right:70px;}
}

@media only screen and (max-width:999px) {
	.ebook-wrap {display:none;}
}

/* mobile menu navigation */
#menu {display:block; position:fixed; top:0; width:260px; height:100%; background:#fff; overflow-y:auto; z-index:100000; border-left:1px solid #292929; }
#menu .inner {position:relative; width:100%;}
#menu .inner .level-info {padding:30px 0px; text-align:center;}
#menu .inner .level-info .pic img {display:block; margin:0 auto; width:60px;} 
#menu .nav-menu {text-align:center;}
#menu .nav-menu h2 {position:relative; margin-bottom:11px; font-family:"WF Godo"; color:#222; font-size:16px; font-weight:700; line-height:20px;}
#menu .nav-menu h2:after {content:" "; position:absolute; top:10px; left:60px; right:60px; height:1px; background:#444;}
#menu .nav-menu h2 span {position:relative; display:inline-block; vertical-align:top; background:#fff; padding:0 8px; z-index:2;}
#menu .nav-menu ul {margin-bottom:30px;}
#menu .nav-menu ul li {color:#444; font-size:14px; line-height:33px;}
#menu .nav-menu ul li a {display:block; color:#454545; text-decoration:none; font-weight:normal;}
#menu .nav-menu ul li.active a {color:#0079c2; font-weight:700;}
#menu .nav-menu ul li a:hover {color:#0079c2; font-weight:700;}
#menu .nav-menu ul li small {font-size:13px; font-weight:300;}
#menu .sns {padding:10px 0 30px; text-align:center;}
#menu .sns a {margin:0 9px;}
#menu .logout {padding:0 30px 20px 0; text-align:right;}
#menu .logout a {color:#999; margin-left:18px;}
#menu .contact {padding:0 0 30px; text-align:center;}
#menu .contact a {display:inline-block; font-size:14px; font-weight:500; line-height:1.2em; color:#ffb930; padding:8px 34px; border:1px solid #767676; background:#545454;}
#menu .close {position:absolute; top:24px; right:21px; width:20px; height:20px; background:url("/img/menu_close.png") 50% 50% no-repeat; background-size:100% 100%; font-size:0; line-height:0; text-indent:-9999em;}
#menu-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0; z-index:1000;}
html.open-menu #menu-overlay {display:block;}

/* video player */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* footer */
footer {background-color:#222328; font-family: 'Nanum Gothic','나눔고딕','Malgun Gothic','맑은 고딕',"돋움",Dotum,Verdana,Arial,helvetica,clean,sans-serif; font-weight:700;}
footer div.container {width:100%;max-width:1100px;padding-left:15px;padding-right:15px;margin:0 auto;}
footer .footer-top {}
.footer-top ul {padding-top:10px;}
.footer-top ul:after {clear:both;content:"";display:block;}
.footer-top ul li {position:relative;}
.footer-top ul li:before {position:absolute; content:""; width:1px; height:13px; background:#565866; top:15px; right:0;}
.footer-top ul li:last-child:before {width:0px;height:0px;}
.footer-top ul li a {display:block; padding-top:10px; padding-bottom:10px; padding-right:20px; padding-left:20px; font-size:13px; color:#a2a5b0; text-decoration:none;}
.footer-top ul li:first-child a {padding-left:0px;}
.footer-top ul li:last-child a{color:#00c25b;}
.footer .info {padding-top:0px;padding-bottom:15px;position:relative;width:100%;height:100%:}
footer .footer {position:relative;}
footer address {display:block; line-height:18px; font-size:12px; color:#a2a5b0; font-style:normal; text-align:left; margin: 5px 0 10px 0;}
footer address span { padding-right:5px;}
footer .copyright {display:block; color: #5f6272; font-size: 10px; clear: both; text-align:left;}
footer .logo {position:absolute;display:block;right:15px; top:-26px; background:url('../img/logow.png') no-repeat; width:70px; height:80px; background-size:70px 80px; opacity:0.3;}

@media only screen and (max-width:768px) {
	.footer-top ul {padding-top:0px;}
	.footer-top ul li {width:50%;}
	.footer-top ul li:before {content:none;}
	.footer-top ul li:first-child a {padding-left:20px;}
	.footer-top ul li:nth-child(2n-1):before {position:absolute; content:""; width:1px; height:13px; background:#565866; top:15px; right:0;}
	.footer .info {padding-top:20px; padding-bottom:20px;}
	footer address {text-align:center;}
	footer .copyright {text-align:center;}
	footer .logo {display:none;}
}

/* sub section-top */
.section-top {position:relative; width:100%; height:240px; overflow:hidden; background:#eaeaea;}
.section-top-div {position:relative; width:100%; height:100%:}
.section-top-img {width:100%; height:240px; background-image:url('../img/sub-top.jpg'); background-repeat:no-repeat; background-size:100% 100%;}

@media only screen and (min-width:1000px) {
	.section-top-img {width:100%; height:300px !important;}
}

@media only screen and (max-width:999px) {
	.section-top {height:200px;}
	.section-top-div img {width:1000px; height:200px !important;}
}

@media only screen and (max-width:768px) {
	.section-top {height:120px;}
	.section-top-div img {width:100%; height:140px !important;}
}

/* sub section-nav */
#cont-nav {display:block;}
#m-cont-nav{display:none;}
.section-nav {position:relative;width:100%; height:50px; background:#031f41;}
.section-nav-inner {text-align:left;}
.section-nav-inner a, .section-nav-inner dl {display:inline-block;}
.section-nav-inner a.home {position:relative; width:50px; height:50px;transition:all 0.8s, color 0.5s 0.5s; display:inline-block;}
.section-nav-inner a.home:before {content:""; position:absolute; top:0; left:0; width:1px; height:100%; background: url('../img/navi_ptn.png') repeat-y left top;}
.section-nav-inner a.home:after {content:""; position:absolute; top:0; right:0; width:1px; height:100%; background: url('../img/navi_ptn.png') repeat-y right top; }
.section-nav-inner a.home > span {display:block; padding:15px 15px; line-height:20px; }
.section-nav-inner a.home img {vertical-align:top;}
.section-nav-inner .cont-nav-one, .section-nav-inner .cont-nav-two {position:relative; margin-left:-4px; width:190px; height:50px; vertical-align:top;cursor:pointer; transition:all 0.8s, color 0.5s 0.5s;}
.section-nav-inner .cont-nav-one a, .section-nav-inner .cont-nav-two a {text-decoration:none; font-size:14px; padding-top:15px; padding-bottom:15px; line-height:20px; text-indent:15px;}
.section-nav-inner a.home:hover, .section-nav-inner .cont-nav-one:hover, .section-nav-inner .cont-nav-two:hover, .section-nav-inner dl.active {box-shadow:0 50px 0 0 rgba(10,91,188, 0.4) inset;}
.section-nav-inner .txt {color:#eaeaea; }
.section-nav-inner .icon {color:#eaeaea; float:right;margin-right:18px; line-height:20px; font-size:20px;}
.section-nav-inner .cont-nav-one:after, .section-nav-inner .cont-nav-two:after {content:""; position:absolute; top:0; right:0; width:1px; height:100%; background: url('../img/navi_ptn.png') repeat-y right top; }
.section-nav-inner dt a {display:block;}
.section-nav-inner dl dd {position:absolute; top:50px; left:0; width:100%; overflow:hidden; z-index:10000; -webkit-transition:all 0.3s;transition: all 0.3s;}
.section-nav-inner dl dd li.sl-list {background:#666666; color:#eaeaea;}
.section-nav-inner dl dd li.sl-list a {color:#eaeaea; display:block; padding-top:10px; padding-bottom:10px; font-size:13px;}
.section-nav-inner dl dd li.sl-list span.icon {display:none;}
.section-nav-inner dl dd li.sl-list:hover a, .section-nav-inner dl dd li.sl-list.active a {background:#073d7f;}
.section-nav-inner dl dd li.sl-list:hover span.icon, .section-nav-inner dl dd li.sl-list.active span.icon {display:block;}
#m-cont-nav  .cont-nav-two {margin-left:0px; width:100%;}
@media only screen and (max-width:450px) {
	#cont-nav {display:none;}
	#m-cont-nav {display:block;}
}


/* content */
.content {position:relative; padding-left:15px; padding-right:15px;}
.content-title {position:relative;}
.content-title h2 {text-align:left;}
.content-title:after {content:'';position:absolute; bottom:0; left:0; width:100%; height:2px; background:#e9e9e9;}
.content-title h2 .kr { display: block;font-family: 'WF Godo',sans-serif; font-size: 2.8125rem; line-height: 100%; letter-spacing: -2px; color: #111; padding: 46px 0 15px 0; font-weight: 100;}
.content-title h2 .en { display: block;font-family: 'WF Spoqa Han Sans',sans-serif;line-height: 100%; font-size: 1.125rem; color: #d0d0d0; font-weight:400; padding: 0 0 38px 0; letter-spacing:-0.2px;}
.cont-item {position:relative; width:100%; height:auto; margin-top:80px; padding-top:80px; text-align:left;}
.cont-item.first {padding-top:0px; margin-top:50px; min-height:300px;}

/* login */
.lockscreen {
  background: #d2d6de;
  font-family: "Spoqa Han Sans", "WF Spoqa Han Sans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.lockscreen-logo {
  font-size: 30px;
  text-align: center;
  font-weight: 400;
  margin-bottom:20px;
  font-family: 'WF Godo';
}

.lockscreen-wrapper {
  max-width: 400px;
  margin: 0 auto;
  margin-top: 10%;
}

.lockscreen .lockscreen-name {
  text-align: center;
  font-weight: 600;
}

.lockscreen-item {
  border-radius: 4px;
  padding: 0;
  background: #fff;
  position: relative;
  margin: 10px auto 50px auto;
  width: 290px;
}
.lockscreen-image {
  border-radius: 50%;
  position: absolute;
  left: -10px;
  top: -25px;
  background: #fff;
  padding: 5px;
  z-index: 10;
}
.lockscreen-image > img {
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

.lockscreen-credentials {
  margin-left: 70px;
}
.lockscreen-credentials .form-control {
  border: 0;
}
.lockscreen-credentials .btn {
  background-color: #fff;
  border: 0;
  padding: 0 10px;
}
.lockscreen-footer {
  font-size:11px;
  color:#595959;
  margin-top:-45px;
  padding-left:130px;
}

/* footer admin funck */

@-webkit-keyframes 
badbounce {  0%, 100% {
 -webkit-transform: translateY(0px);
}
 10% {
 -webkit-transform: translateY(6px);
}
 30% {
 -webkit-transform: translateY(-4px);
}
 70% {
 -webkit-transform: translateY(3px);
}
 90% {
 -webkit-transform: translateY(-2px);
}
}
@-moz-keyframes 
badbounce {  0%, 100% {
 -moz-transform: translateY(0px);
}
 10% {
 -moz-transform: translateY(6px);
}
 30% {
 -moz-transform: translateY(-4px);
}
 70% {
 -moz-transform: translateY(3px);
}
 90% {
 -moz-transform: translateY(-2px);
}
}
@keyframes 
badbounce {  0%, 100% {
 -webkit-transform: translateY(0px);
 -moz-transform: translateY(0px);
 -ms-transform: translateY(0px);
 -o-transform: translateY(0px);
 transform: translateY(0px);
}
 10% {
 -webkit-transform: translateY(6px);
 -moz-transform: translateY(6px);
 -ms-transform: translateY(6px);
 -o-transform: translateY(6px);
 transform: translateY(6px);
}
 30% {
 -webkit-transform: translateY(-4px);
 -moz-transform: translateY(-4px);
 -ms-transform: translateY(-4px);
 -o-transform: translateY(-4px);
 transform: translateY(-4px);
}
 70% {
 -webkit-transform: translateY(3px);
 -moz-transform: translateY(3px);
 -ms-transform: translateY(3px);
 -o-transform: translateY(3px);
 transform: translateY(3px);
}
 90% {
 -webkit-transform: translateY(-2px);
 -moz-transform: translateY(-2px);
 -ms-transform: translateY(-2px);
 -o-transform: translateY(-2px);
 transform: translateY(-2px);
}
}

.ss_animate {
  -webkit-animation: badbounce 1s linear;
  -moz-animation: badbounce 1s linear;
  animation: badbounce 1s linear;
}

#ss_menu {
  bottom: 50px;
  width: 60px;
  height: 60px;
  color: #fff;
  position: fixed;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  right: 30px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  z-index:1000;
}

#ss_menu > .menu {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.23), 0 2px 10px 0 rgba(0, 0, 0, 0.16);
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

#ss_menu > .menu .share {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}

#ss_menu > .menu .share .timer {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	opacity: 1;
	font-size:1rem;
	width:100%;
	height:100%;
	line-height:60px;
}
#ss_menu > .menu .share .txt {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  margin-top: -6px;
  left: 12px;
  opacity: 1;
}

#ss_menu > .menu .share .bar {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  opacity:0;
  width: 24px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -1.5px;
  left: 18px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}

#ss_menu > .menu .share .bar:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  content: '';
  width: 24px;
  height: 3px;
  background: #fff;
  position: absolute;
  left: 0px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

#ss_menu > .menu .share.close .timer { opacity: 0; }

#ss_menu > .menu .share.close .bar {
  opacity:1;
  top: 50%;
  margin-top: -1.5px;
  left: 50%;
  margin-left: -12px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  transform: rotate(405deg);
}

#ss_menu > .menu .share.close .bar:before {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(-450deg);
  -moz-transform: rotate(-450deg);
  -ms-transform: rotate(-450deg);
  -o-transform: rotate(-450deg);
  transform: rotate(-450deg);
}

#ss_menu > .menu.ss_active {
  background: #00796B;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}

#ss_menu > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 60px;
  height: 60px;
  font-size: 24px;
  text-align: center;
  background: #2a3f54;
  border-radius: 50%;
  display: table;
}

#ss_menu > div.not {
	color:#9b9b9b;
}

#ss_menu > div i {
  display: table-cell;
  vertical-align: middle;
}

#ss_menu > div:hover {
  background: #009688;
  cursor: pointer;
}

#ss_menu > div.not:hover {
	background:#2a3f54;
	cursor:default;
}

#ss_menu div:nth-child(1) {
  top: 0px;
  left: -160px;
}

#ss_menu div:nth-child(2) {
  top: -80.0px;
  left: -138.56406px;
}

#ss_menu div:nth-child(3) {
  top: -138.56406px;
  left: -80.0px;
}

#ss_menu div:nth-child(4) {
  top: -160px;
  left: 0.0px;
}