@charset "utf-8";

/*
 * =================================================================================
 * INFORMATION
 * ---------------------------------------------------------------------------------
 * @File Name 	: header.css
 * @Description : header Style Sheet
 * @Version 	: 1.0.0
 * @Create Date :
 * @Update Date : N/A
 * @History		: N/A
 * =================================================================================
 */


/* live_movie */
.live_view { display:inline-block; width:100%; position:relative;}
.live_view::after { padding-top:56.25%; display:block; content: '';}
.live_view .movie { position:absolute; top:0; bottom:0; right:0; left:0; background:#cccccc; font-size:0px; overflow:hidden; }
.live_view .movie img { width:100%; height:100%;}


/* Layout */
.inner { min-width:360px; width:1400px; margin:0 auto}

#skip_to_content { position:absolute; left:0; top:-10em; width:100%; z-index:99999;}
#skip_to_content a:active, #skip_to_content a:focus { position:absolute; left:0; top:10em; width:100%; height:27px; color:#fff; text-align:center; text-decoration:none; line-height:30px; outline:0;}


/* Header --------------------------------------------------------------------------- */
#header { position:relative; z-index:200;}

/* tnb */
.tnb { height:45px; background:#ececec;}
.other_site { float:left; position:relative; height:45px; padding-left:0px;}
.other_site li { float:left; height:45px; width:120px; margin-top:0px; border-radius:0; overflow:hidden; border-right:1px solid #fff;}
.other_site li a { display:block; line-height:45px; padding:0 10px; font-size:13px; text-align:center; color:#fff;}
.other_site li a:hover { font-family:'NanumGothicBold', sans-serif; text-decoration:underline;}
.other_site li:nth-child(1) { background:#ebebeb; border-left:1px solid #fff;}
.other_site li:nth-child(1) a { color:#333333;}
.other_site li:nth-child(1) a:hover { color:#000;}
.other_site li:nth-child(2) { background:#ebebeb;}
.other_site li:nth-child(2) a { color:#000000;}
.other_site li:nth-child(2) a:hover { color:#000;}

/* other_con */
.other_con { float:right;}
.other_con li{ float:left; margin-left:2px;}

/* sns */
.sns { float:left; position:relative; padding-right:10px;}
.sns a { float:left; width:37px; height:37px; background:url("../img/header/icon_sns.png") no-repeat; font-size:0px; border-radius:50%; margin:4px 1.5px;}
.sns a.blog { background-position:left;}
.sns a.Insta { background-position:-37px;}
.sns a.facebook { background-position:-74px;}
.sns a.kakao { background-position:right;}
.sns a.twitter { background-position:-80px;}
.sns a.youtube { background-position:-120px;}

/* control_text */
.control_text { float:left; height:45px; line-height:45px; vertical-align:middle; background:#aeaeae;}
.control_text button { position:relative; float:left; width:38px; height:45px; border:0; font-size:14px; background:transparent; color:#ffffff; padding:0; cursor:pointer; border-radius:0;}
.control_text button:hover, .control_text button:active, .control_text button:focus { color:#fff; z-index:1;}
.control_text button::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:22px; background:#fff;}
#btn_text_large::before { display:none;}
#btn_text_default { width:38px; font-size:11px; color:#fff; text-align:center;}
#btn_text_small { border-right:0;}

/* gnb_search - tnb 안에 위치 */
.gnb_search { float:right; position:relative; width:45px;}
.btn_gnb_search { font-size:0px; position:absolute; right:0px; top:0px; width:45px; height:45px; background:#1a3a6b url("../img/header/btn_search.png") no-repeat center;}
.btn_gnb_search img {}
.smartsearch { display:none; position:absolute; top:45px; right:0px; width:450px; min-height:100px; background:#1a3a6b; z-index:1000;}
.search_Box { margin:0; width:450px; min-height:100px; position:relative; padding-left:8px;}
.smartsearchBoxtit { color:#fff; padding:10px 0 10px 15px;}
.search_Box fieldset { display:inline-block; margin:0 10px;}
.search_Box .search_wrapbox { background:#fff; border-radius:5px; width:360px; height:45px; line-height:45px; position:relative;}
.search_Box .search_wrapbox label { display:none;}
.search_Box .input_keyword { font-size:16px; padding:0 0 0 10px !important; background:none; height:45px; line-height:45px; width:310px !important; border:none !important;}
.search_Box .btn_search { background:#fff url("../img/header/btn_m_search.png") no-repeat center; width:45px; height:45px; position:absolute; right:0px; border:0px; font-size:0px; cursor:pointer;}
.smartsearchclose { position:absolute; top:0px; right:-55px;}
.smartsearchclose a { width:45px; height:45px; float:right; background:#5658b2; border-radius:5px;}
.smartsearchclose a img { width:100%;}


/* headertop */
#headertop { position:relative; height:100px;}
#headertop .logo_inner { position:relative; width:1400px; margin:0 auto;}
.top_logo { float:left; width:330px;}
.top_logo a { position:relative; top:19px; display:block; z-index:1;}
.top_logo img { width:100%;}

/* gnb_wrap */
#headertop #gnb_wrap { height:100px; border-bottom:1px #ddd solid; z-index:10;}
#gnb_wrap #dc_menu { height:auto; display:block;}
#gnb_wrap .offscreen { display:none;}
#gnb_wrap .gnb_inner { width:1400px; margin:0 auto; position:relative;}

/* gnbquick (모바일에서만 표시) */
#gnb_wrap .gnbquick { position:relative; height:60px; background:#333257;}
#gnb_wrap .gnbquick li { float:left; height:60px;}
#gnb_wrap .gnbquick .home { width:60px; height:60px;}
#gnb_wrap .gnbquick .home a { display:inline-block; width:60px; height:60px; padding:20px 0 0; text-align:center; vertical-align:middle; border-right:solid 1px #555;}
#gnb_wrap .gnbquick .mview_slogan { border-left:solid 1px #555577; padding-left:10px; color:#fff; line-height:60px; font-size:16px;}
#gnb_wrap .gnbquick .mview_slogan strong { font-size:18px; font-family:'NanumGothicBold', sans-serif;}


/* gnb */
#gnb { width:100%; height:100px; min-width:1400px;}
#gnb a { display:block;}
#gnb .depth { display:none;}

/* memu_bg */
#gnb .memu_bg { position:absolute; left:0px; width:100%; height:100px; font-size:0px;}
#gnb .memu_bg .depth { position:absolute; top:100px; left:0px; width:100%; height:250px; background:#f5f7f9; border-bottom:1px #eee solid;}

/* 1 Depth */
#btn_menu, #btn_search { display:none;}
#gnb > li { display:block; float:left; width:152px;}
#gnb > li:last-child {}
#gnb > li > a { position:relative; display:block; height:100px; line-height:100px; color:#333; font-size:20px; font-family:"NanumBarunGothic"; text-align:center; text-decoration:none;}
#gnb > li.active > a { border-bottom:5px solid #0071b9; color:#00428e;}

/* 2 Depth */
.gnb2 { position:static;}
#gnb > li > div { display:none; position:absolute; top:100px; left:auto; z-index:10; background:url("../img/header/gnb_ptline.png") repeat-y left;}
#gnb > li > div .dep_list li { padding:0px;}
#gnb > li > div .dep_list a { text-align:left; display:block; padding:8px 0 8px 17px; line-height:22px; background:url("../img/header/icon_hdmenu.png") no-repeat 3px 11px; font-size:17px; letter-spacing:-0.02em; background-size:14px;}
#gnb > li > div .dep_list a:hover { color:#0071b9; background:url("../img/header/icon_hdmenu_over.png") no-repeat 4px 12px; text-decoration:underline; background-size:14px; padding-left:18px;}
#gnb > li > div .dep_list { width:100%; height:250px; padding:15px 0;}
#gnb > li > div .dep_list .no_br { display:none;}

/* 3 Depth */
#gnb > li > div .dep_list .sub_3D a { height:24px; line-height:26px; font-size:15px; color:#999; background:url("../img/header/icon_menu.png") no-repeat 17px center;}
#gnb > li > div .dep_list .sub_3D a:hover { color:#000; background:url("../img/header/icon_menu.png") no-repeat 17px center;}
#gnb > li > div .dep_list .sub_3D a:last-child { margin-bottom:15px;}

/* mview */
.mview, .mviewC { display:none !important;}
.wview, .wviewC { display:block !important;}
.mviewT { display:none !important;}
.wviewT { display:table !important;}




@media all and (max-width:1024px) and (min-width:768px){

.mask { display:none; opacity:0; position:fixed; top:0; left:0; right:0; bottom:0; height:100%; background:url("../img/header/bg_op60.png"); z-index:100; background-size:100% 100%;}

/* Header */
#header { width:100%;}
.tnb { width:100%;}

/* headertop */
#headertop { height:100px;}
#headertop .logo_inner { width:100%;}
.top_logo { margin-left:20px; width:280px;}
.top_logo img { width:100%;}

/* layout */
.mview, .wviewC { display:block !important;}
.wview, .mviewC { display:none !important;}
.mviewT { display:none !important;}
.wviewT { display:table !important;}

.gnb_allmneu, #btn_search { display:none;}
.inner { padding:0; width:100%;}

#gnb_wrap { height:80px; width:100%; z-index:1;}
#gnb_wrap .gnb_inner { width:100%; margin:0; position:relative;}

/* dc_menu */
#dc_menu { display:block; opacity:0; position:absolute; top:99px; right:0px; width:100%; height:auto; background:#fff;}

/* gnb */
#gnb { width:100%; min-width:inherit; height:auto;}
#gnb .depth { display:none !important;}

/* memu_bg */
#gnb .memu_bg .depth { position:absolute; top:60px; left:0px; height:250px; background:#f5f7f9;}

/* 1 Depth */
#btn_menu, #btn_search { display:none;}
#gnb > li { display:block; float:left; width:14.28%;}
#gnb > li > a { position:relative; display:block; height:60px; line-height:60px; color:#333; font-size:17px; font-family:"NanumBarunGothic"; text-align:center; text-decoration:none;}
#gnb > li > a:hover, #gnb > li.active > a { border-bottom:3px solid #0071b9; color:#00428e;}

/* 2 Depth */
.gnb2 { position:static;}
#gnb > li > div { display:none; top:120px;}
#gnb > li > div .dep_list { height:249px; padding:15px 0;}
#gnb > li > div .dep_list a { text-align:left; display:block; padding:8px 0 8px 17px; line-height:22px; background:url("../img/header/icon_hdmenu.png") no-repeat 3px 11px; font-size:16px; letter-spacing:-0.05em; background-size:14px;}
#gnb > li > div .dep_list a:hover { color:#0071b9; background:url("../img/header/icon_hdmenu_over.png") no-repeat 4px 12px; text-decoration:underline; background-size:14px; padding-left:18px;}

/* 3 Depth */
#gnb > li > div .dep_list .sub_3D a { height:24px; line-height:26px; font-size:15px; color:#999; background:url("../img/header/icon_menu.png") no-repeat 17px center;}
#gnb > li > div .dep_list .sub_3D a:hover { color:#000; background:url("../img/header/icon_menu.png") no-repeat 17px center;}
#gnb > li > div .dep_list .sub_3D a:last-child { margin-bottom:15px;}

/* btn_menu - btn_search */
#btn_menu { position:absolute; top:25px; right:70px; display:block; width:45px; border-radius:5px; overflow:hidden;}
#btn_menu img { width:100%;}
#btn_search { background-color:#1a3a6b; display:block; position:absolute; top:25px; right:20px; width:45px; border-radius:5px;}
#btn_search img { border-radius:50%; width:100%;}

/* other_con */
.other_con { width:auto; text-align:right; padding-right:5px;}
/* sns */.sns { padding-right:5px;}
.sns a { width:31px; height:31px; border-radius:3px; margin:2px 1px; background-size:124px;}
.sns a.Insta { background-position:-31px;}
.sns a.facebook { background-position:-62px;}
/* control_text */.control_text { position:absolute; right:0px;}

/* gnb_search */
.gnb_search { left:0px; width:100%;}
.btn_gnb_search { display:none;}
.smartsearch { position:fixed !important; top:145px; left:0; right:0; width:100% !important; z-index:1000; min-height:120px; text-align:center;}
.search_Box { width:100%; padding-left:0px;}
.smartsearchBoxtit { padding:20px 0 10px 15px; font-size:18px;}
.search_Box fieldset { width:100%; margin:0px;}
.search_Box .search_wrapbox { width:410px; margin:0 auto;}
.search_Box .input_keyword { width:360px !important; float:left;}

}




@media all and (max-width:768px){
.mask { display:none; opacity:0; position:fixed; top:0; left:0; width:100%; height:100%; background:url("../img/header/bg_op60.png"); z-index:100;}

/* Header */
#header { width:100%; height:auto;}
.tnb { width:100%; height:40px;}
.other_site { width:100%; height:40px;}
.other_site li { width:50%; height:40px;}
.other_site li a { line-height:40px; font-size:14px;}

/* control_text */
.control_text { display:none;}

/* headertop */
#headertop { height:80px;}
#headertop .logo_inner { width:100%;}
.top_logo { float:none; position:absolute; left:10px; top:15px; width:230px;}
.top_logo a { top:0px;}
.top_logo img { width:100%;}

/* gnb_wrap */
#headertop #gnb_wrap { height:80px;}
#gnb_wrap .gnb_inner { width:100%; margin:0; position:relative;}
#gnb_wrap .gnbquick .mview_slogan { font-size:14px;}
#gnb_wrap .gnbquick .mview_slogan strong { font-size:16px;}

/* layout */
.mview, .wviewC { display:block !important;}
.wview, .mviewC { display:none !important;}
.mviewT { display:none !important;}
.wviewT { display:table !important;}

.inner { padding:0; width:100%;}

#gnb_wrap { height:80px;}

/* dc_menu */
#dc_menu { display:none; opacity:0; position:absolute; top:79px; right:0px; width:100%; height:auto; background:#fff;}

/* gnb */
#gnb { margin:0; width:100%;}
#gnb > li { width:100%; background-image:none; padding-right:0px;}
#gnb > li > a { height:50px; line-height:50px; color:#444; font-size:18px; border-bottom:solid 1px #ddd; padding-left:37px; text-align:left; background:url("../img/header/m_menu_open.png") no-repeat 15px center;}
#gnb > li.current { background:#333257;}
#gnb > li.current > a { border-bottom:none; color:#fff; background-image:none; background:url("../img/header/m_menu_close.png") no-repeat 10px center;}
#gnb > li > div.depth { width:100%; display:none; position:relative; top:0px; left:0; right:0; padding:0px; z-index:10; border:0; background-image:none;}
#gnb > li > div.depth .dep_list { background-image:none;}
#gnb > li > div.depth .dep_list a { display:block; font-size:16px; height:40px; line-height:26px; background:#f2f2f2 url("../img/header/icon_hdmenu.png") no-repeat 20px center; padding-left:40px; border-bottom:0px !important;}
#gnb > li > div.depth .dep_list a .no_br { display:none;}
#gnb > li > div.depth .dep_list li:last-child { padding-bottom:10px; background:#f2f2f2; border-bottom:1px #ddd solid;}
#gnb > li > div .dep_list .sub_3D { border-bottom:0px !important;}
#gnb > li > div .dep_list .sub_3D a { height:28px; line-height:28px; font-size:16px; color:#666; background:#f2f2f2 url("../img/header/icon_menu.png") no-repeat 40px center; padding-left:50px; border-bottom:0px !important;}
#gnb > li > div .dep_list .sub_3D a:hover { color:#000; background:#f2f2f2 url("../img/header/icon_menu.png") no-repeat 40px center;}
#gnb > li > div .dep_list .sub_3D a:last-child { margin-bottom:0px;}
#gnb > li > div .dep_list { width:100%; height:auto; padding:0;}

/* btn_menu - btn_search */
#btn_menu { position:absolute; top:16px; right:58px; display:block; width:45px; border-radius:5px; overflow:hidden;}
#btn_menu img { width:100%;}
#btn_search { display:block; position:absolute; top:16px; right:10px; width:45px; border-radius:5px; background-color:#1a3a6b; overflow:hidden;}
#btn_search img { width:100%;}

/* other_con */
.other_con { position:relative; float:none; z-index:1000;}
.other_con li { float:left; margin-left:0px;}
.control_text { position:absolute; right:0px;}
/* sns */.sns { display:none;}
.sns a { width:35px; height:35px; border-radius:0px; margin:0; background-size:140px;}
.sns a.Insta { background-position:-35px;}
.sns a.facebook { background-position:-70px;}

/* gnb_search */
.gnb_search { left:0px; width:100%;}
.btn_gnb_search { display:none;}
.smartsearch { position:fixed !important; top:120px; left:0; right:0; width:100% !important; z-index:1000; min-height:60px; text-align:center;}
.search_Box { width:100%; padding-left:0px; padding-top:7px; min-height:60px;}
.smartsearchBoxtit { display:none; padding:10px 0 10px 15px; font-size:16px;}
.search_Box fieldset { width:100%; margin:0px;}
.search_Box .search_wrapbox { width:70%; margin:0 auto;}
.search_Box .input_keyword { width:80% !important; float:left;}

}