@charset "utf-8";

:root {
    --theme-color : #005eb8;
		--theme-color-2 : #01A1A1;
}

/* 헤더 */
#hd:before,
#hd:after,
#hd_home,
#hd_user,
#hd_contact,
#hd_search { display:none; }

html,body {font-family: 'Pretendard';}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family:'Pretendard','NanumSquare',sans-serif; }

#hd {position: fixed; top: 0; z-index: 100; width: 100%; background:#fff; border-bottom: 1px solid rgba(255,255,255,0.5);}
#hd:before,
#hd:after {content: none;}

#hd.fixed {background: #fff; border-bottom: 1px solid #DDDDDD;}
#hd.fixed #hd_wrap #gnb #gnb_1dul .gnb_1dli .gnb_1da {color: #333333; font-weight: 600;}
#hd.fixed #hd_wrap #gnb #gnb_1dul .gnb_1dli.gnb_1dli_on .gnb_1da {color: var(--theme-color);}
#hd.fixed #hd_logo .hd_logo_bk {display: flex;}
#hd.fixed #hd_logo .hd_logo_wt {display: none;}
#hd.fixed #hd_user a {color: #333;}
#hd.fixed .offcanvas-toggle .icon-bar {background: #333;}

#hd_wrap {position: relative; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 0; width: 100%; height: 100px; max-width: 1300px;}
#hd_wrap > * { z-index: 1; }

#hd_logo { margin: 0; padding: 0; position: relative; height: auto;}
#hd_logo a {position: static; margin: auto; display: flex; align-items: center; margin: auto; padding: 0; width: auto; height:53px; }
#hd_logo img { display: block; max-width: 100%; max-height: 53px; }
#hd_logo .hd_logo_bk {display: none;}
#hd_logo .hd_logo_wt {display: flex;}
#hd.hd_zindex #hd_logo .hd_logo_bk {display: flex;}
#hd.hd_zindex #hd_logo .hd_logo_wt {display: none;}

#gnb {position: relative; left: auto; right: auto; margin: 0; width: 72%; height: 100%;}
#gnb_wrap,
#gnb_wrap #gnb_container {height: 100%;}
#gnb_1dul {display: flex; justify-content: space-around; width: 100%; height: 100%;}
#gnb_1dul:after {content: none;}
#gnb_1dul .gnb_1dli { /* width:100%; */ float:none; } /* 240716 우선 주석 - 하위메뉴 생성 후 체크 필요 */
#gnb_1dul .gnb_1dli .gnb_1da {height: 100%; padding:.5em .5em; color:#000; font-size:1.375rem; font-weight:600; }

#gnb_1dul .gnb_1dli:not(:first-child):before {content: none;}


#gnb_1dul .gnb_2dul {position: static; top: 0; left: 0; transform: none; min-width: auto; max-width: none; opacity: 1; visibility: visible; height: 230px; background: none; color: #333;}
#gnb_1dul .gnb_1dli_over .gnb_2dul {top: 0;}
/* #gnb_1dul .gnb_2dul::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0px; background: rgba(185,185,185,0.15); transition: all 0.3s; z-index: -1;}
#gnb_1dul .gnb_1dli_over .gnb_2dul::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 360px; background: rgba(185,185,185,0.15);}
#gnb_1dul .gnb_1dli_over .gnb_2dul::after {content: none;} */
#gnb_1dul .gnb_2da {color: #333; text-align: center; padding:0.6em 0.5em; font-size:1.063rem; }
#gnb_1dul .gnb_2da:hover,
#gnb_1dul .gnb_2da:focus,
#gnb_1dul .gnb_2dli_active .gnb_2da {color: var(--theme-color); text-decoration: underline; text-underline-position: under; font-weight: bold;}

#hd_button {position: static;}
#hd_button > ul {border: none;}
#hd_button > ul > li {border: none; float: none;}
#hd_button > ul > li > button.hd_button_navbar { background:url('../images/common/btn_sitemap.png') center center no-repeat; background-color:none; width:20px; transition:all 0.3s; }
#hd_button > ul > li > button.hd_button_navbar:hover,
#hd_button > ul > li > button.hd_button_navbar:focus { background-position:center; background-color:0 none; }
#hd.hd_zindex #hd_button > ul > li > button.hd_button_navbar,
#hd.fixed #hd_button > ul > li > button.hd_button_navbar {background-position: center center; filter: none;}
#hd.hd_zindex #hd_button > ul > li > button.hd_button_navbar:hover,
#hd.hd_zindex #hd_button > ul > li > button.hd_button_navbar:focus,
#hd.fixed #hd_button > ul > li > button.hd_button_navbar:hover,
#hd.fixed #hd_button > ul > li > button.hd_button_navbar:focus { /* background-color: rgba(185,185,185,0.15); */}

