@charset "UTF-8";
#wrapper{overflow:hidden; position: relative; font-family: 'NotoKr';	}
.wrap{position:relative; width:1220px; margin:0 auto; box-sizing:border-box}

@media only screen and (max-width:1220px){
    .wrap{width:96%; margin: 0 2%;}
}

/* header */
#header .header_gnb {display:inline-block; width:100%; background:#453c55;}
#header .header_gnb ul {width:100%; display:table; border-right:1px solid #5c546a;}
#header .header_gnb li {display:table-cell; border-left:1px solid #5c546a; text-align:center;}
#header .header_gnb li a:hover,
#header .header_gnb li.on a {background:#fff; color:#453c55}
#header .header_gnb li a {display:inline-block; color:#d5d1dd; padding:10px 0; font-size:15px; width:100%;}
#header{height:222px; background-color:#fff;}

#header .header_top .logo{ position: absolute; top:11px; left:0;}
#header .header_top .logo a{display: block; height:60px; line-height:0; color:transparent; font-size:0;}
#header .header_top .logo a .youth{display:inline-block; width:302px; height:60px; margin-right:12px; background-repeat:no-repeat; background-position:left center; background-image:url(../images/common/logo.jpg); background-size:contain; vertical-align:top; color:transparent; font-size:0;}
#header .header_top .logo a .dream{display:inline-block; width:111px; height:60px; background-repeat:no-repeat; background-position:left center; background-image:url(../images/common/dream_logo2.jpg); background-size:contain; vertical-align:top; color:transparent; font-size:0;}
#header .search{position: relative; top: 30px; width: 300px; margin: 0 auto;}
#header .search .search_btn{display: none;}
#header .search .form_area{position: relative; padding:0 32px 15px 0;  border-bottom: 3px solid #2b2b2b;}
#header .search .form_area .keyword{display: block; width: 100%; padding: 0; border: none; background-color: transparent; font-size: 15px; color: #313131; line-height: 1;}
#header .search .form_area .keyword::placeholder {color:#313131;}
#header .search .form_area .submit{display: block; position: absolute; top: 0; right: 0; width: 24px; height: 25px; border: none; background: url(../images/common/search.png) no-repeat; font-size: 0;}
#header .search .form_area .search_close{display: none;}
#header .header_right {position: absolute; top: 35px; right: 0;}
#header .header_right .text_link{display: inline-block; vertical-align: middle;}
#header .header_right .text_link li{float: left; position: relative; padding:0 11px;}
#header .header_right .text_link li:not(:first-child):before{display: block; position: absolute; top: calc(50% - 5px); left: 0; width: 1px; height: 11px; background-color: #c1c1c1; }
#header .header_right .text_link li a{color:#656565;}
#header .header_right .dream_logo{display:none; width:150px;float:right; margin-top:-15px;}
#header .header_right .logo1388{float:right; width:151px; margin-top:-15px;}
#header .header_right .logo1388 a{display:block; height:53px; background-repeat:no-repeat; background-position:center center; background-image:url(../images/common/logo_1388.png); background-size:contain; color:transparent; font-size:0;}



@media only screen and (max-width:1220px){
    #header{height: 83px;}
    #header .header_top .logo{left: 2%;}
    #header .header_top .logo a{padding-top:10px; box-sizing:border-box;}
	#header .header_top .logo a .youth{height:44px;}
	#header .header_top .logo a .dream{height:44px;}
    #header .search{position: absolute; top: 29px; right: calc(2% + 30px); width: auto;}
    #header .search .search_btn{display: block; width: 23px; height: 25px; background: url(../images/common/search_m.png) no-repeat;}
    #header .search .form_area{display: none;}
    #header .search.active:before{display: block; position: fixed; top: 0; left: 0vw; z-index: 10; width: 100vw; height: 140px; background-color: #000; opacity:0.89;}
    #header .search.active .form_area{display: block; position: fixed; top: 32px; left: calc(50vw - 141px); z-index: 20; width: 282px; margin: 0 auto;}
    #header .search .form_area .search_close{display: block; position: absolute; left: calc(50% - 8px); top: 60px; width: 17px; height: 17px; background:url(../images/common/header_m_sprite.png) no-repeat -30px -44px;}
    .search_active #lnb{z-index: 0;}
    #header .header_right .text_link,
    #header .header_right .weather,
    #header .header_right .org_go{display: none;}
    #header .header_right .dream_logo{position:absolute; float:none; top:-7px; right:88px; margin-top:0; width:87px; height:34px;}
	#header .header_right .logo1388{position:absolute; float:none; top:-11px; right:88px; margin-top:0;}
	#header .header_right .logo1388 a{height:0; padding:17% 0; background-position:right center;}
    #header .search .form_area .keyword::placeholder {color:#fff;}
    #header .search .form_area .submit {background: url(../images/common/search_wh.png) no-repeat;}
}

