@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@charset "utf-8";
/* nanum-gothic-regular - latin_korean */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/nanum-gothic-v17-latin_korean-regular.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic'),
       url('fonts/nanum-gothic-v17-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/nanum-gothic-v17-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/nanum-gothic-v17-latin_korean-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/nanum-gothic-v17-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/nanum-gothic-v17-latin_korean-regular.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
/* nanum-gothic-700 - latin_korean */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/nanum-gothic-v17-latin_korean-700.eot'); /* IE9 Compat Modes */
  src: local('NanumGothic Bold'), local('NanumGothic-Bold'),
       url('fonts/nanum-gothic-v17-latin_korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/nanum-gothic-v17-latin_korean-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/nanum-gothic-v17-latin_korean-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/nanum-gothic-v17-latin_korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/nanum-gothic-v17-latin_korean-700.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
/* nanum-gothic-800 - latin_korean */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/nanum-gothic-v17-latin_korean-800.eot'); /* IE9 Compat Modes */
  src: local('Nanum Gothic ExtraBold'), local('Nanum Gothic-ExtraBold'),
       url('fonts/nanum-gothic-v17-latin_korean-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/nanum-gothic-v17-latin_korean-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/nanum-gothic-v17-latin_korean-800.woff') format('woff'), /* Modern Browsers */
       url('fonts/nanum-gothic-v17-latin_korean-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/nanum-gothic-v17-latin_korean-800.svg#NanumGothic') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: "M Gothic";
    font-family: "맑은 고딕";
    font-family: "돋움";
    src: url('/assets/css/font/NanumGothic.eot');
    src: local('Nanum Gothic'), local('NanumGothic'), url('/assets/css/font/NanumGothic.eot?#iefix') format('embedded-opentype'),
    url('/assets/css/font/NanumGothic.woff') format('woff'),
    url('/assets/css/font/NanumGothic.ttf') format('truetype');
}

/*body {opacity: 0;}*/

body {}

/*상담고정 레이어 */
header {	height:55px;	width:100%;	color: #fff;	font-size:12px;	position:fixed;	top:0px;	left:0px;	background-color:#5a7dc2; z-index:10; border-bottom:1px solid #87a8e0}
header h1 {position:absolute; left:30px; padding:8px 0 5px 10px; transparent:25%; }
.util {position:absolute; top:8px; right:30px; z-index:1000 !important}
.util li{display:inline-block; float:left; width:37px; height:37px; margin-right:5px; padding:8px 7px; background: #fff; border-radius: 20px}
.util li:hover{background: #c7d8fa}

/* 오른쪽 슬라이드 */
/*.menu2 { position:absolute; top:120px; left:-20px; width:22px; height:18px; text-indent:-100%; overflow:hidden; }*/
.menu2 { top:20px; right:20px; width:22px; height:18px; text-indent:-100%; overflow:hidden; }
.menu2 a { display:block; width: 20px; height: 47px;}
.menu2 .on { background:url('../img/common/bl_menu.png') 0 0 no-repeat; }
.menu2 .off { background:url('../img/common/bl_menu.png') 0 0 no-repeat; }

/*
.nav { position:absolute; float:left; top:0; right:-520px; width:520px; background:#465da1; opacity: 0.95; height:100%; z-index: 900 !important}
.nav_list { margin:0 10px; padding:5px 2px 5px 10px;  border-bottom-left-radius:5px; border-bottom-right-radius:5px; }
.nav_list ul { padding:80px 0 0 10px; }
.nav_list li { line-height:1.8em; padding:2px 0 2px 7px; font-size:1.6em; font-weight:400; padding-bottom:20px}
.nav_list li:first-child {  }
.nav_list div > ul > li:first-child { background-image:none; }
.nav_list li a {color:#bed9ff}
.nav_list li a:hover { color:#9fd06f; text-decoration: underline; text-shadow: none;}
*/


/* 관련게시물 */
.table_cover {width:100%; }
.table_cover h2 {margin:30px 0 20px 0; color:#666; font-size:2em; line-height: 0.5em; letter-spacing: -0.1em; font-weight:normal }
.table_cover h2 span{color:#3c62ac; font-weight: 600}

.list_table {width:100% }
.list_table td {font-size:1.2em; padding:2px; line-height:1em}
.list_table td img {padding:5px}
.list_table tr:nth-child(even) { background:#f4f9fd; border-bottom:1px solid #ddd  }
.list_table tr:nth-child(odd) { background:#fff; border-bottom:1px solid #ddd}
.list_table tr:first-child {border-top:1px solid #5d7ebc}
.list_table tr:last-child {border-bottom:1px solid #5d7ebc}

.list_table .subj {width:90px; text-align: left}
.list_table .subj a{color:#333; text-decoration: none; text-shadow: none}
.list_table .subj a:hover {text-decoration: underline;}



.main {
    position:relative;
    display:block;
    width:100%;
    padding:250px 0;
    text-align: center
}
.main span{display:inline-block; text-align: center; color:#fff; font-size:2.5em; line-height: 1.2em; font-weight:400; background: #5a7dc1; padding:0 10px; margin-bottom:5px; opacity: 0.85}
.main span:last-child{}

.w1200 {width:1200px !important};
.mgc{clear:both; text-align:center}
.mgts{margin-top:300px !important}
.mgt0{margin-top:0 !important}
.mgt-30{margin-top:-30px !important}
.mgt30{margin-top:30px !important}
.mgbs{margin-bottom:300px !important}
.mgb0{margin-bottom:0 !important}
.mgl0{margin-bottom:0 !important}
.w250 {width:250px !important}
.w280 {width:280px !important}
.w100 {width:100px !important}

#top {position:relative;}
#top .footer {position:absolute; bottom:50px; display:block; width:100%; text-align: center}

#section1 {width:100%; background:#5a7dc1; padding:20px}
#section1 .text { width:max-content; margin:0 auto; padding:30px 0 10px 0}
#section1 .text p { font-size:1.4em; text-align:justify; color:#d5e3fc; line-height:1.4em; font-weight: 200}
#section1 .text span {color:#fff; font-weight:400}
#section1 section p{text-align: center}

#section2 { background:url('../img/bg/02.jpg') no-repeat bottom; background-size: cover; padding:20px}

#section3 {width:100%; background:#5a7dc1; padding:20px}
#section3 .text { width:100%; margin:0 auto}
#section3 .text p { font-size:1.4em; text-align:justify; color:#d5e3fc; line-height:1.4em; font-weight: 200}
#section3 .text p:last-child {margin-top:30px}
#section3 .text span {color:#fff; font-weight:400}
#section3 section p{text-align: center}


#section4 { background:url('../img/bg/02.jpg') no-repeat bottom; background-size: cover; padding:20px}

#section5 {width:100%; background:#5a7dc1; padding:20px}
#section5 .text { width:100%; margin:0 auto; }
#section5 .text p { font-size:1.4em; text-align:justify; color:#d5e3fc; line-height:1.4em; font-weight: 200; margin-top:30px}
#section5 .text p:first-child {margin-top:0}
#section5 .text span {color:#fff; font-weight:400}
#section5 nav {width:100%; color:#fff; text-align:left; line-height:1.2em}
#section5 .bxslider p{text-align: center}

#section6 {width:100%; background:url('../img/bg/06.jpg') no-repeat bottom left; background-size: cover; resize: both;}
#section6 .wrap {display:block; width:100%; min-height:500px; padding:5% 0 15% 0; margin:0 auto; text-align: right}
#section6 .text { width:100%; margin:0 auto; padding:0 20px}
#section6 .text p {color:#333; font-size:1.4em; text-align:justify; line-height:1.4em; text-align: 2 2 2 #fff}
#section6 .text p:last-child {margin-top:30px}
#section6 .text span {font-weight:600}

#section7 {width:100%; background:url('../img/bg/07.jpg') no-repeat bottom; background-size: cover}
#section7 .wrap {width:100%; padding:10% 0; text-align:center}
#section7 .text { width:100%; margin:0 auto; padding:30px 20px 10px 20px}
#section7 .text p { font-size:1.4em; text-align:justify; color:#fff; background:#333; opacity: 0.7; line-height:1.4em; font-weight: 200; margin-top:30px}
#section7 .text p:first-child {margin-top:0}
#section7 .text span {font-weight:400}

#section8 {width:100%; background:url('../img/bg/08.jpg') no-repeat bottom; background-size: cover; padding:20px}

#section9 {width:100%; min-height:500px; background:url('../img/bg/09.jpg') no-repeat center; background-size: cover; padding:20px 0}
#section9 .text { width:100%; text-align: justify; padding:30px 20px 10px 20px}
#section9 .text p { font-size:1.4em; text-align:justify; color:#000; line-height:1.4em; font-weight: 200; margin-top:30px; background: #fff; opacity: 0.6; padding:10px}
#section9 .text p:first-child {margin-top:0}
#section9 .text span {font-weight:400}
#section9 .tag {position:absolute; right:0; bottom:25%; background:#24281a; padding-top:15px; text-align: center; color:#fff; width:280px; height:50px; font-size:20px}

#section10 {width:100%; position:relative; background-size: cover;}
#section10 .school {display:block; width:100%; min-height:500px}
#section10 .text { width:100%; margin:0 auto; padding:100px 20px 10px 20px; position:absolute; bottom:10px; }
#section10 .text p { font-size:1.4em; text-align:justify; color:#fff; line-height:1.4em; font-weight: 200; background: #804c38; opacity: 0.8}
#section10 .text p:last-child {margin-top:30px}
#section10 .text span {font-weight:400}


#section11 {width:100%; background:url('../img/bg/dev.jpg') no-repeat bottom; background-size: cover; padding:20px}
#section11 .wrap {width:100%; margin:100px auto 0 auto}
/*#section11 h2{display:block; font-size:40px;  font-weight:400; color:#3761a0; margin-bottom:20px}
#section11 h2 span {color:#666}
#section11 h2 .sub {font-size:30px}*/
#section11 h2 {margin:30px 0 20px 0; color:#3761a0; font-size:2em; line-height: 0.5em; letter-spacing: -0.1em; font-weight:normal }
#section11 h2 span{color:#666 !inportant; font-weight: 600}
#section11 section p{text-align: center}

#section12 {width:100%; background:url('../img/bg/dev.jpg') no-repeat bottom; background-size: cover; padding:20px}
#section12 .wrap {width:100%;}
#section12 section p{text-align: center}

#section13 {width:100%; background:url('../img/bg/02.jpg') no-repeat bottom; background-size: cover; padding:20px}
#section13 .wrap { min-width:1280px}

#section14 {width:100%; background:#5a7dc1; padding:20px}
#section14 .text { width:100%; margin:0 auto; padding:30px 0 10px 0}
#section14 .text p { font-size:1.4em; text-align:justify; color:#d5e3fc; line-height:1.4em; font-weight: 200}
#section14 .text p:last-child {margin-top:30px}
#section14 .text span {color:#fff; font-weight:400}
#section14 section p{text-align: center}
#section14 h2, #section14 h2 span {color:#fff}

#section15 {width:100%; background:url('../img/bg/02.jpg') no-repeat bottom; background-size: cover; padding:20px}
#section15 .text { width:100%; margin:0 auto; padding:30px 0 10px 0}
#section15 .text p { font-size:1.4em; text-align:justify; color:#333; line-height:1.4em; font-weight: 200}
#section15 .text p:last-child {margin-top:30px}
#section15 .text span {color:#5a7dc1; font-weight:400}
#section15 nav {width:100%; color:#fff; text-align:left; line-height:1.2em}
#section15 .bxslider p {text-align: center}

.pageN {display:block; width:160px !important; height:20px !important; background: #ff6600; color:#fff; text-align:center; font-size:14px}

@keyframes slideright {
  0% {opacity:0; margin-right:50px}
  20% {opacity:1; margin-right:0px}
  80% {opacity:0.1; margin-right:0px}
  100% {opacity:1; margin-right:0px}
}

@keyframes slideup {
  0% {opacity:0; margin-top:50px}
  20% {opacity:1; margin-top:0px}
  80% {opacity:0.1; margin-top:0px}
  100% {opacity:1; margin-top:0px}
}

.right-text {}
.right-text .line1{animation:slideright 5s linear; animation-fill-mode : both}
.right-text .line2{animation:slideright 6s linear; animation-fill-mode : both}
.right-text .line3{animation:slideright 7s linear; animation-fill-mode : both}
.right-text .line4{animation:slideright 8s linear; animation-fill-mode : both}
.right-text .line5{animation:slideright 9s linear; animation-fill-mode : both}
.right-text .line6{animation:slideright 10s linear; animation-fill-mode : both}
.right-text .line7{animation:slideright 11s linear; animation-fill-mode : both}
.right-text .line8{animation:slideright 12s linear; animation-fill-mode : both}
.right-text .line9{animation:slideright 13s linear; animation-fill-mode : both}
.right-text .line10{animation:slideright 14s linear; animation-fill-mode : both}
.right-text .line11{animation:slideright 15s linear; animation-fill-mode : both}

.up-text {}
.up-text .line1{animation:slideup 5s linear; animation-fill-mode : both}
.up-text .line2{animation:slideup 6s linear; animation-fill-mode : both}
.up-text .line3{animation:slideup 7s linear; animation-fill-mode : both}
.up-text .line4{animation:slideup 8s linear; animation-fill-mode : both}
.up-text .line5{animation:slideup 9s linear; animation-fill-mode : both}
.up-text .line6{animation:slideup 10s linear; animation-fill-mode : both}
.up-text .line7{animation:slideup 11s linear; animation-fill-mode : both}
.up-text .line8{animation:slideup 12s linear; animation-fill-mode : both}