#hd .hd_back {height: 100px; transition: all 0.3s; overflow: hidden;}
#hd.hd_zindex .hd_back {background: #fff; height: 280px;}

#hd.hd_zindex #gnb_1dul .gnb_1dli .gnb_1da {color: #000; font-weight: 600;}

/* ------------- 1차메뉴 hover, focus, active 효과 ------------- */

#gnb_1dul .gnb_1dli .gnb_1da {-webkit-transition: color 0.3s;-moz-transition: color 0.3s;transition: color 0.3s;}
#gnb_1dul .gnb_1dli .gnb_1da:before {position: absolute; top: 18%;left: 50%;color: transparent;content: '•';text-shadow: 0 0 transparent;font-size: 13pt;-webkit-transition: text-shadow 0.3s, color 0.3s;-moz-transition: text-shadow 0.3s, color 0.3s;transition: text-shadow 0.3s, color 0.3s;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);transform: translateX(-50%);pointer-events: none;}

#gnb_1dul .gnb_1dli.gnb_1dli_active .gnb_1da:before { color:var(--theme-color); text-shadow: 10px 0 var(--theme-color), -10px 0 var(--theme-color); }
#gnb_1dul .gnb_1dli.gnb_1dli_active .gnb_1da { color:var(--theme-color); }

#gnb_1dul .gnb_1dli .gnb_1da:hover:before,
#gnb_1dul .gnb_1dli .gnb_1da:focus:before,
#hd.hd_zindex #gnb_1dul .gnb_1dli.gnb_1dli_active .gnb_1da:before,
#hd.fixed #gnb_1dul .gnb_1dli.gnb_1dli_active .gnb_1da:before {content: none; /* color: var(--theme-color); text-shadow: 10px 0 var(--theme-color), -10px 0 var(--theme-color); */}

#hd.hd_zindex #gnb_1dul .gnb_1dli .gnb_1da:hover,
#hd.hd_zindex #gnb_1dul .gnb_1dli .gnb_1da:focus,
#hd.hd_zindex #gnb_1dul .gnb_1dli.gnb_1dli_active .gnb_1da,
#hd.fixed #hd_wrap #gnb #gnb_1dul .gnb_1dli.gnb_1dli_active .gnb_1da {color: var(--theme-color);}


/* ------------- 1차메뉴 hover, focus, active 효과 ------------- */


