@charset "utf-8";

/* ==========================================================================
   01. 웹 폰트 및 임포트
   ========================================================================== */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean');
@import url("fonts.css");

/* ==========================================================================
   02. CSS 초기화 및 기본 스타일
   ========================================================================== */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { overflow-y: scroll; font-size: 18px; }
body { position: relative; margin: 0; padding: 0; line-height: 1.6; }
body, h1, h2, h3, h4, h5, h6, input, button, textarea, select { margin: 0; padding: 0; font-family: 'Noto Sans KR', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; color: inherit; }
p { margin: 0; }
ol, ul, li { margin: 0; padding: 0; list-style: none; outline: 0; }
a:link, a:visited, a:hover, a:focus, a:active { color: #000; text-decoration: none; }
button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; }
caption, label { position: absolute; width: 1px; height: 1px; margin: -1px; border: none; clip: rect(0, 0, 0, 0); overflow: hidden; }
table { border-spacing: 0; border-collapse: collapse; }

/* ==========================================================================
   03. 공통 및 유틸리티 클래스
   ========================================================================== */
.blind { height: 0; font-size: 0; text-indent: -9999px; overflow: hidden; }
.inblock { display: inline-block; }
.skip_menu { position: relative; z-index: 60; }
.skip_menu > a { display: block; position: fixed; left: 0; top: -30px; width: 100%; height: 28px; margin: 0 auto; padding: 0 10px; background: #111; color: #fff; font-size: 14px; line-height: 28px; text-align: center; text-decoration: underline; z-index: 10000; }
.skip_menu > a:active, .skip_menu > a:focus { top: 0; }

/* ==========================================================================
   04. 헤더 레이아웃 및 상단 영역
   ========================================================================== */
#con_wrapper { width: 100%; }
header { position: relative; top: 0; width: 100%; height: 80px; z-index: 100; }
.hd_top-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 990; background-color: #fff; box-shadow: 0px 2px 7px 0px #00000026; }
.hd_top { position: relative; width: 100%; max-width: 1700px; height: 80px; margin: 0 auto; }
.hd_top.on::before { position: absolute; min-height: 319px; height: 100%; background-color: #fff; width: 200%; content: ""; left: -50%; z-index: 30; top: 80px; border-top: 1px solid #dbdcdc; }
.hd_top-wrap h1 a { display: flex; align-items: center; }
.hd_top-wrap h1 img { max-width: 100%; }
h1 { position: absolute; left: 10px; top: 12px; width: 221px; height: 57px; z-index: 50; }
h1 a { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   05. 네비게이션 및 서브메뉴 (PC)
   ========================================================================== */
#nav { position: absolute; top: 0; width: calc(100% - 380px); line-height: 80px; height: 80px; font-size: 22px; z-index: 40; }
#nav ul.select { display: flex; position: relative; width: calc(100% - 240px); height: 80px; text-align: center; white-space: nowrap; justify-content: center; margin: 0 0 0 auto; }
#nav li { display: inline-block; font-family: 'S-CoreDream', 'Pretendard', 'Noto Sans KR', Tahoma, Geneva, sans-serif; }
#nav .select a { display: block; height: 80px; text-decoration: none; white-space: nowrap; color: #121212; box-sizing: border-box; }
#nav .select > li { width: calc(100% / 6); padding: 0 40px; font-size: 20px; line-height: 80px; position: relative; margin-left: -5px; }
#nav .select > li:after { content: ''; position: absolute; top: 77px; left: 50%; width: 0; height: 4px; background: var(--primary-color); }
#nav .select > li > a > b { position: relative; height: 100%; font-weight: 600; }
#nav .select > li:hover > a > b { text-decoration: none !important; }
#nav .select > li:hover:after { left: 0; width: 100%; transition: 0.2s ease-out; }
#nav .select li:hover a b, #nav .select li.active a b { display: block; width: 100%; height: 100%; cursor: pointer; font-weight: bold; }
#nav .select .link { margin-left: 8px; }
#nav .select .link::after { content: ""; display: inline-block; background-image: url(../images/header/linkIcon.png); background-repeat: no-repeat; background-position: center; width: 14px; height: 14px; margin-left: 5px; margin-bottom: -2px; } 
#nav .sub { display: none; position: absolute; left: 0; width: 100%; height: 297px; top: 0px; text-align: center; }
#nav .sub_bx { position: relative; width: 1280px; height: 297px; margin: 0 auto; overflow: hidden; }
.sub_left { position: absolute; left: 0; top: 0; width: 50%; height: 289px; padding-top: 130px; padding-left: 10px; }
#nav .sub_bx .haed_left_icon1 { background: url('/img/haed_left_icon1.png') no-repeat 0px 120px; }
#nav .sub_bx .haed_left_icon2 { background: url('/img/haed_left_icon2.png') no-repeat 10px 110px; }
#nav .sub_bx .haed_left_icon3 { background: url('/img/haed_left_icon3.png') no-repeat 10px 100px; }
#nav .sub_bx .haed_left_icon4 { background: url('/img/haed_left_icon4.png') no-repeat 10px 100px; }
#nav .sub_bx .haed_left_icon5 { background: url('/img/haed_left_icon5.png') no-repeat 10px 110px; }
#nav .sub_bx .haed_left_icon6 { background: url('/img/haed_left_icon6.png') no-repeat 0px 100px; }
#nav .sub_bx .sub_left .hight_tit { margin: 0px 0 10px 120px; font-size: 28px; color: #000000; line-height: 1em; letter-spacing: -1px; }
#nav .sub_bx .sub_left .hight_txt { margin: 0px 0 0px 120px; font-size: 15px; color: #666; line-height: 1.4em; }
#nav .sub li { background: transparent; }
#nav .select li:hover { position: relative; }
#nav .select li:hover .sub { display: block; position: absolute; top: 80px; left: -40%; width: 180%; height: 290px; line-height: 60px; text-align: left; background-color: #fff; }
#nav .select li.active .sub { display: block; position: absolute; top: 80px; left: 0%; width: 102%; height: 290px; line-height: 60px; text-align: left; }
#nav .select li:hover .sub li, #nav .select li.active .sub li { display: block; line-height: 1em; padding-bottom: 10px; }
#nav .sub_bx .sub_right { position: absolute; right: 25%; top: 0; width: 25%; height: 289px; vertical-align: top; border-right: 1px solid #dbdcdc; border-left: 1px solid #dbdcdc; background: #fff; border-bottom: 1px solid #dbdcdc; }
#nav .sub_right ul { padding: 25px 0 0 15%; }
#nav .sub_right ul li { position: relative; }
#nav .sub_right ul li .deth3_plus { position: absolute; top: -1px; left: -18px; cursor: pointer; border: 0px solid red; display: inline-block; }
#nav .sub_right ul li .deth3_minus { position: absolute; top: -1px; left: -21px; display: inline-block; }
#nav .sub_right ul li .deth3_menu ul { margin-top: 5px; padding: 3px 7px; background: #fff; }
#nav .sub_right ul li .deth3_menu ul li { padding-bottom: 2px; background: url('/img/list02.png') no-repeat 0 8px; padding-left: 7px; }
#nav .sub_right ul li .deth3_menu ul li a { color: #444; font-size: 14px !important; word-break: keep-all; }
#nav .sub_right ul li .deth3_menu ul li a:hover { color: var(--primary-color); }
#nav .sub_bx .sub_right2 { position: absolute; right: 0; top: 0; width: 25%; height: 289px; vertical-align: top; border-bottom: 1px solid #dbdcdc; border-right: 1px solid #dbdcdc; background: #fff; }
#nav .sub_bx .sub_right2 ul { width: 100%; }
#nav .sub_bx .sub_right2 ul li { width: 100%; height: 96px; cursor: pointer; border-bottom: 1px solid #dbdcdc; }
#nav .sub_bx .sub_right2 ul li:last-child { border-bottom: 0px solid #dbdcdc; }
#nav .sub_bx .sub_right2 ul li:first-child { background: url('/img/right_img1.png') no-repeat right center; }
#nav .sub_bx .sub_right2 ul li:nth-child(2) { background: url('/img/right_img2.png') no-repeat right center; }
#nav .sub_bx .sub_right2 ul li:nth-child(3) { background: url('/img/right_img3.png') no-repeat right center; }
#nav .sub_bx .sub_right2 ul li .tt { font-size: 18px; padding: 28px 0 0 15px; font-weight: 700; letter-spacing: -1px; color: #222; }
#nav .sub_bx .sub_right2 ul li .txt { font-size: 14px; color: #555555; padding: 5px 0 0 15px; letter-spacing: -1px; }
#nav .sub_bx .sub_right2 ul li:hover { font-weight: 600; }
#nav .select li:hover .sub li a { display: block; margin: 0; color: #444; font-size: 15px; white-space: nowrap; border: 0; padding: 0; height: auto; }
#nav .select li.active .sub li a { display: block; margin: 0; color: #444; font-size: 15px; white-space: normal; border: 0; padding: 0; height: auto; letter-spacing: -1px; word-break: keep-all; }
.deth3_plus_sub button { font-size: 15px; display: block; color: #121212; letter-spacing: -1px; word-break: keep-all; white-space: normal; background-color: transparent; overflow: visible; font-family: 'S-CoreDream', 'Pretendard', 'Noto Sans KR', Tahoma, Geneva, sans-serif; }
.deth3_plus_sub button:hover { color: var(--primary-color); text-decoration: underline; }
.deth3_plus_sub button img { margin-left: -18px; margin-right: 5px; }
#nav .select li:hover .sub li a:hover { text-decoration: underline; color: var(--primary-color) !important; text-shadow: 0 0 .001rem var(--primary-color); }

/* ==========================================================================
   06. 유틸리티 및 버튼 (헤더 우측 영역)
   ========================================================================== */
.utill { float: right; position: relative; height: 80px; z-index: 50; }
.utill button { height: 80px; cursor: pointer; }
#utill_sitemap.siteMap2 { top: 80px; display: block; border-top: 1px solid #dce7f2; }
.utill > ul, .utill > ul > li { display: flex; align-items: center; }
.utill > ul { gap: 0; justify-content: flex-end; }
.btn_search { width: 80px; height: 80px; background: var(--primary-light-color); }
.btn_search i { display: inline-block; width: 100%; height: 100%; background: url(/img/icon_search.png) no-repeat center; }
.utill li { width: auto; text-align: center; }
.utill li#utill_ct { padding-right: 0; background: none; }
.utill li a { display: block; width: 78%; height: 100%; }
.utill .btn_page { margin: 0 15px 0 0; }
.utill .btn_page a { display: flex; width: auto; height: 40px; font-family: var(--font-s-core); font-size: 18px; font-weight: 700; padding: 0 15px; border-radius: 50px; justify-content: center; align-items: center; }
.utill .delivery_page a { background: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); }
.utill .estimate_page a { background: var(--primary-light-color); color: var(--primary-color); }
.link_m::after { content: ""; display: inline-block; background-image: url(../images/header/linkIcon.png); background-repeat: no-repeat; background-position: center; width: 14px; height: 14px; margin-left: 5px; margin-bottom: -2px; }

/* ==========================================================================
   07. 사이트맵 팝업 및 카테고리
   ========================================================================== */
#utill_sitemap { display: none; position: fixed; top: 0px; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; }
#utill_sitemap .us_wr { width: 100%; height: 100vh; overflow-y: auto; background: #f1f5f8; z-index: 100; }
.stmTitle { font-size: 24px; padding-bottom: 10px; position: relative; }
.stmTitle::after { position: absolute; content: " "; left: 0; bottom: 0; width: 70%; height: 1px; background-color: #222; }
#utill_sitemap .us_tbx { position: relative; width: 1280px; height: 800px; margin: 0 auto; padding-top: 15px; padding-left: 100px; }
.us_tbx_ul01 { display: block; width: 100%; height: 100%; }
.us_tbx_ul01 li { float: left; width: 16%; padding-right: 0; color: #000; text-align: left; background: none; word-break: keep-all; }
.us_tbx_ul01 > li:nth-child(4) { width: 20%; background: none; }
.us_tbx_ul01 li p { display: inline-block; width: 150px; font-size: 24px; padding-bottom: 20px; border-bottom: 1px solid #dedede; }
.us_tbx_ul02 { margin-top: 10px; }
.us_tbx_ul02, .us_tbx_ul02 li { display: block; width: 85%; margin-bottom: 10px; }
.us_tbx_ul02 li { font-size: 16px; color: #000; text-transform: uppercase; }
.us_tbx_ul02 li ul { margin: 5px 0 5px 0px; }
.us_tbx_ul02 li ul li { margin: 0px 0 2px 15px; }
.us_tbx_ul02 li ul li:before { position: absolute; margin: 6px 0 0 -8px; width: 4px; height: 4px; background: #aaa; content: ''; border-radius: 50%; }
.us_tbx_ul02 li ul li a { font-size: 14px; color: #444; }
.us_tbx_ul02 li a { color: #000; }
.us_tbx_ul02 li a:hover { text-decoration: underline !important; }
.us_tbx_ul03 { margin: 10px 0; }
.us_tbx_ul03 li { font-size: 14px; text-indent: -0.1em; }
#utill_sitemap .pop_close { position: absolute; top: 30px; right: 0px; width: 33px; height: 31px; font-size: 0; text-indent: -9999px; background: url(/img/us_close.png) no-repeat center; border: 0; cursor: pointer; }

/* ==========================================================================
   08. 모바일 카테고리 및 탭 유틸리티
   ========================================================================== */
#hd_ct, #hd_search, #hd_delivery, #hd_estimate { display: none; }
#category { display: none; position: fixed; top: 0px; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-backface-visibility: hidden; }
#category .ct_wr { width: 100%; height: 100%; overflow-y: auto; background: #fff; border-top: 3px solid #2877b7; z-index: 31; }
#category ul.cate_tab { width: 100%; }
#category ul.cate_tab:after { display: block; visibility: hidden; clear: both; content: ""; }
#category ul.cate_tab li { float: left; width: 50%; }
#category ul.cate_tab li button { display: block; width: 100%; height: 60px; line-height: 60px; border-top: 2px solid #f6f0e7; background: #f6f0e7; border: none; color: #998972; }
#category ul.cate_tab li button.ct_tab_sl { font-weight: bold; background: #fff; color: #555; border-top: 2px solid #be9153; height: 60px; }
#category ul.cate { background: #fff; width: 100%; text-align: left; text-indent: 10px; }
#category ul.cate > li { line-height: 60px; border-bottom: 1px solid #e9e9e9; font-size: 1.167em; }
#category ul.cate li { position: relative; font-weight: bold; }
#category ul.cate li a { display: block; color: #555; padding-right: 40px; font-weight: 500; font-size: 18px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#category ul.cate li .ct_op { display: inline-block; position: absolute; top: 0; right: 0; height: 60px; width: 40px; text-indent: -9999px; background: url(/img/btn_op.png) no-repeat center; border: none; }
#category ul.cate li a:hover, #category ul.cate li a:focus { text-decoration: underline; }
#category ul.cate li .ct_cl { display: inline-block; position: absolute; top: 0; right: 0; height: 60px; width: 40px; text-indent: -999px; background: url(/img/btn_cl.png) no-repeat center; }
#category ul.sub_cate { display: none; }
#category ul.sub_cate1 li { text-indent: 20px; background: #eee; border-top: 1px solid #d2d2d2; font-weight: normal; }
#category ul.sub_cate1 li a { height: 50px; line-height: 50px; }
#category .category_logo { position: relative; height: 80px; background: #fff; }
#category .pop_close { position: absolute; top: 0px; right: 0; width: 90px; height: 80px; background: url(/img/toggle_close.jpg) no-repeat center; border: 0; text-indent: -99999px; z-index: 40; cursor: pointer; }
.tab_btn { position: fixed; width: 100%; height: 100%; box-sizing: border-box; background: #f5f5f5; border-right: 1px solid #d9d9d9; }
.tab_btn ul { display: block; width: 100%; }
.tab_btn li { width: 100%; height: auto; line-height: 70px; text-align: center; font-size: 18px; color: #4e5f67; letter-spacing: -0.1em; border-bottom: 1px solid #d9d9d9; }
.tab_btn li a { display: block; width: 30%; color: inherit; font-weight: 600; background-repeat: no-repeat; vertical-align: top; }
#tabs { content: ""; clear: both; display: block; }
#tabs .ui-tabs-anchor { width: 100%; height: 100%; padding: 0; }
#tabs #tabs-1, #tabs #tabs-2, #tabs #tabs-3, #tabs #tabs-4 { width: 100%; }
#tabs .ui-state-active a, #tabs .ui-state-active a:link, #tabs .ui-state-active a:visited { font-weight: 600; background-color: #fff; }
.tab_list { position: absolute; padding: 20px; font-size: 14px; color: #666; box-sizing: border-box; display: inline-block; width: 71%; height: 100%; top: 0; left: 30%; background-color: #fff; }
.tab_list a { color: #666; }
.tab_list span { color: #666; font-size: 14px; }
.tab_list li { position: relative; float: left; width: 284px; }
.ct_wr_ts { height: 20px; font-size: 15px; border-bottom: 1px solid #000; }
.ct_wr_lists { display: block; }
.ct_wr_lists li { width: 100%; line-height: 40px; font-size: 15px; color: #000; border-bottom: 1px solid #e6e8e8; word-break: keep-all; text-align: left; }
.ct_wr_lists li a { font-weight: bold; display: block; width: 100%; height: 100%; color: inherit; background: url(/img/s_navi_arrow.gif) no-repeat 99% center; }
.ct_wr_lists li a:hover { color: #000; font-weight: bold; }
.ct_wr_lists li ul li { line-height: 16px; font-size: 14px; color: #5b5b5b; margin: 0 0 5px 10px; border-bottom: 0px solid #e6e8e8; }
.ct_wr_lists li ul li:last-child { padding-bottom: 10px; }
.ct_wr_lists li ul li a { font-weight: 500; }

/* ==========================================================================
   09. 컨테이너 및 콘텐츠 레이아웃
   ========================================================================== */
#container { position: relative; margin: 50px auto; max-width: 100%; width: 1340px; padding: 0 20px; height: auto; word-break: keep-all; }

/* ==========================================
   10. 푸터 PC 영역 기본 스타일
   ========================================== */

footer {}
footer.sft {width:100%; background:#222; clear:both;}
footer.sft:after {content:""; clear:both; display:block; }
footer.sft > div { position:absolute; width:1280px; margin: 0 auto; z-index:10;}
footer.sft > div {position:relative;}

/* 웹 아이콘 스타일 */
.webIcon{margin-right:16px;}
.webIcon img{width: 80px;vertical-align: middle;}

/* 푸터 메뉴 영역 */
.ft_menu {text-align:center; height:76px; padding-top:30px; border-bottom:1px solid #666; margin-bottom:20px;}
.ft_menu ul li {float:left; line-height:1em; padding:0 15px}
.ft_menu ul li:first-child{padding-left:0;}
.ft_menu ul li:last-child {border-right:0px solid #474647; padding:0 10px}
.ft_menu ul li a {color:#a8a8a8; font-size:16px; font-weight:500}
.ft_menu ul li a:hover {color:#fff; font-weight:bold}
.ft_menu .facebook {margin-top:-11px}
.ft_menu select {position:absolute; top:18px; right:34px; width:210px; height:35px; line-height:35px;  padding:0 10px; border:1px solid #5e5e5e; color:#fff;-webkit-appearance: none;-moz-appearance: none;appearance: none;background: url('/img/select-arrow.png') no-repeat 95% 50% #222;}
.ft_menu select::-ms-expand {display: none;}

/* 푸터 하단 정보 및 링크 */
.foot-info .foot-link-bx li{display:inline-block;font-weight: 500;}
.foot-info .foot-link-bx li + li{margin-left:50px;}
.foot-info .inner{display:flex; color:#B2B2B2;}
.foot-info .inner li:after{content:'';display:inline-block;width: 1px;height: 10px;margin: -2px 11px 0 12px;background-color: rgba(255, 255, 255, 0.5);vertical-align:middle;}
.foot-info .inner li:last-child:after{display:none;}
.foot-info{font-size:14px;}
.foot-info .inner{display:flex;padding:30px 0;}
.foot-info .inner li{display:inline-block;margin-bottom:5px;}
.foot-info .inner li:last-child:after{display:none;}
.foot-info .copy{color: #fff;font-weight: 400;}
.foot-info .foot-logo{padding-right:30px;}
address {display:inline-block;font-style:normal;}

/* 푸터 레이아웃 및 상단 이동 버튼 */
.ft_left {float:left; width:86%;}
.ft_logo {float:left; width:240px; height:65px; margin-top:5px;}
.ft_right {float:right; width:14%;}
#top_btn {position:fixed;bottom:110px;right:30px;width:60px;height:60px;border:0;color:#333;text-align:center;font-size:15px;z-index:90;text-indent:-9999em;border-radius:50%;box-shadow: 0 0 10px 0 rgb(0 0 0 / 40%);background:rgba(255,255,255,0.5) url(/images_new/common/ico-top.png) 50% no-repeat;cursor:pointer;}

/* 유틸리티 및 사이트 선택 박스 */
.privacy {display:none;}
.footerSite_2{background-color: #666;color:#fff; border: 1px solid #919191;}

/* 공통 제목 폰트 설정 */
h1, h2, h3, h4, h5, h6, 
.hgroup-top dt, .normal-dl dt, .sub-location { font-family: var(--font-s-core); letter-spacing: -0.5px;}

/* 서브 비주얼 영역 */
.s_visual{position:relative;display:flex;height:500px;padding-top:80px;color:#fff;text-align:center;flex-direction: column;justify-content: center;transition:0.3s ease;}
.s_visual_img01 {background:url(/img/s_visual01.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img02 {background:url(/img/s_visual02.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img03 {background:url(/img/s_visual03.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img04 {background:url(/img/s_visual04.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img05 {background:url(/img/s_visual05.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img06 {background:url(/img/s_visual06.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img07 {background:url(/img/s_visual03.jpg) no-repeat bottom; background-size:cover;}
.s_visual_img0 {background:url(/img/s_visual03.jpg) no-repeat bottom; background-size:cover;}

/* 서브 텍스트바 및 네비게이션 */
.textbar {position:relative; top:0px; width:100%; height:210px; text-align:center; color:#fff;  z-index:10;}
.textbar .s_tit {padding-top:72px; width:100%; font-size:60px; line-height:1em; letter-spacing:-1px; font-family: var(--font-s-core); font-weight:700;}
.textbar .s_text {height:40px; font-size:14px; line-height:40px; text-shadow:0px 5px 5px rgba(0,0,0,0.39); letter-spacing:-1px;}
 
.textbar .sub_navi {padding-top:12px;}
.textbar .sub_navi ul {padding-right:20px}
.textbar .sub_navi ul li {display:inline-block; line-height:20px; color:#f6f6f6; font-family: var(--font-s-core);}
.textbar .sub_navi ul li span {color:#fff}
.textbar .sub_navi .home{padding-left: 27px;}
.textbar .sub_navi .home img{vertical-align:bottom}

.sub-visual-text{position:relative;z-index:1;}
.sub-visual-text.textbar{height:auto;}
.sub-visual-text h2.sub-title{font-size:60px;}
.sub-visual-text p.sub-text{margin-top:15px;color:#B2B2B2;font-size:0.4em;font-weight:400;}

/* 브레드크럼(경로 표시) */
.breadcrumb{display:none;}
.breadcrumb > ul > *{display:inline-block;}
.breadcrumb > ul li + li:before{content:'>';}
.breadcrumb .iconHome{background:url('/images/common/ico-home.png') 50% no-repeat;vertical-align:middle;}

/* 통합검색 탭 메뉴 */
.tab {list-style:none; margin-bottom:40px; overflow: hidden; }
.tab li{float:left; margin:0; cursor:pointer; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; border-left:1px solid #d9d9d9; height:50px; line-height:48px; display:inline-block; color:#666; text-align:center; text-decoration:none; background: #f8f8f8; font-size:17px; transition: border 0.3s; }
.tab li:last-child {border-right:1px solid #d9d9d9;}
.tabcontent {display: none;}
ul.tab li.current {color:#fff; border:1px solid #ff6501; font-weight:bold; background: #373e4e;}
ul.tab li a {display: block; }
ul.tab li.current a {display: block; color:#ff6501; font-weight:bold; background: #fff;}
.tabcontent.current {display: block;}
.tab_wid2 li {width:50%}
.tab_wid3 li {width:33.3333%}
.tab_wid4 li {width:25%}
.tab_wid5 li {width:20%}
.tab_wid6 li {width:16%}
.tab_wid7 li {width:14%}
.tab_wid8 li {width:12.5%}

/* 탭2 메뉴 스타일 */
.tab2 {list-style:none; margin-bottom:40px; border-top:1px solid #d9d9d9; border-left:1px solid #d9d9d9;overflow: hidden; }
.tab2 li{float:left; margin:0; cursor:pointer; border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;height:40px; line-height:37px; display:inline-block; color:#666; text-align:center; text-decoration:none;background: #f8f8f8; font-size:17px; transition:0.3s;}
ul.tab2 li.current {color:#fff; border:1px solid #373e4e; font-weight:bold; background: #373e4e;}
ul.tab2 li a {display: block; }

.tab_box600 {display:none;}

/* 탭2_600 반응형용 탭 스타일 */
.tab2_600 {list-style:none; margin-bottom:40px; border-top:1px solid #d9d9d9; border-left:1px solid #d9d9d9;overflow: hidden; }
.tab2_600 li{float:left; margin:0; cursor:pointer; border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9;height:40px; line-height:37px; display:inline-block; color:#666; text-align:center; text-decoration:none;background: #f8f8f8; font-size:15px; transition:0.3s;}
ul.tab2_600 li.current {color:#fff; border:1px solid #373e4e; font-weight:bold; background: #373e4e;}
ul.tab2_600 li a {display: block; }
ul.tab2_600 li a.current {color:#fff; border:1px solid #373e4e; font-weight:bold; background: #373e4e;}

/* 통합검색 결과 목록 영역 */
.search_all_list {width:100%; padding:30px; text-align:center; color:#666; background:#f8f8f8; font-size:28px; font-weight:600; margin-bottom:40px; word-break:keep-all;font-family: var(--font-s-core);}
.search_all_list span {color:#ff6501; }
.search_all_wrap {margin-bottom:40px; word-break:keep-all}
.search_all_tt_box {position:relative; width:100%; border-bottom:2px solid #ff6501}
.search_all_title {margin:0 0 10px 0; color:#000; font-size:24px; font-weight:700; font-family: var(--font-s-core);}
.search_all_title span {color: var(--primary-color);}
.search_all_more {position:absolute; bottom:0; right:0; background:#979797; padding:7px 20px}
.search_all_more a {color:#fff; font-weight:bold}
.search_all_board {position:relative; width:100%; padding:20px; border-bottom:1px solid #dedede}
.search_all_board .tt {background:url('/img/list01.png') no-repeat 0 10px; padding-left:10px; color:#000; font-size:16px; font-weight:600;}
.search_all_board .content {color:#666; margin:5px 0 5px 10px}
.search_all_board .navi {color:#142547;margin-left:10px}
.search_all_board .date {color:#666; margin:5px 0 0 10px}
.search_all_board .no {color:#666; font-size:16px}

/* 전체 검색 입력 박스 및 폼 */
.all_search {width:100%;margin:20px 0;padding:20px 10px;border:1px solid #d9d9d9;box-shadow:0px 3px 0px rgba(241,241,241,1);overflow:hidden;}
.all_search .all_search_input {width:100%; text-align:center;}
.all_search input {vertical-align:0px; height: 37px; padding:7px; border:1px solid #d9d9d9}
.all_search .search_box {margin-bottom:5px; width:40%; }
.all_search_input .check input {vertical-align:-14px; }
.sch_btn2 {width:50px; margin-left:-1px; line-height: 10px; height: 38px; background: #ff6501; color:#fff; border: 0; font-size: 17px; cursor:pointer; }
 
/* 상세 검색 영역 및 테이블 */
.search_more_wrap .close_btn {float:right; margin-bottom:10px; cursor:pointer;}
.search_more_wrap .more_search_table {width:100%; border-top:1px dotted #888}
.search_more_wrap .more_search_table th, .search_more_wrap .more_search_table td {background:#f4f4f4; padding:10px; border-bottom:1px dotted #888;}
.search_more_wrap .more_search_table td {background:#fff; }
.search_more_wrap .more_search_table ul li {float:left; margin-right:20px}
.search_more_wrap .more_search_table input {vertical-align:-13px; }
.search_more_wrap .more_search_table .width_100 {width:100%}
.more_search_table td.set_period input { vertical-align:0px; width:90px; margin:2px 0}
.more_search_table td.set_period button {margin-left:-1px; width:37px; height:37px; border:1px solid #d9d9d9; }

/* 검색 관련 버튼 그룹 */
.all_search_btn {clear:both; text-align:center; margin:30px 0}
.all_search_btn li {display:inline-block; }
.all_search_btn li a {color:#fff}

/* 비주얼 랩 영역 스타일 */
.visualWrap{height:400px;}
.visualWrap ul{height:100%;overflow:hidden;display:flex;}
.visualWrap ul li{position:relative;flex-basis:25%;}
.visualWrap ul li p{vertical-align:middle;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;letter-spacing:-2px;word-break:keep-all;line-height:46px;}
.visualWrap ul li a{width:100%;height:100%;display:block;}
.visualWrap ul li span{position:relative;width:100%;height:100%;overflow:hidden;display:inline-block;}
.visualWrap ul li img{position:absolute;left:50%;transform:translateX(-50%);z-index:-1;}

/* ==========================================================================
   10. 미디어 쿼리 및 반응형 스타일 (Media Queries & Responsive Styles)
   ========================================================================== */

/* 1640px 이하: 내비게이션 아이템 균등 정렬 */
@media screen and (max-width: 1640px) {
  #nav .select > li { width: calc(100% / 6); padding: 0; flex: 1; }
  #nav .select > li:first-child { margin: 0; }
}

/* 1400px 이하: 내비게이션 폰트 크기 및 패딩 조절 */
@media screen and (max-width: 1400px) {
  #nav .select > li { font-size: 16px; padding: 0 10px; }
}

/* 1330px 이하: 비주얼 랩 높이 및 이미지 크기 축소 */
@media screen and (max-width: 1330px){
  .visualWrap{height:300px;}
  .visualWrap ul li img{height:100%;}
}

/* 1281px 이하: 서브 메뉴 너비 100% 확장 */
@media screen and (max-width: 1281px) {
  #nav .select li.active .sub {width:100%;}
  #nav .select li .sub {width:100%;}
}

/* 1280px 이하: 헤더, 내비게이션, 푸터 레이아웃 변경 (태블릿/PC 경계) */
@media screen and (max-width: 1280px) {
  .hd_top { width: 100%; }
  h1 { width: 200px; }
  .utill { width: 360px; }
  .utill > ul { gap: 0; justify-content: flex-end; }
  .utill .search_li { width: auto; }
  .utill .search_wrap { width: 80px; height: 80px; border: 0; background: #FFEDE2; }
  .utill .search_wrap input { display: none; }
  .btn_search { width: 80px; height: 80px; }
  .btn_search i { background: url(/img/icon_search_m.png) no-repeat center; }
  .utill .btn_page { margin: 0 10px 0 0; }
  .utill .btn_page a { width: auto; font-size: 16px; }
  #utill_sitemap .us_wr { height: 96%; }
  #utill_sitemap .us_tbx { width: 100%; height: 800px; padding: 80px 50px; box-sizing: border-box; }
  #nav { width: calc(100% - 370px); }
  #nav ul.select { width: calc(100% - 215px); }
  #nav div.sub_right ul { padding: 25px 0 0 22%; }
  #nav .sub_right ul li div.deth3_menu ul { width: 97%; margin-left: -10px; }
  #nav .select li.active div.sub li a { word-break: break-all; font-size: 13px; }
  #nav .sub_bx { position: relative; width: 100%; height: 297px; margin: 0 auto; overflow: hidden; }
  .deth3_plus_sub button { font-size: 13px; }

  /* 푸터 1280px 스타일 */
  footer.sft {width:100%; height:auto; padding-bottom:2%; background:#191819; clear:both; border:0px solid red;}
  footer.sft > div { position:absolute; left:50%; width:100%;  margin-left:-50%; z-index:10;}
  footer.sft:after {content:""; clear:both; display:block; }
  footer.sft > div {position:relative;}

  .ft_menu {text-align:center; height:50px; padding-top:18px; border-bottom:1px solid #303030; margin-bottom:20px;}
  .ft_menu ul {display:none}
  .privacy {display:block;}
  .ft_menu .privacy select {position:absolute; top:7px; left:10px; width:180px; height:35px; line-height:35px;  padding:0 10px; border:1px solid #5e5e5e; color:#fff;-webkit-appearance: none; -moz-appearance: none;    appearance: none;background: url('/img/select-arrow.png') no-repeat 95% 50% #3a3a3a;}
  .ft_menu .privacy select::-ms-expand {display: none;}
  .ft_menu ul li:last-child {border-right:0px solid #474647; padding:0 10px}
  .ft_menu ul li a {color:#a8a8a8}
  .ft_menu ul li a:hover {color:#fff}
  .ft_menu .facebook {position:absolute; top:17px; right:20px;}
  .ft_menu select {position:absolute; top:7px; left: 283px; width:180px; height:35px; line-height:35px;  padding:0 10px; border:1px solid #5e5e5e; color:#fff;-webkit-appearance: none; -moz-appearance: none;appearance: none;background: url('/img/select-arrow.png') no-repeat 95% 50% #3a3a3a;}
  .ft_menu select::-ms-expand {display: none;}
  .ft_left {width:74%;}
  .ft_logo {float:left; width:15%; height:auto; margin-top:10px; margin-left:10px}
  .ft_logo img {width:100%}
  .ft_right {width:18%;}
  
  .footerSite_1{position:absolute;width:34px; height:34px; top:7px;left:190px;display:inline-block !important;background-color: #666;color:#fff}
  .footerSite_2{position:absolute;width:34px; height:34px; top:18px;left:464px;display:inline-block !important;background-color: #666;color:#fff}
}

/* 1150px 이하: 컨테이너 패딩 조절 */
@media screen and (max-width: 1150px) {
  #container { width: 100%; padding: 0 10px; }
}

/* 1050px 이하: 내비게이션 마진 및 서브 메뉴 배경 초기화 */
@media screen and (max-width: 1050px) {
  #nav .select > li { margin: 0; padding: 0 15px; }
  #nav div.sub_right ul { padding: 25px 0 0 22%; }
  #nav .sub_bx .sub_right2 ul li:first-child, #nav .sub_bx .sub_right2 ul li:nth-child(2), #nav .sub_bx .sub_right2 ul li:nth-child(3) { background: none; }
}

/* 1024px 이하: 상단 내비게이션 숨김 및 푸터/탑 버튼 레이아웃 조정 */
@media screen and (max-width: 1024px) {
  #utill_sitemap .us_wr { height: 87%; }
  #nav ul.select { display: none; }

  #inFooter{position:relative;}
  .foot-info .inner{display:block;}
  .foot-info .foot-logo{padding:0 0 20px;}
  .foot-info .foot-logo img{height:40px;}
  .foot-info .foot-link-bx li + li{margin-left:1em;}
  .foot-info .foot-link-bx li a{font-size:0.9em;}
  .foot-link-bx .inner{display:block;text-align:center;}
  .foot-info .inner{display:block;padding-bottom:80px;text-align:center;}
  .foo-logo{padding:0 0 20px 0;}
  .foot-sns{position:absolute;bottom:20px;left:0;width:100%;text-align:center;}
  .foot-link-bx li:after,
  .foot-info .inner li:after{margin: -1px 6px 0 9px;}
  .float-btn{width:35%;}
  #top_btn {bottom:20px;right:20px;width:40px;height:40px;background-size:40%;border-radius:0;box-shadow: 0 0 5px 0 rgb(0 0 0 / 40%);}
}

/* 1000px 이하: 내비게이션 서브메뉴 너비 및 위치 조정 */
@media screen and (max-width: 1000px){
  #nav .select li.active .sub {width:135%;left:-23%;padding: 0 5px;}
  #nav .select li .sub {width:135%;left:-23%;padding: 0 5px;}
  #nav .sub_right ul li .deth3_plus{left:-14px;}
}

/* 960px 이하: 사이트맵 및 리스트 폰트 크기 조정 */
@media screen and (max-width: 960px) {
  #utill_sitemap { top: 80px; }
  .us_tbx_ul01{display:flex;flex-wrap:wrap;gap:30px;}
  .us_tbx_ul01 li { width: calc(100% / 5); font-size: 14px; }
  .us_tbx_ul01 li .stmTitle{height:auto;}
  .us_tbx_ul01 li p { display: block; width: 100%; padding-bottom: 8px; font-size: 17px; font-weight: bold; }
  .us_tbx_ul02{display:flex;flex-direction:column;gap:0;}
  .us_tbx_ul02 li {width:100%; font-size: 14px; }
}

/* 950px 이하: PC 내비게이션 숨김 및 비주얼 랩 2단 그리드 전환 */
@media screen and (max-width: 950px) {
  #nav { display: none; }

  .visual{display:none;}
  .visualWrap{display:block;height: 434px;}
  .visualWrap ul{flex-wrap: wrap;}
  .visualWrap ul li{flex-basis: 50%;}
  .visualWrap ul li img{width:100%;height:auto;top:50%;transform: translate(-50%,-50%);}
}

/* 916px 이하: 검색 상세 테이블 블록형 전환 */
@media (max-width: 916px) {
  .search_more_wrap .more_search_table th, .search_more_wrap .more_search_table td {display:block; width:100%; text-align:center; background:#f4f4f4; padding:5px 0px; border-bottom:0px dotted #888;}
  .search_more_wrap .more_search_table td ul {overflow:hidden; width:100%; }
  .search_more_wrap .more_search_table td {border-bottom:1px dotted #888}
}

/* 800px 이하: 태블릿/모바일 푸터 및 서브 비주얼 최적화 */
@media screen and (max-width: 800px) {
  footer.sft {width:100%; height:auto; padding-bottom:2%; background:#191819; clear:both; border:0px solid red}
  footer.sft > div { position:absolute; left:50%; width:100%;  margin-left:-50%; z-index:10;}
  footer.sft:after {content:""; clear:both; display:block; }
  footer.sft > div {position:relative;}

  .ft_menu {text-align:center; height:103px; padding-top:18px; border-bottom:1px solid #303030; margin-bottom:20px;}
  .ft_menu ul {display:none}
  .privacy {display:inline-block;}
  .ft_menu .privacy select {position:absolute; top:7px; left:2.5%; width:55%; height:35px; line-height:35px;  padding:0 10px; border:1px solid #5e5e5e; color:#fff;-webkit-appearance: none; -moz-appearance: none; appearance: none;background: url('/img/select-arrow.png') no-repeat 95% 50% #3a3a3a;}
  .ft_menu .privacy select::-ms-expand {display: none;}

  .ft_menu ul li:last-child {border-right:0px solid #474647; padding:0 10px}
  .ft_menu ul li a {color:#a8a8a8}
  .ft_menu ul li a:hover {color:#fff}
  .ft_menu .facebook {position:absolute; top:17px; right:10px;}
  .ft_menu select {position:absolute; top:50px; left:2.5%; width:55%; height:35px; line-height:35px;  padding:0 10px; border:1px solid #5e5e5e; color:#fff;-webkit-appearance: none; -moz-appearance: none; appearance: none;background: url('/img/select-arrow.png') no-repeat 95% 50% #3a3a3a;}
  .ft_menu select::-ms-expand {display: none;}
  
  .webIcon{left: 65%;bottom: -15px;}

  .ft_left {float:left; width:74%;}
  .ft_logo {display:none}

  address {float:left; width:90%; height:auto; padding:0px 0 0 10px;font-style:normal; font-size:14px; color:#a8a8a8; font-weight:500;line-height:1.4em; letter-spacing:-0.05em;}
  address span {display:inline-block;padding:0 10px;line-height: 150%;border-right:1px solid #474647;}
  address .copy {padding-left:10px}

  .ft_right {float:right; width:20%;}
  .gototop {display:inline-block; width:80px; height:80px;}

  .foot-info .foot-link-bx .inner{display:block;}
  .foot-info .foot-link-bx .foot-link{margin-bottom:20px;font-size:0.9em;text-align:left;}
  .foot-info .foot-link-bx .foot-link li{width:auto;margin:0 0 4px !important;padding:0;font-weight:400;}
  .foot-info .foot-link-bx .foot-link li:after{content:'';display:inline-block;width: 1px;height: 10px;margin: -2px 11px 0 12px;background-color: rgba(255, 255, 255, 0.5);vertical-align:middle;}
  .foot-info .foot-link-bx .foot-link li:last-child:after{display:none;}
  #footerSite{width:calc(95% - 34px);}
  .ft_menu .privacy select{width:calc(95% - 34px);}
  .footerSite_1{float:none; right:2.5%; left: auto !important;border: 1px solid #5e5e5e;}
  .footerSite_2{float:none; right:2.5%; left: auto !important;border: 1px solid #5e5e5e;}
  .foot-info{font-size:13px;}
  .foot-info .inner ul{margin-bottom:0;}
  .foot-info .inner li{display:block;width:100%;}
  .foot-info .inner li:after{display:none;}
  .foot-info .copy{padding-top:10px;font-size:12px;letter-spacing:-0.5px;}
  address{float:none}

  /* 서브 & 탭 반응형 (800px 이하) */
  .s_visual{position:relative; width:100%; height:50vw;}
  .textbar .s_tit {padding-top:42px; font-size:30px;}
  .textbar .sub_navi {font-size:14px;}
  .sub-visual-text h2.sub-title{font-size:30px;}
  .sub-visual-text p.sub-text{font-size:14px;}

  .tab li span {display:none}
  .tab_box1920 {display:none;}
  .tab_box600 {display:block;}
}

/* 770px 이하: 모바일 헤더 및 유틸리티 메뉴 활성화 */
@media screen and (max-width: 770px) {
  .hd_top { height: 80px; }
  .utill { display: none; }
  #hd_search { display: block; width: 60px; height: 80px; text-indent: -9999px; background: url(/img/icon_search_mobile.png) no-repeat center; border: 0; cursor: pointer; position: absolute; top: 0; right: 70px; }
  #hd_ct { display: block; width: 70px; height: 80px; text-indent: -9999px; background: url(/img/toggle.jpg) no-repeat center; background-size: cover; border: 0; cursor: pointer; position: absolute; top: 0; right: 0px; }
  .mobile_util { display: flex; height: 100%; margin: 0 140px 0 0; align-items: center; justify-content: flex-end; gap: 10px; }
  #hd_delivery, #hd_estimate { display: block; }
  .mobile_util .btn_page { display: flex; width: auto; height: 35px; font-family: var(--font-s-core); font-size: 15px; font-weight: 700; padding: 0 12px; border-radius: 50px; justify-content: center; align-items: center; cursor: pointer;}
  .mobile_util .delivery_page { background: #fff; border: 1px solid var(--primary-color); color: var(--primary-color); }
  .mobile_util .estimate_page { background: var(--primary-light-color); color: var(--primary-color); }
}

/* 640px 이하: 웹 아이콘 위치 조정 */
@media screen and (max-width: 640px){
  .webIcon{left: 79%;bottom: -108px;}
}

/* 580px 이하: 모바일 헤더 요소 크기 세밀 조정 */
@media screen and (max-width: 580px) {
  .hd_top-wrap h1 img { max-width: 90%; }
  #hd_search { width: 40px; }
  #hd_ct { width: 60px; }
  .mobile_util { margin: 0 115px 0 0; gap: 6px; }
  .mobile_util .btn_page { height: 32px; font-size: 14px; padding: 0 10px; }
}

/* 560px 이하: 비주얼 랩 및 다운로드 버튼 스타일 수정 */
@media screen and (max-width: 560px){
  .visualWrap{display:block;height: 300px;}
  .normal_dl_i {display:block !important; margin: 0 auto !important;}
  .sub_detail_stad .normal_dl .normal_dl_i+div{width: 100% !important; text-align: center !important; margin-top: 10px}
  .sub_detail_stad .normal_dl .bo_w_download{width: 100% !important}
  .sub_detail_stad .normal_dl .bo_w_download img{display: inline-block !important;}
}

/* 480px 이하: 소형 모바일 화면용 레이아웃 및 푸터 적용 */
@media screen and (max-width: 480px) {
  header { position: relative; top: 0; width: 100%; height: 60px; z-index: 100; }
  .hd_top { height: 60px; }
  h1 { position: absolute; left: 10px; top: 0; width: calc(100% - 260px); height: 57px; z-index: 30; }
  h1 img { width: 100%; }
  #utill_sitemap { display: none; }
  body { overflow: hidden; }
  #category { top: 0px; height: calc(100% - 60px); }
  #category .category_logo { position: relative; height: 60px; background: #fff; }
  #category .pop_close { position: absolute; top: 0px; right: 0; width: 60px; height: 60px; background: url(/img/toggle_close.jpg) no-repeat center; background-size: cover; border: 0; text-indent: -99999px; z-index: 30; cursor: pointer; }
  #hd_search { display: block; float: right; width: 40px; height: 60px; text-indent: -9999px; background: url(/img/icon_search_mobile.png) no-repeat center; background-size: 60%; border: 0; cursor: pointer; right: 50px; }
  #hd_ct { display: block; float: right; width: 50px; height: 60px; text-indent: -9999px; background: url(/img/toggle.jpg) no-repeat center; background-size: 100%; border: 0; cursor: pointer; }
  .mobile_util { margin: 0 100px 0 0; gap: 6px; }
  .mobile_util .btn_page { height: 30px; font-size: 12px; padding: 0 8px; line-height: 32px; }

  /* 푸터 480px 이하 스타일 */
  footer.sft {width:100%; height:400px; padding-bottom:0%; background:#191819; clear:both;}

  .ft_left {float:none; width:100%; height:110px; }
  .ft_right {width:20%;}
  .gototop {position:absolute; width:40px; height:40px; top:-51%; right:5px}
  .gototop img {width:100%}
  .ft_logo {display:none}
  .ft_menu .facebook {display:none}
  address {float:none; width:70%; height:auto; padding:0px 10px 0px 10px;font-style:normal; font-size:14px; color:#a8a8a8; font-weight:500;line-height:2em; letter-spacing:-0.05em; background:#191819;}
  address span {display:block;padding:0 0 5px 0;line-height:1.3em;  border-right:0px solid #474647;}
  address .copy {padding-left:0px; line-height:1.3em;}

  .webIcon{bottom:0;}

  .all_search .search_box {margin-bottom:5px; width:70%; }
  ul.tab2_600 li a {font-size:14px; letter-spacing:-1px;}
}

/* 400px 이하: 초소형 화면 비주얼 이미지 비율 조정 */
@media screen and (max-width: 400px){
  .visualWrap ul li img{height: 100%;width:auto;}
}

/* 360px 이하: 초소형 모바일 검색/메뉴 버튼 간격 조정 */
@media screen and (max-width: 360px) {
  #hd_search { width: 30px; right: 40px; }
  #hd_ct { width: 40px; }
  .mobile_util { margin: 0 70px 0 0; }
}