@charset "UTF-8";
@import url('/sites/seoil/style/css/w_reset.css');

/* reset */
html {
  overflow-y:scroll;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary {
  display:block;
}
audio, canvas, video {
  display:inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
audio, canvas, img, video {
  vertical-align:middle;
}
body {
  line-height:1;
}
ol, ul {
  list-style:none;
}
blockquote, q {
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:"";
  content:none;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
img, fieldset {
  border:0;
}
input, select, textarea {
  line-height:1.2;
  vertical-align:middle;
}
body, table, th, td, input,
textarea, button, select {
  font-family:"돋움", Dotum, Arial, sans-serif;
  font-size:12px;
  color:#666;
}
button, select {
  text-transform:none;
}
button, input {
  line-height:normal;
}
textarea {
  resize:vertical;
  overflow:auto;
}
address, caption, cite, code,
dfn, em, var {
  font-style:normal;
  font-weight:normal;
}
label {
  cursor:pointer;
}
/* For Screen Reader */
legend {
  display:none;
  visibility:hidden;
}
/* For Screen Reader */
caption {
  display:none;
  visibility:hidden;
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #ccc;
  margin:1em 0;
  padding:0;
}
a {
  color:#666;
  text-decoration:none;
}
a:active, a:hover, a:focus {
  text-decoration:none;
}
a:hover {
  color:#333;
}
button{
  margin:0px;
  padding:0px;
  cursor:pointer;
  border:0px;
  background:none;
}

/** style */
body{font-family: 'SebangGothic';}
/*.introWrap{background: url('/sites/seoil/intro/images/bg.jpg') center top / cover no-repeat;} */
.introWrap{background: url('/sites/seoil/intro/images/bg50.jpg') center top / cover no-repeat;}
.introWrap .top-logo{display:inline-block; margin-top:50px;}
.introWrap .inner{max-width: 1700px;margin:0 auto;position:relative;height: 100vh;}

.introWrap .content{position: absolute;bottom: 0;width: 100%;padding:0 20px 150px;}
.introWrap .content .cont-left{float: left;}
.introWrap .content .cont-left .slogan .slogan-txt{font-size:60px;color:#fff;margin: 35px 0 40px;}
.introWrap .content .cont-left .slogan .slogan-txt span{display:block;font-weight: 700;font-style: italic;line-height: 1.2;}

.introWrap .cont-right{float: right;max-width:940px;}

.introWrap .c-top{display: grid;grid-template-columns: 370px 1fr 180px;gap:10px;margin-bottom:10px;}
.introWrap .c-top .slider-popup{position: relative; overflow: hidden;border-radius:10px;}
.introWrap .c-top .slider-popup ul li{display:inline-block;}
.introWrap .c-top .slider-popup ul li a img{width:100%;}
.introWrap .c-top .slider-popup .dots{position: absolute; bottom:0; width:100%; background-color:#000; text-align:center; padding:10px 0;}
.introWrap .c-top .slider-popup .dots button{width:12px; height:12px; display:inline-block; background-color: #818181; margin:2px; border-radius:100%; text-indent:-9999px;}
.introWrap .c-top .slider-popup .dots .slick-active button{background-color:#0f90f3;}
.introWrap .c-top .center-banner{background-color:#e67200; border-radius:10px; padding:30px; color:#fff;}
.introWrap .c-top .center-banner strong{font-size:30px;display:block;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.5);letter-spacing: -1px;}
.introWrap .c-top .center-banner ul{margin:0 0 15px 0;}
.introWrap .c-top .center-banner ul li{font-size:16px;margin:5px 0;font-family: 'Noto DemiLight';}
.introWrap .c-top .center-banner .ipsi-link{display: grid; grid-template-columns: 1fr 1fr; gap:5px;}
.introWrap .c-top .r-banner{background-color:#03b2bb; border-radius:10px;}
.introWrap .c-top .r-banner ul{padding:20px 20px;display: grid;grid-template-rows: 1fr 1fr;height: 100%;vertical-align: middle;box-sizing: border-box;}
.introWrap .c-top .r-banner ul li{display: table; background: url(/sites/seoil/intro/images/r-banner-arr.png) right center no-repeat;}
.introWrap .c-top .r-banner ul li + li{border-top:1px solid rgba(255,255,255,.5)}
.introWrap .c-top .r-banner ul li a{font-size:22px;color:#fff;height: 100%;vertical-align: middle;display: table-cell;line-height: 1.3;}
.introWrap .c-top .r-banner ul li a i{display:block;font-style: normal;}

.introWrap .c-bottom ul{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap:5px;}
.introWrap .c-bottom ul li{display: inline-block; background-color: #3949ac; text-align: center; border-radius: 10px; padding: 30px 0;}
.introWrap .c-bottom ul li.infoSystem{background-color:#286de7;}
.introWrap .c-bottom ul li.infoNotice{background-color:#e67200;}
.introWrap .c-bottom ul li a{color:#fff; line-height:1.4;}
.introWrap .c-bottom ul li a p{margin-bottom:20px;}
.introWrap .c-bottom ul li a span{font-size:17px;}
.introWrap .c-bottom ul li:hover{background-color:#506dcc;}

.uni-link {display: flex; gap: 20px; flex-wrap: wrap;}
.uni-link a {
    position: relative; display: grid; align-content: center; align-items: center; justify-content: center; text-align:center; 
    width:160px; height:160px; border-radius:100%; color:#fff; font-size:20px; padding-bottom: 30px;
}
.uni-link a:after {
    position: absolute; left: calc(50% - 5px); bottom: 45px;
    content:''; display:block; width:10px; height:16px; background: url(/sites/seoil/intro/images/uni-link-arr.png) no-repeat; 
}
.uni-link a {background-color:rgba(6,47,135,.9);}
.uni-link a + a {background-color:rgba(9,113,206,.9);}
.uni-link a.btn50th {background-color:rgba(255,192,0,.9); color: #333; font-weight: bold;}
.uni-link a.btn50th:after {background: url(/sites/seoil/intro/images/uni-link-arr-black.png) no-repeat;}

.footer{position: absolute;bottom: -5px;width: 100%;background: rgba(0,0,0,.5);height: 50px;}
.footer ul{height:30px; text-align:center;}
.footer ul li{display:inline-block;color:#fff;font-size:15px;line-height:50px;margin: 0 15px;}

@media screen and (max-width: 1400px) {
  .introWrap .inner{height:auto;}
  .introWrap .top-logo{margin: 30px 0 50px 20px;}
  .introWrap .top-logo img{width:200px;} 
  .introWrap .content{position:relative;padding: 0 20px 50px;}
  .introWrap .uni-link{position: absolute;right: 0;bottom: 30px;}
  .introWrap .content .cont-left,
  .introWrap .content .cont-right{float:inherit;width:100%;}
  .introWrap .content .cont-left{margin-bottom:120px; position:relative;}
  .introWrap .content .cont-right{max-width: 100%;} 
  .footer{position: relative;}
  .footer{position: relative;height: auto;}
  .footer ul{height: auto; padding:20px 10px; line-height: 1;}
  .footer ul li{line-height: 1.4; word-break: keep-all; margin:0 auto; font-size:14px; font-family: 'Noto Light';}
}

@media screen and (max-width: 1000px) {
  .introWrap{background: url('/sites/seoil/intro/images/bgm.jpg') center top / cover no-repeat;}
  .introWrap .content .cont-left .slogan .seoil-on img{width:220px;}
  .introWrap .content .cont-left .slogan .slogan-txt{font-size:45px;}
  .introWrap .uni-link a{width: 130px;height: 130px;font-size: 17px;}
  .introWrap .uni-link a:after {bottom: 35px;}
  .introWrap .c-top{display:block;overflow: hidden;}
  .introWrap .c-top .slider-popup{float: left;width: 50%;}
  .introWrap .c-top .center-banner{float: right;width: 48%;padding: 20px;}
  .introWrap .c-top .center-banner strong{line-height: 1.4;font-size: 25px;}
  .introWrap .c-top .center-banner ul li{font-size:15px; letter-spacing: -1px;}
  .introWrap .c-top .r-banner{float: left;width: 100%;margin-top: 15px;}
  .introWrap .c-top .r-banner ul{grid-template-columns: 1fr 1fr; grid-template-rows: 1fr;}
  .introWrap .c-top .r-banner ul li{background-position: 90% center;}
  .introWrap .c-top .r-banner ul li + li{border-top:none;}
  .introWrap .c-top .r-banner ul li a i{display:inline-block; margin-left:5px;}
  .introWrap .c-top .r-banner ul li a{font-size:16px;}
}

@media screen and (max-width: 767px) {
  .introWrap .uni-link{position: relative; gap: 10px;}
  .introWrap .c-top .slider-popup{width:100%; margin-bottom:20px;}
  .introWrap .c-top .center-banner{width:100%;}
  .introWrap .c-bottom ul{grid-template-columns:1fr 1fr;}
  .footer ul li span{display:block;}
}

/* font */
@media screen and (-webkit-min-device-pixel-ratio:0){
  html,body{
	font-family: noto, sans-serif;
  }
}
html,
body,
input,
mark,
textarea,
button,
select
{
  font-family: noto, sans-serif;
}
strong {
  font-weight: 500;
}
@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 100;
  src: local('Noto Sans Thin'), local('NotoSans-Thin'),
	url(/sites/seoil/intro/font/NotoSansKR-Thin-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-Thin-Hestia.eot?#iefix) format('embedded-opentype'),
}

@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Sans Light'), local('NotoSans-Light'),
	url(/sites/seoil/intro/font/NotoSansKR-Light-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/sites/seoil/intro/font/NotoSansKR-Light-Hestia.woff) format('woff'),
	url(/sites/seoil/intro/font/NotoSansKR-Light-Hestia.otf) format('opentype');
}

@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 350;
  src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
	url(/sites/seoil/intro/font/NotoSansKR-DemiLight-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/sites/seoil/intro/font/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
	url(/sites/seoil/intro/font/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans Regular'), local('NotoSans-Regular'),
	url(/sites/seoil/intro/font/NotoSansKR-Regular-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/sites/seoil/intro/font/NotoSansKR-Regular-Hestia.woff) format('woff'),
	url(/sites/seoil/intro/font/NotoSansKR-Regular-Hestia.otf) format('opentype');
}

@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Sans Medium'), local('NotoSans-Medium'),
	url(/sites/seoil/intro/font/NotoSansKR-Medium-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/sites/seoil/intro/font/NotoSansKR-Medium-Hestia.woff) format('woff'),
	url(/sites/seoil/intro/font/NotoSansKR-Medium-Hestia.otf) format('opentype');
}

@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'),
	url(/sites/seoil/intro/font/NotoSansKR-Bold-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-Bold-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/sites/seoil/intro/font/NotoSansKR-Bold-Hestia.woff) format('woff'),
	url(/sites/seoil/intro/font/NotoSansKR-Bold-Hestia.otf) format('opentype');
}

@font-face {
  font-family: 'noto';
  font-style: normal;
  font-weight: 900;
  src: local('Noto Sans Black'), local('NotoSans-Black'),
	url(/sites/seoil/intro/font/NotoSansKR-Black-Hestia.eot),
	url(/sites/seoil/intro/font/NotoSansKR-Black-Hestia.eot?#iefix) format('embedded-opentype'),
	url(/sites/seoil/intro/font/NotoSansKR-Black-Hestia.woff) format('woff'),
	url(/sites/seoil/intro/font/NotoSansKR-Black-Hestia.otf) format('opentype');
}