@media only screen and (min-width:1141px) and (max-width:1220px){
#header .header_top .logo a .youth{width:19vw; margin-right:1vw;}
#header .header_top .logo a .dream{width:7vw;}
#header .header_right .logo1388{width:11vw;}
}

@media only screen and (max-width:1140px){
#header .header_top .logo a .youth{width:218px;}
#header .header_top .logo a .dream{width:80px;}
#header .header_right .logo1388{width:105px;}
}

@media only screen and (max-width:540px){
#header .header_top .logo{left:0;}
#header .header_top .logo a .youth{width:170px; margin-right:6px;}
#header .header_top .logo a .dream{width:65px;}
#header .header_right .logo1388{top:-8px; right:70px; width:84px;}
}

@media only screen and (max-width:420px){
#header .header_top .logo a .youth{width:142px;}
#header .header_top .logo a .dream{width:54px;}
#header .header_right .logo1388{top:-6px; right:66px; width:76px;}
}

@media only screen and (max-width:360px){
#header .header_top .logo a .youth{width:128px;}
#header .header_top .logo a .dream{width:46px;}
#header .header_right .logo1388{top:-2px; right:65px; width:57px;}
}

/* lnb */
@media only screen and (min-width:1221px){

    /* 메뉴 */
    #lnb{overflow:hidden; position:absolute; top:152px; left:0; width:100%; }
    #lnb .nav,
    #lnb .nav * {transition-duration:0.25s; transition-timing-function:linear;}
    #lnb .nav a{word-break:keep-all;}

    #lnb .nav { position:relative; z-index:300; word-break:keep-all;  transition-property:height;}


    .lnb_active #lnb .nav:after { opacity:1;}

    #lnb .nav .menu_top{display: none;}
    #lnb .nav .gnb_m_left{display: none;}

    /*새창*/
    #lnb nav a[target="_blank"]:after{content:"\e980"; display:inline-block; margin:0 5px; vertical-align:middle; line-height: 1; font-size: 15px; color:#000; font-family: xeicon !important;}
    #lnb .nav .depth1_text[target="_blank"]:after{color: #222222;}

    /* 중앙정렬 넓이 */
    #lnb .nav .depth1{position:relative; z-index:10; width:1220px; margin:0 auto; padding:0 5px; border-top:1px solid #d5d5d5}

    /* 1차메뉴 */
    #lnb .nav .depth1_list {width:100%; display:inline-block; margin:-1px 0 0 0; font-size:0}
    #lnb .nav .depth1_item {position:relative; display:inline-block; width: auto;margin:0 32px}

    #lnb .nav .depth1_text {display:block; position:relative; height: 70px; font-size:15px;  font-family:"NanumS"; letter-spacing:-0.0005em; color:#222222; 	font-weight:600; text-align: center;}
    #lnb .nav .depth1_text span{display:inline-block; line-height:20px; padding:25px 5px 21px; }

    #lnb .nav .depth1_item.active .depth1_text,
    #lnb .nav .depth1_text:hover,
    #lnb .nav .depth1_text:focus{color: #6c57cc; font-weight:bold}

    #lnb .nav .depth1_item.active .depth1_text span,
    #lnb .nav .depth1_text:hover span,
    #lnb .nav .depth1_text:focus span{border-bottom:3px solid #6c57cc;}
    /* 2차메뉴 */
    #lnb .nav .depth2 {overflow:hidden; visibility:hidden; position:absolute;  left:50%; z-index:20;  width:190px; opacity:0; margin:0 0 0 -95px; transition-property:visibility, background-color; word-break:keep-all;}

    #lnb .nav .depth2_list {position:relative;background:#fff; border-left:1px solid #3e3e3e; border-right:1px solid #3e3e3e; border-bottom:1px solid #3e3e3e;}
    #lnb .nav .depth2_item{display:inline-block; border-bottom:1px solid #e5e5e5; position:relative; width:100%; padding:0 22px}
    #lnb .nav .depth2_text {padding-right:15px; display:inline-block; width:100%; padding:9px 0; font-size:15px; color:#212121; line-height: 22px;}
    #lnb .nav .depth2_text:hover,
    #lnb .nav .depth2_text:focus{font-weight: 600; text-decoration: underline;}
    /* 2차메뉴 활성화 */
    #lnb .nav .depth1_item.active .depth2 {overflow:visible; visibility:visible; opacity:1}

    /* 메뉴 3개마다 cut */
    #lnb .nav .depth2 .cut{float:left; width:100%;}

    /* 3차메뉴 */
    #lnb .nav .depth3{display: none;}

    /* 메뉴높이 */
    #lnb .nav {height:69px; }
    #lnb .nav .depth2 {top:69px; }
	#lnb .nav li:last-child .depth2 {top:69px}
    #lnb .nav:after{ top:69px;}


    /* 모바일 전용  */
    #lnb .nav_open,#lnb .nav_close {display:none;}
    .mobile_top{display: none;}
}

