@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');
@import url('/site/main_en/css/board.css');

/* GmarketSans */
@font-face {
    font-family:'GmarketSansLight';
    src:url('/site/common/fonts/GmarketSansLight.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSansMedium';
    src:url('/site/common/fonts/GmarketSansMedium.woff') format('woff');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'GmarketSansBold';
    src: url('/site/common/fonts/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* reset css*/
html {font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
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, input, button {margin:0; padding:0; border:0; font-size:100%; font-family:'Noto Sans KR', sans-serif; vertical-align:baseline}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height: 1; letter-spacing: -0.45px; word-break:keep-all}
ol, ul, li {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; /*table-layout:fixed*/}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px; padding:0 !important}
a {background-color:transparent; color:inherit; text-decoration:none}
a:active, a:hover {outline:0; text-decoration:none; color:inherit; text-underline-position:under}
p {outline:none}
img {border:0; vertical-align:top}
button {cursor:pointer; background:none}
select {font:inherit}
select:hover {cursor:pointer}
textarea {padding:0}
input, select {vertical-align:top; margin-top:0 !important}
blockquote {padding:10px 20px; margin:0 0 20px; font-size:17.5px; border-left:5px solid #eee}
.bx-wrapper {box-shadow:none; border:none; background:none; margin:0}
.bx-wrapper .bx-controls-direction a {text-indent:0 !important; color:rgba(255,255,255,0) !important}
.img-responsive {display:block; max-width:100%; height:auto}

/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:999999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
.text-indent {text-indent:-9999px !important; display:inline-block !important}
.width100 {width:100%}
.show-600 {display:none}
.show-1024 {display:none}
.text-center {text-align:center}
.text-right {text-align:right}
.text-left, .tl {text-align:left}
.font-weight400 {font-weight:400}
.font-size20 {font-size:20px}
.mt5 {margin-top:5px !important}
.mt10 {margin-top:10px !important}
.mt15 {margin-top:15px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mr5 {margin-right:5px !important}
.mb15 {margin-bottom:15px !important}
.mb20 {margin-bottom:20px !important}
.ml5 {margin-left:5px !important}
.ml20 {margin-left:20px !important}
.marginAuto {margin:auto}
.auto {margin:0 auto}
.clear {clear:both}
.ToolTip {display:none; opacity:0}
.ZoomIcon, .ZoomIcon0, .ZoomIcon1, .ZoomIcon2, .ZoomIcon3, .ZoomIcon4, .ZoomIcon5, .ZoomIcon6, .ZoomIcon7, .ZoomIcon8, .ZoomIcon9, .ZoomIcon10 {display:none}
.bZoomIcon, .bZoomIcon0, .bZoomIcon1, .bZoomIcon2, .bZoomIcon3, .bZoomIcon4, .bZoomIcon5, .bZoomIcon6, .bZoomIcon7, .bZoomIcon8, .bZoomIcon9, .bZoomIcon10 {display:none}
.tableResponsive {position:relative}
.flex {display:flex}
.align-items-center {align-items:center}
.justify-content-center {justify-content:center}
.justify-content-flex-end {justify-content:flex-end}
.flex-shrink-0 {flex-shrink:0}
.mainTxtColor1 {color:#35468A}
.colorBlue {color:blue}
.colorRed {color:red}
.width100px {width:100px}
.show-768 {display:none !important}


/* pc gnb */
.headerWrap {position:fixed; top:0; width:100%; z-index:99999}
#headerTop {background:#142A5B}
#headerTop > section {max-width:1280px; margin:0 auto; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between}
.headerTopLeft {display:flex; align-items:center; flex-grow: 1;}
.headerTopLeft > a {max-width:100px; height:35px; padding:0 10px; font-size:13px; font-weight:500; transition:.3s}
.headerTopLeft > a:hover, .headerTopLeft > a:focus {background:#3379B5; color:#fff}
.headerTopLeft > a, .headerTopLeft > span {display:inline-flex; align-items:center; justify-content:center; width:100%; max-width:135px; height:35px; padding:0 10px; font-size:13px; font-weight:400; color:#fff; transition:.3s}
.headerTopLeft > a:nth-child(1), .headerTopLeft > span:nth-child(1) {background:#fff; color:#333}
.headerTopRight {font-size:13px; font-weight:400; color:#fff;}
.headerTopRight > span {display:inline-block; margin:0 15px}
.headerTopRight > a:hover, .headerTopRight > a:focus {text-decoration:underline}

header {box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);background: #fff;position:relative; z-index:9999}
header > section {display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto; padding:30px 0; box-sizing:border-box}
header > section > h1 {width: 100%; max-width:200px; margin:0; margin-right:150px; flex-shrink:0}
header > section > h1 > a {display:block}
header > section > h1 > a > img {width:100%; height:auto}
header nav {width:calc(100% - 340px)}
.gnb {display:flex; align-items:center; justify-content: space-between; width:100%; margin:0; letter-spacing: -0.45px;}
.gnb > li {position:relative; display:inline-block; width:fit-content; box-sizing:border-box}
.gnb > li > a {display: block; padding:5px 10px; font-size:18px; font-weight:500; color:#212529}
.gnb > li > a:hover, .gnb > li > a:focus {color:#35468A}
.gnb > li.active > a, .gnb > li.active > a:hover, .gnb > li.active > a:focus {color:#35468A}
.gnb > li > .dep02 {display:none; position:absolute; top:60px; left:0; z-index:999; padding:5px 0; min-width:max-content; background:#F5F5F5}
.gnb > li > .dep02 > li {overflow:visible}
.gnb > li > .dep02 > li > a {display:block; cursor:pointer; padding:10px 15px; font-size:16px; color:#212529; background-image:linear-gradient(to right, rgba(0,0,0,0) 50%, #0d3f8f 50%); background-position:0 0; background-size:200% auto; transition:.3s}
.gnb > li > .dep02 > li > a:hover {color:#fff; background-position:-100% 0; text-decoration:none}
.gnb > li > .dep02 > li > a:focus-within {color:#fff; background:#0d3f8f; text-decoration:none}
.gnb > li > .dep02 .dep03 {overflow:hidden; max-height:0; /* 닫힌 상태 */ transition:max-height 300ms ease; padding:0 15px; font-size:14px}
.gnb > li > .dep02 .dep03 > li {display:flex; margin-left:0 !important; margin-bottom:5px}
.gnb > li > .dep02 .dep03 > li:before {content:''; display:inline-flex; flex-shrink:0; width:2px; height:2px; background:#777; border-radius:100%; margin-top:11px; margin-right:5px}
.gnb > li > .dep02 .dep03 > li > a {display:block; padding:3px 0; font-size:14px; color:#7E7E7E}
.gnb > li > .dep02 .dep03 > li > a:hover {color:#0d3f8f; text-decoration:underline; font-weight:500}
.btnSide {display:none; float:right; font-size:24px}
#mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:10000; background:rgba(0,0,0,0.6)}
header nav .tit {display:none; padding:20px; background:#0D3F8F; overflow:hidden; margin:0; font-size:18px; color:#fff}
header nav .close {display:none; position:absolute; top:17px; right:20px; opacity:1; font-size:24px; color:#fff}
header nav .close:focus {color:#fff; opacity:1; outline:5px auto #000; outline-offset:-2px}
#bodyCon {overflow:hidden}


/* mainVisualWrap */
#mainVisualWrap {margin-top:125px; padding: 40px 0; background:url('../images/mainVisualWrap_bg.jpg') center center no-repeat; background-size:cover; box-sizing:border-box}
.mainVisual {max-width:1280px; margin:0 auto; padding:0; box-sizing:border-box}
.mainVisual .bx-wrapper .bx-pager {position:absolute; bottom:0; width:10px; right:-20px; padding:0; color:#fff}
.mainVisual .bx-wrapper .bx-pager-item {display:block; font-size:18px}
.mainVisual .bx-wrapper .bx-controls-direction a {width:40px; height:80px; margin-top:-40px; z-index:999; transition:.3s}
.mainVisual .bx-wrapper .bx-prev {left:-60px; background:url('https://www.wsi.ac.kr/site/main/img/mainVisualLeft.png') center left no-repeat; opacity:0.3}
.mainVisual .bx-wrapper .bx-next {right:-60px; background:url('https://www.wsi.ac.kr/site/main/img/mainVisualRight.png') center right no-repeat; opacity:0.3}
.mainVisual .bx-wrapper .bx-prev:hover, .mainVisual .bx-wrapper .bx-next:hover {opacity:0.7}


.crossfade-container-pc {width:100%; height:450px; position:relative; overflow:hidden}
.crossfade-container-mobile {width:100%; height:600px; position:relative; overflow:hidden}
.crossfade-image {position:absolute; width:100%; height:100%; top:0; left:0; object-fit:contain; transition:opacity 1.5s ease-in-out}
.image-e {z-index:1; opacity:0}
.image-k {z-index:2; opacity:1}
.fade-out {opacity:0 !important}
.fade-in {opacity:1 !important}


.AdmissionGuide {background:#3379B5}
.AdmissionGuide section {display:flex; justify-content:space-between; width:1280px; margin:0 auto; padding:60px 0; box-sizing:border-box}
.AdmissionGuide section .AdmissionTit {width:850px; background:url('https://www.wsi.ac.kr//site/main_en/images/AdmissionGuide.jpg') center right no-repeat;}
.AdmissionGuide section .AdmissionTit h2 {font-size:58px; color:#fff; font-family:"Noto Serif"; font-weight:600; text-transform:uppercase;}
.AdmissionGuide section .AdmissionTit p {margin-top:10px; font-size:14px; color:#fff; line-height:18px}
.AdmissionGuide section .AdmissionTit a {display:inline-block; margin-top:40px; color:#fff; font-weight:600; text-decoration-line:underline; text-decoration-style:solid; text-decoration-thickness:2px; transition:.3s}
.AdmissionGuide section .AdmissionTit a:hover {color:#a3deff}
.AdmissionVideo > a img {transition:.3s}
.AdmissionVideo > a:hover img {transform:scale(1.05,1.05)}
.AdmissionVideo > a:focus img {outline:5px auto -webkit-focus-ring-color; outline-offset:-2px}

.Quick {background:#fff}
.Quick section > ul {display:flex; flex-wrap:wrap; justify-content:space-between; width:1280px; margin:0 auto; padding:60px 0}
.Quick section > ul > li {flex: 1 1 20%}
.Quick section > ul > li > a {display:block; text-align:center; text-decoration:none}
.Quick section > ul > li > a:hover, .Quick section > ul > li > a:focus, .Quick section > ul > li > a:hover p , .Quick section > ul > li > a:focus p {color:#0871CD}
.Quick section > ul > li > a:hover i {transform: scale(1.05); transition:.3s}
.Quick section > ul > li > a i {font-size:50px; margin-bottom:15px}
.Quick section > ul > li > a p {font-size:18px; font-weight:500; color:#333}

.Academics {background:url('https://www.wsi.ac.kr//site/main_en/images/Academics_bg.jpg') center center no-repeat; background-size:cover;}
.Academics section {width:1280px; margin:0 auto; padding:60px 0}
.Academics section .AcademicsContainer {display:flex; margin:0 auto}
.AcademicsContainer .list {flex:1; padding-right:20px}
.AcademicsContainer .list h2 {font-size:30px; color:#35383C; font-family:"Noto Serif"; font-weight:600; text-transform:uppercase;}
.AcademicsContainer .list p {margin-top:12px; font-size:14px; color:#35383C; line-height:18px}
.AcademicsContainer .list ul {list-style:none; padding:0; margin:0; border-top:solid 1px #ddd}
.AcademicsContainer .list li {padding:20px; font-size:16px; color:#35383C; font-weight:500; border-bottom:solid 1px #ddd; cursor:pointer; transition:background-color 0.2s}
.AcademicsContainer .list li:hover {color:#fff; background-image: linear-gradient(to right, #07407F 0%, #3379B5 100%);}
.AcademicsContainer .list li a {display:flex; align-items:center; justify-content:space-between}
.AcademicsContainer .list li a i {margin-left:auto}
.AcademicsContainer .image-area {flex:2; padding:0}
.AcademicsContainer .image-area img {width:100%; height:auto; display:block}

#footerTop {background:#fff; border-top:solid 1px #ddd}
#footerTop section {display:flex; align-items:center; justify-content:space-between; max-width:1280px; margin:0 auto; padding:0 20px; border-left:1px solid #ddd; border-right: 1px solid #ddd; box-sizing:border-box}
.footerTopLeft {display:flex; align-items:center}
.footerTopLeft li {padding:10px 0; font-size:16px}
.footerTopLeft li > a:after {content:''; display:inline-block; position:relative; top:-3px; width:3px; height:3px; background:#959595; border-radius:100%; margin:0 15px}
.footerTopLeft li > a:hover {text-decoration-line: underline}
.footerTopLeft li:last-child > a:after {display:none}
.blank {color:#0871CD; font-size:14px; margin-left:5px}
.footerTopRight {display:flex; align-items:center; }
.footerTopRight li {border-left: solid 1px #ddd; padding:10px 30px}
.footerTopRight li > a:hover img {transform:scale(1.05,1.05); transition:.3s}
.footerTopRight li:last-child {padding-right:10px} 

#footer {margin-top:0; padding:0; background:#333}
#footer section {max-width:1280px; margin:0 auto; padding:50px 0; box-sizing:border-box}
#footer section .footerBottom {margin-top:0}
#footer section .footerBottom a {display: inline-block}
#footer section .footerBottom address {margin: 20px 0 0 0; color:#fff}
#footer section .footerBottom > div {position:relative}
#footer section .footerBottom .f_sns {position:absolute; bottom:0; right:0; font-size:30px; color:#fff}



/* lnb */
#container {overflow:hidden; max-width:1310px; box-sizing:border-box; padding:0 15px 50px 15px; margin:175px auto 0 auto !important; z-index:999}
#container nav {width:280px; margin-right:30px; float:left}
#container nav h2 {font-size:34px; font-weight: 600; border-bottom:4px solid #464646; height:auto; padding:0 0 32px 31px;color:#333}
#container nav h2 > a {text-decoration:none; color:#333}
#container nav h2 > a i {display:none}
#container nav > .lnb > li > a {font-size:16px; color:#000; line-height:20px; display:block; padding:12px 20px; border-bottom:1px solid #e2e2e2; font-weight:400; text-decoration:none}
#container nav > .lnb > li.on > a {background:#0d3f8f; color:#fff}

#container nav > .lnb > li.more > a {background:url(../images/lnbOff.png) right 12px center no-repeat}
#container nav > .lnb > li.more.on > a {background:url(../images/lnbOn.png) right 12px center #0d3f8f no-repeat; color:#fff}
#container nav > .lnb > li.more > a:hover {background:url(../images/lnbOn.png) right 12px center #0d3f8f no-repeat}

#container nav > .lnb > li > a:hover {background:#0d3f8f; color:#fff}
#container nav > .lnb > li .depth2 .depth2_list {padding:10px; background:#f5f9fc;}
#container nav > .lnb > li .depth2 .depth2_list li {background:url(../img/depth2_list.png) left center no-repeat; padding-left:10px}
#container nav > .lnb > li .depth2 .depth2_list li a {display:block; margin-bottom: 8px; font-size:14px; color:#6a6a6a; line-height:18px; font-weight:400; border:none; letter-spacing:-0.75px}
#container nav > .lnb > li .depth2 .depth2_list li.on2 a {color:#0d3f8f; font-weight:600}
#container nav > .lnb > li .depth2 .depth2_list li a:hover {color:#0d3f8f}

/* category */
#con {width:100%; float:left; padding-bottom:100px}
#con .conTop {position:relative; margin-bottom:50px}
#con .conTop h3 {font-size: 30px; margin-top:0; font-weight:700; border-bottom:4px solid #eff3f4; line-height:110%}
#con .conTop h3 span {position:relative; display:inline-block; padding-bottom:35px}
#con .conTop h3 span:before {content:""; position:absolute; bottom:-4px; left:0; width:100%; height:4px; background:#0d3f8f; box-sizing:content-box}
#con .conTop .path {position:absolute; right:0; bottom:17px; font-size:15px}
#con .conTop .path li {float:left; background:url(../images/imgPath.gif) left center no-repeat;margin-left:7px; padding-left:12px}
#con .conTop .path li:first-child {background:none}
#con .conTop .path li a {color:#666666}

#con h3 {font-size:22px; margin:30px 0 10px 0}
#con > h4 {margin: 40px 0 20px 0; font-size:26px; font-weight:700; color:#000}
#con > h4:before {content:''; display:inline-block; width:20px; height:20px; background:url('../images/h3_bullet.svg') left top no-repeat; margin-right:5px}
#con > h5 {margin: 20px 0 10px 0; font-size:18px; font-weight:600; color:#000}
#con > h6 {margin-bottom:10px; font-size:16px; font-weight:600; color:#0d3f8f}
#con .h4Tit {font-size:26px; font-weight:700; color:#000}
#con .h4Tit:before {content:''; display:inline-block; width:20px; height:20px; background:url('../images/h3_bullet.svg') left top no-repeat; margin-right:5px}
#con .h5Tit {margin: 20px 0 10px 0; font-size:18px; font-weight:600; color:#000}
#con > p, .row p {margin:0 0 10px 0; font-size:16px;line-height:24px}
#con > p strong {color:#000} 
.square {background:url(../img/titleH4.png) left center no-repeat; padding-left:24px; font-size:20px; color:#000}
.boxWrap {border: 1px solid #e5e5e5; padding: 20px; margin: 20px 0; text-align: -webkit-center; }
.bist > li {background:url('../images/ico_bar.gif') 5px 11px no-repeat; padding:0 0 0 18px; line-height:22px; margin-bottom:5px}
.dList > li {background:url('../images/ico_dot1.gif') 1px 11px no-repeat; padding:0 0 0 10px; line-height:22px; margin-bottom:5px}
.wList > li {background:url('../images/ico_dot2.gif') 1px 11px no-repeat; padding:0 0 0 10px; line-height:22px; margin-bottom:5px}
.oList > li {list-style:decimal; margin-bottom:5px}
.oList, .dList, .bList, .wList {margin:5px 0 10px 0;}

.tbl_skin1 {width:100%; border-top:2px solid #29366d; background-color:#ffffff; text-align:center; font-size:16px; color:#636363; line-height:20px; word-break:keep-all}
.tbl_skin1 thead th {padding:10px; border-right:1px solid #e2e2e2; border-bottom:1px solid #b5b5b5; color:#363636; vertical-align:middle; text-align:center; font-weight:700; background-color: #f8f8f8;}
.tbl_skin1 tbody th {padding:10px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; color:#0d3f8f; vertical-align:middle; text-align:center; font-weight:500}
.tbl_skin1 tbody td {padding:10px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; text-align:center; vertical-align: middle;}
.tbl_skin1 tr th:last-child {border-right:none}
.tbl_skin1 tr td:last-child {border-right:none}
.tbl_skin1 .br {border-right:1px solid #e2e2e2 !important}
.tbl_skin1 .bl {border-left:1px solid #e2e2e2 !important}
.tbl_skin1 .tl {text-align:left}
.tbl_skin1 .vaTop {vertical-align:top;}

.tbl_skin2 {width:100%; border-top:2px solid #29366d; background-color:#ffffff; text-align:center; font-size:16px; color:#636363; line-height:20px; word-break:break-all}
.tbl_skin2 thead th {padding:10px; border-right:1px solid #e2e2e2; border-bottom:1px solid #b5b5b5; color:#363636; background:#f5f5f5; vertical-align:middle; text-align:center; font-weight:700}
.tbl_skin2 tbody th {padding:10px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; color:#0d3f8f; vertical-align:middle; text-align:center; font-weight:500}
.tbl_skin2 tbody td {padding:10px; border-right:1px solid #e2e2e2; border-bottom:1px solid #e2e2e2; vertical-align:middle; text-align:center}
.tbl_skin2 tbody td a {color:#000}
.tbl_skin2 tr th:last-child {border-right:none}
.tbl_skin2 tr td:last-child {border-right:none}
.tbl_skin2 .br {border-right:1px solid #e2e2e2 !important}
.tbl_skin2 .bl {border-left:1px solid #e2e2e2 !important}
.tbl_skin2 .tl {text-align:left}

.broWrap { border: 1px solid #e5e5e5; padding: 20px 10px; margin: 20px 0; }
.broWrap h3 { margin-top: 0 !important }
.boxWrap { border: 1px solid #e5e5e5; padding: 20px; margin: 20px 0; text-align: -webkit-center; }
.btnAcr {padding:7px 10px 7px 30px; color:#fff; font-size:12px; font-weight:700; background:url(../images/btnLogo.png) 10px center #898989 no-repeat}


/*Aim & Talent*/
.eoList {overflow: hidden;}
.eoList div { text-align: center; }
.eoList div h3 {padding: 20px; font-size:18px !important; color: #fff; height:80px; margin:0; font-weight:400; display:flex; justify-content: center; align-items:center}
.eoList div:nth-child(1) h3 { background: #338ff6 }
.eoList div:nth-child(2) h3 { background: #0871cd }
.eoList div:nth-child(3) h3 { background: #104ac5 }
.eoList div:nth-child(4) h3 { background: #0d3f8f; margin-right: 0 }
.eoList div p {font-size:16px; line-height:20px; background: #ededed; padding: 20px 15px; text-align: left; height:180px }
.eoList div p strong { color: #338ff6 }

.StrategicSystem li { margin-bottom: 10px; text-align: left }
.listRect {padding-left:5px}
.listRect > li {background:url('../images/list_rect.png') left 9px no-repeat;line-height:160%;padding-left:15px !important;list-style:none !important; text-align: left;}
.listRect > li > ul {padding-left:5px}
.listRect > li > ul > li {background:url('../images/list_circle.png') left 9px no-repeat; line-height:160%; padding-left:15px; list-style:none}
.listRect > li > ul > li > ul {padding-left:5px}
.listRect > li > ul > li > ul > li {background:url('../images/list_bar.png') left 10px no-repeat; line-height:160%; padding-left:15px; list-style:none}

/*Organization Chart*/
.GroupSys { overflow: hidden; width: 847px; height: auto; background: url(../images/GroupSys_bg.png) no-repeat }
.gs { width: 259px; float: left; margin-right: 35px; padding: 0; }
.gs:last-child { margin-right: 0px }
.gs li { list-style: none; color: #fff; padding: 15px 0; text-align: center; font-size:16px; font-weight:500 }
.gs li a { color: #fff }
.gs .dep1 { background: #0d148f }
.gs .dep2 { background: #0d3f8f; margin-top: 40px; }
.gs .dep3 { background: #0871cd; margin-top: 40px; }
.gs .dep4 { background: #707683; margin-top: 40px; }
.gs .dep5 { background: #e2e2e2; padding: 11px 0; color: #000; margin-top: 20px; }
.gs .dep5 a { color: #000 }
.gs .dep6 { background: #fff; border: 1px solid #e2e2e2; color: #494949; font-size: 13px; text-align: left; padding: 10px 20px; line-height: 22px }
.gs .dep6 a { color: #494949 }
.gs .dep6 ul { padding-left: 10px }
.gs .dep6 li { color: #494949; font-size: 14px; text-align: left; line-height: 14px; padding: 5px 0; list-style: disc }

/*Academics*/
.MajorBox { overflow: hidden; margin: 0; color: #FFF; margin-bottom:50px !important}
.MajorBox .lead { font-size: 18px }
.MajorBox .MajorImg { padding: 0 }
.MajorBox .MajorImg img { width: 100%; min-height: 250px; }
.MajorBox .MajorInfo { padding: 20px }
.MajorBox a { color: #FFF }
.MajorBox a:hover { }
.MajorBox .btn-major { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid rgba(255,255,255,.5); }
.MajorBox .btn-major:hover { border: 1px solid rgba(255,255,255,1); }
.MajorBox .MajorInfo h2 {font-weight:700; font-size:26px !important; margin:0 0 10px 0 !important}
.MajorBox .MajorInfo ul {margin-bottom: 10px}
.MajorBox .MajorInfo ul li {color: #fff; line-height: 1.8em; letter-spacing: -0.45px}
.vision_box { border: 1px solid #e5e5e5; padding: 20px 20px; margin: 20px 0; font-size: 16px; }
.vision_box dl dt {font-size:22px}
.vision_box dl dd {margin-top:5px}

/*College Institution*/
.OrganBox {overflow: hidden; margin: 0; color: #FFF; background: #0871cd; }
.OrganBox .OrganInfo h2 {font-weight: 600; font-size: 28px !important; margin: 0 0 10px 0 !important; }
.OrganBox .lead {font-size: 18px }
.OrganBox .OrganImg {padding: 0 }
.OrganBox .OrganImg img {width: 100%; }
.OrganBox .OrganInfo {padding: 20px }
.OrganBox .OrganInfo > ul > li {line-height: 24px;}
.OrganBox a {color: #FFF }
.OrganBox a:hover { }
.OrganBox .btn-default {background: none; text-shadow: none; border: 1px solid rgba(255,255,255,.5); border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0), 0 1px 1px rgba(0,0,0,0); }
.box01 { padding: 10px 10px; border: 1px solid #e5e5e5; text-align: center}
.box01 .title { margin-top: 0 }

/* Woosong IT Education Center */
.ItGroup { position: relative; overflow: hidden; padding: 0; width: 847px; height: 550px; background: url('../images/ItGroup_bg.gif') no-repeat; }
.ItGroup .dep1 { position: relative; top: 20px; left: 315px; margin: 0; width: 190px; height: 40px; color: #fff; background: #0d3f8f; font-size: 13px; font-weight: 700; text-align: center; line-height: 40px; }
.ItGroup .dep2 { position: relative; top: 40px; left: 210px; float: left; margin: 0 20px 0 0; list-style: none; background: #f5f5f5; }
.ItGroup .dep2 ul { width: 190px; color: #000; font-size: 13px; line-height: 15px; background: #f5f5f5; padding: 10px 10px 10px 15px; }
.ItGroup .dep2 ul li, .ItGroup .dep3 ul li {background:url('../images/ico_bar.gif') 5px 11px no-repeat; padding:0 0 0 15px}
.ItGroup .dep2 .dep_top { margin: 0; width: 190px; height: 40px; font-size: 13px; color: #fff; font-weight: 700; background: #0871cd; line-height: 40px; padding-left: 10px }
.ItGroup .dep3 { position: relative; top: 70px; float: left; margin: 0 20px 0 0; list-style: none; background: #f5f5f5; }
.ItGroup .dep3 ul { width: 190px; color: #000; font-size: 13px; line-height: 15px; background: #f5f5f5; padding: 10px 10px 10px 25px }
.ItGroup .dep3 .dep_top { margin: 0; width: 190px; height: 40px; font-size: 13px; color: #fff; font-weight: 700; background: #707070; line-height: 40px; padding-left: 10px }
.lifeGroup2 { position: relative; overflow: hidden; padding: 0; width: 847px; height: 200px; background: url('../images/lifeGroupBg.gif') no-repeat }
.lifeGroup2 .dep1 { position: relative; top: 20px; left: 315px; width: 190px; height: 40px; color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 40px; background: #0d3f8f }
.lifeGroup2 .dep2 { position: relative; top: 40px; left: 315px; width: 190px; height: 40px; color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 40px; background: #0871cd }
.lifeGroup2 .dep3 { position: relative; top: 70px; left: 0; width: 190px; height: 40px; margin-right: 20px; list-style: none; color: #fff; font-size: 13px; font-weight: 700; text-align: center; line-height: 40px; background: #707070; float: left }



@media screen and (max-width:1280px) {
	header > section {padding: 30px 20px}
	.headerTopRight {padding-right:20px}
	.mainVisual .bx-wrapper .bx-controls-direction a {margin-top:-20px; width:40px; height:40px; border-radius:100%; box-shadow:0 3px 6px rgb(0 0 0 / 15%)}
	.mainVisual .bx-wrapper .bx-prev {left:5px; background:url('../images/newsControls.png') no-repeat 0 -40px; opacity:1}
	.mainVisual .bx-wrapper .bx-prev:hover, .mainVisual .bx-wrapper .bx-prev:focus {background-position:0 0}
	.mainVisual .bx-wrapper .bx-next {right:5px; background:url('../images/newsControls.png') no-repeat -40px -40px; opacity:1}
	.mainVisual .bx-wrapper .bx-next:hover, .mainVisual .bx-wrapper .bx-next:focus {background-position:-40px 0}
	.AdmissionGuide section {width: 100%; padding:60px 20px}
	.AdmissionGuide section .AdmissionTit {width:100%;max-width:580px; background:none}
	.Academics section {width: 100%; padding:60px 20px;}
	.Quick section > ul {width:100%}
	.Academics section .AcademicsContainer {display:block}
	.AcademicsContainer .image-area img {width:100%; margin:0 auto; padding-top:20px}
	#footer section {padding:50px 20px;}
}

@media screen and (max-width:1024px) {
	.gnb {display:block}
	.gnb > li {float:none; width:100% !important; border:none; border-bottom:1px solid #ddd}
	.gnb > li > a {font-size:16px; text-align:left; padding:15px 20px}
	.gnb > li:hover > a, .gnb > li:focus > a, .gnb > li:focus-within > a {background:#0871CD; color:#fff}
	.gnb > li > .dep02 {position:relative; top:0; background:#eee; padding:10px 0; min-width:250px; word-break:normal}
	.gnb > li > .dep02 > li {float:none;width:100%;}
	.btnSide, header nav .tit, header nav .close {display: block}
	header > section > nav {display: none; position: fixed; top: 0; right: 0; overflow-y: auto; width: 250px; height: 100%; background: #fff; z-index: 99999; margin: 0;}
	#con {padding-bottom: 0}
	#container nav {margin-bottom:0; width: 100%; float: none}
	#container nav h2 {display: none;}
	#container nav .lnb {overflow: visible; display: flex;flex-wrap: wrap; margin: 0px 0px 30px; gap:5px; border-width:initial; border-style: none; border-color:initial; border-image:initial;}
	#container nav .lnb li a {display: block; font-size: 16px; font-weight:400; padding: 15px 20px; background: rgb(238, 238, 238); border-radius: 5px;}
	#container nav .lnb > li > a {line-height:20px; padding:7px 16px; font-size:14px;}
	#container nav .lnb li.active > a {background-image:#0d3f8f; color:#fff; font-weight:500}
	#container nav > .lnb > li .depth2 .depth2_list {display: flex; flex-wrap: wrap;  padding:5px 0 0 0; background:none}
	#container nav > .lnb > li .depth2 .depth2_list li {background: none; padding-left:0; margin-right:5px;}
	#container nav > .lnb > li .depth2 .depth2_list li a {height: auto; border: none; padding:7px 15px; margin-bottom:5px; font-size: 14px; background: #fff; border: 1px solid #ccc; border-radius: 5px;  font-weight: 500; line-height:20px}
	#container nav > .lnb > li.more > a {display:inline-block; padding-right:50px; background:url(../images/lnbOff.png) right 12px center #eee no-repeat}
	#container nav > .lnb > li.more.on {width:100%}
	#container nav > .lnb > li.more.on > a {display:inline-block}

@media screen and (max-width:900px) {
    header > section {padding:20px 20px}
	header > section > h1 {margin-right:0}
	header > section > h1 > a > img {width:70%}
	#container {margin:120px auto 0 auto !important;}
	#mainVisualWrap {margin-top:100px}
	.AdmissionGuide section {display:block}
	.AdmissionGuide section .AdmissionTit h2 {font-size:50px}
	.AdmissionVideo {margin-top:20px}
	.Quick section > ul > li > a i {font-size:40px}
	.Quick section > ul > li > a p {font-size:16px; word-break:normal}
	#footerTop section {display: block}
	.footerTopLeft {justify-content:center; border-bottom:solid 1px #eee}
	.footerTopRight {justify-content:center}
	.footerTopRight li {padding: 15px 15px; border-left:none}
	#con .conTop .path {display:none}
	#con .conTop h3 span:before {background:none}  
}

@media screen and (max-width:768px) {
	.show-768 {display:block !important}
	.hide-768 {display:none !important}
	.imgZoomWrap, .imgZoomWrap0, .imgZoomWrap1, .imgZoomWrap2, .imgZoomWrap3, .imgZoomWrap4, .imgZoomWrap5, .imgZoomWrap6, .imgZoomWrap7, .imgZoomWrap8, .imgZoomWrap9, .imgZoomWrap10 {position:relative; overflow:hidden}
	.bimgZoomWrap, .bimgZoomWrap0, .bimgZoomWrap1, .bimgZoomWrap2, .bimgZoomWrap3, .bimgZoomWrap4, .bimgZoomWrap5, .bimgZoomWrap6, .bimgZoomWrap7, .bimgZoomWrap8, .bimgZoomWrap9, .bimgZoomWrap10 {position:relative; overflow:hidden}
	.ZoomIcon, .ZoomIcon0, .ZoomIcon1, .ZoomIcon2, .ZoomIcon3, .ZoomIcon4, .ZoomIcon5, .ZoomIcon6, .ZoomIcon7, .ZoomIcon8, .ZoomIcon9, .ZoomIcon10 {position:absolute; bottom:0; right:0; padding:10px 0px; background:rgba(0,0,0,0.5); width:40px; height:40px; box-sizing:border-box; display:block; text-align:center}
	.bZoomIcon, .bZoomIcon0, .bZoomIcon1, .bZoomIcon2, .bZoomIcon3, .bZoomIcon4, .bZoomIcon5, .bZoomIcon6, .bZoomIcon7, .bZoomIcon8, .bZoomIcon9, .bZoomIcon10 {position:absolute; bottom:0; right:0; padding:10px 0px; background:rgba(0,0,0,0.5); width:40px; height:40px; box-sizing:border-box; display:block; text-align:center}
	.ZoomIcon i, .ZoomIcon0 i, .ZoomIcon1 i, .ZoomIcon2 i, .ZoomIcon3 i, .ZoomIcon4 i, .ZoomIcon5 i, .ZoomIcon6 i, .ZoomIcon7 i, .ZoomIcon8 i, .ZoomIcon9 i, .ZoomIcon10 i {color:#fff; font-size:22px}
	.bZoomIcon i, .bZoomIcon0 i, .bZoomIcon1 i, .bZoomIcon2 i, .bZoomIcon3 i, .bZoomIcon4 i, .bZoomIcon5 i, .bZoomIcon6 i, .bZoomIcon7 i, .bZoomIcon8 i, .bZoomIcon9 i, .bZoomIcon10 i {color:#fff; font-size:22px}
	.scroll {position:relative; border:none; min-height:.01%; overflow-x:auto; overflow-y:hidden}
	.scroll table {width:970px; margin-bottom:15px}
	.ToolTip {position:absolute; width:100%; top:20px; left:0; opacity:0; display:block; padding:5px 8px; font-size:13px; color:#fff; text-align:center; letter-spacing:0.45px; margin:5px 0; -webkit-animation-name:fadeOut; -webkit-animation-duration:4s; animation-name:fadeOut; animation-duration:4s}
}

@media screen and (max-width:600px) {
    .AdmissionGuide section {padding:40px 20px}
	.AdmissionGuide section .AdmissionTit h2 {font-size:36px}
	.Quick section > ul {padding:40px 0}
	.Quick section > ul > li > a i {font-size:30px}
	.Quick section > ul > li > a p {font-size:14px}
	.AcademicsContainer .image-area {display:none}
	.footerTopLeft li {font-size:14px}
	.footerTopLeft li > a:after {margin:0 5px}
    #footer section {padding:40px 20px}
	#footer section .footerBottom a > img {width:70%}
	#footer section .footerBottom address {font-size:14px; line-height:18px}
	#footer section .footerBottom .f_sns {position:relative}
	#footer section .footerBottom .f_sns > a {margin:20px 20px 0 0 !important}
	#con > h4 {margin: 30px 0 10px 0; font-size: 20px}
	#con > h5 {margin: 15px 0 8px 0; font-size: 16px}
	#con .conTop {margin-bottom: 30px}
	#con .conTop h3 {font-size: 24px}
	#con .conTop h3 span {padding-bottom: 20px}
	.MajorBox .MajorInfo ul li {line-height: 1.4em}
	.MajorBox .btn-major {margin-bottom: 10px}
	.scroll {position:relative; border:none; min-height:.01%; overflow-x:auto; overflow-y:hidden}
	.scroll table {width:910px; margin-bottom:15px}
	.dList > li {background:url(../images/ico_dot1.gif) 1px 8px no-repeat; padding: 0 0 0 10px; line-height:18px;}
	.bList li {line-height:18px}
	.eoList div p {height: auto; padding: 10px 15px;}
	.eoList div h3 {padding:10px; margin:10px 0 !important; font-size: 16px !important; height: auto}
}