@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;}/* 16:9 �ڵ������� */
.live_view::after { padding-top:56.25%; display:block; content: '';}
.live_view .movie { position:absolute; top:0; bottom:0; right:0; left:0; background:#454545; font-size:0px; background:url("../img/content/img_live.png") no-repeat left top; background-size:100% 100%; overflow:hidden; }
.live_view .movie img { width:100%; height:100%;}



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

#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 { height:40px; background:#333257;}
/* link_site */
.other_site { float:left; position:relative; height:40px; padding-left:0px;}
.other_site li { float:left; height:40px; width:130px; margin-top:0px; border-radius:0; overflow:hidden; border-right:1px solid #555;}
.other_site li a { display:block; line-height:40px; padding:0 15px; font-size:13px; text-align:center;}
.other_site li a:hover { font-family:'NanumGothicBold', sans-serif; text-decoration:underline;}
.other_site li:nth-child(1) { background:#ffffff;}
.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:#666666;}
.other_site li:nth-child(2) a { color:#ffffff;}
.other_site li:nth-child(2) a:hover { color:#fff;}

/* other_conn */
.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:26px; line-height:26px; vertical-align:middle; margin-top:7px;}
.control_text button { position:relative; float:left; width:38px; height:26px; border:0; border-left:1px solid #666; 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;}
#btn_text_default { width:46px; font-size:11px; line-height:26px; color:#bbb;}
#btn_text_small { border-right:1px solid #666;}

/* headertop */
#headertop {position:relative; height:100px; background:#fff}
#headertop .inner {position:relative}
.top_logo {position:absolute; top:17px; left:10px; width:330px; z-index:1; }
.top_logo img { width:100%}

/* gnb_wrap contents */
#gnb_wrap { position:relative; height:100px; border-bottom:1px #ddd solid;}
#gnb_wrap .offscreen { display:none;}
#gnb_wrap .inner { width:1400px; margin:0 auto; position:relative; /* position:relative*/ }
/* .gnbquick */
#gnb_wrap .gnbquick { position:relative; height:60px; background:#da764a url("../img/content/bg_left_title.png") no-repeat center; background-size:100%; }
#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 #c06138;}
#gnb_wrap .gnbquick .mview_slogan {  border-left:solid 1px #f3a583; padding-left:10px; color:#fff;}
#gnb_wrap .gnbquick .mview_slogan img { width:250px; margin-top:3px;}
#gnb_wrap .gnbquick > li a {}

/* gnb */
#gnb {position:relative; float:right; margin-right:58px;}
#gnb a {display:block;}
#gnb .depth { display:none;}
/* Depth bg */
#gnb .memu_bg { width:0px;}
#gnb .memu_bg a { position:absolute; top:0px; font-size:0; }
#gnb .memu_bg .depth { position: absolute/*fixed*/; top:100px; left:-702px; width:1920px; height:330px; background:#e3e7ec url("../img/header/gnb_bg.png") no-repeat left bottom; }
#gnb .memu_bg .gnb_slogan { position:absolute; left:100px; top:35px; width:250px; height:auto; text-align:center; }  
#gnb .memu_bg .gnb_slogan .icon { border-radius:50%; margin-bottom:10px;}
#gnb .memu_bg .gnb_slogan p { font-size:22px; font-family: "NanumBarunGothic"; line-height:28px;}
#gnb .memu_bg .gnb_slogan p strong { font-size:23px; color:#cc9608; font-family: "NanumBarunGothicbold";}



/* 1 Depth */#btn_menu, #btn_search {display:none;}
#gnb > li { float:left; width:140px;}
#gnb > li > a { position:relative; display:block; height:100px; line-height:100px; color:#333; font-size:22px; font-family: "NanumBarunGothic"; text-align:center;text-decoration:none;}
#gnb > li.active > a { border-bottom:5px solid #d84374; color:#d84374;}
/* 2 Depth */.gnb2 {position:static;}
#gnb > li > div { display:none; position:absolute; top:100px; left: auto; width:100%; 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; height:36px; line-height:38px; background:url("../img/header/icon_hdmenu.png") no-repeat 5px center; font-size:19px; padding:0px; padding-left:25px;}
#gnb > li > div .dep_list a:hover { color:#d84374; background:url("../img/header/icon_hdmenu_over.png") no-repeat 5px center; text-decoration:underline;}
#gnb > li > div .dep_list { width:100%; height:320px; padding:20px 0;}
/* 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;}	

/* gnb_search */
.gnb_search {}
.btn_gnb_search {position:absolute; right:0px; top:23px;}
.btn_gnb_search img { width:50px; height:50px; border-radius:50%;}
/* smartsearch */.smartsearch { display:none; position:absolute; top:100px; left:0; width:100%; min-height:160px; background:#097788 }
.search_Box { margin:30px 0 50px; text-align:center;}
.smartsearchBoxtit { padding-bottom:15px;}
.smartsearchBoxtit img { width:300px;}
.search_Box fieldset { display:inline-block; margin:0 10px;}
.search_Box .search_wrapbox { background:#fff; border-radius:25px; width:600px; height:50px; line-height:45px; position:relative;}
.search_Box .input_keyword { font-size:16px; padding:0 70px 0 0 !important; background:none; height:50px; line-height:50px; width:550px !important; border:none !important; }
.search_Box .btn_search { background:#d84374 url("../img/header/btn_search.png") no-repeat center; background-size:50px; width:50px; height:50px; position:absolute; right:0px; border:0px; border-radius:50%; font-size:0px;}
.smartsearchclose {position:absolute; top:0px; right:-60px;}
.smartsearchclose a { width:50px; height:50px; float:right; background:#5658b2  url("../img/header/btn_close.png") no-repeat center; border-radius:50%;}

.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%; height:35px;}
/* link_site */
.other_site { width:60%; height:35px; padding-left:0px;}
.other_site li { max-width:120px; width:50%; height:35px;  margin-top:0px; border-radius:0;}
.other_site li a { line-height:35px; padding:0 10px; font-size:13px; text-align:center;}
.other_site li:nth-child(1) { background:#ffffff;}
.other_site li:nth-child(1) a { color:#333333;}
.other_site li:nth-child(2) { background:#666666;}
.other_site li:nth-child(2) a { color:#ffffff;}

/* other_conn */
.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 { height:24px; margin-top:5px;}
.control_text button { height:24px; line-height:24px;}
#btn_text_default { line-height:24px;}

/* headertop */
#headertop { height:80px;}
.top_logo { width:280px; left:50%; margin-left:-140px; top:11px;}

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

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

#gnb_wrap { height:80px;}
#gnb_wrap .inner { width:100%; margin:0; position:relative;}

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

/* gnb */
#gnb { position:relative; float:none; margin-right:0px; width:100%;}
#gnb a { display:block;}
#gnb .depth { display:block !important; position:absolute; top:60px; }
/* Depth bg */
#gnb .memu_bg { width:0px;}
#gnb .memu_bg a { position:absolute; top:0; font-size:0; z-index:10; }
#gnb .memu_bg .depth { position:absolute; top:60px; left:0px; width:100%; height:330px; background:#e3e7ec url("../img/header/gnb_bg.png") no-repeat center; }
#gnb .memu_bg .gnb_slogan { display:none; position:absolute; left:100px; top:35px; width:250px; height:auto; text-align:center; }  
/* 1 Depth */#btn_menu, #btn_search {display:none;}
#gnb > li { float:left; width:20%; border-bottom:1px #ccc solid;}
#gnb > li > a { position:relative; display:block; height:60px; line-height:60px; color:#333; font-size:22px; font-family: "NanumBarunGothic"; text-align:center;text-decoration:none; z-index:12; background-color:#fff;}
#gnb > li.active > a {}
/* 2 Depth */.gnb2 {position:static;}
#gnb > li > div {  border-top:2px solid #d84374; color:#d84374; display:inline-block; position:absolute; top:100px; left:auto; width:20%; z-index:5; background:url("../img/header/gnb_ptline.png") repeat-y left;}
#gnb > li > div .dep_list { width:100%; height:320px; padding:10px 0;border:1px #ccc solid; border-bottom:0px;}
#gnb > li > div .dep_list li { padding:0px;}
#gnb > li > div .dep_list a { text-align:left; height:36px; line-height:36px; background:url("../img/header/icon_hdmenu.png") no-repeat left center; font-size:18px; padding:0px; padding-left:16px;}
#gnb > li > div .dep_list a:hover { color:#d84374; background:url("../img/header/icon_hdmenu_over.png") no-repeat 1px center; text-decoration:underline;}
/* 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 10px center;}
#gnb > li > div .dep_list .sub_3D a:hover { color:#000; background:url("../img/header/icon_menu.png") no-repeat 11px center;}
#gnb > li > div .dep_list .sub_3D a:last-child { margin-bottom:15px;}

#btn_menu  {position:absolute; top:16px; right:65px; display:block; width:45px; border-radius:50%;}
#btn_menu img {border-radius:50%; width:100%;}
#btn_search  { display:block; position:absolute; top:16px; right:10px; width:45px; border-radius:50%;}
#btn_search img {border-radius:50%; width:100%;}

/* gnb_search */
.gnb_search {}
.btn_gnb_search { display:none;}
/* smartsearch */.smartsearch { top:80px; background:#097788; z-index:99;}


}





@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:35px;}
/* link_site */
.other_site { width:60%; height:35px; padding-left:0px;}
.other_site li { max-width:120px; width:50%; height:35px;  margin-top:0px; border-radius:0;}
.other_site li a { line-height:35px; padding:0 10px; font-size:13px; text-align:center;}
.other_site li:nth-child(1) { background:#ffffff;}
.other_site li:nth-child(1) a { color:#333333;}
.other_site li:nth-child(2) { background:#666666;}
.other_site li:nth-child(2) a { color:#ffffff;}

/* other_conn */
.other_con { width:auto; text-align:right; padding-right:0px;}
.other_con li{ float:left; margin-left:0px;}
/* sns */.sns { padding-right:0px;}
.sns a { width:35px; height:35px; border-radius:0px; margin:0; background-size:140px;}
.sns a.blog {/* background-position:left;*/}
.sns a.Insta { background-position:-35px;/* */}
.sns a.facebook { background-position:-70px;/**/}
.sns a.kakao { /*background-position:right;*/}
/* control_text */.control_text { display:none; height:31px;}

/* headertop */
#headertop { height:80px;}
.top_logo { width:220px; top:18px;}

/* gnb_wrap contents */
#gnb_wrap .gnbquick .mview_slogan img { width:220px; margin-top:7px;}

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

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

#gnb_wrap { height:80px;}
#gnb_wrap .inner { width:100%; margin:0; position:relative;}

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

/* gnb */
#gnb { margin:0; width:100%;}
#gnb > li { width:100%;}
#gnb > li > a { height:50px; line-height:50px; color:#444; font-size:20px; 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:#666666;}
#gnb > li.current > a { border-bottom:none; color:#fff; border-left:5px solid #d84374; background-image:none; background:url("../img/header/m_menu_close.png") no-repeat 10px center;}
#gnb > li > ul.sub01, #gnb > li > ul.sub02, #gnb > li > ul.sub03, #gnb > li > ul.sub04, #gnb > li > ul.sub05, #gnb > li > ul.sub06, #gnb > li > ul.sub07 {}
#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:18px; height:40px; line-height:40px; background:#f2f2f2 url("../img/header/icon_hdmenu.png") no-repeat 20px center; padding-left:40px;  border-bottom:0px !important;}
#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_menu  {position:absolute; top:16px; right:65px; display:block; width:45px; border-radius:50%;}
#btn_menu img {border-radius:50%; width:100%;}
#btn_search  { display:block; position:absolute; top:16px; right:10px; width:45px; border-radius:50%;}
#btn_search img {border-radius:50%; width:100%;}

/* gnb_search */
.gnb_search {}
.btn_gnb_search { display:none;}
.btn_gnb_search img {}
/* smartsearch */.smartsearch { top:80px; background:#097788; z-index:99; width:100%;}
.search_Box { width:100%; margin:20px 0 35px;}
.smartsearchBoxtit img { width:270px;}
.search_Box fieldset { display:block; padding-left:3%;}
.search_Box .search_wrapbox { width:80% !important;}
.search_Box .input_keyword { width:100% !important; padding:0 55px 0 15px !important;}

}