/* header */ #header {position:absolute;top:0;left:0;width:100%;z-index:9999000;} #header .header_wrap {position:relative;width:100%;} #header .top_wrap {position:relative;height:40px;background:#2b2b2b;} #top_link { top:0;right:0; height:40px;z-index:109;margin-right:50px;} #top_link ul {float:right;} #top_link li {float:left; font-size:0.9em;color:#aaa; line-height:40px;} #top_link li a { font-size:0.9em;color:#aaa; } #header .sitemap_btn {position:absolute;top:0;right:0;width:40px;height:40px;background:#eb3b04;} #header .sitemap_btn span, #header .sitemap_btn:before, #header .sitemap_btn:after {position:absolute;left:8px;content:'';width:23px;height:3px;border-radius:2px;background:#fff;} #header .sitemap_btn:before {top:19px;} #header .sitemap_btn span {top:13px;} #header .sitemap_btn:after {top:25px;} #header .alarm_mobile {display:none;} #header .h1_wrap {position:relative;height:95px;} h1 {float:left; line-height:95px;} /* 상단 로고 */ .search_wrap {width:70%;overflow:hidden;margin:0 auto;padding:23px 0 0 0;} .search_wrap .search {float:left; width:55%;min-height:21px;z-index:9999;background:#fff;border:1px solid #7d7d7d;padding:7px 10px 7px 20px;border-radius:50px;overflow:hidden;margin-left:20px;} .search_wrap .search_input {float:left; height:30px;line-height:30px;width:90%;margin:0 3px 0 0;font-size:1.1em; color:#606060;border:none;} .search_wrap .alarm {float:left; width:50px; height:51px; background:url("../image/common/alarm.png") no-repeat center; background-size:50px; margin-left:30px;} .search_wrap span {float:left;font-family: 'Roboto';line-height:46px;color:#484848;font-size:22px;font-weight:bold;} #icon_box {position:relative;height:100px;border-top:2px solid #eb3b04;} #icon_box ul {border-left:1px solid #eee;} #icon_box ul li {position:relative;float:left;width:9%;text-align:center;color:#000;font-size:1.3em;padding:70px 0 10px 0;border-right:1px solid #eee;} #icon_box ul li:hover {color:#fff;} #icon_box .icon01 {background:url("../image/common/top_icon01.png") no-repeat center 15px;background-size:40px;} #icon_box .icon02 {background:url("../image/common/top_icon02.png") no-repeat center 15px;background-size:40px;} #icon_box .icon03 {background:url("../image/common/top_icon03.png") no-repeat center 15px;background-size:40px;} #icon_box .icon04 {background:url("../image/common/top_icon04.png") no-repeat center 15px;background-size:40px;} #icon_box .icon05 {background:url("../image/common/top_icon05.png") no-repeat center 15px;background-size:40px;} #icon_box .icon06 {background:url("../image/common/top_icon06.png") no-repeat center 15px;background-size:40px;} #icon_box .icon07 {background:url("../image/common/top_icon07.png") no-repeat center 15px;background-size:40px;} #icon_box .icon08 {background:url("../image/common/top_icon08.png") no-repeat center 15px;background-size:40px;} #icon_box .icon09 {background:url("../image/common/top_icon09.png") no-repeat center 15px;background-size:40px;} #icon_box .icon010 {background:url("../image/common/top_icon010.png") no-repeat center 15px;background-size:40px;} #icon_box .icon00 {background:url("../image/common/top_icon00.png") no-repeat center 15px;background-size:40px;} #icon_box .icon01:hover, #icon_box .icon01_on {background:url("../image/common/top_icon01_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon02:hover, #icon_box .icon02_on {background:url("../image/common/top_icon02_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon03:hover, #icon_box .icon03_on {background:url("../image/common/top_icon03_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon04:hover, #icon_box .icon04_on {background:url("../image/common/top_icon04_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon05:hover, #icon_box .icon05_on {background:url("../image/common/top_icon05_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon06:hover, #icon_box .icon06_on {background:url("../image/common/top_icon06_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon07:hover, #icon_box .icon07_on {background:url("../image/common/top_icon07_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon08:hover, #icon_box .icon08_on {background:url("../image/common/top_icon08_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon09:hover, #icon_box .icon09_on {background:url("../image/common/top_icon09_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon010:hover, #icon_box .icon010_on {background:url("../image/common/top_icon010_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon00:hover, #icon_box .icon00_on {background:url("../image/common/top_icon00_on.png") no-repeat center 15px #eb3b04;color:#fff;background-size:40px;} #icon_box .icon01_on:after, #icon_box .icon02_on:after, #icon_box .icon03_on:after, #icon_box .icon04_on:after, #icon_box .icon05_on:after, #icon_box .icon06_on:after, #icon_box .icon07_on:after, #icon_box .icon08_on:after, #icon_box .icon09_on:after, #icon_box .icon00_on:after{ z-index:1; content: ''; position: absolute; border-top: 10px solid #eb3b04; border-right: 10px solid transparent; border-left: 10px solid transparent; bottom: -9px; left: 45%; } .m_icon_box {display:none;} #header .gnb_wrap {position:relative;border-top:1px solid #e3e3e3;background:url("../image/common/gnb_bg.png") repeat-x;height:45px;} #header .gnb {position:relative;width:85%;margin:0 auto;overflow:hidden;} #header .gnb ul {} #header .gnb ul>li {float:left; text-align:center; } #header .gnb ul>li a {display:inline-block;zoom:1;*display:inline;width:100%;font-size:15px;line-height:45px; color:#222; text-transform: uppercase; box-sizing:border-box; } #header .gnb ul>li a:hover {color:#eb3b04;} #header .gnb ul>li a.current {display:inline-block;zoom:1;*display:inline;color:#eb3b04;} #header .btn_m_list {display:none;} #header .btn_m_login_wrap {display:none;} #header .btn_m_close {display:none;} #header .gnb ul ul {background:url("../image/common/li_bg.png") repeat;overflow:hidden ;width:170px;margin:0 auto;padding:5px 0;} #header .gnb ul ul li {float:none;width:100%; text-align:left;} #header .gnb ul ul li a {line-height:32px; text-indent:12px;color:#fff; font-size:1em ;} #header .gnb ul ul li a:hover {text-decoration:underline;color:#fff;} .mobile_menu {display:none;} .push_setting_box {background:#000;padding-left:12px;line-height:45px;color:#ffffff;font-size:1.15em;font-weight:bold;border-bottom:1px solid #383838;} .push_toggle {float:right;padding:8px 9px 0 0;width:60px;} /* screen 1100 */ @media screen and (max-width:1100px) { .search_wrap {width:70%;} } /* Tablet screen 1024 */ @media screen and (max-width:1024px) { #header {top:0;left:0;width:100%;height:65px;background:rgba(0,0,0,0.93);transition: all 0.5s ease; } #header .h1_wrap {height:65px;} #header h1 {width:100%;text-align:center;line-height:65px; padding:0;} #header h1 img {height:50px;padding:0;} #header .top_wrap {display:none;} #header .header_wrap {height:64px;background:#fff;border-bottom:1px solid #eb3b04;} #header .btn_m_login_wrap {position:absolute;right:6px;display:block;margin:20px 0 0 0;z-index:99999999;} #header .btn_m_login_wrap a {float:left;} #header .btn_m_list {display:block;position:absolute;top:10px;left:0;width:40px;height:40px;cursor:pointer;z-index:99999999} #header .btn_m_list #m_line_ce1, #header .btn_m_list #m_line_ce2, #header .btn_m_list #m_line_bf, #header .btn_m_list #m_line_af {position:absolute;left:8px;content:'';width:23px;height:3px;border-radius:2px;background:#000;transition: transform 0.25s;} #header .btn_m_list #m_line_bf {top:13px; transform-origin:left top;} #header .btn_m_list #m_line_ce1 {top:19px;} #header .btn_m_list #m_line_ce2 {top:19px;} #header .btn_m_list #m_line_af {top:25px; transform-origin:left bottom;} #header .btn_m_close {display:block;width:25px;height:55px;margin:25px auto ; background:url(../image/common/top_btn_total.png) no-repeat 0 -100px;background-size:200px auto; cursor:pointer;} #header .btn_m_login {width:35px;height:35px;background:url(../image/common/top_btn_total.png) no-repeat 6px -33px;; background-size:230px auto; cursor:pointer;} #header .btn_m_logout {width:35px;height:35px;background:url(../image/common/top_btn_total.png) no-repeat 7px 2px; background-size:230px auto; cursor:pointer;} #header .btn_m_search {float:left; width:30px;height:35px; background:url(../image/common/top_btn_total.png) no-repeat 0 -65px; background-size:230px auto; cursor:pointer;} #header .alarm_mobile {display:block;width:35px;height:35px;background:url("../image/common/alarm.png") no-repeat center 3px; background-size:25px auto; cursor:pointer; text-align:center; line-height:28px;font-size:9px;} .search_wrap {position:absolute; display:none; width:100%; margin:0 auto; padding:0;min-height:42px; top:65px; background:#fff; z-index:9999;border-bottom:1px solid #e7e7e7;} .search_wrap .search {width:90%;margin:10px 2%;border:none;padding:0;border-radius:0;} .search_wrap .search_input {width:93%;float:none;font-size:0.95em; } .search_wrap span {display:none;} .search_wrap .alarm {display:none;} #header .gnb_wrap {margin:0;border-top:0;background:none;height:auto;} #header .gnb {display:none;height:auto;width:100%;margin:0;background:#dfdfdf;} #icon_box {display:none;} .m_menu_box {height:100%;} .m_icon_box {display:block;float:left;width:20%;background:#dfdfdf;overflow:hidden;position:fixed;height:85%;} .m_icon_box p {text-align:center;padding:50px 0 10px 0;color:#454545;font-size:1.1em;border-bottom:1px solid #c5c5c5;cursor:pointer;} .m_icon_box .icon01 {background:url("../image/common/top_icon01.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon02 {background:url("../image/common/top_icon02.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon03 {background:url("../image/common/top_icon03.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon04 {background:url("../image/common/top_icon04.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon05 {background:url("../image/common/top_icon05.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon06 {background:url("../image/common/top_icon06.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon07 {background:url("../image/common/top_icon07.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon08 {background:url("../image/common/top_icon08.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon09 {background:url("../image/common/top_icon09.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon010 {background:url("../image/common/top_icon010.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon00 {background:url("../image/common/top_icon00.png") no-repeat center 15px;background-size:30px;} .m_icon_box .icon01_on {background:url("../image/common/top_icon01.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon02_on {background:url("../image/common/top_icon02.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon03_on {background:url("../image/common/top_icon03.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon04_on {background:url("../image/common/top_icon04.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon05_on {background:url("../image/common/top_icon05.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon06_on {background:url("../image/common/top_icon06.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon07_on {background:url("../image/common/top_icon07.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon08_on {background:url("../image/common/top_icon08.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon09_on {background:url("../image/common/top_icon09.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon010_on {background:url("../image/common/top_icon010.png") no-repeat center 15px #fff;background-size:30px;color:#000;} .m_icon_box .icon00_on {background:url("../image/common/top_icon00.png") no-repeat center 15px #fff;background-size:30px;color:#000;} #header .gnb ul {float:right;width:80%;background:#fff;} #header .gnb ul>li a:hover {color:#000;} #header .gnb ul ul {display:block; background:#222; padding:0;border-left:0 solid #ddd;width:100%;margin:0;} #header .gnb ul li:last-child ul {border-right:0 solid #ddd;} #header .gnb ul li {float:none;width:100%; text-align:left; background:#fff;padding-left:12px;} #header .gnb .submenus li {padding-left:0;} #header .gnb ul li a { line-height:42px; text-indent:12px;color:#343434; font-weight:bold;border-left:none;border-right:none;border-bottom:1px solid #a9a9a9; } #header .gnb ul li li a { line-height:42px; text-indent:30px;color:#343434;font-weight:normal;font-size:1.05em;color:#888; border-bottom:1px solid #d9d9d9; } #header .gnb ul ul li a {line-height:42px; text-indent:20px;color:#343434; } #header .gnb ul ul li a:hover {color:#000;text-decoration:none;} #header .gnb ul li:last-child a {border-right:none;} } /* mobie screen 768 */ @media screen and (max-width:768px) { .search_wrap .search_input {width:90%;} .mobile_menu {display:block;} } /* mobie screen 580 */ @media screen and (max-width:580px) { .m_icon_box {width:28%;} #header .gnb ul {width:72%;} } /* mobie screen 480 */ @media screen and (max-width:480px) { .search_wrap .search_input {width:85%;} }