/* header */ #header {position:absolute;top:0;left:0;width:100%;z-index:9999000;} #header .header_wrap {position:relative;width:100%;height:140px;background:url("../image/common/top_list_bg.png") repeat-x center 0;} #header .top_link {float:left;} #header .top_link ul {overflow:hidden;border-left:1px solid #4d4d4d;border-right:1px solid #787878;list-style:none;} #header .top_link ul li {float:left; line-height:42px;padding:0 20px;border-right:1px solid #4d4d4d;border-left:1px solid #787878;} #header .top_link ul li a {font-size:13px;color:#ccc;} #header .top_link ul li a:hover {color:#fff;} #top_link {z-index:109;float:right;} #top_link ul {overflow:hidden;border-left:1px solid #4d4d4d;border-right:1px solid #787878;list-style:none;} #top_link li {float:left; line-height:42px;padding:0 17px;border-right:1px solid #4d4d4d;border-left:1px solid #787878;} #top_link li a {font-size:13px;color:#ccc;} #top_link li a:hover {color:#fff;} .search_wrap {float:right;background:#3f3f3f;height:42px;padding-left:10px;border-right:1px solid #787878;} .search {min-height:21px; padding:6px 0 0 0; z-index:9999;} .search_input {float:left; background:#3f3f3f;border:1px solid #3f3f3f;height:23px;padding:3px 0 0 5px;width:170px;margin:0 3px 0 0;font-size:12px; color:#fff;} .search ::-webkit-input-placeholder {color: #aaa;} .search :-moz-placeholder {color: #aaa;} /* Firefox 4-18 */ .search ::-moz-placeholder {color: #aaa;} /* Firefox 19+ */ .search :-ms-input-placeholder {color: #aaa;} /* IE10+ */ .search input:focus {background:none;} .search .search_img {width:20px;padding:3px 10px 0 0;} #header h1 {position:absolute;top:42px;height:98px;line-height:98px;} #header .gnb {float:right;width:60%;} #header .gnb ul {list-style:none;} #header .gnb ul>li {float:left; text-align:center; } #header .gnb ul>li a {display:inline-block;zoom:1;*display:inline;font-weight:bold;width:100%;font-size:18px;line-height:98px; color:#444;text-transform: uppercase; box-sizing:border-box; transition: all 0.3s;} #header .gnb ul>li a:hover {color:#51831e;} #header .gnb ul>li a.current {display:inline-block;zoom:1;*display:inline;color:#51831e;} #header .btn_m_list {display:none;} #header .btn_m_login_wrap {display:none;} #header .btn_m_close {display:none;} #header #menu50 {display:none;} #header .gnb ul ul {width:170px;background:#fff;border-top:2px solid #51831e;;height:100% !important;box-shadow:1px 1px 30px rgba(0, 0, 0, 0.06);-webkit-box-shadow:1px 1px 30px rgba(0, 0, 0, 0.06);-moz-box-shadow:1px 1px 30px rgba(0, 0, 0, 0.06);list-style:none;} #header .gnb ul ul li {float:none;width:100%; text-align:left;} #header .gnb ul ul li a {line-height:40px;text-indent:12px;color:#555; font-size:1.05em ;background:#f9f9f9;border:1px solid #f0f0f0;} #header .gnb ul ul li a:hover {background:#51831e;color:#fff;border-color:#51831e;} .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 1220 */ @media screen and (max-width:1220px) { #header .gnb {width:65%;} } /* 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 .header_wrap {height:65px;background:#fff; } #header h1 {position:relative;top:0;width:100%;text-align:center;line-height:65px; height:65px;padding:0;} #header h1 img {height:38px;padding:0;} #header .top_link {display:none;} #top_link {display:none;} #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 span, #header .btn_m_list:before, #header .btn_m_list:after {position:absolute;left:8px;content:'';width:23px;height:3px;border-radius:2px;background:#000;} #header .btn_m_list:before {top:19px;} #header .btn_m_list span {top:13px;} #header .btn_m_list:after {top:25px;} #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 #menu50 {display:block;} #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_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;} .search_wrap {position:absolute; display:none; width:100%; margin:0 auto; padding:0;min-height:42px; top:65px; background:#97bf21; z-index:9999;border-right:0;} .search_wrap .search {width:95%;margin:8px 3% 0 3%;;border:none;padding:0;border-radius:0;} .search_wrap .search_input {width:93%;float:none;font-size:0.95em;background:#97bf21;border-color:#97bf21;margin:0;padding:0;} .search .search_img {padding:0;} .search ::-webkit-input-placeholder {color: #f1f6e2;} .search :-moz-placeholder {color: #f1f6e2;} /* Firefox 4-18 */ .search ::-moz-placeholder {color: #f1f6e2;} /* Firefox 19+ */ .search :-ms-input-placeholder {color: #f1f6e2;} /* IE10+ */ #header .gnb {display:none; width:100%; height:auto;float:none; background:#bbb; } #header .gnb ul {padding:0 0 0 0; } #header .gnb ul ul {display:block;width:100%; background:#1c1c1c; padding:0;border-left:0 solid #ddd;border-bottom:0 solid #999; border-top:0 solid #ddd;} #header .gnb ul ul li {width:100%; border-bottom:0;} #header .gnb ul ul li:last-child a {border-bottom:1px solid #d2d2d2;} #header .gnb ul li:last-child ul {border-right:0 solid #ddd;} #header .gnb ul li {float:none;width:100%; text-align:left;background:#dfdfdf; } #header .gnb ul li a {line-height:45px;height:45px; font-size:1.2em; text-indent:15px;color:#454545; font-weight:bold;border-left:none;border-right:none;border-bottom:1px solid #d2d2d2;} #header .gnb ul>li a:hover {background:none;color:#454545;} #header .gnb ul>li a.current {background:none;color:#000;} #header .gnb ul li li {background:#fff; } #header .gnb ul li li a {padding:0;line-height:40px;height:40px; text-indent:15px;color:#343434;font-weight:normal; text-align:left;font-size:1.05em; border-bottom:1px solid #d9d9d9; } #header .gnb ul ul li a:hover {color:#343434;background:#fff;font-weight:normal;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #d9d9d9;} #header .gnb ul li:last-child a {border-right:none;} float:none; } /* screen 480 */ @media screen and (max-width:480px) { .search_wrap .search_input {width:90%;} }