@media only screen and (max-width:1220px){
    .nav_open,
    .nav_close,
    #lnb .nav,
    #lnb .nav * {transition-property:none; transition-duration:0.25s; transition-timing-function:linear;}
    #header .header_gnb {display:none}
    /* 메뉴-공통 */
    #lnb .nav {position:relative; font-size:0; line-height:0px;}
    #lnb .nav ul{visibility:hidden; position:relative;}
    #lnb .nav .depth1{visibility:visible; z-index:30;}
    #lnb .nav li.cut {display: none;}
    #lnb .nav a {display:block; visibility: visible; position:relative;}

    /*새창*/
    #lnb nav a[target="_blank"]:after{content:"\e980"; display:none; margin:0 5px; vertical-align:middle; line-height: 1; font-size: 15px; color:#000; font-weight: normal; font-family: xeicon !important;}

    /* 효과 적용 */
    #lnb .nav .depth1 div,
    #lnb .nav .depth1 ul,
    #lnb .nav .depth1 li,
    #lnb .nav .depth1 a{transition-property:all;}

    /* 모바일 레이아웃 세팅 */
    #lnb{position: absolute; top:0; left: 0; z-index:202; width: 100%;}
    #lnb .depth1 * {overflow:hidden;}
    #lnb .nav {overflow-y:auto; visibility:hidden; position:fixed; top:0; right:0; width:320px; height:100%; background-color:#fff;}
    #lnb .nav .depth1 li {float:none; position:relative; height:auto;}

    /* 버튼 */
    #lnb .nav_open{ position:absolute; top:29px; right: 2%; width:25px; height:24px; background:url(../images/common/header_m_sprite.png) no-repeat -5px -9px; }
    #lnb .nav_close{ position:absolute; top:14px; right:22px; width:17px; height:17px; background:url(../images/common/header_m_sprite.png) no-repeat -70px -13px;}
    #lnb .nav_button{display:block; width:100%; height:100%; font-size:3px; color:transparent;}


    /*모바일 상단, 하단*/
    #lnb .mobile_top{display: block; position: relative; height: 100px; background-color: #fff;}
    #lnb .mobile_top .text_link{height: 45px; padding-left: 30px;}
    #lnb .mobile_top .text_link li{float: left; position: relative; padding: 0 12px; line-height: 45px;}
    #lnb .mobile_top .text_link li:not(:first-child):before{display: block; visibility: visible; position: absolute; top: calc(50% - 4px); left: 0; width: 1px; height: 8px; background-color: #bcbcbc;}
    #lnb .mobile_top .text_link li a{font-size: 14px; color: #2f2f2f; line-height: 45px;}
    #lnb .menu_site{position: relative; height: 55px; padding-right: 55px;}
    #lnb .menu_site .menu_btn{display: block; position: relative; width: 100%; height: 55px; padding:0 35px; background-color: #343434; text-align: left; line-height: 55px;}
    #lnb .menu_site .menu_btn:before{display: block; position: absolute; top: calc(50% - 4px); right: 24px; width: 15px; height: 8px; background:url(../images/common/header_m_sprite.png) no-repeat -214px -9px;}
    #lnb .menu_site .menu_btn span{display: inline-block; font-size: 15px; color: #fff; line-height: normal; vertical-align: middle; }
    #lnb .menu_site .site_btn{display: block; position: absolute; top: 0; right: 0; width: 55px; height: 55px; background-color: #ea5c44; text-align: center; line-height: 55px;}
    #lnb .menu_site .site_btn:before{display: inline-block; width: 30px; height: 22px; background: url(../images/common/header_m_sprite.png) no-repeat -94px -10px; vertical-align: middle;}
    #lnb .menu_site .site_list{overflow: hidden; position: absolute; top: 100%; left: 0; z-index: 10; width: 100%; transform:scaleY(0); transform-origin:top; transition:all 0.2s linear;}
    #lnb .menu_site .site_list li{padding: 15px 35px; border-bottom: 1px solid #ed735e; background-color: #ea5c44;}
    #lnb .menu_site .site_list li a{color: #fff; font-size: 17px; line-height:1.2; }
    #lnb .menu_site.site_active .site_list{ visibility: visible;transform:scaleY(1); }

    /* 활성화 */
    .lnb_open {overflow-x:hidden; overflow-y:hidden;}
    .lnb_open #lnb:before{display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color:rgba(0,0,0,0.5);}
    .lnb_open #lnb .nav {visibility:visible;}
    .lnb_open #lnb .nav .depth1 {visibility:visible;}

    /* 1차메뉴 */
    #lnb .nav .depth1{visibility: visible; z-index:auto; width:100%; height:auto;}
    #lnb .nav .depth1_title{display:block; padding:19px 0 15px; border-bottom: 2px solid #9e897d; font-size: 28px; font-weight: 600; line-height: 33px; color:#9e897d; font-family: Wonchuri;}
    #lng .nav .depth1_list{height:auto;}
    #lnb .nav .depth1_item{position:relative;}
    #lnb .nav .depth1_item.has:before{display:block; visibility: visible; position:absolute; top:18px; right:24px; width:16px; height:16px; background:url(../images/common/header_m_sprite.png) no-repeat -131px -13px; }
    #lnb .nav .depth1_item.has.active:before{background-position: -154px -13px;}
    #lnb .nav .depth1_text{padding:15px 35px; border-bottom:1px solid #d9d9d9; font-size:17px; font-weight:600; color:#161616; line-height:1.2;}
    #lnb .nav .depth1_text[target="_blank"]:after{display:inline-block;}

    /* 2차메뉴 */
    #lnb .nav .depth2 {visibility:hidden;  position:relative; opacity:1;}
    #lnb .depth2_item .depth2_text{padding:0 35px 0 47px;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2 {visibility:visible;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item{position:relative;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.has:before{display:block; visibility: visible; position:absolute; top:18px; right:26px; width: 10px; height: 10px; background: url(../images/common/header_m_sprite.png) -178px -16px;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.has.active:before{background-position:-198px -16px;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item .depth2_text {padding-top: 15px; padding-bottom: 15px; border-bottom:1px solid #d9d9d9; font-size:16px; color:#161616; line-height:1.2;}

    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.active .depth2_text{border-bottom: none; color:#c63019; text-decoration: underline;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item .depth2_text[target="_blank"]:after{display:inline-block;}

    /* 3차메뉴 */
    #lnb .nav .depth3 {background-color:#fff;}
    #lnb .nav .depth3_text{padding-right:35px; padding-left:60px;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.active .depth3 {visibility:visible; margin-bottom: 15px; padding:15px 0; border-bottom:1px solid #d6d6d6;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.active .depth3_item{position:relative;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.active .depth3_item .depth3_text {padding-top:6px; padding-bottom:6px; font-size:15px; color:#575757; line-height:18px;}
    .lnb_open.lnb_active #lnb .depth1_item.active .depth2_item.active .depth3_item .depth3_text[target="_blank"]:after{display:inline-block; color: #575757;}

    /* 왼쪽에서 오른쪽쪽으로 슬라이드 효과 */
    #lnb .nav {right:-100%; left:auto; max-height:none; transition-property:visibility, right;}
    .lnb_open #lnb .nav {right:0;}
}

/* footer */
#footer{position: relative; background-color: #454959; word-break:keep-all;}
#footer .wrap{padding: 50px 0;}
#footer .goto_top{display: block; position: absolute; top: 0; right:0; width: 57px; height: 56px; padding-top: 10px; background-color: #eb5c45; font-size: 12px; color: #fff; text-align: center}
#footer .goto_top:before{display: block; width: 15px; height: 8px; margin: 0 auto 7px; background: url(../images/common/goto_top.png) no-repeat;}
.footer_nav {text-align: center;}
#footer .goto_top.facebook{right:60px; font-size:0; line-height:0; background-color:#1f75ce; background-image:url(../images/common/footer_facebook.png); background-repeat:no-repeat; background-position:center;}
#footer .goto_top.facebook:before{display:none;}
.footer_nav ul{display: inline-block; padding-bottom: 15px; border-bottom: 1px dotted #6e717d;}
.footer_nav ul li{float: left; position: relative; padding:0 10px;}
.footer_nav ul li:not(:last-child):before{display: block; position: absolute; top: calc(50% - 1px); right: -1px; width: 2px; height: 2px; background-color: #8c8e98;}
.footer_nav ul li a{font-size: 16px; color: #fff;}
.footer_nav ul li a.facebook:before{display: inline-block; position: relative; top: -2px; width: 26px; height: 26px; margin-right: 3px; background: url(../images/common/footer_sns.png) no-repeat; vertical-align: middle;}
.footer_info{margin-top: 20px; font-size:15px; line-height:24px; color: #d5d9ea; text-align: center;}
.footer_info br{display:none;}
.footer_info p {color:#fff; margin:0 0 5px}
.footer_info .copyright{margin-top: 10px; font-size: 14px; color: #fff; opacity:0.53;}

.footer_info .kko {}
#footer .footer_info .kko {display: block; color:#fff; margin-top: 10px;  line-height:26px; }
#footer .footer_info .kko a {color:#fff;}
#footer .footer_info .kko:before {width: 28px; height: 22px; background: url(../images/common/kko.png) left top no-repeat; display: inline-block; vertical-align: middle;}


@media only screen and (max-width:1220px){
    #footer .wrap{padding-top: 90px;}
    #footer .goto_top{right:auto; left:calc(50% + 5px);}
    #footer .goto_top.facebook{left:auto; right:calc(50% + 5px);}
}

@media only screen and (max-width:640px){
    #footer .wrap{padding-top: 90px;}
    .footer_nav {text-align: left;}
    .footer_nav ul {width: 100%;}
    /*.footer_nav ul li{padding:0 7px;}*/
    .footer_nav ul li a{font-size: 14px;}
    .footer_info{font-size:14px; line-height:18px;}
    .footer_info br{display:block;}
}

#foot_banner_link {width:100%; height:70px; border-top:1px solid #000000; font-size:0px;}
#foot_banner_link .footer_banner {position:relative; width:calc(100% - 240px); display:inline-block;  top:18px; padding-bottom:1px;}
#foot_banner_link .footer_banner .titlebox{position:absolute; top:0; left:0; }
#foot_banner_link .footer_banner .titlebox h2{position:relative; padding:0; line-height:20px; color:rgba(0, 0, 0, 0.8); font-size:18px; font-weight:bold; letter-spacing:-0.075em;}

#foot_banner_link .footer_banner .banner_controller{position:absolute; top:0; left:80px; font-size:0; z-index:10}
#foot_banner_link .footer_banner .banner_controller button, #foot_banner_link .footer_banner .banner_controller a {width:24px; height:24px; border:1px solid #d4d4d4; border-radius:24px; margin:0 2px 0 3px; display:inline-block; box-sizing:border-box; vertical-align:top; border-color:#d7d7d7; border-style:solid;  background-repeat:no-repeat; background-image:url(../images/common/foot_link_icon.png); color:transparent; font-size:0;}
#foot_banner_link .footer_banner .banner_controller button.banner_prev{background-position:5px 5px;}
#foot_banner_link .footer_banner .banner_controller button.banner_next{background-position:-66px 5px;}
#foot_banner_link .footer_banner .banner_controller button.banner_ctrl {background-position:-19px 5px;}
#foot_banner_link .footer_banner .banner_controller button.banner_ctrl.slick-play{background-position:-45px 5px;}


#foot_banner_link .footer_banner .banner_controller a {background-position:-88px 5px;}
#foot_banner_link .footer_banner .banner_wrap {position: relative; width:calc(100% - 20px); height: 24px; margin: 0 auto; padding: 0 0 0 200px; box-sizing: border-box; overflow: hidden;}
#foot_banner_link .footer_banner .banner_wrap .banner_list {padding-top:3px;}
#foot_banner_link .footer_banner .banner_wrap .banner_item {display:inline-block}
#foot_banner_link .footer_banner .banner_wrap .banner_item a{position:relative; display:block; padding:0 11px; line-height:20px; color:#1e1e1e; font-size:16px;}
#foot_banner_link .footer_banner .banner_wrap .banner_item:first-child a:before {display:none}


#foot_banner_link .footer_link{position:relative;z-index:200; display:inline-block; width:240px; top:13px;}
#foot_banner_link .footer_link .tit{position:relative;display:block; padding:12px 35px 14px 30px; box-sizing:border-box; font-size:15px;line-height:16px;color:#000; border:2px solid #3c3c3c;  height:44px;border-radius:44px; transition-property:border-color, background-color; transition-duration:200ms; transition-timing-function:ease-in-out;}
#foot_banner_link .footer_link .tit:before{position:absolute; top:18px; right:18px; display:block; width:13px; height:7px; background-repeat:no-repeat; background-position:-118px -3px; background-image:url(../images/common/foot_link_icon.png); content:''; transition:background-position 200ms ease-in-out;}
#foot_banner_link .footer_link .tit.on:before{background-position:-144px -3px;}

#foot_banner_link .footer_link  .cont_box {display:none;position:absolute;right:0;bottom:48px; width:97%;  max-height:210px; padding:22px 22px 15px 16px; box-sizing:border-box; overflow-y:scroll; background-color:#5c6380;}


#foot_banner_link .footer_link .cont_box li{display:inline-block; width:100%; margin-bottom:6px;}
#foot_banner_link .footer_link .cont_box li a{position:relative;display:inline-block; font-size:14px; color:#FFF; box-sizing:border-box; border-bottom:1px solid #5c6380; padding:0 22px 2px 0; letter-spacing:-0.04em;}
#foot_banner_link .footer_link .cont_box li a:hover{font-weight:bold; text-decoration:none; border-bottom:1px dotted #fff; }
#foot_banner_link .footer_link .cont_box li a:hover:after {content:""; width:13px; height:13px; position:absolute; top:4px; right:2px; background:url(../images/common/footer_blank.png) no-repeat left top;}

@media only screen and (max-width:640px){
    #foot_banner_link{height:auto;}
    #foot_banner_link .footer_link{display:block; width:100%; top:auto; margin-bottom:20px;}
    #foot_banner_link .footer_banner{width:100%; top:auto; padding:18px 0;}
    #foot_banner_link .footer_banner .titlebox{top:20px;}
    #foot_banner_link .footer_banner .banner_controller{top:20px;}
}
@media only screen and (min-width:1221px){
	#lnb .nav .depth1_item{margin:0 51px;}
}