@media (max-width:1400px) {
    #hd_wrap {padding: 0 15px;}
    #hd_toggle {position: static; top: auto; max-width:25px;}
		.offcanvas-toggle { width:25px; height:25px; }
    .offcanvas-toggle .icon-bar {background: #000;}
    #hd.hd_zindex .offcanvas-toggle .icon-bar {background: #000;}
		#off #off_container { height:calc(100% - 84px); margin-top:84px; }

    #gnb {display: block;}
}

@media (max-width:1200px) {
    #gnb {width: 80%;}
		#hd_toggle {margin:0; }
}

@media (max-width:992px) {
    #gnb {display: none;}
}

@media (max-width:768px) {
    #hd .hd_back,
    #hd_wrap {height:83px;}
}

@media (max-width:360px) {
	#off.in { left:0; min-width:100%; width:100%; z-index:98; }
	#hd_toggle { position:absolute; /* top:0; */ right:15px; z-index:99; }
	#off #off_1dul { border-top:1px solid #ddd; }
}

/* 사이트맵 */
.dm-sitemap {z-index: 100; background: #F2F2F2;}
.dm-sitemap-header {border-bottom: 1px solid #ccc;}
.dm-sitemap-close {border: none;}
.dm-sitemap-close:before,
.dm-sitemap-close::after {background-color: #333333; height: 2px;}

.dm-sitemap-body {position: relative; display: flex; align-items: center; padding: 0; height: calc(100vh - 67px);}
.dm-sitemap-body:after {content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: #ccc;}
.dm-sitemap-body > ul {position: relative; flex-wrap: wrap; flex-direction:row; gap:3rem 0; margin: 0 auto; width: 100%; max-width: 1300px; height:100%; max-height: 600px;}
.dm-sitemap-body > ul::before,
.dm-sitemap-body > ul::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 1px; height: calc(100vh - 67px); background: #ccc;}
.dm-sitemap-body > ul::before {left: 0;}
.dm-sitemap-body > ul::after {right: 0;}
.dm-sitemap-body > ul > li {display: block; padding: 0 3rem; width: 50%;}
.dm-sitemap-body > ul > li > a {margin-bottom: 2.5rem; padding: 0; color: #333 !important; font-size: 3rem;}
.dm-sitemap-body > ul > li.is-active > a {color: var(--theme-color) !important;}
.dm-sitemap-body > ul > li > a > span::after {content: none;}

.dm-sitemap-body > ul > li > ul {gap: 1rem 2.5rem; margin: 0;}
.dm-sitemap-body > ul > li > ul > li > a {padding: 0; color: #555; font-weight: 500;}
.dm-sitemap-body > ul > li > ul > li > a:hover {border-bottom: 1px solid #555; color: #555;}
.dm-sitemap-body > ul > li > ul > li > a::after {content: none; background-color: #555;}

.dm-sitemap-footer {display: none}

@media (max-width:1200px) {
    .dm-sitemap {display: none !important;}
}

@media (max-height:750px) {
    .dm-sitemap-body > ul {gap:2rem 0; padding: 15px 0;}
    .dm-sitemap-body > ul > li > a {margin-bottom: 1.8rem; font-size: 2.5rem;}
    .dm-sitemap-body > ul > li > ul {gap: 0.5rem 1rem;}
}

@media (max-height:580px) {
    .dm-sitemap-body > ul {gap:1rem 0}
    .dm-sitemap-body > ul > li > a {margin-bottom: 1.5rem; font-size: 2rem;}
    .dm-sitemap-body > ul > li > ul > li > a {font-size: 1.25rem;}
}

/* 모바일메뉴 */
#off {z-index: 100;}
#off h2 > a { height:auto; }
#off h2 > a.hd_logo_wt {display: none;}
#off #off_member,
#off #off_search {display: none;}

/* 푸터 */
#ft { padding:4.375rem 0 2.188rem; background:#212734; color:#fff; font-size:1.125rem; }
#ft #ft_wrap { width:100%; max-width:1330px; }
#ft:after {content: none;}
#ft_family,
#ft_social { display:none; }
/* #ft_link {display: none;} */
#ft_link_wrap { margin-bottom:2.813rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(221, 221, 221, 0.5); }
#ft_link { position:static; max-width:1330px; margin:0 auto; }
#ft_link > ul { justify-content:start; height:auto; }
#ft_link > ul > li { position:relative; margin:0 0.938rem 0 0; padding-right:1.063rem; }
#ft_link > ul > li:not(:last-child)::after { content:''; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); width:2px; height:20px; background:#fff; }
#ft_link > ul > li a { color:#fff; font-size:1.25rem; }
#ft_link > ul > li a strong { font-weight:700; }

.ft-info-wrap { display:flex; justify-content:space-between; }

#ft_sign, #ft_info {float: none; margin: 0; max-width:500px;}
#ft_sign {display: inline-block; margin-bottom: 2rem;}
#ft_sign img {max-height: none;}
#ft_copy {justify-content: start; color: #8D8D8D; font-size: 1rem; display:none; }

#ft_info .ft_comp > h3 { display:block; margin-right:0; margin-bottom:1.875rem; font-family:inherit; color:#fff; font-size:1.563rem; font-weight:700; }
#ft_info .ft_comp > ul > li { width:100%; margin-bottom:0.938rem; }
#ft_info .ft_comp > ul > li:last-child { margin-bottom:0; }
#ft_info .ft_comp > ul > li > dl > dt { width:110px; margin:0; color:#fff; }
#ft_info .ft_comp > ul > li > dl > dt:after { content:' : '; display:none; }
#ft_info .ft_comp > ul > li > dl > dd { margin-left:2.5rem; }

#ft_tel_time { }
#ft_tel_time .tel { margin-bottom:1.5rem; font-size:2.25rem; font-weight:700; line-height:1; }
#ft_tel_time .time_tit { margin-bottom:0.5rem; font-size:1.25rem; }
#ft_tel_time .time { margin-bottom:0.5rem; }
#ft_tel_time .time span { display:inline-block; min-width:60px; margin-right:0.938rem; }

#ft_goto #totop {background:#00D5B8;}
#ft_goto #totop:hover,
#ft_goto #totop:focus {background:#01A1A1; /* filter:brightness(1.5); */  }

html:not([data-scroll="0"]) #ft_goto { bottom:25px; }

@media (max-width:1330px) {
	#ft { padding:3rem 0; }
	#ft #ft_wrap { max-width:none; }
	#ft_link { padding:0 0.938rem; }
	.ft-info-wrap { padding:0 0.938rem; }
}

@media (max-width:1200px) {
    #ft_copy {}
		#ft_info,
		#ft_link,
		#ft_copy { text-align:left; width:100%; }
		#ft_link_wrap { margin-left:0; margin-bottom:2.5rem; padding:0 0.938rem 1.875rem; }
		#ft_info .ft_comp > ul > li > dl { margin:0; }
}

@media (max-width:850px) {
    .ft-info-wrap { flex-wrap:wrap; gap:1.5rem 0; }
		#ft_info,
		#ft_tel_time { width:100%; max-width:none; }
		#ft_info .ft_comp > h3 { margin-bottom:1rem; }
		#ft_info .ft_comp > ul > li { margin-bottom:0.5rem; }
		#ft_tel_time .tel { margin-bottom:0.5rem; font-size:1.8rem; }
}

@media (max-width:768px) {
	#ft { padding:2rem 0; }
	#ft_link_wrap { margin-bottom:2rem; }
	#ft_info .ft_comp > h3 { font-size:1.25rem; }
  #ft_info .ft_comp > ul  { font-size:1rem; }
	#ft_link > ul > li { }
	#ft_link > ul > li:not(:last-child)::after { width:1px; height:15px; }
	#ft_link > ul > li a { font-size:1.125rem; }
	#ft_info .ft_comp > ul > li > dl > dd { margin-left:0.5rem; }
	#ft_tel_time .tel { font-size:1.4rem; }
	#ft_tel_time .time { font-size:1rem; }
}

@media (max-width:486px) {
	#ft { padding:1.5rem 0; }
	#ft_link_wrap { margin-bottom:1.5rem; padding:0 0.938rem 1.5rem; }
	#ft_link > ul > li a { font-size:1rem; }
	#ft_info .ft_comp > ul > li > dl > dt,
	#ft_info .ft_comp > ul > li > dl > dd { width:100%; }
	#ft_info .ft_comp > ul > li > dl > dt { color:#aaa; }
	#ft_info .ft_comp > ul > li > dl > dt::before { content:'['; display:inline-block; font-size:1rem; padding-right:.1rem; }
	#ft_info .ft_comp > ul > li > dl > dt::after { content:']'; display:inline-block; font-size:1rem; padding-left:.1rem; }
	#ft_info .ft_comp > ul > li > dl > dd { margin:0; }
	#ft_tel_time .time span { margin-right:.5rem; }
}

@media (max-width:360px) {
	#ft_link > ul { flex-wrap:wrap; flex-direction:column; align-items:flex-start; }
	#ft_link > ul > li { margin:0; padding:0; }
	#ft_link > ul > li:not(:last-child)::after { display:none; }
	#ft_goto { right:1rem; }
}

/* 공통 */
#container {margin: 0 auto; word-break: keep-all;}
#container .heading { margin:3.75rem 0; text-align:left; }
#container .heading h3 { font-size:2.5rem; letter-spacing:-0.03em; }
h3,
h4,
h5 {letter-spacing: -0.03em;}

/* 서브레이아웃 */
#vis #titler { border-bottom:1px solid #ddd; height:590px; }
#vis #titler::before,
#vis #titler::after { transition:all 0.25s ease-in-out; }
#vis #titler::before { content:""; position:absolute; left:calc(50% - 550px - 110px); right:0; top:auto; bottom:0; display:block; height:104px; background:#fff; }
#vis #titler::after { content:none; }
#vis #titler .leader { margin:0 auto; max-width:1100px; text-align:center; font-weight:800; font-size:2.875rem; font-family:inherit; transform:translateY(-40%); }
#vis #titler .leader:after { content:'DOOSAN FORKLIFT'; display:block; margin-top:0.875rem; /* font-family: 'Bodoni Moda'; */ font-weight:700; font-size:1.063rem; letter-spacing:0.02em; font-style:italic; }
#vis #titler .menutab { border-top:0; width:auto; left:auto; right:calc(50% - 550px); z-index:1; }
/* #vis #titler .menutab:before {content: ''; position: absolute; bottom: 0; left: 50%; width:100vw; transform: translateX(-50%); background: #fff; height: 80px; z-index:-1;} */
#vis #titler .menutab .dep-wrap { margin-bottom:0; overflow:initial; }
#vis #titler .menutab .dep-wrap > li,
#vis #titler .menutab .dep-wrap > li > a { color:#111; }
#vis #titler .menutab .dep-wrap > li > a { padding:25px; }
#vis #titler .menutab .dep-wrap > li > a:active,
#vis #titler .menutab .dep-wrap > li > a:focus,
#vis #titler .menutab .dep-wrap > li > a:hover,
#vis #titler .menutab .dep-wrap > li.on > a { color:var(--theme-color-2); font-weight:700; }
#vis #titler .menutab .dep-wrap > li > a:after { content:" "; position:absolute; left:0; right:0; bottom:0; height:2px; margin:0 auto; width:0px; background:var(--theme-color-2); transition:all 0.3s; }
#vis #titler .menutab .dep-wrap > li > a:active:after,
#vis #titler .menutab .dep-wrap > li > a:focus:after,
#vis #titler .menutab .dep-wrap > li > a:hover:after,
#vis #titler .menutab .dep-wrap > li.on > a:after { width:40px; height:2px; background:var(--theme-color-2); }
#vis #titler .menutab > ul:after { content:none; }

#vis #titler .segment { display:block; top:auto; bottom:25px; left:calc(50% - 550px); right:auto; transform:translateY(0); z-index:1; }
#vis #titler .segment > ul { color:#111; }
#vis #titler .segment > ul > li,
#vis #titler .segment > ul > li > a { color:#111; font-size:1.063rem; }
#vis #titler .segment > ul > li:first-child > a { background:url('../images/segment_home_bk.png') center 5px no-repeat; }
#vis #titler .segment > ul > li:not(:first-child) { background-image:url('../images/segment_arrow_bk.png'); }

#container .heading h3 {font-family:'Pretendard'; }

@media (max-width:1400px) {
	#vis #titler::before { left:0; }
	#vis #titler .menutab { right:0; }
	#vis #titler .segment { left:0; padding:0 25px; }
}

@media (max-width:1200px) {
}

@media (max-width:992px) {
	#vis #titler::before { height:80px; }
	#vis #titler .menutab { left:0; right:0; }
	#vis #titler .segment { left:0; right:0; display:none; }
	#vis #titler .leader { font-size:2.5rem; transform:translateY(-50%); }
	#vis #titler .leader:after { font-size:1rem; }
}

@media (max-width:768px) {
    #vis #titler { height:420px; }
    #vis #titler .leader { transform:translateY(-70%); font-size:2rem; }
		#vis #titler .leader:after { font-size:0.938rem; }
    #vis #titler .menutab .dep-wrap a {font-size: 1.125rem;}
}

@media (max-width:576px) {
	#vis #titler { height:330px; }
	#vis #titler .leader { transform:translateY(-30%); }
	#vis #titler::before { display:none; }
	#vis #titler .menutab { padding:0 !important; height:auto; z-index:5; }
	#vis #titler .menutab:before { content:none; }
	#vis #titler .menutab > h3 { font-weight:700; }
	#vis #titler .menutab > h3 i { display:none; }
	#vis #titler .menutab > h3::after { transition:0.3s; }
	#vis #titler .menutab > h3.open::after { transform:rotate(-180deg) translateY(50%); }
	#vis #titler .menutab .dep-wrap { display:none; height:auto; gap:0; background:var(--theme-color-2); }
	#vis #titler .menutab .dep-wrap a { padding:8px; color:#fff !important; font-size:1rem; }
	#vis #titler .menutab .dep-wrap > li { height:auto; }
	#vis #titler .menutab .dep-wrap > li > a { padding:.625rem 1.25rem; font-size:0.938rem; }
	#vis #titler .menutab > ul > li { border-top:0 none; }
	#vis #titler .menutab > ul > li > a:active,
	#vis #titler .menutab > ul > li > a:focus,
	#vis #titler .menutab > ul > li > a:hover,
	#vis #titler .menutab > ul > li.on > a { color:#fff !important; background:rgba(0,0,0,0.25); }
}