/* 대표전화번호 */ #header .num {margin-left: 20px;} #header .num a {border: 1px solid #fff; display: flex; align-items: center; padding: 10px 20px; border-radius: 24px; min-width: 260px;} #header .num a span {background-image: url(../images/call.png); display: block; width: 23px; height: 25px; background-size: cover;} #header .num a p {font-size:18px; color: #fff; margin-left: 15px;} #header .num a p b{font-family: 'NanumSquareNeoHeavy', sans-serif;} #header .num a {border-color: #bc0f24; transition: 0.5s;} #header .num a p {color : #bc0f24;} #header .num a span {background-image: url(../images/bt_call.png);} #header .num a:hover {background: #bc0f24; transition: 0.5s;} #header .num a:hover p {color : #fff;} #header .num a:hover span {background-image: url(../images/call.png);} /* @media screen and (max-width: 1480px) { #header .num a p {font-size: 16px;} } @media screen and (max-width: 1346px) { #header .num{margin-right: 50px;;} #header .num {display: none;} } @media screen and (max-width: 1100px) { #header .num a span {width: 18px; height: 20px;} #header .num a p {font-size: 14px; margin-left: 10px;} } */ /* 대표전화번호 */ #header-wrap { color:#555} #header {max-width: 1720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 15px;} #header-wrap { border-bottom: 1px solid #ddd; height: 85px; background-color: #fff;} #header .lnb-line { right: 10px;top: 25px; font-weight:bold; min-width: 800px;} #btn-menu-m,#btn-menu-m span{display:inline-block;transition:all .4s;box-sizing:border-box} #btn-menu-m{position:fixed;width:30px;height:40px;top:20px;right:15px;z-index:120;display:none} #btn-menu-m span{position:absolute;left:0;width:100%;height:2px;background-color:#fff} #btn-menu-m.active span{background-color:#fff;height:1px} #btn-menu-m span:nth-of-type(1) {top: 8px;} #btn-menu-m span:nth-of-type(2) {top: 16px;width:25px} #btn-menu-m span:nth-of-type(3) {bottom: 13px;} #btn-menu-m.active span:nth-of-type(1) {-webkit-transform: translateY (16px) rotate (-45deg);transform: translateY(16px) rotate(-45deg); top: 0px;} #btn-menu-m.active span:nth-of-type(2) { opacity: 0;} #btn-menu-m.active span:nth-of-type(3){-webkit-transform:translateY(-23px) rotate(45deg);transform:translateY(-23px) rotate(45deg);bottom:0} #btn-menu-m span { background-color:#222} .logo a {display:block; width:335px; height:100px; background-image:url(../images/h_logo.png); background-position: center left; background-size: contain; background-repeat: no-repeat;} .logo a {background-image:url(../images/h_logo.png);} #header-wrap{background-color:#fff;border-bottom:0;top:0;z-index:4} #header-wrap{position:fixed;z-index:100;width:100%;height:100px;z-index:4; border-bottom:none;} #header .lnb-line:after{content:" ";visibility:hidden;display:block;height:0;clear:both} #lnb { float:left;} #lnb * { box-sizing: border-box;} #lnb > ul:after{content:" ";visibility:hidden;display:block;height:0;clear:both} #lnb > ul > li{display:inline-block;float:left;margin-left:-1px;transition:all .5s;white-space:nowrap;padding-bottom:20px} #lnb > ul > li > a {color: #222; opacity: 0.8 } #lnb > ul > li > a:hover {color: #222; opacity: 1} .inBox { width: 1100px; text-align: right; color: rgb(109, 109, 109); padding-top: 60px; font-size: 12px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-bottom: 20px; } .inBox span { padding-left: 6px; font-size: 12px; font-weight: bold; color: #333; } .inBox a { padding: 0px 6px; font-size: 12px; color: #666; } #lnb > ul > li > a { color: #222;opacity: 0.8} #lnb > ul > li > a:hover {color: #222; opacity:1} #lnb > ul > li > ul{position:absolute;width:100%;display:none;box-sizing:content-box;margin-left:-1px;z-index:2} #lnb > ul > li > ul ul{position:absolute;width:100%;display:none;border:1px solid #525252;box-sizing:content-box;margin-top:-1px;top:0;left:100%;margin-left:0} #lnb > ul > li { padding: 0 5px; position: relative;} #lnb > ul > li > a{display:block;width:100%;height:100%;padding:0 25px;text-align:center;font-size:18px;font-weight:300;color:#222;transition: 0.3s; opacity:0.8} #lnb > ul > li > a:hover { opacity:1} #lnb > ul > li li{border-top:1px solid #525252;line-height:48px;height:50px;background-color:#333;padding:0;margin-top:-1px} #lnb > ul > li li:first-child {border-top:0} #lnb > ul > li li:nth-last-child(1) {height: 50px;line-height: 50px;} #lnb > ul > li li > a{width:100%;height:100%;display:block;padding:0 20px;color:#fff;font-size:14px} #lnb > ul > li li > a:hover {background-color:#39F; color:#fff;} #lnb > ul > li > ul { width: 220px; top: 100%;left: 0px;} #lnb > ul > li.on > ul { position: absolute;display: block;} #lnb > ul > li .d1 { display:none} #lnb .arrow{position:absolute;width:30px;height:30px;font-size:14px;color:#fff;display:inline-block;right:0;top:50%;margin-top:-15px;text-align:center;line-height:30px;z-index:1} #lnb ul ul .arrow {transform: rotate(-90deg);} /* @media screen and (max-width: 1600px) { #lnb > ul > li > a {padding: 0 20px;} .logo a {width: 280px; background-size: contain;} } @media screen and (max-width: 1400px) { #lnb > ul > li > a {padding: 0 10px;} } @media screen and (max-width: 1346px) { /* #lnb { display:none} */ /* #btn-menu-m { display:block} */ #header-wrap{height: 80px;} .logo a{height: 80px; width: 250px;} } @media screen and (max-width: 1200px) { #lnb > ul > li > a {font-size: 16px;} } */ /* @media screen and (max-width: 920px) { .logo a{width: 200px; height: 60px;} #lnb > ul > li{padding: 0 7px;} #lnb > ul > li > a{font-size: 14px;padding: 0px;} #header-wrap{height: 60px;} } @media screen and (max-width: 768px) { #header-wrap {position: fixed;top:0;} #header-wrap #logo-line { margin: 0;} #logo-line .logo { display: inline-block;float: none;} #logo-line .contact { display: none;} #top-bg-wrapper {} .logo a{width: 100px;} #header{flex-direction: column; } .logo a{height: 50px;} #header-wrap{height: 80px;} } @media screen and (max-width: 500px) { #lnb > ul > li {padding: 0 3px;} #lnb > ul > li > a {font-size: 12px;} } */ #m-lnb-wrapper{display: none !important; position:fixed;top:0;right:-400px;z-index:110;max-width:400px;width:100%;height:100vh;overflow:auto;background-color:#000;opacity:.9;box-sizing:border-box;padding-top:60px;padding-left:2em;padding-right:1em;transition:all .5s;opacity:1} #m-lnb-wrapper.on {right: 0px;} #m-lnb > ul {font-size: 14px; margin-top: 20px } #m-lnb > ul > li > a {color: #fff;} #m-lnb > ul > li > span{position:absolute;right:0;top:0;width:40px;height:50px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer; display: none;} #m-lnb > ul > li.on > span {transform: rotate(180deg);} #m-lnb > ul > li li > span{position:absolute;right:0;top:0;width:40px;height:40px;font-size:14px;text-align:center;transition:all .4s;color:tomato;line-height:inherit;cursor:pointer} #m-lnb > ul > li li.on > span { transform: rotate(180deg);} #m-lnb > ul > li {position: relative;} #m-lnb > ul > li > a{display:block;padding:0 10px;font-size:16px} #m-lnb > ul > li {line-height: 55px;border-bottom: 1px solid #333;} #m-lnb > ul > li:nth-last-child(1) {border-bottom: 0;} #m-lnb > ul > li ul {display: none;line-height: 40px;} #m-lnb > ul > li li {border-top: 1px solid #474747;background-color: #222;} #m-lnb > ul > li li li {border-top: 1px solid #959595; background-color: #777;} #m-lnb > ul > li li > a {display:inline-block;padding:3px 15px 3px 20px;font-weight:300} #m-lnb > ul > li li li > a { display: inline-block; padding: 0 10px 0 30px;} /* @media screen and (max-width: 640px) { .logo { margin-top:7px} .logo a {width: 100px; height: 25px; margin-bottom: 15px; background-size: 100%;} .logo a { background-image: url(../images/h_logo.png); width: 100px; height: 25px; background-size: contain; text-align: center; margin-bottom: 15px;} #btn-menu-m { top:23px} #header{padding: 0;} } */