@charset "utf-8";

/* scroll */
::-webkit-scrollbar {width:10px;}
::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.4);background-clip:padding-box;border:2px solid transparent;border-radius:5px;}
::-webkit-scrollbar-track {padding:10px;}

/* z-index */
header .gnbWrap {z-index:50;}
header .utileWrap .utileBox {z-index:100;}
header .utileWrap .searchWrap {z-index:200;}
header .utileWrap .allmenuWrap {z-index:300;}
#subVisual {z-index:-1;}

#wrap {min-width:360px;}
h1 {display:flex;}
h1 a {margin-right:25px;display:flex;align-items:center;}
.inner {width:1320px;max-width:100%;margin:0 auto;padding:0 30px;}
header {background:#fff;font-size:18px;}
header .inner {position:relative;}
header .utileWrap {height:70px;background:#fff;display:flex;flex-wrap:wrap;align-items: center;color:var(--color01);}
header .utileWrap .utileBox {display:flex;align-items:center;font-weight:bold;margin-left:auto;font-size:0.8888em;}
header .utileWrap .utileBox > ul {display:flex;align-items: center;}
header .utileWrap .utileBox > ul li a {display:block;margin-left:30px;transition:var(--transition01);}
header .utileWrap .btnSearch {background:url(/images/homepage/www/kr/common/icons.png) -10px -10px;width:23px;height:23px;transition:none !important;}
header .utileWrap .searchWrap {position:absolute;bottom:-10px;right:30px;width:420px;max-width:calc(100% - 60px);background:#fff;transform:translateY(100%);padding:10px 30px;border-radius:10px;display:none;}
header .utileWrap .searchWrap input[type=text] {width:100%;height:40px;vertical-align: middle;border:none;border-bottom:1px solid var(--color01);}
header .utileWrap .searchWrap input[type=text]::placeholder {color:var(--color01);}
header .utileWrap .searchWrap button {background:url(/images/homepage/www/kr/common/icons.png) -10px -10px;width:23px;height:23px;position:absolute;top: 50%;right: 30px;transform: translateY(-50%);}
header .utileWrap .btnAllmenu {width:20px;height:14px;position:absolute;right:30px;bottom:0;transform:translateY(calc(100% + 36px));z-index:30;}
header .utileWrap .btnAllmenu .bar {width:100%;height:2px;position:absolute;top:calc(50% - 1px);left:0;background:#fff;}
header .utileWrap .btnAllmenu .bar::before {content:'';width:100%;height:2px;position:absolute;top:-6px;left:0;background:#fff;}
header .utileWrap .btnAllmenu .bar::after {content:'';width:100%;height:2px;position:absolute;top:6px;left:0;background:#fff;}
header .allmenuWrap {display:none;font-size:18px;text-align:center;justify-content: center;align-items: center;color:#555;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);}
header .allmenuWrap .allmenu {width:1300px;max-width:calc(100% - 40px);max-height:calc(100% - 40px);position:relative;overflow:auto;}
header .allmenuWrap .title {font-size:2em;color:#fff;margin-bottom:20px;}
header .allmenuWrap .menu {border-radius:54px;background:#fff;padding:50px;font-weight:500;min-height:400px;}
header .allmenuWrap .menu > ul {display:flex;gap:13px;flex-wrap:wrap;}
header .allmenuWrap .menu > ul > li {flex:auto;}
header .allmenuWrap .menu > ul > li > a {font-size:1.2222em;background:#ececec;display:block;padding:15px;margin-bottom:10px;}
header .allmenuWrap .menu > ul ul li a {padding:5px;display:block;}
header .allmenuWrap .menu > ul ul li a:hover {color:#544dcb;}
header .utileWrap .allmenuClose {position:absolute;top:10px;right:30px;}
header .utileWrap .allmenuClose::after {content:'close';font-family: 'Material Icons';font-size:2em;color:#fff;}
header .gnbWrap {display:flex;align-items: center;position:absolute;top:100px;right:30px;color:#fff;}
header .gnbWrap .gnb > ul {display:flex;}
header .gnbWrap .gnb > ul > li {position:relative;}
header .gnbWrap .gnb > ul > li > a {padding:20px 10px;margin:0 20px;font-weight:500;}
header .gnbWrap .gnb > ul > li::before {content:'';width:0;height:2px;background:#fff;position:absolute;bottom:0px;left:50%;transition:var(--transition01);}
header .gnbWrap .gnb > ul > li:not(.depth).hover::before {width:calc(100% - 60px);bottom:-10px;left:30px;}
header .gnbWrap .gnb {padding-right:25px;}
header .gnbWrap .depth02 {background:rgba(255,255,255,1);color:#555;border-radius:var(--radius01);box-shadow:var(--shadow01);margin-top:20px;padding:20px;position:absolute;top:13px;left:50%;white-space: nowrap;transform:translateX(-50%);min-width:150px;display:none;font-size:0.8888em;}
header .gnbWrap .depth02::before {content:'';width:10px;height:10px;background:var(--color03);border-radius:100%;position:absolute;top:-5px;left:calc(50% - 5px);}
header .gnbWrap .depth02 li::before {content:'';}
header .gnbWrap .depth02 li a {display:block;padding:5px 0;transition:var(--transition01);position:relative;padding-left:10px;font-weight:500;}
header .gnbWrap .depth02 li a::before {content:'';width:5px;height:0px;display:inline-block;background:var(--color03);position:absolute;top:15px;left:0;transition:var(--transition01)}
header .gnbWrap .depth02 li a:hover {color:var(--color03);transform:translateX(5px);}
header .gnbWrap .depth02 li a:hover::before {height:5px;border-radius:100%;}

/* 산하협력단 슬라이드*/
.swiperBestmenu{width:235px; height: 45px; overflow: hidden; display: flex;}
.swiperBestmenu .swiper-pagination{position: relative; widht:100px;}
.swiperBestmenu .swiper-pagination .slidePrev{position: absolute;top: 10px; right: 27px;width: 25px;height: 25px;border: 1px solid #ccc;display: block; background:url(/images/homepage/www/kr/main/down.png);    background-repeat: no-repeat; background-position: center; }
.swiperBestmenu .swiper-pagination .slideNext{position: absolute;top: 10px; right: 0;width: 25px;height: 25px;border: 1px solid #ccc;display: block; background:url(/images/homepage/www/kr/main/up01.png);     background-repeat: no-repeat;  background-position: center;}
.swiperBestmenu .swiper-wrapper a img{width:165px;}


footer {background:#002f5d;color:#fff;padding-bottom:40px;font-size:13px;color:#cfcfcf;}
footer .fnb {border:1px solid #4d6e8e;border-left:none;border-right:none;font-weight:bold;margin-bottom:25px;}
footer .fnb .inner {display:flex;flex-wrap:wrap;position:relative;}
footer .fnb ul {display:flex;}
footer .fnb ul li {border:1px solid #4d6e8e;margin:-1px 0 -1px -1px;}
footer .fnb ul li a {display:block;padding:15px;}
footer .fnb .btnTop {border-left:1px solid #4d6e8e;border:1px solid #4d6e8e;margin:-1px 0 -1px auto;color:#fff;padding:0 20px;}
footer .fnb .btnTop::after {content:'arrow_drop_up';font-family: 'Material Icons';font-size:1.4em;display:inline-block;vertical-align: middle;}


/* sublayout */
#subVisual {background:#aaa;width:100%;height:250px;position:absolute;top:70px;left:0; background-position:center;background-size:cover;background-image:url(/images/homepage/www/kr/del/subVisual01.png);}
#subVisual::before {content:'';background:rgba(9,3,47,0.8);width:100%;height:50px;display:block;position:absolute;left:0;bottom:0;}
#contentsWrap {margin-top:140px;display:flex;}

#lnb {flex:0 0 240px;}
#lnb .lnbTitle {background:var(--color03);height:110px;line-height:110px;padding:0 15px;}
#lnb .lnbTitle h2 {}
#lnb .lnbTitle h2::before {content:'';width:65px;height:65px;background-color:rgba(43,38,125,0.3);display:inline-block;vertical-align:middle;border-radius:100%;margin-right:15px;background-repeat:no-repeat;background-position:center;}
.gnb01 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle01.png);}
.gnb02 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle02.png);}
.gnb03 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle03.png);}
.gnb04 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle04.png);}
.gnb05 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle05.png);}
.gnb06 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle06.png);}
.gnb07 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle06.png);}
.gnb08 #lnb .lnbTitle h2::before {background-image:url(/images/homepage/www/kr/common/lnbTitle07.png);}
#lnb .menu {border:1px solid var(--borderColor01);border-top:none;font-weight:500;}
#lnb .menu a {display:block;}
#lnb .menu .depth01 > li {background:#f8f8f8;}
#lnb .menu .depth01 > li > a {background:#fff;height:50px;line-height:50px;padding:0 15px;color:#363636;transition: var(--transition01);}
#lnb .menu .depth01 > li > a.active {background:var(--color02);color:#fff;}
#lnb .menu .depth01 > li > a.list::after {content:'expand_more';font-family: 'Material Icons';font-size:1.5em;vertical-align: middle;color:#919191;float:right;transition:var(--transition01);}
#lnb .menu .depth01 > li > a.active::after {color:#fff;transform:rotate(180deg);}
#lnb .menu .depth01 > li + li > a {border-top:1px solid var(--borderColor01);}
#lnb .menu .depth02 {padding:20px 0;display:none;}
#lnb .menu .depth02 > li > a {padding:2px 15px;color:#545454;}
#lnb .menu .depth02 > li > a::before {content:'ㆍ';}
#lnb .menu .depth02 > li > a.active {color:#2b267d;font-weight:bold;}

#contents {flex:auto;padding-bottom:100px;max-width: calc(100% - 240px);}
#contents .location {display:flex;height:50px;color:#fff;align-items:center;font-size:14px;padding-left:20px;}
#contents .location a {display:block;}
#contents .location .menu ul {display:flex;align-items:center;}
#contents .location .menu .home {background:url(/images/homepage/www/kr/common/icons.png) -214px -50px;width:16px;height:15px;}
#contents .location .menu ul li + li {padding-left:30px;position:relative;}
#contents .location .menu ul li + li::after {content:'';background:url(/images/homepage/www/kr/common/icons.png) -289px -50px;width:5px;height:9px;position:absolute;top:50%;left:13px;transform: translateY(calc(-50% + 2px));}
#contents .location .utile {margin-left:auto;height:100%;position:relative;}
#contents .location .utile ul {display:flex;align-items:center;height:100%;}
#contents .location .utile ul li {border-left:1px solid #565173;width:55px;height:100%;}
#contents .location .utile ul li:last-child {border-right:1px solid #565173;}
#contents .location .utile ul li a {display:flex;justify-content:center;align-items:center; width:100%;height:100%;transition:var(--transition01);}
#contents .location .utile ul li a:hover {background:#565173;}
#contents .location .utile ul li a:hover .icon {animation: var(--aniBounce01);}
#contents .location .utile .share .icon {background:url(/images/homepage/www/kr/common/icons.png) -240px -50px;width:14px;height:16px;}
#contents .location .utile .print .icon {background:url(/images/homepage/www/kr/common/icons.png) -264px -50px;width:15px;height:16px;}
#contents .location .utile .shareWrap {position:absolute;bottom:0;right:0;color:var(--color01);transform: translateY(100%);display:flex;}
#contents .content {min-height: 500px;padding:0 0 0 20px;margin-top:50px;}





@media all and (max-width:1024px) {
    h1 a + a,
    header .gnbWrap {display:none;}
    header .utileWrap .btnAllmenu {position:relative;right:0;transform:none;}
    header .utileWrap .btnAllmenu .bar,
    header .utileWrap .btnAllmenu .bar::before,
    header .utileWrap .btnAllmenu .bar::after {background:var(--color01);}
	header .allmenuWrap .allmenu {width:auto;max-width:100%;height:100%;max-height:100%;margin-left:auto;background:#fff;padding-top:30px;font-size:16px;}
    header .allmenuWrap .title {color:#555;}
    header .utileWrap .allmenuClose {top:15px;right:15px;}
    header .utileWrap .allmenuClose::after {color:#555;}
    header .allmenuWrap .menu {padding:20px;width:500px;max-width:100%;text-align:left;}
    header .allmenuWrap .menu > ul {flex-direction: column;}
    header .allmenuWrap .menu > ul > li > a + ul {padding-left:20px;}
    header .allmenuWrap .menu > ul > li > a + ul li a::before {content:'- ';}
    #subVisual {height:200px;}
    #contentsWrap {margin-top:0;}
    h3 {height:150px;display: flex;justify-content: center;align-items: center;}
    #lnb {display:none;}
    #contents {max-width: 100%;}
    #subVisual + .inner {padding:0;}
    #contents .content {padding:0 20px;margin-top:30px;}
    .swiperBestmenu{display:none;}
}

@media all and (max-width:768px) {
    .inner {padding:0 20px;}
    h1 {width:300px;}
    header .utileWrap .searchWrap {width:100%;}
    header .utileWrap .utileBox > ul li a {margin-left:10px;}
    #subVisual {height:180px;}
    h3 {height:130px;display: flex;justify-content: center;align-items: center;}
    #contents .location .menu ul li + li {padding-left:15px;}
	#contents .location .menu ul li + li::after {left:6px;}
    
    
}

@media all and (max-width:560px) {
    header .utileWrap .utileBox {position: absolute;top: 90px;right: 20px;z-index: 200;color: #fff;}
    header .utileWrap .btnSearch {background-position:-43px -10px;}
    header .utileWrap .btnAllmenu .bar, 
    header .utileWrap .btnAllmenu .bar::before,
    header .utileWrap .btnAllmenu .bar::after {background:#fff;}
    
}