@charset "utf-8";

@font-face {
    font-family: 'KBIZ';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KBIZHanmaumMyungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

::selection{background: #555555; color:#fff;}
::-moz-selection{background: #555555; color:#fff;}
body{font-family:'Noto Sans KR';font-style:normal;}
h2{color:#827872; font-size:26px; !important;}
.main-section2 .tit{margin-bottom:30px; color:#333; font-size:26px; font-weight:600; text-align:center; !important;}

.bodybg	{background-color:transparent}
.mbg	{background-image:url(../img/mbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent}
.mcbg	{background-image:url(../img/mcbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent}
.sbg	{background-image:url(../img/sbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent}
.cbg	{background-image:url(../img/cbg.jpg);background-repeat:repeat-y;background-position:50% 0;background-color:transparent}

#wrap		{position:relative;width:100%;padding:0;margin:0;}
#svisual	{position:relative;width:100%;}
#svslide	{position:absolute;width:100%;}
#container	{position:relative;} /* d_width */
#container.sub_container{padding:30px 0}
#container:after	{content:"";clear:both;display:block;float:none;}

footer				{background:#3D454E;z-index:9;}
footer:before		{background:rgba(0,0,0,0.4);}
footer ul.f_mn li a	{color:#9CA7B1;}
footer address		{color:#9CA7B1; margin-top:20px;}
footer address .tit	{color:#FFCC00; margin-right:5px;}
footer .copyright	{color:#949FAB; font-size:13px; margin-top:20px;}

.fmn li{display:inline-block;}
.fmn li:first-child a{color:#3BA370;}
#footer address{text-align:center;margin:40px 0;}
#footer address p			{margin-right:30px;}
address p span:first-child{color:#fff;margin-right:20px;}
#copyright{text-align:center;}
#copyright p{display:inline-block;color:#A4A9AA;}

h3 {color:#2F408C;}

/* 기본layout */
#snb		{float:left;width:240px;}
#content	{float:left;width:1120px;padding:0;margin:0 0 0 40px;}
#aside		{float:right;width:0 !important;}

#body_head	{position:relative;border-bottom:1px solid #eee;}
#body_head .inwrap	{position:relative;margin:0 auto;width:1400px;}
#body_head:after	{content:"";display:block;float:none;clear:both;}
#location	{margin-right:200px;}
#location li{float:left;font-size:12px;line-height:38px;}
#location a	{color:#999}
#pnb		{position:absolute;right:0;top:10px;}
#pnb .page_sns	{float:left;}
#pnb .page_sns li	{float:left;text-align:center;margin:5px 0 0 2px}
#pnb .page_sns a	{display:inline-block;width:28px;height:28px;line-height:28px;background:#ccc;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;color:#fff;}
#pnb .pnb_bx		{float:right;margin-left:5px;}
#pnb .pnb_bx li		{float:left;text-align:center;width:38px;height:38px;line-height:38px;}
#pnb .pnb_bx li:after,
#pnb .pnb_bx li:first-child:before {top:-10px;}
#pnb .pnb_bx a	{color:#ccc}
#body_title	{clear:both;padding:0 0 20px 0;margin:0 0 20px 0;}
#body_content	{clear:both;padding:0 0 40px 0;margin:0;}

header				{position:relative;width:100%;height:80px;padding:0;margin:0;transition:all 0.3s ease-out;z-index:100}
header #logo		{position:absolute;left:0;top:24px;width:100%;z-index:99}
header .sub_name	{display:inline-block;margin-left:10px;font-size:17px;font-weight:600;color:#333;}
#topwrap .topmn		{line-height:80px;text-align:right;}
#topwrap .topmn a	{position:relative;margin-left:20px;font-size:13px;color:#999;z-index:99}
#gnb		{position:absolute;left:0;top:0;width:100%;height:80px;}
#gnbmn		{position:relative;width:1400px;padding:0;margin:0 auto;z-index:99}
#gnbmn a	{display:block;}
#gnbmn ul.depth1		{position:relative;width:850px;padding:0;margin:0 150px 0 360px;}
#gnbmn ul.depth1 li		{float:left;padding:0;margin:0;text-align:center;}
#gnbmn ul.depth1 li a	{padding:0;margin:0;font-size:19px;font-weight:500;line-height:80px;}
#gnbmn ul.depth2		{display:none;position:relative;padding:15px 0;margin:0;z-index:4}
#gnbmn ul.depth2 li		{display:block;clear:both;padding:0;margin:0;text-align:center;width:100%;}
#gnbmn ul.depth2 li a	{padding:2px 0;margin:0;font-size:15px;font-weight:normal;line-height:140%;white-space:nowrap;}
#id_gnb_bg	{position:absolute;left:0;top:80px;z-index:3;}
.gnb_bg		{width:100%;padding:0;margin:0;box-shadow:0px 2px 1px rgba(0,0,0,0.1);-moz-box-shadow:0px 2px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0px 2px 1px rgba(0,0,0,0.1);}

#snbmn					{width:100%;padding:0;margin:0 0 40px 0;}
#snbmn .tit				{padding:40px 20px;margin:0;text-align:center;font-size:26px;font-weight:600;}
#snbmn a				{clear:both;display:block;line-height:140%;}
#snbmn ul li			{position:relative;padding:0;margin:0;}
#snbmn ul li a			{padding:18px 20px;margin:0;border:1px solid rgba(0,0,0,0.1);border-top:none;font-size:16px;transition:all 0.2s ease-out;}
#snbmn > ul > li > a:after	{content:"\f138";font-family:FontAwesome;float:right;margin-right:10px;opacity:0;transition:all 0.2s ease-out;color:#555555;}
#snbmn ul li a.on,
#snbmn ul li a:focus,
#snbmn ul li a:active,
#snbmn ul li a:hover	{font-weight:500;border-color:rgba(0,0,0,0.1) !important;}
#snbmn > ul > li > a.on:after	{opacity:1;margin-right:0;}
#snbmn ul ul			{margin:0;padding:10px 0;border:1px solid rgba(0,0,0,0.1);border-top:none;}
#snbmn ul ul li			{padding:0;margin:0;border:none;}
#snbmn ul ul li a		{padding:5px 20px;margin:0;border:none;font-size:14px;}
#snbmn ul ul li a:before	{}
#snbmn ul ul li a.on,
#snbmn ul ul li a:focus,
#snbmn ul ul li a:active,
#snbmn ul ul li a:hover	{background:none;}

#container .d_width	{z-index:10;}

#main-visual.d_width	{width:1800px;}
#main-visual.d_width:before	{content:"Lifelong Education System Support Program";color:#999;position:absolute;left:-80px;top:60%;margin-top:200px;transform:rotate(-90deg);font-size:11px;line-height:1;text-align:center;width:400px;height:12px;transform-origin:0 0;letter-spacing:4px;}

.main-title			{text-align:center;}
.main-title .txt	{font-size:20px;line-height:1.1;color:#fff;letter-spacing:-1px;}
.main-title .tit	{font-weight:600; width:640px; height:69px;font-size:64px;letter-spacing:-2px;line-height:1;margin:20px 0;background:rgba(0,0,0,0.6); color:#fff; margin-left:60px;}
.main-title .en		{font-family:Titillium SemiBold;font-size:14px;color:#fff;letter-spacing:10px;}
.sub-title			{text-align:center;}
.sub-title .txt		{font-size:20px;color:#fff;line-height:1.1;}
.sub-title .tit		{font-weight:600; width:488px; height:59px; font-size:50px;color:#fff;background:rgba(0,0,0,0.6);letter-spacing:-2px;line-height:1;margin:20px 0 0 0;}

.main-section		{position:relative;}
.main-section .col1,
.main-section .col5	{float:left;}
.main-section2 .col3 {float:left;width:100%;}
.mbnrbx{transform:translateY(-50px); width:100%;display:flex;}
/* .mbnr a	{width:150px; height:50px; border-radius:50%; position:relative; padding:100px 0; color:#fff; font-weight:500; font-size:25px;}*/
/* .mbnr.bg1 a	{background:#555 url(../img/mbnr_bg1_2.png) 50% 0 / cover;}
.mbnr.bg2 a	{background:#555 url(../img/mbnr_bg2_2.png) 50% 0 / cover;}
.mbnr.bg3 a	{background:#555 url(../img/mbnr_bg3_2.png) 50% 0 / cover;}
.mbnr.bg4 a	{background:#555 url(../img/mbnr_bg4_2.png) 50% 0 / cover;}
.mbnr.bg5 a	{background:#555 url(../img/mbnr_bg1_2.png) 50% 0 / cover;} */

.mbnr{flex:1;transition:all 0.2s ease-out;position:relative; width:auto;   text-align:left; box-shadow:2px 4px 10px rgba(0,0,0,0.2)}
.mbnr:hover	{transform:translateY(-10px);}
.mbnr a{display:block;color:#fff;padding:30px 25px; font-weight:500;font-size:22px;}
.mbnr.bg1{background:#17335A;}
.mbnr.bg2{background:#81A950;}
.mbnr.bg3{background:#FEBE01;}
.mbnr.bg4{background:#5A6B7E;}
.mbnr.bg5{background:#2f5989;}
.mbnr.bg6{background:#1f7a68;}
.mbnr.bg1:after{content:''; display:inline-block; background:url(../img/mnbr01.png); width:60px; height:60px; top:18%; right:7%; position:absolute;}
.mbnr.bg2:after{content:''; display:inline-block; background:url(../img/mnbr02.png); width:60px; height:60px; top:18%; right:7%; position:absolute;}
.mbnr.bg3:after{content:''; display:inline-block; background:url(../img/mnbr03.png); width:60px; height:60px; top:18%; right:7%; position:absolute;}
.mbnr.bg4:after{content:''; display:inline-block; background:url(../img/mnbr04.png); width:60px; height:60px; top:18%; right:7%; position:absolute;}
.mbnr.bg5:after{content:''; display:inline-block; background:url(../img/mnbr05.png); width:60px; height:60px; top:18%; right:7%; position:absolute;}
.mbnr.bg6:after{content:''; display:inline-block; background:url(../img/mnbr06.png); width:60px; height:60px; top:18%; right:7%; position:absolute;}

.dhu-research {position: absolute;right: 0;top: -190px;width: 20%;text-align: center;background: url(../img/research_bg.png);display: block;padding:35px 30px;font-size: 30px;font-weight: 700;font-family: ns-neo;color: #ffc !important;transition:all 0.3s;}
.dhu-research span{font-size:16px;display:block;width:110px;line-height:35px;background:#fff;border-radius:35px;margin:15px auto 0;color: #333;}
.dhu-research:hover	{transform:translateY(-10px);}

.mnotice				{position:relative;height:380px;}
.mnotice h3	{font-size:23px;color:#333;font-weight:600;margin:0;line-height:60px;}
.mnotice h3:before	{content:none;}
.mnotice ul				{margin:0 -10px;}
.mnotice ul:after	{content:"";float:none;display:block;width:100%;}
.mnotice ul li	{float:left;width:33.33%;height:320px;position:relative;}
.mnotice ul li .txt-wrap	{position:relative;height:320px;margin:0 10px;;background:#fff; border:5px solid #f4f4f4; transition:all 0.3s ease-out;}
.mnotice .subject		{padding:40px;margin-bottom:0;line-height:1.3;height:100px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.mnotice .subject,
.mnotice .subject a		{font-size:24px;font-weight:600;color:#000;transition:all 0.3s ease-out;}
.mnotice .subject a:hover	{color:#1a2073;}
.mnotice .desc			{margin:40px;line-height:1.4;height:60px;overflow:hidden;font-size:14px;color:#999;}
.mnotice .date			{position:absolute;bottom:0;width:100%;line-height:60px;padding:0 40px;font-size:12px;color:#999; background:#F6F7FA;}
.mnotice .date:before	{content:"\f017";font-family:FontAwesome;margin-right:10px;}
.mnotice .txt-more		{display:none;}

#popupzone2	{height:380px;}
#popupzone2 ul	{height:320px;}
#popupzone2 h3	{font-size:23px;padding:0;}
#popupzone2 .pager	{top:0;padding:0;}
#popupzone2 .popimg, #popupzone2 .noimg	{height:320px;line-height:320px;}

.main-section2	{padding-top:20px; padding-bottom:90px; margin-top:15px;}
.main-section2 .bx	{margin:10px;}

.mnewslist-img			{text-align:center;}
.mnewslist-img ul		{margin:0 -10px;}
.mnewslist-img ul li	{padding:0 10px;position:relative; }
.mnewslist-img h3		{display:none;}
.mnewslist-img h3:before		{content:none;}
.mnewslist-img .img_frame		{position:relative;overflow:hidden;height:330px;}
.mnewslist-img .img_frame:before	{content:"";display:block;position:relative;z-index:1;width:100%;height:100%;background:linear-gradient(to top, rgba(0,0,0,0.3) 0%, rgba(255,255,255,0) 50%);}
.mnewslist-img > .img_frame img	{min-width:100%;height:100%;object-fit:cover;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); }
.mnewslist-img .txt-wrap		{position:absolute;left:10px;bottom:0;padding:30px;z-index:9;width:calc(100% - 20px);}
.mnewslist-img .txt-wrap .subject	{height:30px;overflow:hidden;text-align:left;}
.mnewslist-img .txt-wrap .subject,
.mnewslist-img .txt-wrap .subject a		{color:#fff;font-size:19px;}
.mnewslist-img .txt-wrap .desc			{display:none;}
.mnewslist-img .txt-wrap .date			{position:absolute;top:0;font-size:13px;color:#fff;}
.mnewslist-img .txt-wrap .date:before	{content:"\f017";font-family:FontAwesome;margin-right:5px;}
.mnewslist-img .txt-more,
.mnewslist-img .more	{display:none;}

.mnewslist-img > ul li:hover .img_frame img{transform:scale(1.05); transition:all 0.3s ease-out;}


.main-video	{background:url(../img/novideo.png) no-repeat;background-size:cover;position:relative;height:330px;}
.main-video a	{display:block;}
.main-video .ico	{display:block;width:70px;height:70px;line-height:70px;text-align:center;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.main-video .ico:before	{content:"\f04b";font-family:Fontawesome;}

.main-quick			{padding:40px 0;}
.main-quick li		{float:left;width:20%;}
.main-quick li a	{display:block;text-align:center;font-size:18px;color:#333;padding:20px; transition:0.5s;}
.main-quick li span	{display:inline-block;width:80px;height:80px;margin-right:20px;background-color:#C3C3C3;border-radius:50%;background-image:url(../img/mquick_ico.png);background-repeat:no-repeat;transition:all 0.2s ease-out;vertical-align: middle;}
.main-quick li .ico1	{background-position:0 50%;}
.main-quick li .ico2	{background-position:-80px 50%;}
.main-quick li .ico3	{background-position:-160px 50%;}
.main-quick li .ico4	{background-position:-240px 50%;}
.main-quick li .ico5	{background-position:-320px 50%;}
.main-quick li .ico6	{background-position:-400px 50%;}
.main-quick li .ico7	{background-position:-480px 50%;}
.main-quick li a:hover span	{transform:translateY(-10px);}
.main-quick li a:hover {color:#294896;}

/* 메인 동영상 */
.main-mov	{background:#f9FCFE;padding-top:30px; padding-bottom:420px; margin-top:50px;}
.main-mov .mov_frame{position:reltive; height:190px; overflow:hidden;}
.main-mov .tit{margin:10px 0 15px 0; font-size:40px; font-weight:bold; color: #1A2073; }
.main-mov .tit img{width:155px;}
.main-mov .txt{margin-bottom:50px; font-size:18px;}
.main-mov .mov-cont ul{margin:0 -10px;}
.main-mov .mov-cont li{width:calc(25% - 20px); height:350px; float:left; margin:0 10px; padding:0px 0px 40px 0px; border:1px solid #f1f1f1; background:#fff; transition:all 0.5s;}
.main-mov .mov-cont li img{min-width:100%; min-height:100%; object-fit:contain; transform:translateY(-22%);}
.main-mov .mov-cont .mtit:before{content:''; display:block; background:url(../img/ico_play.png); width:50px; height:50px; position:absolute; bottom:130%; left:50%; transform:translateX(-50%);}
.main-mov .mov-cont .mtit{margin-top:40px; padding:10px; position:relative; font-size:18px; font-weight:bold;}
.main-mov .mov-cont .mtxt{margin-top:7px; padding:10px; font-size:16px;}
.main-mov .mov-cont li:hover .mtit{color:#827872;}
.main-mov .mov-cont li:hover {cursor:pointer; box-shadow:5px 5px 20px rgba(0,0,0,0.2); transform:translateY(-4px); }

/* 서브페이지 인사말 greeting */
#greeting {position:relative;}
#greeting:before{content:''; display:block; width:55px; height:2px; background-color:#827872; position:absolute; top:8%; left:0%;}
#greeting .tit{width:calc(35%); float:left; font-weight:300; font-size:30px; margin-top:50px; line-height:42px;}
#greeting .tit span{color:#827872;font-weight:500; }
#greeting .txt{width:calc(65%); float:left; margin-top:50px;  }
#greeting .name{margin-top:40px; font-weight:600; font-family:'KBIZ'; font-size:20px;}



/* 서브페이지 조직도 org */
/*  #org {padding:20px;}
#org > div {position:relative;}
#org .org1{background:url(../img/org1.png)no-repeat 50%; width:90%; height:210px; margin:0 auto; z-index:10; }
#org .org1 .tit{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:30px; color:#fff;}
#org .org1:after{content:''; display:block; position:absolute; top:98%; left:50%; width:1px; height:316px; background-color:#D7D7D7; z-index:-1; }
#org .org2{position:absolute; background-color:#fff; border:2px solid #827872; border-radius:50%; width:140px; height:140px; position:absolute; top:22%; left:55%;  margin-top:120px; z-index:10; line-height:140px; color:#827872; font-weight:500; font-size:20px;}
#org .org3{margin-top:375px; width:100%; text-align:center; position:relative;} 
#org .org3 .orgbox{position:relative; display:inline-block; width:270px; height:65px; line-height:60px; color:#fff; background-color:#827872; font-size:17px; border-radius:10px;}
#org .org3:before{content:''; display:inline-block; width:425px; height:1px; background-color:#d7d7d7; position:absolute; top:-98%; left:30.4%;}
#org .org3 .orgbox:nth-of-type(1){margin-right:150px;}
#org .org3 .orgbox:before{content:''; display:inline-block; width:1px; height:63px; background-color:#d7d7d7; position:absolute; top:-98%; left:50%;} */


/* 서브페이지 프로그램 program1 
#program1 {background:url(../img/program1.png) no-repeat; width:100%; height:380px; position:relative; z-index:10;}
#program1 p{transform:rotate(-90deg);  transform-origin:188px 151px; display:block; color:#fff;letter-spacing:3px; font-size: 15px;}*/

/* 서브페이지 프로그램 program2 
#program2 {background:url(../img/program2.png) no-repeat; width:100%; height:380px; position:relative; z-index:10;}
#program2 p{transform:rotate(-90deg);  transform-origin:390px 358px; display:block; color:#fff;letter-spacing:3px; font-size: 15px;} */


/* 서브페이지 지도 */
.map_info{width:60%;display:inline-block;}
.map_info input{display:inline-block; width:265px; height:47px; border:1px solid #21488D;}
.map_info input.arr{font-size:15px; font-weight:700; color:#21488D;}
.m_search{display:inline-block; padding:8px 20px; vertical-align:middle; background-color:#21488D; color:#fff; border:2px solid #fff; transition:0.3s; border-radius:5px;}
.m_search:hover{cursor:pointer; background:#fff; color:#21488D; border:2px solid #21488D;}

#gnbmn ul.depth1 li a:hover,
#gnbmn ul.depth1 li a.on{color:#827872!important;}
.img_frame img		{resize: both; object-fit:cover; max-width:100%;min-width:100%;min-height: 100%;-ms-interpolation-mode: bicubic;position:absolute; left: -100%; right: -100%; top: -100%; bottom: -100%;margin:auto;!important;}
.main-section .mbnrbx .col1 .bx{margin:0;!important;}

.main-section{top:-110px;}
#mvslide{height:750px; position:relative !important;}
#mvslide .bx-wrapper{height:750px; position:relative;}
#mvslide .bx-wrapper .bx-viewport {min-height:100% !important;  }
/* #mvslide .control {position:absolute; top:70px; left:50%; color:#fff; z-index:1000;} */
#mvslide .control {display:none;}
#mvslide .bx-wrapper:before{content:"Lifelong Education System Support Program"; color:#999; position:absolute; left:300px; top:40%; margin-top:200px; transform:rotate(-90deg); font-size:11px; line-height:1; text-align:center; width:400px; height:12px; transform-origin:0 0 ; letter-spacing:4px; z-index:10000;}
#mvisual img{width:auto;}