/*-------------------------------------------------------------
				해더                           
------------------------------------------------------------*/
#head {position: relative; display: block; width: 100%; min-width:1200px; border-bottom:1px solid #e3e3e3;}

.head-cont {display: flex; justify-content: space-between; align-items: center; padding:20px 0;}

.hd_logo {display: block;width: 30%;height:100%;text-align: left;}
.hd_logo a {display: inline-block;width:auto;height:auto;line-height: 70px;vertical-align: middle;}
.hd_logo a img {display: block;height:auto;max-width:300px;max-height: 70px;vertical-align: middle;}

.hd_sch {display:block;width:40%;height:100%;text-align: center;line-height: 0; padding:0;}
.hd_sch form {display: inline-block; width:360px;}
.hd_sch .form-group {display: inline-block; width:100%;}
.hd_sch .input-group {display: inline-block; width:100%; height:38px; border:1px solid var(--major-color); border-radius: 0; box-sizing: border-box; overflow: hidden; background: #fff;}
.hd_sch .input-group input[type="text"] {display: inline-block; width:calc(100% - 36px); height:36px; border:none; font-size:13px; letter-spacing: 0.02em; font-weight: 300; padding:0 20px; line-height: 36px; box-shadow: none; background: transparent;}
.hd_sch .input-group .input-group-addon {display: inline-block; float:right; padding:0; border:none; background:var(--major-color); border-radius: 0; transition: 0.3s;}
.hd_sch .input-group .input-group-addon:hover {background-color:var(--major-lighter-color);}
.hd_sch .input-group .input-group-addon button {display:inline-block; width:36px; height:36px; border:none; background:transparent; color:#fff; font-size:20px; text-align: center; position: relative;}
.hd_sch .input-group .input-group-addon button i {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}

.hd_link {display: block;float: right;margin:0 auto;width:30%;height:100%;text-align: right;}
.hd_link ul {display: inline-flex; grid-gap: 10px;}
.hd_link a {color: #777;font-size: 13px;line-height: 25px;display: inline-block; font-weight: 500;}
.hd_link a small {opacity: 0.8;}
.hd_link a:hover {color: var(--major-color);}
.hd_link a:after {content:"";padding: 0 5px;} 
.hd_link a:last-child:after {display: none;}
.hd_link a:focus {text-decoration: none;} 


/*-------------------------------------------------------------
				메인메뉴                           
------------------------------------------------------------*/
.gnb-wrapper {position:relative; width:100%; min-width:1200px; box-sizing:border-box; box-shadow: 0 2px 3px 0 rgba(0,0,0,0.05);}
.gnb-wrapper.fixed {position: fixed; top:0; z-index: 999; background:#fff;}
#gnb { width:auto; max-width:100%; margin:0 auto;} 

/*싱글메뉴*/
#gnb .gnb-1li {position: relative; display: inline-block; padding: 0 20px; float:left; height:48px; box-sizing: border-box;}
#gnb .gnb-1li:first-child {padding-left:0;}
#gnb .gnb-1li > a {display:block; overflow:hidden; width:100%; font-size:16px; height:48px; line-height:48px; text-align:center; color:#666; position: relative; float:left; font-weight: 700;}
#gnb .gnb-1li > a:hover, #gnb .gnb-1li:hover > a {color:var(--major-color);}

#gnb .gnb-1li.gnb-1li-all > a {display:inline-block; padding:9px 0; width:auto; cursor: pointer;}
#gnb .gnb-1li.gnb-1li-all .hamburger {display:inline-block; width:29px; height:29px; float:left; position: relative; background:var(--major-lightest-color); padding:8px 5px; filter: grayscale(1)}
#gnb .gnb-1li.gnb-1li-all .hamburger div {display: block; width:calc(100% - 10px); height:1px; background:#333; position: absolute; top:8px; left:5px;}
#gnb .gnb-1li.gnb-1li-all .hamburger div:nth-child(2) {top:14px;}
#gnb .gnb-1li.gnb-1li-all .hamburger div:nth-child(3) {top:20px;}
#gnb .gnb-1li.gnb-1li-all .text {display: inline-block; width:auto; float:right; line-height: 16px; margin-left:15px;}

#gnb .gnb-1li.gnb-1li-all.open .hamburger {filter: grayscale(0);}
#gnb .gnb-1li.gnb-1li-all.open .hamburger div:nth-child(1) {position: absolute; top:14px; transform: rotate(45deg);}
#gnb .gnb-1li.gnb-1li-all.open .hamburger div:nth-child(2) {position: absolute; top:14px; transform: rotate(-45deg);}
#gnb .gnb-1li.gnb-1li-all.open .hamburger div:nth-child(3) {display: none;}

#category-all-bg {display: none; position: fixed; background:rgba(0,0,0,0.01); width:100%; height:100%; top:0; left:0; z-index: 99998;}

#gnb .gnb-1li:hover {border-bottom:2px solid #555;}
#gnb .gnb-1li.gnb-1li-all:hover {border-bottom:none;}

.gnb2 {display: none; margin-top:48px;}
.gnb-1li:hover > .gnb2 {display: block;}
.gnb2 .menu-all {display: none; height:50px; position: absolute; left:0; top:-1px; background:transparent; padding: 10px 0; box-sizing: border-box; cursor: pointer; border-bottom:none; z-index: 99999;}
.open .gnb2 .menu-all {display: inline-block;}
.fixed .gnb2 .menu-all {padding:16px 40px;}

#gnb .gnb-2ul { position:absolute; left: 0; display: inline-block; border:solid 1px #555555; background:#fff;  overflow:hidden; z-index:99999; padding:30px; min-width:200px;}
#gnb .gnb-2ul li a {display:block; font-size:13px; color:#888; width:100%; line-height:28px; padding:0; vertical-align: middle; white-space: nowrap;}
#gnb .gnb-2ul li a:hover {color:var(--major-color);}

#gnb a.new {position: relative;}
#gnb a.new:after {content: 'N'; display: inline-block; width:14px; height:14px; border-radius: 4px; text-align: center; line-height: 14px; animation: changeBG 0.3s infinite alternate; color:white; font-weight: bolder; font-size:10px; margin-left:5px; position: relative; top:-1px;}
@keyframes changeBG {
    from {
        background-color:#e43e1a;
    }
    to {
        background-color:orangered;
    }
}

#gnb .gnb-2ul.gnb-all {left: 0; width:1200px; margin-left:0; transition: all }
#gnb .gnb-2ul.gnb-all > div {float:left; padding:20px; display: inline-block; overflow: hidden; border-right:1px solid #eee; position: relative;}
#gnb .gnb-2ul.gnb-all > div.row-1 {width:100%}
#gnb .gnb-2ul.gnb-all > div.row-2 {width:50%}
#gnb .gnb-2ul.gnb-all > div.row-3 {width:33.33%}
#gnb .gnb-2ul.gnb-all > div.row-4 {width:25%}
#gnb .gnb-2ul.gnb-all > div.row-5 {width:20%}
#gnb .gnb-2ul.gnb-all > div.row-6 {width:16.66%}
#gnb .gnb-2ul.gnb-all > div.row-7 {width:14.28%}
#gnb .gnb-2ul.gnb-all > div.row-8 {width:12.5%}
#gnb .gnb-2ul.gnb-all > div.row-9 {width:11.11%}
#gnb .gnb-2ul.gnb-all > div.row-10 {width:10%}
#gnb .gnb-2ul.gnb-all > div:last-child {border-right:none;}
#gnb .gnb-2ul.gnb-all li.gnb-2li > a {font-size:18px; color:#333; line-height: 1; font-weight: 700;}
#gnb .gnb-2ul.gnb-all li a:hover {}
#gnb .gnb-2ul.gnb-all li.gnb-2li + li.gnb-3li {margin-top:30px;}

#gnb .gnb-btn {border-left:1px solid #ddd; border-right:1px solid #ddd;}
#gnb .gnb-btn a {padding:0; width:auto;}


.top_menu {display: inline-block;}
.top_menu li {float:left;padding:0 10px;font-size:12px;letter-spacing: -0.1em;color:#aaa;line-height: 30px;}
.top_menu li:first-child {padding-left:0;}
.top_menu li:last-child {padding-right:0;}
.top_menu li a {font-size:12px;letter-spacing: -0.1em;color:#aaa;line-height: 30px;}



.hd_login {position: absolute;right: 0;}

#box_extra ul {display: inline-flex; grid-gap: 10px; margin:8px 0;}
#box_extra li {display: block; float: left; padding: 0;box-sizing: border-box;}
#box_extra li a {width:100px; font-weight: 700;}



/*-------------------------------------------------------------
                          왼쪽메뉴                         
------------------------------------------------------------*/

#lnb {position:relative; width:220px; float:left;}
.lnb_title {font-size:20px; line-height: 60px; color:#777; font-weight: normal; border-bottom:1px solid #eae5e9; padding:0 20px;}

#lnb > a {display: inline-block; width:100%; height:auto; text-align: center;}
#lnb > img, #lnb > a > img {width:auto; height:auto; max-width:100%;}

/*메뉴1차*/
.vNav {position:relative; width:100%;}
.vNav ul {list-style:none; border-bottom:1px solid #eae5e9; margin-bottom:20px;}
.vNav li {border-bottom:1px solid #eae5e9;}
.vNav li a {display: block; padding:5px 20px; line-height: 28px; font-weight: 300; font-size: 13px; color:#555; letter-spacing: -0.5px;}
.vNav li > a:hover, .vNav li:hover > a {color:#555; background-color:var(--major-lightest-color);}
.vNav li.active > a {color: var(--major-color);}
.vNav li.active > a:after {    display: inline-block;   font: normal normal normal 14px/1 FontAwesome;    text-rendering: auto;   -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;content: "\f105"; float:right; vertical-align: middle; line-height: 25px;}
.vNav li:last-child {border-bottom:none;}

/*메뉴1차 선택시 2차메뉴*/
.vNav li.active.pMenu > a:after {transform: rotate(90deg);}
.vNav .vNav2 {padding:0; padding-left:10px; border:none; margin-bottom:5px;}
.vNav .vNav2 li {border-bottom:none; width:100%;}
.vNav .vNav2 li a {display:block; padding:5px 0; line-height: 18px; font-size:12px; color:#999; font-weight: 300; letter-spacing: -0.5px;}
.vNav .vNav2 li > a:hover, 
.vNav .vNav2 li:hover > a {color:#555;}
.vNav .vNav2 li a:after {line-height: 16px;}


/*-------------------------------------------------------------
                          페이지바                          
-------------------------------------------------------------*/

.pagebar {position:absolute; width: 500px; right: 0; top: 50px;  padding:0; text-align:right;}
.pagebar li,
.pagebar li span { font-size:13px; display:inline-block;color:#999;line-height:25px; vertical-align: middle;}
.pagebar li .fa-angle-right {color:#b3b3b3; font-size:16px !important; margin:auto 5px; margin-top: -3px;}

/*-------------------------------------------------------------*/
/*                           페이지네이션                         */
/*-------------------------------------------------------------*/
.pagination-wr {display: inline-block; width:auto; padding:5px 0;}
.pagination {display:inline-block;width:24px; height:24px;vertical-align:middle; font-size:13px; line-height:22px;border-radius:2px; margin:0 2px; color:#777;  text-decoration: none}
.pagination:hover {background-color:#fff; color:#000; text-decoration: underline;}
.pagination.p-current {font-weight:bold; color:var(--major-color);text-decoration: underline;}
.pagination.p-arrow {margin:0 3px; font-family: 'opensans', Dotum, Sans-serif; text-align: center;}
.pagination.p-arrow.disabled {color:#ccc;cursor: not-allowed; display: none;}
.pagination.p-arrow.disabled:hover {background-color:#fff;font-weight: normal;color:#ccc;cursor: not-allowed;}

/*-------------------------------------------------
	퀵메뉴
-------------------------------------------------*/
#quick {position: fixed;top:50%; right: 20px; transform: translateY(-50%);display: inline-block;width: 80px;z-index: 999;text-align: center;border: 1px solid #d2d0d0;border-radius: 10px;overflow: hidden;}
#quick ul li {display: inline-block;width:100%;float:left;background: #fff;border-bottom: 1px solid #d2d0d0;padding: 10px 5px;}
#quick ul li:last-child {border-bottom: 0;}

#quick ul li .txt {display:block;width:100%;height: auto;line-height: 16px;color: #747474;font-size: 12px;text-align: center; word-break: keep-all;}
#quick ul li .txt.bold {font-weight: 700; font-size: 13px;}
#quick ul li:hover .txt {color: var(--major-lighter-color);}


#quick ul li .img {display:block;width:30px;height:30px;margin: 0 auto;background-image:url(/_img/inc/icon_quick.png);background-repeat: no-repeat;background-position:0 0; background-size:auto 60px;}
#quick ul li.q-tel .img {background-position:0 0;}
#quick ul li.q-cart .img {background-position:-30px 0;}
#quick ul li.q-guide .img {background-position:-60px 0; transform: scale(1.2);}
#quick ul li.q-estimate .img {background-position:-90px 0;}
#quick ul li.q-license .img {background-position:-120px 0;}
#quick ul li.q-bank .img {background-position:-150px 0;}
#quick ul li.q-before .img {background-image:none;}
#quick ul li.q-before .img i {font-size:2.5em; color:#ddd;}
#quick ul li:hover .img {background-position-y:-30px;}
#quick ul li:hover .img i {color:var(--major-lighter-color);}
   
#quick #btn-top {display: inline-block; width:50px; height:50px; position: absolute; bottom:-250px; right:10px; background:url(/_img/inc/top.png) center no-repeat; font-size: 0; border-radius: 50%;}



/*-------------------------------------------------
	하단 레이아웃
-------------------------------------------------*/
#ft {clear:both; position:relative; margin:0; margin-top:70px; height:auto; background:#6f7072;padding: 0;}
#ft > .container-full {padding:0;}

/* foot01 */
.foot01 {background-color: #6f7174; color: #fff; padding: 30px 0; line-height: 1.5;}
.foot01 a {color: #fff; text-decoration: none;}
.foot01 .container {display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1200px; margin: 0 auto; padding: 0; list-style: none; grid-template-areas: "info time webhard bank" "info tel tel bank";}

.foot01 .container::before {display: none;}
.foot01 .ft_info {grid-area: info;}
.foot01 .ft_bank {grid-area: bank;}
.foot01 .ft_cs {grid-area: time; padding-bottom:10px;}
.foot01 .ft_webhard {grid-area: webhard; padding-bottom:10px;}
.foot01 .ft_tel {grid-area: tel;}

.foot01 li {padding: 0 30px;position: relative;border-left: 1px solid rgba(255, 255, 255, 0.3);box-sizing: border-box;}

.foot01 .ft_cs, 
.foot01 .ft_tel {border-left: none !important;}
.foot01 .ft_info {border-left: none !important; border-right:1px solid rgba(255,255,255,0.3);}

.foot01 .title {font-size: 16px; font-weight: 700; margin-bottom: 20px; display: flex; align-items: center;}

.foot01 li:not(.ft_tel) .title::before {content: ""; display: inline-block; width: 3px; height: 14px; background-color: #fff; margin-right: 8px; margin-bottom: 2px;}

.foot01 li span {display: block; font-size: 13px; line-height: 1.3; color: #e0e0e0;}
.foot01 li span > span {display: inline-block;}
.foot01 li span[data-title]::before {content: attr(data-title);}

.foot01 .ft_tel {display: flex; flex-wrap: wrap; justify-content: center; margin-top:10px;}
.foot01 .ft_tel .title span {display: inline-block; width:auto; height:auto; padding:3px 5px; background-color:var(--major-color); border-radius: 5px; border-bottom-right-radius: 0; margin-right:10px; font-size:12px; color:#fff;position: relative; top:-2px;}
.foot01 .ft_tel .tel {display: inline-block;}
.foot01 .ft_tel .tel a {font-size: 52px; font-weight: 900; letter-spacing: -2px; line-height: 1; white-space: nowrap;}
.foot01 .ft_tel .tel small {display: block; white-space: nowrap; font-size:13px; margin-top:5px;}

.ft_bank img {width:auto; height:auto; max-width:100%; max-height:30px; margin-bottom:10px;}
.ft_bank textarea[readonly] {border:none; background:transparent; resize: none; display: inline-block; width:100%; height:auto; font-size:15px; font-family: "Pretendard", Sans-serif; color:#e0e0e0; line-height: 1.3; padding:0; margin:0; outline: none !important; font-weight: bold;}

/* foot02 */
.foot02 {background-color:#231f20; padding:20px 0px;}
.foot02 .container {display: flex; align-items: center; grid-gap: 20px; padding:0 30px;}
.foot02 .container::before, .foot02 .container::after {display: none;}
.ft_logo {padding: 0px;}
.ft_logo img {width:auto; height: 37px; filter: brightness(100);}

.ft_info2 {}
.ft_info2 [data-title]:before {content: attr(data-title);}

.ft_info2 a {display: inline-block;font-size: 13px;letter-spacing: 0;font-weight: 300;color:#d0d0d0;;line-height: 1.3;}
.ft_info2 a:hover {color:#fff;}
.ft_info2 a:after {content:"";margin:0 12px;display: inline-block;width: 1px;height: 10px;background: #d0d0d0;vertical-align: middle; margin-top: -1px;}
.ft_info2 .copyright {display: inline-block;font-size: 13px;letter-spacing: 0;font-weight: 300;color:#d0d0d0;line-height: 1.3;}
.ft_info2 .copyright strong {color: #d0d0d0;font-weight: 600;}
 
.ft_info2 > div {}
.ft_info2 > div span {display: inline-block;font-size: 13px;letter-spacing: 0;font-weight: 300;color:#d0d0d0;line-height: 1.3;}
.ft_info2 > div span:after {content:"";margin:0 12px;display: inline-block;width: 1px;height: 10px;background: #d0d0d0;vertical-align: middle;margin-top: -1px;}
.ft_info2 > div span:last-child:after {display: none;}

.ft_sns {box-sizing: border-box;padding-left: 40px;display: flex;padding-top: 47px;}
.ft_sns i {width:30px; height:30px; border-radius: 50%; border:1px solid #c9c9c9; color:#c8c8c8; text-align: center; line-height: 28px; box-sizing: border-box; font-size:12px;}
.ft_sns a {margin-left: 10px;font-size:0.9em;color:#999;display: inline-block;width: 30px;height: 30px;background-size: cover;background-repeat: no-repeat;}
.ft_sns a.facebook {background-image: url(/_img/inc/facebook.png);}
.ft_sns a.instagram {background-image: url(/_img/inc/instagram.png);}
.ft_sns a.blog {background-image: url(/_img/inc/blog.png); }


/*

.foot01 li {float:left; text-align: left;}
.foot01 li.ft_logo img {width:auto; height:auto; max-width:80px; max-height:25px;}
.foot01 li .title {font-size: 16px;line-height: 1;letter-spacing: 0;font-weight: bold;margin-bottom:12px;display: inline-block;width:100%;}
.foot01 li span {display: block;font-size: 14px;letter-spacing: 0;font-weight: 300;color:#999;line-height: 24px;}
.foot01 li span a {color:#999;}
.foot01 .ft_info {width:440px;}
.foot01 .ft_cs {width:390px;}

.ft_cs .title-none[data-title]:before {opacity: 0;}

li.ft_bank {width:370px;}

#ft .container:nth-child(2) {padding:30px 0 27px;}
#ft .ft_logo {margin-right:26px;}
#ft .ft_logo img {max-height: 30px;} 
#ft .ft_menu, #ft .ft_menu a, #ft .copyright {font-size:13px; letter-spacing: 0.025em; line-height: 1; color:#bbb;}
#ft .ft_menu {padding:0 12px; margin:5px 0; border-right:1px solid #ccc;}
#ft .copyright {padding:0 12px; margin:5px 0; color:#989898;}
#ft .copyright strong {font-weight: normal; color:#222;}

*/