@charset "utf-8"; @font-face { font-family: 'Daehan'; font-style: normal; font-weight: 400; src: url('/css/fonts/DaehanR.woff2') format('woff2'), url('/css/fonts/DaehanR.woff') format('woff'); } @font-face { font-family: 'Daehan'; font-style: normal; font-weight: 700; src: url('/css/fonts/DaehanB.woff2') format('woff2'), url('/css/fonts/DaehanB.woff') format('woff'); } /*------------------------------------ 서브 : 본문 컨테이너 ------------------------------------*/ .container_wrap{ margin-top:88px; position:relative; overflow:hidden; background:#fff; } .container_wrap:after{ content:""; display:block; clear:both; } .Main .centerWrap{ /* max-width:1550px; */ padding:0 15px; } /*------------------------------------ 게시판, 링크, 버튼 ------------------------------------*/ /*------------------------------------ 스킨 ------------------------------------*/ .total_wrap{ position:relative; height:100%; } .centerWrap{ position:relative; width:100%; max-width:1510px; box-sizing:border-box; margin:0 auto; padding:0 15px; } .centerWrap_2{ clear:both; position:relative; margin:0 auto; padding:20px 0; text-align:center; } .centerWrap_2:after{ content:""; display:block; clear:both; } /*------------------------------------ 상단 해더 ------------------------------------*/ .header_center{ z-index:99; width:100%; position:fixed; left:0; top:0; } .header_center:after{ content:""; display:block; clear:both } .header_center .top_wrap{ margin:0 auto; width:100%; position:relative; } .header_center .top_wrap:after{ content:""; display:block; clear:both } .header_center .top_wrap .centerWrap{ position:relative; max-width:100%; padding:0 100px; } .header_center .top_wrap .centerWrap:after{ content:""; display:block; clear:both } .header_center .top_wrap .left{ display:none; overflow:hidden; } .header_center .top_wrap .left li{ float:left; } .header_center .top_wrap .left li a{ display:block; padding-right:8px; font-weight:300; font-size:13px; line-height:16px; color:rgba(255,255,255,0.7); font-size:0; } .header_center .top_wrap .right a{ display:block; font-weight:400; font-size:15px; line-height:24px; color:rgba(0,0,0,0.9); font-size:0; } .header_center .top_wrap .right a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .header_center .top_wrap .right a img{ /* width:20px; */ } .header_center .top_wrap .right li a:hover{ color:#242424; } .header_center .top_wrap .right li a:focus{ color:#242424; } .header_center .top_wrap .right li:nth-child(2) a{ /* margin-right:29px; */ } .header_center .top_wrap .right .search_btn a{ display:block; width:80px; height:69px; background:#f8f6f4 url(/img/search_icon.png) no-repeat center; font-size:0; } .header_center .top_wrap .right .search_btn a:hover{ } .header_center .top_wrap .right{ position:absolute; right:120px; top:0; display:inline-block; } .header_center .top_wrap .right > li{ float:left; } /* 다국어 버튼 슬라이드 */ /* .language{ position:relative; text-transform:uppercase; border:1px solid #ddd; border-radius:100px; background:#fcfcfc; } .language{ -webkit-transition-duration:0.15s; -moz-transition-duration:0.15s; -o-transition-duration:0.15s; -ms-transition-duration:0.15s; transition-duration:0.15s; } .language:hover{ border-radius:0; } .language h2{ position:relative; padding:0 32px 0 16px; font:300 12px/26px 'Noto Sans KR','Malgun Gothic',Sans-serif; color:#666; cursor:pointer; letter-spacing:0.7px; } .language:hover h2{ color:#444; } .language h2:after{ position:absolute; right:16px; top:1px; display:inline-block; content:''; font:normal 13px/25px 'FontAwesome'; color:#888; } .language:hover h2:after{ color:#666; } .language ul{ overflow:hidden; position:absolute; left:0; top:100%; width:100%; height:0; margin-top:1px; background:#fcfcfc; border-radius:10px; opacity:0; } .language ul{ -webkit-transition-duration:0.4s; -moz-transition-duration:0.4s; -o-transition-duration:0.4s; -ms-transition-duration:0.4s; transition-duration:0.4s; } .language:hover ul{ overflow:inherit; height:auto; border-bottom:1px solid #ddd; border-radius:0; opacity:1; } .language ul li{ } .language ul li:before{ position:absolute; left:-1px; top:0; width:1px; height:100%; content:''; background:#ddd; } .language ul li:after{ position:absolute; right:-1px; top:0; width:1px; height:100%; content:''; background:#ddd; } .language ul li a{ position:relative; display:block; padding:8px 17px; font:400 12px/16px 'NanumGothic','Malgun Gothic',Sans-serif; color:#555; text-align:center; } .language ul li a:hover{ color:#333; } .language ul li a img{ max-width:14px; margin-right:3px; vertical-align:-2px; } */ /* 다국어 버튼 */ /* .language_btn{ position:relative; display:inline-block; padding:0 10px 1px; margin:9px 15px 0 0; font:400 12px/19px 'NanumGothic','Malgun Gothic',Sans-serif; color:rgba(255,255,255,0.8); } .language_btn{ border:1px solid rgba(255,255,255,0.4); background:rgba(0,0,0,0.1); border-radius:100px; text-transform:uppercase; } .language_btn{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .language_btn span{ display:none; } .language_btn:hover{ color:#fff; border-color:rgba(255,255,255,0.5); } .language_btn img{ display:none; max-width:14px; margin-right:3px; vertical-align:-2px; } */ /* 법인 로고 */ .corp_logo{} .corp_logo a{ margin-right:20px; width:20px; height:69px; font-size:0 !important; background:url(/img/corp_logo.png) no-repeat center; background-size:100%; } /* 스토어 바로가기 */ .store_mobile_btn{ display:none; } /* 다국어 버튼 : 텍스트 스타일 */ .language_btn_wrap{ overflow:hidden; margin-right:28px; margin-right:32px; } .language_btn{ display:block; margin-top:23px; margin-top:26px; font-weight:500; font-size:16px; line-height:24px; color:#444; text-transform:uppercase; } .language_btn img{ width:auto; max-width:100%; width:20px; } .footer_language_btn_wrap{ display:none; } /* 로그인 버튼 : 텍스트 스타일 */ .login_btn{ display:block; /* padding:0 4px; margin:0 4px;*/ font-weight:400; font-size:13px; line-height:34px; color:rgba(255,255,255,0.7); /* text-transform:uppercase; */ } /* 사이트맵 */ /* .siteMap{ position:relative; display:block; width:80px; height:70px; content:''; background:#0067b4 url(/img/sitemap_icon_white.png) no-repeat center; font-size:0; } .siteMap:hover{ background:#085392 url(/img/sitemap_icon_white.png) no-repeat center; } */ .siteMap_wrap{ z-index:10; position:absolute; right:0; top:0; padding:0; } .siteMap{ display:block; padding:26px 0 0 24px; background:#0067b4;color:#fff;width:77px;height:80px;border:0;vertical-align:top;font-size:18px; cursor:pointer; } .siteMap, .siteMap span {display: inline-block; transition: all .4s; box-sizing: border-box;} .siteMap { box-sizing:border-box; font-size:0; } .siteMap:hover{ } .siteMap div {position:relative; width:29px; height:26px; } .siteMap span {position: absolute; left:0; width: 100%; height: 3px; background-color:#fff; } .siteMap span:nth-of-type(1) {top: 0;} .siteMap span:nth-of-type(2) {top: 12px; } .siteMap span:nth-of-type(3) {bottom: 0; } .siteMap.active span:nth-of-type(1) {-webkit-transform: translateY (9px) rotate (-45deg); transform: translateY(9px) rotate(-45deg);} .siteMap.active span:nth-of-type(2) {opacity: 0;} .siteMap.active span:nth-of-type(3) { -webkit-transform: translateY(-9px) rotate(45deg); transform: translateY(-9px) rotate(45deg);} /* 검색창 */ .search_keyword{ display:none; position:absolute; width:440px; height:20px; top:-20px; padding:0 0 2px 3px; /* display:none */ overflow:hidden; } .search_keyword a{ display:inline-block; font:normal 11px/18px Dotum; color:#666; padding:0 3px; } .search_keyword:before{ content:"인기검색"; font:bold 11px/18px Dotum; color:#ad0f2b; letter-spacing:-1px; padding:0 5px 0 0; } .search_keyword a:hover{ color:#ad0f2b; } .search_wrap .search_box{ border:solid 2px #ddd; width:300px; height:45px; overflow:hidden; border-radius:100em; } .search_wrap .search_box dt{ display:none; } .search_wrap .search_box dd{ } .search_wrap .search_box input[type=text]{ float:left; height:43px; width:83%; border:none; font-weight:300; font-size:18px; line-height:43px; color:#555; padding:0 0 0 5%; margin:0; } .search_wrap .search_box button{ float:right; width:13%; height:45px; font:bold 0px/45px Malgun Gothic; padding:0 0 0 0; background:#fff; border:none; } .search_wrap .search_box button:before{ content:""; font-weight:300; font-size:18px; line-height:43px; color:#ad0f2b; } /* 검색영역 */ .search_wrap_div{ display:none; overflow-y:auto; position:fixed; left:0; top:0; width:100%; height:100%; background:url(/img/black_20.png); text-align:center; } .header .top_wrap .search_wrap_div .centerWrap{ position:relative; max-width:800px; margin:10% auto 0; padding:60px 60px 70px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.3); background:#fff; text-align:center; } .search_wrap_div .search_title{ overflow:hidden; display:inline-block; padding:0 0 30px; } .search_wrap_div .search_title p{ } .search_wrap_div .search_title p img{ height:50px; } .search_wrap_div .search_title b{ display:none; } .search_wrap_div .search_title strong{ display:block; padding:15px 0 0 0; font-weight:400; font-size:22px; line-height:32px; color:#333; } .search_wrap_div .search_close_btn{ position:absolute; right:30px; top:25px; font-size:0; cursor:pointer; }/*닫기*/ .search_wrap_div .search_close_btn:before{ display:inline-block; content:''; font:normal 22px 'FontAwesome'; color:#e79300; } .search_wrap_div .search_close_btn:hover:before{ color:#ad0f2b; } /* 검색페이지 */ .search_wrap{ text-align:center; } .search_wrap dl{ display:inline-block; } .search_wrap ul{ overflow:hidden; margin:3px 0; text-align:left; } .search_wrap ul li{ float:left; font-weight:300; font-size:13px; line-height:34px; color:#666; } .search_wrap ul li:first-child{ min-width:100px; font-weight:600; color:#444; } .search_wrap ul li select{ margin:0 5px; padding:0 5px; width:100px; border:1px solid #ddd; font-weight:300; font-size:13px; line-height:25px; color:#666; } .search_wrap ul li input{ margin:0 5px; padding:0 5px; width:200px; border:1px solid #ddd; font-weight:300; font-size:13px; line-height:25px; color:#666; } .search_btn2{ display:inline-block; padding:0 25px; margin-top:30px; font-weight:400; font-size:15px; line-height:40px; color:#fff; background:#ad0f2b; border:1px solid #ad0f2b; } .goods_list{ display:none; } /* 즐겨찾기 */ .header .top_wrap .right .bookMark_wrap{} .header .top_wrap .right .bookMark_wrap a{ padding-right:0; font-size:0; line-height:0; } .header .top_wrap .right .bookMark_wrap a:before{ content:''; font:normal 24px/70px 'FontAwesome'; color:#434343; } .header .top_wrap .right .bookMark_wrap a:hover:before{ color:#ea9b11; } /*------------------------------------ 로고 ------------------------------------*/ .middle_wrap{ z-index:12; position:fixed; left:0; top:0; width:100%; display:block; min-width:auto; text-align:center; } .middle_wrap .centerWrap{ z-index:9999; max-width:100%; padding:0; } .middle_wrap .logo{ overflow:hidden; display:inline-block; position:absolute; left:120px; top:18px; } .middle_wrap .logo{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .middle_wrap .logo a{ display:block; width:145px; height:51px; } .middle_wrap .logo a > img{ width:auto; max-width:100%; } /*------------------------------------ 상단 해더 스몰 배너 ------------------------------------*/ .small_banner{ display:none; position:absolute; top:-90px; right:10px; overflow:hidden; width:200px; height:65px; font:normal 12px/16px Malgun Gothic; /* border:solid 1px #ddd; */ } .sm_img_1{ position:relative; width:200px; height:65px; overflow:hidden; background:#fff; } .sm_img_1 dt{ width:35%; float:left; padding-right:5%; } .sm_img_1 dd{ width:60%; float:right; } .sm_img_1 dt img{ width:100%; padding:3px 0 0 0; } .sm_img_1 b{ display:block; padding:5px 0 0 0 } .sm_img_1 span s{ color:#666; font:normal 11px Arial; padding:0 4px 0 0 } /*------------------------------------ 전체 카테고리 ------------------------------------*/ .navbar_center{ z-index:10; position:fixed; left:0; top:0; height:88px; width:100%; padding:0; text-align:center; background:#fff; border-bottom:1px solid transparent; } .navbar_center{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .navbar_center .centerWrap{ } .navbar_center:after{ content:""; display:block; clear:both; } .navbar_center .site_map{ display:none; position:absolute; top:0; right:0; height:60px; } .navbar_center .site_map > h1{ position:relative; display:inline-block; height:60px; margin:0; text-align:center; } .navbar_center .site_map > h1 a{ display:inline-block; width:50px; height:58px; background:url(/img/sitemap_icon_white.png) no-repeat center; opacity:0.9; } /* .navbar_center .site_map > h1:hover a{ background:url(/img/sitemap_icon.png) no-repeat center; } */ .navbar_center .site_map > h1 a i{ display:none; color:#fff; font-size:0; line-height:190%; } .navbar_center .site_map > h1 a i:before{ display:inline-block; content:''; width:40px; height:60px; background:url(/img/sitemap_icon.png) no-repeat center 100%; } .navbar_center .site_map:hover > h1 a{ opacity:1; } .fixed.navbar_center{ border-color:#ebeae8; } .fixed.navbar_center:before{ display:none; position:absolute; left:0; top:70px; width:100%; height:1px; content:''; background:#ddd; } /*----------------------------------------- 스크롤 다운 : 메뉴 숨김, 스크롤 업 : 메뉴 출력 -----------------------------------------*/ .headroom{ position:fixed; left:0; top:0; width:100%; -webkit-transition:top 0.15s; transition:top 0.15;s } .headroom-hidden{ top:-100px; } .title_body .contents_tab_wrap.headroom{ z-index:2; position:fixed; left:0; top:135px; max-width:100%; } .title_body .contents_tab_wrap.headroom-hidden{ top:-205px; } .title_body .contents_tab_wrap.contents_tab{} /* 우측에 고정 */ /* .title_body .contents_tab_wrap.fixed{ z-index:2; position:absolute; right:-250px; top:0; height:100%; } .title_body .contents_tab_wrap.fixed > div{ position:relative; height:100%; width:220px; padding-top:140px; } .title_body .contents_tab_wrap.fixed .contents_tab{ position:fixed; display:block; } .title_body .contents_tab_wrap.fixed .contents_tab li{ float:none; } .title_body .contents_tab_wrap.fixed .contents_tab li a{ } */ /* 제품페이지 상단 탭메뉴 */ .title_body .headroom2{ z-index:2; position:fixed; left:0; top:135px; width:100%; max-width:100%; } .title_body .headroom-hidden{ top:-205px; } /*------------------------------------ 전체 메뉴 ------------------------------------*/ .total_menu_wrap{ display:none; z-index:999; position:fixed; left:0; top:0; width:100%; text-align:left; } .total_menu{ z-index:9999; padding-top:60px; width:100%; height:100vh !important; overflow-y:auto; background:#fff; } .total_menu > li > a{ position:relative; display:block; padding:1px 0 0 7%; font-weight:500; font-size:16px; line-height:40px; background:#f9f9f9; border-bottom:solid 1px #ddd; color:#141414; text-transform:uppercase; } .total_menu > li > a:before{ position:absolute; left:0; top:-1px; content:''; width:100%; height:1px; background:#ddd; } .total_menu > li > a:after{ position:absolute; right:0; top:0; width:100%; height:100%; padding:0 7% 0 0; color:#aaa; content:''; font:normal 17px/42px 'FontAwesome',Arial; text-align:right; } .total_menu .depth_2{ } .total_menu .depth_2 li{ } .total_menu .depth_2 li > a{ position:relative; display:block; padding-left:8%; border-bottom:solid 1px #eee; font-weight:400; font-size:14px; line-height:38px; color:#555; background:#fcfcfc; } .total_menu .depth_2 li:hover > a{ background:#f9f9f9; } .total_menu .depth_2 li > a i{ position:absolute; right:0; top:0; width:100%; height:100%; padding:0 7% 0 0; text-align:right; } .total_menu .depth_2 li > a i:before{ display:inline-block; color:#bbb; content:''; font:normal 17px/42px 'FontAwesome',Arial; text-align:right; } .total_menu .depth_3{ overflow:hidden; position:relative; } .total_menu .depth_3:before{ position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:#eee; } .total_menu .depth_3 li{ float:left; width:50%; } .total_menu .depth_3 li a{ padding-left:18%; color:#666; font-size:12px; font-weight:300; line-height:36px; background:#fff; } .total_menu .depth_3 li:nth-child(odd) a{ border-right:1px solid #eee; } /* 닫기 버튼 */ .site_map_close_btn{ z-index:2; position:fixed; left:0; top:0; height:60px; background:#0067b4 url(/img/logo_white.png) no-repeat 15px 8px; background-size:auto 40px !important; width:100%; text-align:right; } .site_map_close_btn a{ display:inline-block; width:55px; height:60px; background:url(/img/cancel_btn.png) no-repeat center; background-size:22px auto !important; border-right:1px solid rgba(252,255,255,0.1); } .nav.site_map_open{ z-index:12; } /*------------------------------------ 상단 gnb ------------------------------------*/ .navbar {height:100%;} .navbar_container {position:relative; height:100%; } .navbar_center .top_menu{ padding:0 0 0 125px; } .navbar_center .top_menu:after{ content:""; display:block; clear:both; } .navbar_center .top_menu > li{ position:relative; float:left; position:relative; padding:0 22px; /* background:#fff; border:1px solid transparent; */ border-width:0 1px; } .navbar_center .top_menu > li:hover{ /* box-shadow:0px 0 5px rgba(0,0,0,.1); */ border-color:#eee; } .navbar_center .top_menu > li:hover:after{ position:absolute; left:0; top:0; content:''; width:100%; height:2px; background:#0067b4; } .navbar_center .top_menu > li .depth_1{ position:relative; } .navbar_center .top_menu > li .depth_1{ display:block; padding:1px 17px 0; text-align:center; font-weight:500; font-size:19px; line-height:86px; color:#333; } .navbar_center .top_menu > li:hover .depth_1{ /* color:#fff; */background:#fff; } .navbar_center .top_menu > li:hover .depth_1:after{ position:absolute; left:50%; bottom:0; content:''; width:8px; height:2px; background:#0067b4; border-radius:100px; transform:translateX(-50%); } .navbar_center .top_menu > li.active .depth_1{ color:#0067b4; } .navbar_center .top_menu > li.active:hover .depth_1{ } .navbar_center .top_menu > li dd{ z-index:10; min-width:160px; display:none; position:absolute; top:100%; left:0; width:100%; } .navbar_center .top_menu > li.active dd{} .navbar_center .top_menu .depth_2{ position:absolute; left:0; top:100%; display:none; width:100%; padding:22px 0 30px; background:#fff; border-radius:0 0 10px 10px; border:1px solid #eee; border-width:0 1px 1px 1px; /* box-shadow:0px 1px 5px rgba(0,0,0,.1) */; } .navbar_center .top_menu .depth_2 li{ position:relative; text-align:center; } .navbar_center .top_menu > li:nth-child(2) .depth_2{ /* display:block !important; */ } .navbar_center .top_menu > li:hover .depth_2{ display:block; } .navbar_center .top_menu .depth_2 a{ display:block; padding:5px; font-weight:300; font-size:15px; line-height:22px; color:rgba(0,0,0,.7); padding:5px; } .navbar_center .top_menu > li:hover{ color:#fff; } .navbar_center .top_menu > li:hover dt a{ color:#085392; background:#085392; } .navbar_center .top_menu > li.active dt a{ color:#085392; background:#085392; } .navbar_center .top_menu > li.active:hover dt a{ color:#085392; border-color:#333; } .navbar_center .top_menu > li:hover dd{ display:block; } .navbar_center .top_menu .depth_2 a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .navbar_center .top_menu .depth_2 li:hover > a{ color:#000; } .navbar_center .top_menu .depth_2 li.active > a{ color:#000; } .navbar_center .top_menu .depth_2 a > i{ display:inline-block; margin:0 0 0 5px; } .navbar_center .top_menu .depth_2 a > i:before{ content:''; font:normal 11px/20px 'FontAwesome'; color:rgba(0,0,0,.6); } .navbar_center .top_menu .depth_2 li:hover a > i:before{ color:rgba(0,0,0,.9); } .navbar_center .top_menu .depth_3{ display:none; position:absolute; left:100%; top:-3px; width:120px; padding:3px 0 5px; background:#0067b4; border-left:1px dotted rgba(0,0,0,0.1); } .navbar_center .top_menu .depth_2 li:hover .depth_3{ display:block; } .navbar_center .top_menu .depth_3 a{ display:block; padding:5px; font-weight:300; font-size:13px; line-height:20px; color:rgba(0,0,0,.7); } .navbar_center .top_menu .depth_3 a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .navbar_center .top_menu .depth_3 a:hover{ color:#fff; } .navbar_center .top_menu > li:nth-child(2) .depth_2 li:first-child .depth_3{ /* display:block !important; */ } /* 스토어 메뉴 */ .navbar_center .top_menu > li.store_menu{ margin-left:30px; } .navbar_center .top_menu > li .depth_1.basket_menu:before{ display:inline-block; content:''; width:22px; height:21px; margin-right:8px; vertical-align:-3px; background:url(/img/basket.png) no-repeat center; background-size:22px; } .navbar_center .top_menu > li:hover .depth_1.basket_menu:before{ background:url(/img/basket_w.png) no-repeat center; background-size:22px; } /* 법인홈페이지 메뉴 */ .navbar_center .top_menu > li .depth_1.corp_menu:before{ display:inline-block; content:''; width:20px; height:25px; margin-right:8px; vertical-align:-5px; background:url(/img/corp_logo.png) no-repeat center; background-size:auto 100%; } .navbar_center .top_menu > li:hover .depth_1.corp_menu:before{ background:url(/img/corp_logo_white.png) no-repeat center; background-size:auto 100%; } /* Contact Us 메뉴 */ .navbar_center .top_menu > li.contact_menu{ display:none; } /* 회사 홈페이지 */ .navbar_center .top_menu > li.corp_menu{ } /*------------------------------------ 스크롤시 상단메뉴 고정 ------------------------------------*/ .header.fixed{ } /* 다국어 버튼 */ .Main .middle_wrap .logo{ top:28px; } .Main .middle_wrap.fixed .logo{ top:18px; } .Main .navbar_center .top_menu > li .depth_1{ line-height:98px; } .Main .nav.fixed .top_menu > li .depth_1{ line-height:86px; } .Main .header_center .top_wrap .right{ top:10px; } .Main .header.fixed .top_wrap .right{ top:0; } /* .header.fixed .language_btn{ color:#555; border-color:#ddd; background:#f9f9f9; } .header.fixed .language_btn:hover{ color:#fff; border-color:#434343; background:#434343; } */ /* 사이트맵 */ /* .header.fixed .siteMap{ background:url(/img/sitemap_icon3.png) no-repeat center; } .header.fixed .siteMap:hover{ background:url(/img/sitemap_icon4.png) no-repeat center; } .middle_wrap.fixed{ } .middle_wrap.fixed .logo a{ background:none; } .middle_wrap.fixed .logo a > img{ display:block; } .nav.fixed{ background:#fff; border-bottom-color:#ddd; } .nav.fixed .top_menu > li .depth_1{ color:#000; text-shadow:none; } .nav.fixed .top_menu > li:hover .depth_1:before{ position:absolute; left:0; bottom:-1px; content:''; width:100%; height:2px; background:#434343; } .nav.fixed .top_menu .depth_2{ background:#fff; box-shadow:2px 2px 3px rgba(0,0,0,.3); } .nav.fixed .top_menu .depth_2 a{ color:#000; border-bottom:solid 1px #f6f6f6; } .nav.fixed .top_menu .depth_2 li:hover > a{ color:#242424; background:#f5f5f5; } .nav.fixed .top_menu .depth_2 li.active > a{ color:#242424; background:#f5f5f5; } .nav.fixed .top_menu .depth_2 a > i:before{ color:#333; } .nav.fixed .top_menu .depth_3{ background:#fff; } */ /*------------------------------------ 좌측메뉴 UI : 스타일 변경 ------------------------------------*/ /* 서브 : 본문 컨테이너 */ .left_ui_wrap .container_wrap{ margin-top:0; } /* 전체 카테고리 */ .navbar_left{ width:260px; margin:0; } .navbar_left .centerWrap{ padding:0; position:static; } .Main .navbar_left{ } /* 로고 */ .logo_wrap{ overflow:hidden; width:260px; height:120px; background:#fff; } .logo_wrap .centerWrap{ padding:0; } .logo_wrap .logo{ position:relative; padding:26px 0; text-align:center; } .logo_wrap .logo a{ display:inline-block; width:auto; height:62px; background:none; } .logo_wrap .logo a img{ display:block; max-height:100%; } /* 상단 해더 */ .header_left{ z-index:10; position:fixed; left:0; top:0; width:260px; height:100%; background:#434343; background:#f7f7f7; box-shadow:0px 0px 8px rgba(0,0,0,0.3); } .small_menu_wrap .right{ overflow:hidden; position:relative; right:auto; top:auto; display:block; height:34px; border-bottom:1px solid rgba(255,255,255,0.2); border-bottom:1px solid rgba(0,0,0,0.1); } .small_menu_wrap .right li{ width:50%; float:left; margin:0; } .small_menu_wrap .right li:first-child a{ border-right:1px dotted rgba(255,255,255,0.2); border-right:1px dotted rgba(0,0,0,0.1); } .small_menu_wrap .right li a{ position:relative; display:block; width:100%; height:auto; font-weight:300; font-size:13px; line-height:31px; color:rgba(255,255,255,0.6); color:#666; text-transform:uppercase; background:none; text-align:center; } .small_menu_wrap .right li a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .small_menu_wrap .right li a:before{ display:inline-block; margin-right:5px; content:''; font:normal 11px/30px 'FontAwesome'; vertical-align:1px; } .small_menu_wrap .right li:last-child a:before{ content:''; } .small_menu_wrap .right li:hover a{ color:rgba(255,255,255,0.8); color:#444; } .small_menu_wrap .centerWrap{ padding:0; } .small_menu_wrap .left{ display:block; } .Main .header_left{ background:#f7f7f7; } .Main .small_menu_wrap .right{ border-bottom:1px solid rgba(0,0,0,0.1); } .Main .small_menu_wrap .right li:first-child a{ border-right:1px dotted rgba(0,0,0,0.1); } .Main .small_menu_wrap .right li a{ color:#666; } .Main .small_menu_wrap .right li:hover a{ color:#444; } .navbar_left .top_menu{ margin:0; display:block; } .navbar_left .top_menu:after{ content:""; display:block; clear:both; } .navbar_left .top_menu > li{ float:none; } .navbar_left .top_menu > li .depth_1{ z-index:10; display:block; padding:0 20px; line-height:50px; font-weight:500; font-size:16px; line-height:50px; color:rgba(255,255,255,0.8); text-align:center; text-shadow:none; text-transform: uppercase;text-decoration: none; position: relative;} .navbar_left .top_menu > li .depth_1{text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.2); text-shadow:0 1px 2px rgba(0,0,0,0.1); color:#333; border-bottom:1px solid rgba(0,0,0,0.1); text-shadow:none; } .navbar_left .top_menu > li .depth_1{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .navbar_left .top_menu > li:hover .depth_1{ color:#fff; color:#0067b4; } .navbar_left .top_menu > li.active .depth_1{ /* background:#0067b4; color:#fff; border-bottom-color:#0067b4; background:none; */ color:#0067b4; text-shadow:none; } /* .navbar_left .top_menu > li.active .depth_1:after {display:block; content:''; position:absolute; bottom:-1px; width:100%; left:0; height:2px; background:#0067b4} */ .navbar_left .top_menu > li > a:after{bottom: -1px; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #0067b4; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .navbar_left .top_menu > li > a:hover:after {width: 100%; left: 0;} .navbar_left .top_menu > li:hover .depth_1{ color:#0067b4; } .navbar_left .top_menu > li:hover .depth_1:after {bottom: -1px; content: ""; display: block; height: 2px; position: absolute; background: #0067b4; width: 100%; left:0;} .navbar_left .top_menu > li .depth_2{ position:fixed; top:0; left:260px; padding:186px 15px 0 16px; height:100vh; width:170px; margin-left:0; box-shadow:none; background:#f1f1f1 url(/img/shadow_left.png) left top no-repeat; border-right:1px solid #ddd; } .navbar_left .top_menu > li .depth_2:before{ display:none; position:fixed; top:120px; left:260px; width:200px; content:'회사소개'; font-weight:500; font-size:19px; line-height:64px; text-align:center; } .navbar_left .top_menu > li.active .depth_2{ z-index:9; display:block; } .navbar_left .top_menu > li:hover .depth_2{ z-index:10; } .navbar_left .top_menu .depth_2 li{ position:relative; text-align:center; } .navbar_left .top_menu > li .depth_2:before{ } .navbar_left .top_menu > li .depth_2 a{ display:block; padding:15px 0; height:auto; font-weight:300; font-size:14px; line-height:20px; color:#444; border-bottom:dotted 1px #ccc; } .navbar_left .top_menu > li .depth_2 a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; direction:ltr; word-break:keep-all; } .navbar_left .top_menu > li .depth_2 li:first-child > a{ border-top:dotted 1px #ccc; } .navbar_left .top_menu .depth_2 li:hover > a{ background:none; color:#0067b4; font-weight:400; } .navbar_left .top_menu .depth_2 li.active > a{ background:none; color:#0067b4; font-weight:400; } .navbar_left .top_menu .depth_2 a > i:before{ content:''; color:#888; vertical-align:1px; font:normal 11px/20px 'FontAwesome'; } .navbar_left .top_menu .depth_2 li:hover a > i:before{ color:#333; } .navbar_left .top_menu .depth_2 li.active a > i:before{ color:#434343; } .navbar_left .top_menu > li .depth_2 .depth_3{ position:relative; width:100%; padding:9px 0 11px; background:none; border-bottom:dotted 1px #ccc; } .navbar_left .top_menu > li .depth_2 .depth_3 a{ border:none; line-height:34px; color:#666; font-weight:300; font-size:13px; line-height:34px; } .navbar_left .top_menu .depth_3 a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .navbar_left .top_menu > li .depth_2 .depth_3 li:first-child a{ border:none; } .navbar_left .top_menu > li .depth_2 li.active .depth_3{ display:block; } .navbar_left .top_menu > li .depth_2 .depth_3 li.active a{ color:#333; } .Main .navbar_left .top_menu > li .depth_2{ display:none; } .Main .navbar_left .top_menu > li:hover .depth_2{ display:block; } .Main .navbar_left .top_menu > li .depth_1{color:#333;border-bottom:1px solid rgba(0,0,0,0.1);text-shadow:none; text-transform: uppercase;text-decoration: none; position: relative;} .Main .navbar_left .top_menu > li > a:after{bottom: -1px; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #0067b4; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .Main .navbar_left .top_menu > li > a:hover:after {width: 100%; left: 0;} .Main .navbar_left .top_menu > li:hover .depth_1{ color:#0067b4; } .Main .navbar_left .top_menu > li:hover .depth_1:after {bottom: -1px; content: ""; display: block; height: 2px; position: absolute; background: #0067b4; width: 100%; left:0;} .basic_body .navbar_left .top_menu > li .depth_2{ display:none; } .basic_body .navbar_left .top_menu > li:hover .depth_2{ display:block;} .basic_body .navbar_left .top_menu > li:hover .depth_2 a:hover {color:#0067b4;} /* 모바일 메뉴 */ .navbar_left .site_map{ display:none; position:absolute; top:0; right:0; height:60px; } .navbar_left .site_map > h1{ position:relative; display:inline-block; height:60px; margin:0; text-align:center; } .navbar_left .site_map > h1 a{ display:inline-block; width:50px; height:58px; background:url(/img/sitemap_icon5.png) no-repeat center; opacity:0.9; } /* .navbar_center .site_map > h1:hover a{ background:url(/img/sitemap_icon.png) no-repeat center; } */ .navbar_left .site_map > h1 a i{ display:none; color:#fff; font-size:0; line-height:190%; } .navbar_left .site_map > h1 a i:before{ display:inline-block; content:''; width:40px; height:60px; background:url(/img/sitemap_icon.png) no-repeat center 100%; } .navbar_left .site_map:hover > h1 a{ opacity:1; } /* 사이트맵 */ .left_ui_wrap .siteMap{ } /* 검색단 */ .small_menu_wrap .left li{ float:none; width:100%; } .small_menu_wrap .left .search_btn a{ } .left_ui_wrap .search_btn form{ overflow:hidden; position:relative; background:#333; } .left_ui_wrap .search_btn form input{ width:100%; padding:0 40px 0 20px; height:34px; border:none; background:none; color:rgba(255,255,255,0.8); font-weight:300; font-size:13px; line-height:34px; } .left_ui_wrap .search_btn input::-ms-input-placeholder { color:rgba(255,255,255,0.8); } /* Internet Explorer 10 이상에 적용 */ .left_ui_wrap .search_btn input::-webkit-input-placeholder { color:rgba(255,255,255,0.8); } /* Webkit, Blink, Edge에 적용 */ .left_ui_wrap .search_btn input::-moz-placeholder { color:rgba(255,255,255,0.8); } /* Mozilla Firefox에 적용 */ .left_ui_wrap .search_btn form button{ position:absolute; right:20px; top:0; font-size:0; border:none; background:none; color:rgba(255,255,255,0.6); } .left_ui_wrap .search_btn form button:before{ content:''; font:normal 14px/34px 'FontAwesome'; text-shadow:1px 1px 0 rgba(0,0,0,0.3); } .Main .search_btn form{ /* background:#434343; */ } /* 서브 : 본문 컨테이너 */ .left_ui_wrap .container_wrap{ padding:20px 70px 20px 453px; background:#f7f7f7; } .left_ui_wrap .sub_contents_block{ background:#fff; border:1px solid #ddd; border-width:0 1px 1px 1px; } .left_ui_wrap.basic_body .container_wrap{ padding-left:340px; } /* 서브비주얼 */ .left_ui_wrap .sub_visual_wrap{ position:relative; overflow:hidden; height:167px; margin:0 auto 0; text-align:center; overflow:hidden; z-index:2; text-align:center; background:url(/img/sub_visual_00.jpg) no-repeat center; } .left_ui_wrap .sub_visual_wrap p{ position:absolute; left:0; top:0; width:100%; height:100%; } .left_ui_wrap .sub_visual_wrap p img{ position:absolute; left:50%; top:0; margin-left:-50%; } .left_ui_wrap .sub_visual_wrap h1{ position:relative; display:inline-block; z-index:3; padding:0 30px; margin:66px auto 0 ; font-weight:400; font-size:24px; line-height:40px; color:rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,.2); text-shadow:1px 1px 1px rgba(0,0,0,.3); background:rgba(0,0,0,0.1); border-radius:100em; } .left_ui_wrap .sub_visual_wrap h1 span{ display:none; } /* 서브 메뉴 */ .left_ui_wrap .sub_category_top{ display:none; } /* 서브 타이틀, 경로 */ .page_title_wrap{ } /* 서브컨텐츠 */ .left_ui_wrap .sub_contents_wrap{ min-height:757px; } /* 푸터 */ .footer_left_mobile{ display:none; } .footer_left{ z-index:11; position:absolute; left:0; bottom:0; width:260px; padding:0; background:#f7f7f7; } .left_ui_wrap .footer_bar{ display:none; position:relative; } .left_ui_wrap .footer_bar:after{ content:""; display:block; clear:both; } .left_ui_wrap .footer_bar h3{ float:left; }/*로고*/ .left_ui_wrap .footer_bar h3 a img{ /* max-width:210px; */ opacity:.55 } /* 푸터 > 카피라이터 */ /* .copyright_left{ position:relative; overflow:hidden; padding:0 0 0; } .copyright_left:after{ content:""; display:block; clear:both; } .copyright_left h3{ display:none; width:20%; float:left; padding:0 0 0 0; margin:26px 0 0 0; } .copyright_left h3 a{ display:inline-block; max-width:200px; } .copyright_left h3 a > img{ width:auto; max-width:100%; -webkit-filter: grayscale(100%); filter: gray; opacity:0.6; } .copyright_left .addre{ padding:2px 11px 14px; text-align:left; } .copyright_left .addre p{ overflow:hidden; } .copyright_left .addre p span{ display:inline-block; color:#777; font:300 12px/18px 'Roboto','Noto Sans KR','Malgun Gothic',Sans-serif; word-break:keep-all; color:rgba(255,255,255,0.5); word-break:keep-all; } .copyright_left .addre p span:after{ color:#eee; } .copyright_left .addre p span a{ color:#b0b0b0; color:rgba(255,255,255,0.5); } .copyright_left .addre p span a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .copyright_left .addre p span a:hover{ color:#fff; } ul.footer_site_btn li a:before{ color:#666; } ul.footer_site_btn li:hover a:before{ color:#555; } ul.footer_site_btn{ overflow:hidden; padding:0 10px 20px; } ul.footer_site_btn li{ float:left; width:46%; text-align:center; } ul.footer_site_btn li:last-child{ margin-left:4%; width:50%; } ul.footer_site_btn li a{ display:block; padding:1px 0 0 0; font:300 12px/23px 'Roboto','Noto Sans KR','Malgun Gothic',Sans-serif; background:#aaa; border-radius:4px; color:#fff; } ul.footer_site_btn li a{ text-transform:capitalize; text-shadow:0 1px 1px rgba(0,0,0,0.2); } ul.footer_site_btn li:first-child a{ margin:0; text-transform:uppercase; } ul.footer_site_btn li a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } ul.footer_site_btn li a:hover{ background:#0b6fab; } ul.footer_site_btn li:after{ display:none; padding:0 8px; content:''; } ul.footer_site_btn li a:before{ display:none; margin-right:7px; color:rgba(255,255,255,0.5); font:normal 13px 'FontAwesome'; } ul.footer_site_btn li a:before{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } ul.footer_site_btn li:hover a:before{ color:rgba(255,255,255,0.7); } ul.footer_site_btn li .privacy_btn:before{ content:''; } ul.footer_site_btn li .login_btn:before{ content:''; } */ /* .Main .footer{ background:#f7f7f7; } .Main .copyright_left .addre p span{ color:#777; } .Main .copyright_left .addre p span a{ color:#777; } .Main ul.footer_site_btn li a{ background:#aaa; } .Main ul.footer_site_btn li a:hover{ background:#434343; } */ /* 좌측 메뉴 스크롤 */ .fixed_left_wrap{position:relative; z-index:100;/* min-height:515px; */height:calc(100% - 188px); overflow-y:auto; overflow-x:hidden; } .fixed_left_wrap{ scrollbar-face-color:#232f3e;/*스크롤*/ scrollbar-highlight-color:#162231;/*하이라이트*/ scrollbar-3dlight-color:#162231;/*왼쪽외곽음영*/ scrollbar-darkshadow-color:#162231;/*오른쪽외곽음영*/ scrollbar-shadow-color:#162231;/*오른쪽 안쪽음영*/ scrollbar-arrow-color:#d5d5d5;/*화살*/ scrollbar-track-color:#162231;/*스크롤영역*/ direction:rtl; text-align:left; } .fixed_left_wrap:before{ position:absolute; bottom:0; left:0; width:100%; content:" "; z-index:-1; display:block; height:50px; } .fixed_left_wrap.active {height:100% !important;} .fixed_left_min_height{ position:relative; height:100%; min-height:515px; } /*------------------------------------ 서브 퀵메뉴 ------------------------------------*/ .quickMenu{ position:fixed; right:23px; top:186px; z-index:12; height:100%; } .quickMenu a{ width:48px; height:50px; display:block; color:#fff; font-family:'FontAwesome'; text-align:center; line-height:48px; font-size:17px; } .quickMenu span{ display:none; position:absolute; background:#333; padding:5px 10px; color:#fff; font-weight:300; font-size:12px; left:-105px; min-width:100px; margin-top:10px; text-align:center; } .quickMenu li span:after{ content:''; font-family:'FontAwesome'; padding-left:8px; } .quickMenu div{ position:relative; height:100%; width:48px; } .quickMenu div ul{ position:fixed; } .quickMenu li{ position:relative; } .quickMenu li:hover{ cursor:pointer; } .quickMenu li:hover span{ display:block; } .quickMenu .quick01 a{ background:#d81d31; } .quickMenu .quick02 a{ background:#555; } .quickMenu .quick03 a{ background:#434343; } .quickMenu .quick03 a{ font-weight:500; font-size:13px; line-height:50px; } .quickMenu .quick03 a i{ display:none; font-style:normal; font-size:20px; } /*------------------------------------ 레이어 팝업 ------------------------------------*/ /* layer popup */ .layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:999;} .layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity=80);} .layer .pop {display:block; box-sizing:border-box; background-color:#fff; border:1px solid #989ba2; width:650px; height:500px;} .pop {display:none; position:absolute; top:50%; left:50%; z-index:10;} .pop .pop_container {display:table; width:100%; height:100%; padding:30px; box-sizing:border-box;} .pop .pop_container img {max-width:100%;} .pop_close {position:absolute; top:15px; right:15px;} /*------------------------------------ 로그인 페이지 ------------------------------------*/ .loginbox{ padding:90px 0 95px; width:100%; margin:20px auto 0; border-top:2px solid #222; background:rgba(255,255,255,0.5); border-bottom:1px solid #ddd; } .loginbox h2{ display:none; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #777; font-weight:400; font-size:30px; line-height:40px; color:#333; text-transform:uppercase; } /* input, select 박스 스타일 */ .formControl{ width:100%; height:32px; padding:0 10px; border:1px solid #ddd; font-weight:300; font-size:13px; line-height:30px; border-radius:0 4px 4px 0; color:#555; } .formLogin input[type="submit"].submit_btn{ display:inline-block; width:100%; padding:0 15px; margin:5px auto 0; font-weight:500; font-size:17px; line-height:50px; color:rgba(255,255,255,0.9); background:#0067b4; border:none; } .formLogin input[type="submit"].submit_btn{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .formLogin input[type="submit"].submit_btn:hover{ background:#085392; } .formLogin{ max-width:400px; margin:-15px auto 0; } .formLogin li{ margin-top:15px; text-align:center; } .formLogin li label{ display:block; overflow:hidden; } .formLogin li label i{ display:none; float:left; width:10%; font-size:14px; line-height:30px; border-radius:0 0 1px 1px; border:1px solid #ddd; border-width:1px 0 1px 1px; position:relative; color:#b3b3b3; } .formLogin li label i{} .formLogin li label .formControl{ width:100%; height:50px; padding:0 10px; border:1px solid #e7e7e7; font-weight:300; font-size:14px; line-height:48px; border-radius:0; } /*------------------------------------ 서브 : 본문 좌측 메뉴 영역 ------------------------------------*/ .left_menu_wrap{ display:none; position:relative; float:left; width:15%; overflow:hidden; box-sizing:border-box; position:fixed; top:190px; left:50%; margin:0 0 0 -619px; } .left_menu_wrap:after{ content:""; display:block; clear:both; } .left_menu_wrap.fixed{ position:fixed; top:100px; left:50%; margin:0 0 0 -619px; } .lnb{ position:relative; /* border-bottom:solid 1px #eee; */width:185px; box-sizing:border-box; } .lnb h2{ font-weight:400; font-size:0px; color:#434343; vertical-align:bottom; letter-spacing:1px; padding:15px 0 10px 0; text-align:center } .lnb.category h2:after{ content:"CATEGORY"; font:800 16px/22px Malgun Gothic; padding:2px 15px 3px 10px; /* background:#999; */color:#333; /* border:solid 1px #dee4fb; border-width:1px 0; */ } .lnb.mypage h2{ padding-bottom:20px; } .lnb.mypage h2:after{ content:"MY PAGE"; font:800 16px/22px Malgun Gothic; padding:2px 15px 3px 10px; color:#333; } .lnb h2 b{ font-weight:400; font-size:0; } .lnb ul{ position:relative; overflow:hidden; padding:0 0 20px 0; } .lnb ul li{ } .lnb.event ul li,.lnb.business ul li{ padding:0; width:100%; } .lnb ul li a{ display:block; font-weight:300; font-size:12px; line-height:18px; padding:3px 0 4px 12%; overflow:hidden; text-overflow:ellipsis; work-wrap:normal; white-space:nowrap; } .lnb ul li a.active,.lnb ul li a:hover{ color:#434343; font-weight:bold; background:#fafafa } .lnb ul li a .fa{ color:#be845f; display:inline-block; padding:0 5px 0 0; opacity:.8 } .lnb ul li.leftCategory_depth1 a{ font-weight:400; font-size:12px; line-height:18px; width:80%; color:#434343; padding:2px 0; text-align:center; background:#fff; border:solid 1px #eee; border-width:1px 0; margin:10px auto } .img_banner{ display:none; } /*------------------------------------ 서브 : 상단 메뉴 ------------------------------------*/ .sub_head_wrap{ position:relative; padding:0 0 70px; /* text-align:center; */ } .sub_active_title{ font-size:36px; line-height:46px; } .sub_active_title:after{ content:''; display:block; width:60px; height:2px; margin:18px auto 0; background:#b4b4b4; } /* prev, next page btn : 페이지 이동 */ .move_page_warp{ z-index:2; overflow:hidden; position:absolute; right:0; top:148px; } .move_page_warp li{ margin-left:1px; float:left; background:#0067b4; } .move_page_warp li{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .move_page_warp li:hover{ background:#085392; } .move_page_warp li a{ display:block; font-size:0; width:64px; height:64px; background:url(/img/arrow_left.png) no-repeat center; background-size:18px auto; } .move_page_warp li:last-child a{ background:url(/img/arrow_right.png) no-repeat center; background-size:18px auto; } /*------------------------------------ 서브 : 상단 메뉴 ------------------------------------*/ .sub_category_top{ z-index:9; position:relative; clear:both; margin:-80px auto 0; } .sub_category_top:after{ display:block; content:''; clear:both; } .sub_category_top:before{ /* z-index:1; position:absolute; left:0; top:48px; content:''; width:100%; height:1px; background:#ddd; */ } .sub_category_top .centerWrap{ max-width:1560px; background:#fff; text-align:center; } .depth_active_wrap{ display:flex; justify-content:space-between; align-items:center; max-width:1480px; padding:0 10px; width:100%; margin:0 auto; border-bottom:1px solid #ddd; } .depth_active_wrap strong{ position:relative; display:block; padding-left:15px; } .depth_active_wrap strong:before{ position:absolute; left:0; top:50%; transform:translateY(-50%); content:''; width:4px; height:4px; border-radius:100px; background:#0067b4; } .depth_active_wrap strong a{ display:block; font-weight:600; } .depth_2_sub{ z-index:9; position:relative; } .depth_2_sub:before{ } .depth_2_sub:after{ content:''; clear:both; display:block; } .depth_2_sub > li{ z-index:9; position:relative; float:left; padding:0 20px; cursor:pointer; } .depth_2_sub > li a{ z-index:9; display:block; position:relative; color:#444; font-weight:400; font-size:16px; line-height:80px; } .depth_2_sub > li a:before{ z-index:10; position:absolute; left:0; width:100%; bottom:-1px; height:1px; content:''; background:#ddd; } .depth_2_sub > li a i{ display:inline-block; margin:0 0 0 5px; } .depth_2_sub > li a i:before{ content:''; font:normal 11px/20px 'FontAwesome'; color:#555; } .depth_2_sub > li:hover > a{ color:#0067b4; } .depth_2_sub > li:hover a i:before{ color:#0067b4; } .depth_2_sub > li:hover a:before{ background:#0067b4; } .depth_2_sub > li.active{ position:relative; z-index:2; } .depth_2_sub > li.active a:before{ background:#0067b4; } .depth_2_sub > li.active > a{ color:#0067b4; font-weight:500; } .depth_2_sub > li.active a i:before{ color:#0067b4; } .depth_2_sub > li.active:hover > a{ background:none; } /* .company_body .depth_2_sub > li{ width:14.285714%; } .product_body .depth_2_sub > li{ width:33.3333%; } .production_body .depth_2_sub > li{ width:33.3333%; } .investment_body .depth_2_sub > li{ width:14.285714%; } .csr_body .depth_2_sub > li{ width:10%; } */ /* .csr_body .centerWrap{ position:initial; } .csr_body .centerWrap:after{ position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:#ddd; } */ /* 3depth */ .depth_2_sub .depth_3_sub_wrap{ z-index:10 !important; } .depth_3_sub{ display:none; z-index:1; position:absolute; left:-1px; top:100%; width:100.5%; padding-top:1px; background:#fff; } .depth_2_sub > li:hover .depth_3_sub{ display:block; } .depth_3_sub li{} .depth_3_sub li a{ border-width:0 1px 1px 1px; font-weight:400; font-size:13px; line-height:40px; color:#555; } .depth_3_sub li a:hover{ color:#0067b4; } .depth_3_sub > li.active > a{ color:#0067b4; } /*------------------------------------ 서브 : 좌측 메뉴 영역 ------------------------------------*/ .sub_category_left{ float:left; width:16%; margin:60px 0 0 0; } .sub_category_left .centerWrap{ padding:0; } .sub_category_title{ background:#434343; } .sub_category_title p{ margin:0; display:block; font-weight:400; font-size:23px; line-height:80px; color:#fff; text-align:center; } .sub_category_title p a{ display:block; font-weight:400; font-size:23px; line-height:80px; color:#fff; text-align:center; } .depth_2_left{ } .depth_2_left > li{ border:1px solid #ddd; border-width:0 1px 1px 1px; } .depth_2_left li.active{ } .depth_2_left li a{ display:block; position:relative; padding:6px 15px; font-weight:300; font-size:13px; line-height:24px; border-width:0 1px 1px 1px; text-align:center; } .depth_2_left li:hover > a{ color:#434343; font-weight:600; } .depth_2_left > li.active{ border-color:#434343; } .depth_2_left li.active > a{ color:#434343; font-weight:600; } .depth_2_left > li.active > a:before{ position:absolute; left:0; top:-1px; content:''; width:100%; height:1px; background:#434343; } .depth_3_left li{ border-top:1px solid #ddd; } .depth_3_left li a{ background:#f9f9f9; } .depth_3_left li.active a{ background:#e8f8fe; color:#242424; } /*------------------------------------ 서브 : 상단 lnb ------------------------------------*/ .lnbTop_wrap{ padding:0 50px; background:#eceef2; border:1px solid #e3e7ef; border-width:1px 0; } .lnbTop{ } .lnbTop:after{ display:block; content:''; clear:both; } .lnbTop > li{ position:relative; float:left; } .lnbTop > li:after{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .lnbTop > li:hover:after{ display:none; } .lnbTop > li:hover:before{ z-index:3; position:absolute; left:0; bottom:0; content:''; width:100%; height:1px; background:rgba(255,255,255,0.05); } .lnbTop > li h2{ width:240px; } .lnbTop > li h2 a:before{ position:absolute; right:0; top:15px; content:''; width:1px; height:30px; background:#d9dee7; } .lnbTop > li a{ position:relative; display:block; min-width:210px; padding:0 40px 0 25px; font-weight:500; font-size:15px; line-height:60px; color:rgba(0,0,0,0.5); } .lnbTop > li a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .lnbTop > li h2 a{ overflow:hidden; /* text-transform:uppercase; */ } .lnbTop > li h2 a:after{ position:absolute; right:25px; top:0; content:''; font:normal 15px/60px 'FontAwesome'; } .lnbTop > li:hover h2 a{ color:#0b6fab; } .lnbTop > .lnb_home a{ text-indent:-999px; width:60px; min-width:60px; background:url(/img/home_icon_black.png) no-repeat center; background-size:14px; opacity:0.35; } .lnbTop > .lnb_home a:after{ display:none; } .lnbTop > li.lnb_home:before{ z-index:2; position:absolute; left:-1px; top:15px; content:''; width:1px; height:30px; background:#d9dee7; } .lnbTop > li.lnb_home:after{ z-index:2; position:absolute; right:-1px; top:15px; content:''; width:1px; height:30px; background:#d9dee7; } .lnbTop > li.lnb_home:hover a{ background:url(/img/home_icon_green.png) no-repeat center; background-size:14px; opacity:1; } .lnbTop > li.lnb_home:hover:after{ display:inline-block; } .lnbTop > li.lnb_home:hover:before{ } .lnb_3_none .lnb_3_sub{ display:none; } .lnb_menu{ display:none; z-index:3; position:absolute; left:0; top:100%; width:100%; background:#eceef2; } .lnbTop > li:hover .lnb_menu{ display:block; } .lnb_menu li a{ line-height:48px; font-weight:400; } .lnb_menu li:hover a{ color:#0b6fab; } .lnb_menu li:last-child{ /* display:none; */ } .login_body .lnbTop_wrap, .policy_body .lnbTop_wrap{ /* display:none; */ } /*------------------------------------ 서브 : 100% 컨텐츠 영역 ------------------------------------*/ .sub_top_block{ margin:0 auto; } .sub_contents_wrap { position:relative; padding:0; min-height:551px; } /* .sub_contents_wrap:before{ position:absolute; right:0; top:0; content:''; border-bottom:590px solid transparent; border-right:1330px solid rgba(0,0,0,0.02); border-top:0px solid rgba(0,0,0,0.02); } */ .sub_contents_wrap.contents_top{ } .sub_contents_wrap > .centerWrap{ padding:120px 15px 150px; } .sub_right_contents{ padding:0 0.5%; } .board_menu .sub_contents_wrap > .centerWrap{ padding-top:140px; } /*------------------------------------ 서브 : 우측 컨텐츠 영역 ------------------------------------*/ .sub_left_block{ overflow:hidden; max-width:1300px; padding:0 15px; margin:0 auto; } .sub_left{ float:right; width:80%; padding:41px 0 80px 0; } .sub_left .centerWrap{ padding:0; } .basic_body .sub_left{ float:none; width:100%; } .basic_body .sub_category_top, .basic_body .sub_category_left{ display:none; } /*------------------------------------ 일반 서브페이지 카테고리 탭메뉴 ------------------------------------*/ /* .contents_tab_wrap{ margin:0 0 55px; text-align:center; } .contents_tab{ overflow:hidden; display:inline-block; } .contents_tab li{ display:inline-block; margin:2px 2px; } .contents_tab li a{ position:relative; display:block; width:190px; padding:0 5px 0; font:300 16px/48px 'Noto Sans KR','Malgun Gothic', verdana; color:#777; background:#f6f6f6; } .contents_tab li.active a{ background:#0067b4; color:#fff; font-weight:400; } */ .contents_tab_wrap{ max-width:1510px; padding:0 15px; margin:-40px auto 65px; text-align:center; } .contents_tab{ overflow:hidden; display:inline-block; background:#fff; border-radius:4px; } .contents_tab li{ position:relative; float:left; width:220px; } /* .contents_tab li:nth-child(1):before{ position:absolute; left:0; top:0; content:''; width:2px; height:100%; background:#b4b4b4; } .contents_tab li:after{ position:absolute; right:0; top:0; content:''; width:2px; height:100%; background:#b4b4b4; } */ .contents_tab li a{ position:relative; display:block; font-size:18px; font-weight:400; line-height:54px; color:#989898; border:2px solid #b4b4b4; border-width:2px 0 2px 0; } .contents_tab li a:before{ z-index:0; position:absolute; right:-2px; top:0; content:''; width:2px; height:100%; background:#b4b4b4; } .contents_tab li:first-child a{ border-left-width:2px; border-top-left-radius:4px; border-bottom-left-radius:4px; } .contents_tab li:last-child a{ border-right-width:2px; border-bottom-right-radius:4px; border-top-right-radius:4px; } .contents_tab li:last-child a:before{ display:none; } .contents_tab li a:hover{ color:#0b6fab; } .contents_tab li.active a{ color:#fff; font-weight:500; background:#0b6fab; border-color:#0b6fab; } .contents_tab li.active a:before{ display:none; } /* .sns_body .contents_tab li:nth-child(1){ display:none; } .sns_body .contents_tab li:nth-child(3){ display:none; } .sns_body .contents_tab li:nth-child(5){ display:none; } */ /*------------------------------------ 푸터 > 사이트맵 ------------------------------------*/ .site_menu_wrap{ overflow:hidden; position:relative; padding:5em 0; border-top:1px solid #ececec; background:#f9f9f9; } .site_menu_wrap .top_menu{ max-width:1510px; margin:0 auto; padding:0 15px; display:flex; justify-content:space-between; } .site_menu_wrap .top_menu > li{ width:16.666%; border-right:1px solid #ececec; padding:0 40px; } .site_menu_wrap .top_menu > li:last-child{ border-right:none; } .site_menu_wrap .top_menu > li > a{ display:block; margin-bottom:10px; font-size:17px; color:#333; font-weight:500; } .site_menu_wrap .top_menu > li.active > a{ color:#0067b4; } .site_menu_wrap .top_menu > li .depth_2{} .site_menu_wrap .top_menu > li .depth_2 li{} .site_menu_wrap .top_menu > li .depth_2 li a{ display:block; font-size:14px; color:#000; padding:5px 0; font-weight:400; opacity:0.6; } .site_menu_wrap .top_menu > li .depth_2 li a:hover, .site_menu_wrap .top_menu > li .depth_2 li.active a{ opacity:1; } .site_menu_wrap .top_menu > li .depth_2_info, .site_menu_wrap .top_menu > li .depth_2_img{ display:none; } /*------------------------------------ 푸터 ------------------------------------*/ footer.footer{ clear:both; position:relative; /* overflow:hidden; */ margin:0 auto; box-sizing:border-box; background:#242424; text-align:center; } footer.footer:after{ content:""; display:block; clear:both; } footer.footer .centerWrap{ min-width:auto; background:none; border:none; max-width:auto; } .footer_bar{ position:relative; padding:12px 0; border-bottom:1px solid #434343; } .footer_bar:after{ content:""; display:block; clear:both; } .footer_site_wrap{ display:flex; justify-content:space-between; align-items:center; } ul.footer_site_btn{ display:flex; align-items:center; } ul.footer_site_btn li{ position:relative; padding-right:30px; } ul.footer_site_btn li a{ position:relative; font-size:13px; color:#999; font-weight:300; } ul.footer_site_btn li a strong{ color:#fff; font-weight:300; } ul.footer_site_btn li a:hover{ color:#fff; } ul.footer_site_btn li a:hover{ } .footer_site_btn > li:after { content:"/"; position:absolute; right:12px; top:41%; font-size:5px; font-weight:600; color:#666; -webkit-transform: scale(0.8) rotate(10deg) translate(-50%,-50%); -moz-transform: scale(0.8) rotate(10deg) translate(-50%,-50%); -ms-transform: scale(0.8) rotate(10deg) translate(-50%,-50%); -o-transform: scale(0.8) rotate(10deg) translate(-50%,-50%); transform: scale(0.8) rotate(10deg) translate(-50%,-50%); } .footer_site_btn > li:last-child { padding-right:0;} .footer_site_btn > li:last-child:after { display:none;} /* .footer_site_btn > li > a { position:relative; font-size:1.5rem; color:#999999; font-weight:300;} .footer_site_btn > li > a:hover { color:#fff; font-weight:300;} .footer_site_btn > li > a { padding-right:23px;} .footer_site_btn > li > a:after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:#fff;} .footer_site_btn > li > a:before { content:"/"; position:absolute; right:0; top:-0.5px; font-size:1.8rem; font-family:'xeicon',sans-serif;} #footer.open .ft-btm .ft-info .left ul > li > a { color:#fff;} #footer.open .ft-btm .ft-info .left ul > li > a:after { width:100%; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -ms-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; } */ .productlink_wrap { position:relative;} .productlink_wrap .btn-site { position:relative; padding:15px 20px; width:240px; background:#262626; font-size:13px; color:#999; font-weight:400; text-align:left !important; border:none; } .productlink_wrap .btn-site:after { content:""; position:absolute; right:20px; top:50%; width:6px; height:6px; border-left:2px solid #999; border-top:2px solid #999; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; -webkit-transform:rotate(225deg) ; -moz-transform:rotate(225deg) ; -ms-transform:rotate(225deg); -o-transform:rotate(225deg); transform:rotate(225deg); -webkit-transform-origin:center 0; -moz-transform-origin:center 0; -ms-transform-origin:center 0; -o-transform-origin:center 0; transform-origin:center 0; } .productlink_wrap ul { opacity:0; visibility:hidden; position:absolute; left:0; bottom:100%; z-index:3000; width:100%; background:#fff; border:1px solid #262626; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; padding:10px 0; } .productlink_wrap ul li a { display:block; padding:7px 20px; font-size:12px; color:#999;} .productlink_wrap ul li a:hover { color:#000;} .productlink_wrap.on ul { opacity:1; visibility:visible;} .productlink_wrap.on .btn-site:after{ margin-top:2px; -webkit-transform:rotate(45deg) translateY(-50%); -moz-transform:rotate(45deg) translateY(-50%); -ms-transform:rotate(45deg) translateY(-50%); -o-transform:rotate(45deg) translateY(-50%); transform:rotate(45deg) translateY(-50%); } .footer_bar h3{ display:none; float:left; }/*로고*/ .footer_bar h3 a img{ /* max-width:210px; */ opacity:.55 } /*------------------------------------ 푸터 > 카피라이터 ------------------------------------*/ .copyright{ position:relative; overflow:hidden; padding:55px 0; } .copyright:after{ content:""; display:block; clear:both; } .copyright .centerWrap{ } .copyright h3{ margin:0 0 25px 0; } .copyright h3 a{ display:inline-block; max-width:110px; } .copyright h3 a > img{ width:auto; max-width:100%; /* -webkit-filter: grayscale(100%); filter: gray; */ opacity:0.6; } .copyright .addr{ } .copyright .addr:after{ display:block; content:''; clear:both; } .copyright .addr{ display:block; } .copyright .addr h5{ display:inline-block; width:70px; border-radius:100px; background:rgba(0,0,0,0.1); border:1px solid rgba(255,255,255,0.1); } .copyright .addr h5{ margin-right:8px; font-weight:300; font-size:12px; line-height:20px; color:rgba(255,255,255,0.5); } .company_addr{ overflow:hidden; } .company_addr h5{ float:left; } .company_addr ul{ overflow:hidden; float:left; } .company_addr ul li{ float:left; line-height:20px; } .company_addr ul li a{ display:inline-block; line-height:20px; color:} .copyright .addr ul{ overflow:hidden; } .copyright .addr ul li{ display:inline-block; color:rgba(255,255,255,0.5); font-weight:300; font-size:13px; line-height:20px; word-break:keep-all; font-style:normal; } .copyright .addr ul li:before{ content:'ㅣ'; padding:0 3px; display:inline-block; color:#999; opacity:0.4; } .copyright .addr ul li:first-child:before{ display:none; } .copyright .addr ul li a{ color:rgba(255,255,255,0.6); } .copyright .addr ul li a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .copyright .addr ul li a:hover{ color:#fff; } .copyright .addr ul.footer_site_btn li a:before{ color:#666; } .copyright .addr ul.footer_site_btn li:hover a:before{ color:#555; } .copyright .addr .company_addr_wrap{ overflow:hidden; margin-top:3px; } .copyright .addr .company_addr_wrap:first-child{ margin-top:0; } .copyright .addr .company_addr{ float:left; } .copyright .addr .company_addr_wrap .company_addr:first-child{ min-width:395px; /* margin-right:20px */; } /* SNS 링크 */ /* .sns_link{ display:flex; align-items:center; } .sns_link li{ padding-left:20px; } .sns_link li a{ display:block; width:27px; height:26px; font-size:0; } .sns_link li:nth-child(1) a{ background:url(/img/blog.png) no-repeat center; background-size:auto 100%; } .sns_link li:nth-child(2) a{ background:url(/img/youtube2.png) no-repeat center; background-size:100% auto; } .sns_link li:nth-child(3) a{ background:url(/img/naver_tv.png) no-repeat center; background-size:auto 100%; } */ .sns_link{ display:flex; align-items:center; padding:31px 40px 0 0; } .sns_link div{ padding-left:20px; } .sns_link div a{ display:block; width:27px; height:26px; font-size:0; } .sns_link div:nth-child(1) a{ background:url(/img/blog.png) no-repeat center; background-size:auto 94%; } .sns_link div:nth-child(2) a{ background:url(/img/youtube2.png) no-repeat center; background-size:98% auto; } .sns_link div:nth-child(3) a{ background:url(/img/naver_tv.png) no-repeat center; background-size:auto 100%; } /*------------------------------------ 서브비주얼 ------------------------------------*/ .subVisual {overflow:hidden; } .sub_visual_wrap{ position:relative; overflow:hidden; height:550px; margin:0 auto; overflow:hidden; z-index:2; background:url(/img/subvisual1.jpg) no-repeat center; background-size:cover !important; } .sub_visual_wrap:before{ position:absolute; left:0; top:0; content:''; width:100%; height:100%; /* background:rgba(0,0,0,0.2); */ } .sub_visual_wrap > p{ position:absolute; left:0; top:0; width:100%; height:100%; } .sub_visual_wrap > p img{ position:absolute; left:50%; top:0; margin-left:-50%; } .sub_visual_title{ z-index:3; position:absolute; left:50%; top:34%; width:100%; max-width:1480px; padding:0 0.5%; color:#fff; transform:translate(-50%); } .sub_visual_title h2, .sub_visual_title h2 a{ margin-bottom:10px; font-weight:600; font-size:56px; text-transform:uppercase; text-shadow:0 0 10px rgba(0,0,0,.4); color:#fff; } .sub_visual_title p{ font-weight:400; font-size:18px; color:rgba(255,255,255,0.9); text-shadow:0 0 5px rgba(0,0,0,.3); } .sub_visual_wrap > h2{ display:none; position:relative; height:400px; z-index:3; font-weight:500; font-size:42px; line-height:54px; color:rgba(255,255,255,0.9); text-shadow:1px 1px 1px rgba(0,0,0,.3); text-align:left; } .sub_visual_wrap > h2 u{ text-decoration:none; color:#f6ff00; } .sub_visual_wrap > h2 strong{ display:block; font-weight:500; font-size:50px; } .sub_visual_wrap > h2 span{ display:block; margin-top:15px; font-weight:400; font-size:16px; line-height:26px; color:rgba(255,255,255,0.8); } .sub_visual_wrap { animation: 1s ease-out 0s 1 slideInFromLeft; } .basic_body .sub_visual_title{ top:38%; } .products_wrap .sub_visual_wrap{ background:url(/img/subvisual2.jpg) no-repeat center; } .notice_wrap .sub_visual_wrap{ background:url(/img/subvisual3.jpg) no-repeat center; } /* .download_wrap .sub_visual_wrap{ background:url(/img/subvisual4.jpg) no-repeat center; } */ @keyframes slideInFromLeft { 0% { -webkit-transform: translateZ(0) scale(1.1) rotate(0.1deg); transform: translateZ(0) scale(1.1) rotate(0.1deg); -webkit-transition: 1800ms; transition: 1800ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); /* easeOutQuart */ } 100% { -webkit-transform: translateZ(0) scale(1) rotate(0deg); transform: translateZ(0) scale(1) rotate(0deg); } } /*------------------------------------ 서브 > 페이지 타이틀 ------------------------------------*/ .page_title_wrap{ position:relative; margin-bottom:70px; display:none; } .page_title_wrap:after{ content:""; display:block; clear:both } .page_title_wrap h1{ position:relative; font-weight:600; font-size:40px; line-height:42px; text-align:center; text-transform:uppercase; } .page_title_wrap h1:after{ content:''; display:block; width:60px; height:3px; margin:23px auto 0; background:#b4b4b4; } /* 네비게이션 */ .path_box{ display:none; overflow:hidden; text-align:left; } .path_box a{ display:inline-block; float:left; font-weight:500; font-size:14px; line-height:16px; color:#9d9d9d; letter-spacing:0; } .path_box a:before{ content:"/"; display:inline-block; font-size:12px; padding:0 8px; color:#ccc; } .path_box a:first-child{ font-size:0; } .path_box a:first-child:before{ content:""; padding:0; width:18px; height:14px; background:url(/img/home_icon.jpg) no-repeat center; background-size:auto 100%; vertical-align:-1px; } .path_box a:hover{ color:#434343; } .path_box a:last-child{ } /*------------------------------------ 상세검색 ------------------------------------*/ .searching_wrap{ position:relative; overflow:hidden; border:solid 1px #ddd; border-top-color:#333;background:#f8f8f8 } .searching_wrap:after{ content:""; display:block; clear:both; } .searching_wrap dd{ float:left; } .searching_wrap dd.searching_option{ width:81%; padding:10px 0 5px 2%; } .searching_wrap dd.searching_option: .searching_wrap dd.searching_btn{ float:right; } .searching_wrap dd.searching_btn input[type=submit]{ display:block; position:absolute; bottom:13px; right:5%; width:130px; height:56%; padding:10px 0; background:#ff837b; font-weight:400; font-size:14px; line-height:20px; color:#fff; text-align:center; border:none; } .searching_wrap dd.searching_btn input[type=submit]{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; border:solid 1px #ff837b; } .searching_wrap dd > label{ width:49%; display:inline-block; vertical-align:top; font:normal 12px/18px Malgun Gothic; } .searching_wrap dd > label.category{ width:100%; display:block; } .searching_wrap dd > label > select{ width:236px; height:26px; margin:0 0 7px 0; font-size:12px; line-height:16px; padding:0px 0 2px 1%; } .searching_wrap dd > label > strong:before{ content:""; font:bold 10px 'icon',Arail; color:#434343; padding-right:3px; } .searching_wrap dd > label b{ display:inline-block; min-width:82px; font:bold 12px/18px 'Malgun Gothic',Sans-serif; color:#444; } .searching_wrap dd > label b:before{ content:" "; font:normal 8px 'icon',Arail; color:#434343; padding-right:3px; } .searching_wrap dd > label input[type=text]{ width:50%; padding:0px 0 2px 1%; font:normal 12px/16px Malgun Gothic; margin:0 0 7px 0; vertical-align:top; border:solid 1px #aaa; } .searching_wrap dd > label input[type=text].width_100{ width:235px; } .searching_wrap dd > label input[type=text].width_50{ width:105px; } .searching_wrap dd > label input[type=text]:hover,.searching_wrap dd > label input[type=text]:focus{ border-color:#333; } .searching_wrap dd > label strong{ color:#000; font:bold 12px/14px 'Malgun Gothic',Sans-serif; display:none; } /*------------------------------------ 사이트맵 ------------------------------------*/ #sitemap .site_menu{ position:relative; display:block !important; overflow:hidden; padding:100px 80px; } #sitemap .site_menu > li{ position:relative; overflow:hidden; margin:0; } #sitemap .site_menu > li:after{ position:absolute; left:0; bottom:0; content:''; width:100%; border-bottom:1px solid #eee; } #sitemap .gnb_1da{ float:left; position:relative; width:35%; padding:0 5px; font-weight:500; font-size:23px; line-height:90px; color:#0067b4; } #sitemap span.bg{ display:none; } #sitemap .gnb_2dul{ position:relative; float:left; widtH:65%; } #sitemap .gnb_2dul li{ overflow:hidden; float:left; margin-right:20px; } #sitemap .gnb_2dul > li{ border-bottom:1px solid #eee; } #sitemap .gnb_2dul li > a{ position:relative; display:block; padding:0 10px; color:#777; font-weight:500; font-size:16px; line-height:90px; } #sitemap .gnb_2dul li > a{ -webkit-transition-duration:0.1s; -moz-transition-duration:0.1s; -o-transition-duration:0.1s; -ms-transition-duration:0.1s; transition-duration:0.1s; } #sitemap .gnb_2dul li > a:hover{ color:#444; } #sitemap .gnb_2dul li > a:before{ z-index:2; position:absolute; display:block; bottom:0; left:50%; content:''; height:3px; width:0; background:#0067b4; transition:width 0.3s ease 0s, left 0.3s ease 0s; } #sitemap .gnb_2dul li > a:hover:before{ width:100%; left:0; } #sitemap .gnb_2dul li.active > a{ color:#444; } /* 3depth */ #sitemap .depth_3{ position:relative; float:left; padding-left:15px; } #sitemap .depth_3 li{ float:left; } #sitemap .depth_3 li.active a{ color:#0067b4; } #sitemap .depth_3 li > a{ color:#555; font-size:15px; font-weight:300; } #sitemap .depth_3 li > a:hover{ color:#0067b4; font-weight:300; } /* 사이트맵 타이틀, x 버튼 */ #sitemap .btn_close{ position:absolute; top:50px; right:80px; border:none; border-radius:0; } #sitemap .btn_close > i{ font-size:18px; color:#333; vertical-align:5px; } #sitemap .mobile{ display:none; } #sitemap .mobile_quick_btn{ overflow:hidden; } #sitemap .mobile_quick_btn li{ float:left; width:50%; text-align:center; background:#0067b4; border-top:1px solid #0b6fab; } #sitemap .mobile_quick_btn li a{ display:block; padding:16px 0 10px; font-size:11px; font-weight:300; border-left:1px solid #0b6fab; color:rgba(255,255,255,0.8); border-bottom:1px solid #0b6fab; } #sitemap .mobile_quick_btn li:first-child a{ border-left:none; } #sitemap .mobile_quick_btn li a:before{ display:block; margin-bottom:6px; content:''; width:100%; height:30px; background:url(/img/mobile_quick_icon1.png) no-repeat center; background-size:auto 100% !important; opacity:0.8; } /* #sitemap .mobile_quick_btn li:nth-child(2) a:before{ background:url(/img/mobile_quick_icon2.png) no-repeat center; } */ #sitemap .mobile_quick_btn li:nth-child(2) a:before{ background:url(/img/mobile_quick_icon3.png) no-repeat center; } #sitemap .mobile.logo{ width:100%; padding:24px 15px 15px; background:#0067b4; text-align:center; } #sitemap .mobile.logo > a{ display:block; width:120px; height:60px; margin:0 auto; border-radius:100px; background:#f8f6f4 url(/img/logo.png) no-repeat center; background-size:60px; } #sitemap .mobile.logo img{ width:180px; } #sitemap .mobile.logo span{ display:block; margin:12px 0 0; color:#fff; font-weight:400; font-size:12px; } #sitemap .mobile.site_addr{ width:100%; background:#0f2a61; text-align:center; color:#fff; padding:0; } #sitemap .mobile.site_addr .view_addr{ display:block; width:100%; height:30px; background:#0067b4; text-align:center; } #sitemap .mobile.site_addr .view_addr:before { padding-top:1px; content:'▼' ; color:#fff; text-align:center; font-size:7px; line-height:29px; display:block; } #sitemap .mobile.site_addr .view_addr:before{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } #sitemap .mobile.site_addr span{ display:none; width:100%; padding:15px 20px 13px; font-size:12px; line-height:18px; font-weight:300; background:#f9f9f9; color:#555; border-bottom:1px solid #eee; word-break:keep-all; } #sitemap .mobile.site_addr span{ -webkit-transition-duration:0.3s; -moz-transition-duration:0.3s; -o-transition-duration:0.3s; -ms-transition-duration:0.3s; transition-duration:0.3s; } #sitemap .mobile.site_addr.active span{ display:block; } #sitemap .mobile.site_addr.active .view_addr:before{ -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } #sitemap .site_addr{ float:left; padding:20px 0; box-sizing:border-box; } /*------------------------------------ 이미지 ------------------------------------*/ .img_wrap{ z-index:2; position:relative; overflow:hidden; border-radius:4px; } .img_wrap:before{ z-index:3; position:absolute; left:0; top:0; content:''; width:100%; height:100%; } .img_wrap img{ width:auto !important; max-width:100% !important; } .img_wrap img{ transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -o-transition:all 0.4s ease; } .Main .img_wrap{ border-radius:0; } .dotted{ clear:both; position:relative; padding-top:55px; margin-bottom:55px; } .dotted_big{ clear:both; position:relative; padding-top:60px; margin-bottom:60px; } .dotted_line{ clear:both; position:relative; padding-top:60px; margin-bottom:60px; border-bottom:1px dashed #ddd; } .dotted_big_line{ clear:both; position:relative; padding-top:80px; margin-bottom:80px; border-bottom:1px dashed #ddd; } .dotted_small{ clear:both; position:relative; padding-top:35px; margin-bottom:35px; } /*------------------------------------ 서브 컨텐츠 대표 문구 : 타이틀 ------------------------------------*/ .sub_title_wrap{ margin-bottom:70px; text-align:center; } .sub_title_wrap .img_wrap{ max-width:150px; width:auto; margin:0 auto 20px; } .sub_title{ position:relative; text-align:center; } .sub_title.Left{ text-align:left; } .sub_title h1{ position:relative; display:inline-block; font-weight:500; font-size:28px; } .sub_title h1:before{ position:absolute; left:-80px; top:22px; content:''; width:50px; height:2px; background:rgba(180, 180, 180, 0.5); } .sub_title h1:after{ position:absolute; right:-80px; top:22px; content:''; width:50px; height:2px; background:rgba(180, 180, 180, 0.5); } .kg_contents_wrap .sub_title p{ margin-top:15px; } .kg_contents_wrap .sub_title p:nth-child(1){ margin-top:0; margin-bottom:15px; } .sub_title h2{ font-size:28px; font-weight:500; word-break:keep-all; color:#242424; } .sub_title h2 b{ font-weight:600; } .sub_title h3{ margin:20px auto 10px; font-size:20px; font-weight:500; word-break:keep-all; color:#242424; } .sub_title h5{ font-size:42px; font-weight:600; } .sub_title span{ display:block; margin-bottom:10px; font-weight:500; color:#0067b4; } .center{ text-align:center; } .left{ text-align:left; } .right{ text-align:right; } .color1{ color:#0067b4; } .color2{ color:#0b6fab; } .Color01{ color:#0067b4; } .Color02{ color:#0055a1; } .Color03{ color:#1c77c8; } .Color04{ color:#059dcf; } .Color05{ color:#5dbbda; } .Bg01{ background:#0067b4; } .Bg02{ background:#0055a1; } .Bg03{ background:#1c77c8; } .Bg04{ background:#059dcf; } .Bg05{ background:#5dbbda; } .color_red{ color:#085392; } .color_gray{ color:#888; } .color_white{ color:#fff; } .background1{ background:#0067b4; } .background2{ background:#0b6fab; } .background_red{ background:#085392; } .weight_bold{ font-weight:500; } .point_round{ display:inline-block; margin-top:10px; padding:0 20px; line-height:34px; font-weight:500; color:#fff; background:#0067b4; border-radius:100px; } .line_e{ border:1px solid #eee; } /*------------------------------------ 테이블 ------------------------------------*/ .table_basic{ width:100%; clear:both; } .table_basic th, .table_basic td{ height:36px; padding:0 5px; border:1px solid #ddd; border-width:1px 0; color:#222; font-weight:300; font-size:13px; text-align:center; } .table_basic th{ background:#f1f1f1; font-weight:600; color:#333; } .table_basic thead th{ background:#434343; color:#fff; border-color:#fff; border-width:1px; } /* 테이블 */ .table01{ border-top:2px solid #242424; clear:both; width:100%; background:#fff; } .table01 th, .table01 td{ height:45px; padding:7px 13px; border:1px solid #ddd; word-break:keep-all; font-size:14px; } .table01 th{ background:#f9f9f9; border-bottom:1px solid #d4d8de; font-weight:500; color:#333; text-align:center; } .table01 td{ padding-left:20px; color:#555; } .table01 td a{ color:#333; } .table01 td a:hover{ color:#0c4ca3; } .table01 td span{ margin-top:2px; display:block; line-height:16px; } .table01 td span:before{ content:'*'; margin-right:3px; vertical-align:-2px; } .table01 td.jorip_1{ height:235px; } .table01 caption{ position:relative; text-align:left; margin:30px 0 15px 0; text-indent:0; font-size:20px; line-height:24px; font-weight:500; padding:0 1% 0 0; color:#333; } .table01 caption:before{ display:none; content:''; font:normal 16px 'icon'; padding-right:7px; vertical-align:-1px; color:#333; } .tbl_style01{border-collapse:collapse; width:100%; border:1px solid #e7e7e7; border-top:2px solid #333;} .tbl_style01 thead tr th{ font-weight:400; font-size:14px; background:#fafafa; padding:15px 24px; border:1px solid #e7e7e7; box-sizing:border-box; color:#333; font-weight:400; text-align:center;} .tbl_style01 tbody tr th{ font-weight:400; font-size:14px; background:#fafafa; background:#fafafa; padding:15px 24px; border:1px solid #e7e7e7; box-sizing:border-box; color:#333; font-weight:400; text-align:center; } .tbl_style01 tbody tr td{ font-weight:400; font-size:14px; border:1px solid #e7e7e7; padding:10px 15px; box-sizing:border-box; color:#555; text-align:left; word-break:keep-all; } .tbl_style02{ position:relative; min-width:500px; margin:0 auto 0; clear:both; width:100%; background:#fff; } .tbl_style02 .img {padding:5px} .tbl_style02 .tit {display:block; margin-top:10px; color:#333; font-weight:500;} .tbl_style02 .img img {max-width:100%;} .tbl_style02 th, .tbl_style02 td{ padding:5px 10px; font-weight:400; font-size:14px; color:#555; border:1px solid #ddd; word-break:keep-all; text-align:center; } .tbl_style02 thead th{ height:45px; background:#333; color:#fff; border-color:#333; border-left-color:#fff; border-right-color:#fff; } .tbl_style02 thead th:first-child{ border-left-color:#333; } .tbl_style02 thead th:last-child{ border-right-color:#333; } .tbl_style02 thead th:first-child:before{ position:absolute; left:0; top:0; content:''; border-bottom:45px solid transparent; border-left:161px solid rgba(255,255,255,0.03); border-top:0px solid rgba(255,255,255,0.03); } .tbl_style02 th{ background:#f9f9f9; border-bottom:1px solid #d4d8de; font-weight:400; color:#444; } .tbl_style02 td{ height:45px; } .table_mobile{ padding-top:15px; } /* 테이블 */ .table_basic{ width:100%; clear:both; background:#fff; } .table_basic th, .table_basic td{ height:36px; padding:5px; border:1px solid #ddd; border-width:1px 0; color:#222; font:400 13px 'NanumGothic'; text-align:center; } .table_basic th{ height:40px; background:#f1f1f1; font-weight:600; color:#333; } .table_basic thead th{ background:#0081c5; color:#fff; border-color:#fff; border-width:1px; } /* 두번째 td 좌측정렬 */ .table_basic2 tr td:nth-child(2){ padding-left:25px; text-align:left; } /* td 우측정렬 */ .table_basic3 thead tr th, .table_basic3 tr td{ padding-right:25px; text-align:right; } .table_basic3 thead tr th:first-child{ padding-right:5px; text-align:center; } /* 테이블 라인 */ .table_basic.line tbody th, .table_basic.line tbody td{ border-width:1px; } .table_basic.line thead th{ border-color:#0081c5; border-right-color:#fff; border-bottom-color:#fff; } .table_basic.line thead th:last-child{ border-right-color:#0081c5; } /*------------------------------------ 인트로페이지 ------------------------------------*/ .intro_wrap{ position:relative; height:1080px; } .intro{ position:absolute; left:50%; top:0; width:100%; height:100%; width:1920px; margin-left:-960px; } .intro_btn{ overflow:hidden; position:absolute; left:50%; top:480px; width:950px; margin-left:-475px; } .intro_btn a{ float:left; display:block; margin-left:34px; width:212px; height:213px; border-radius:100em; } .intro_btn a:first-child{ margin-left:0; } /*------------------------------------ fa 자료 준비 중입니다. ------------------------------------*/ .ing_fa_wrap{ text-align:center; } .ing_fa_wrap .fa-cog{ color:#0067b4; } .ing_fa_text{ font-weight:500; font-size:20px; line-height:44px; display:block; } /*------------------------------------ 검색결과 페이지 ------------------------------------*/ .search_box_form{ display:none; } .search_body .btn_wrap.gray.sort{ display:none; } .grid_show_wrap{ display:none; } .goods_list_wrap{ display:none; } .search_body .list{ display:none; } .search_page_block{} /* 검색어 박스 */ .search_page_box_wrap{ padding:0 0 40px; } .search_page_box{ overflow:hidden; padding:35px 6%; background:rgba(255,255,255,0.5); border:1px solid #ddd; } .search_page_box dt{ float:left; padding-right:7%; } .search_page_box dt b{ color:#434343; font-weight:400; font-size:24px; line-height:34px; } .search_page_box dt span{ display:block; font-weight:300; font-size:14px; line-height:22px; color:#777; } .search_page_box dd{ float:left; padding:6px 0.5% 0; } .search_page_input{ padding:0 20px; width:400px; height:46px; font-weight:300; font-size:15px; line-height:46px; color:#444; background:#fff; border:1px solid #ddd; } .search_page_btn{ width:130px; height:46px; font-weight:500; font-size:14px; line-height:46px; background:#0067b4; border:none; color:#fff; text-transform:uppercase; } .search_page_btn{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .search_page_btn:hover{ background:#085392; } .search_result_title{ padding:0 0.5% 10px; margin:0 0 25px 0; font-weight:300; font-size:16px; line-height:22px; color:#555; border-bottom:1px solid #ddd; } .search_result_title strong{ font-weight:400; color:#242424; } .search_page_result_wrap{ min-height:160px; margin-bottom:30px; } .search_page_result{ padding:0 0.5% 14px; margin-bottom:19px; border-bottom:1px dotted #ddd; } .search_page_result_wrap .search_page_result:first-child{ /* padding-top:0; margin-top:0; border:none; */ } .search_page_result h2{ position:relative; font-weight:400; font-size:18px; line-height:30px; color:#333; } .search_page_result h2:before{ display:inline-block; margin-right:5px; content:''; font:normal 16px 'FontAwesome'; color:#434343; vertical-align:1px; } .search_page_result h3{ padding:5px 0 7px; font-weight:300; font-size:14px; line-height:22px; word-break:keep-all; color:#444; } .search_page_result h3 strong{ display:inline-block; padding:0 3px; color:#242424; font-size:15px; font-weight:400; background:#fbf59e; } .search_page_result .path_box{ float:none; padding:0; } .search_page_result .path_box a{ font-size:12px; } .search_page_result .path_box a:first-child{ font-size:0; } .search_page_result .path_box a:before{ font-size:10px; padding:0 5px; } .search_page_result .path_box a:first-child:before{ padding:0; font-size:12px; vertical-align:-5px; } /* 품질방침 */ .policy{ margin-top:80px; } .policy li{ margin-top:42px; } .policy li:first-child{ margin-top:0; } .policy li dl{ overflow:hidden; } .policy li dl dt{ float:right; width:47.9%; padding-left:24px; padding-top:9.3%; } .policy li dl dt h2{ position:relative; margin-bottom:10px; font-weight:500; font-size:28px; line-height:38px; } .policy li dl dt h2:after{ position:absolute; left:38px; top:-47px; content:'Greenhouse gas are balanced as a planetwide'; font-size:32px; opacity:.1; text-transform:uppercase; letter-spacing:-0.3px; } .policy li:nth-child(2) dl dt h2:after{ content:'Managed in a sustainable form'; } .policy li:nth-child(3) dl dt h2:after{ content:'Clear water and pure air and the natural environment'; } .policy li:nth-child(4) dl dt h2:after{ content:'Lives a healthy and hygienic life'; } .policy li dl dt p{ font-size:16px; } .policy li dl dd{ float:left; width:47.9%; } .policy li:nth-child(2n) dl dt{ float:left; } .policy li:nth-child(2n) dl dd{ float:right; } .policy_wrap .kg_contents_wrap > p{ margin-top:100px; } /* 회사소개 */ .contents_box .img_wrap.compayny {display:table; width:100%; height:360px; background:url('/img/company01.jpg') no-repeat top center; background-size:cover; } .contents_box .img_wrap.compayny div {position:relative; display:table-cell; vertical-align:middle; padding-left:80px; color:#fff;} .contents_box .img_wrap.compayny div span {display:block; font-size:40px; font-weight:500; text-shadow:0 1px 2px rgba(0,0,0,0.2); } .contents_box .img_wrap.compayny div p {font-size:18px; font-weight:300;} .contents_box .txt_wrap {margin:60px 0 0px; padding:0 0.5% 0;} .contents_box .txt_wrap p {margin:0 0 15px; font-size:18px; line-height:28px; color:#333; letter-spacing:-0.5px; word-break:keep-all;} .contents_box .txt_wrap p strong { font-weight:400; color:#000; margin:0 4px; vertical-align:bottom;} .contents_box .txt_wrap p.sign {display:block;text-align:right; margin:30px 0 0; color:#000; font-size:18px; } .contents_box .txt_wrap p.sign span {font-size:25px; padding:5px; letter-spacing:2px; } .contents_box .txt_wrap .sub_title{ margin-bottom:15px; } .contents_box .img_wrap.business {display:table; width:100%; height:400px; background:url('/img/company02.jpg') no-repeat top center; } .contents_box .img_wrap.business div {position:relative; display:table-cell; vertical-align:middle; color:#333; text-align:center; } .contents_box .img_wrap.business div:after {content:''; position:absolute; top:0; left:0; width:100%; height:400px; z-index:0; background:rgba(0,0,0,0.04)} .contents_box .img_wrap.business div span {position:relative; display:block; padding-top:5px; margin-bottom:2px; font-size:35px; line-height:45px; font-weight:400; color:#11526d; text-transform:capitalize} .contents_box .img_wrap.business div span:before {display:block; content:''; width:33px; height:30px; left:240px; top:-18px; position:absolute; background:url('/img/comma_left.png'); opacity:.7;} .contents_box .img_wrap.business div span:after {display:block; content:''; width:33px; height:30px; right:240px; top:70%; position:absolute; background:url('/img/comma_right.png'); opacity:.7;} .contents_box .img_wrap.business div span strong {display:block; font-size:40px; color:#000; font-weight:300;} .contents_box .img_wrap.business div p {font-size:18px; font-weight:300;} .contents_box .tbl_style01{ margin-top:55px; } .recruitment_txt{ } .recruitment_txt li{ padding:5px 0 5px 23px; color:#333; word-break:keep-all; } .recruitment_txt li strong{ display:inline-block; margin-right:3px; margin-left:-21px; font-weight:500; color:#0067b4; } .recruitment_box{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; } .recruitment_box li{ flex-direction:column; position:relative; padding:25px 30px 33px; justify-content:center; align-items:center; min-height:150px; } .recruitment_box li{ border-radius:25px; border:1px solid #ddd; box-shadow:3px 3px 6px rgb(0,0,0,0.2); /* display:flex; */ } .recruitment_box li .sub_title h3{ display:block; padding-bottom:15px; margin-bottom:15px; border-bottom:2px dotted #ddd; } .contents_box .table_basic{ margin-top:10px; } .contents_box .img_wrap.recruitment{ background:url('/img/company02.jpg') no-repeat top center; background-size:cover; } .contents_box .img_wrap.recruitment2{ margin-top:100px; background:url('/img/company03.jpg') no-repeat top center; background-size:cover; } .contents_box .img_wrap.recruitment3{ margin-top:100px; background:url('/img/company04.jpg') no-repeat top center; background-size:cover; } /* 회사소개 */ .company_body .sub_right_contents{ padding-right:0; padding-left:0; } .company_body .sub_contents_wrap > .centerWrap{ max-width:100%; padding-right:0; padding-left:0; padding-bottom:0; } .company_wrap{} .company_banner{ position:relative; height:450px; background:url(/img/company_img2.jpg) no-repeat top center; background-size:cover; text-align:center; border-radius:50px 0; } .company_banner .company_banner_txt{ position:absolute; left:0; top:50%; width:100%; transform:translateY(-51%); } .company_banner h4{ font-size:60px; font-weight:700; color:#0067b4; color:#fff; text-shadow:0 0 10px rgba(0,0,0,0.2); } /* .company_banner h4:before{ display:block; content:''; width:100%; height:50px; background:url(/data/config/shop_logo.png) no-repeat center; background-size:auto 100%; } */ .company_banner p{ margin-top:20px; font-size:20px; line-height:32px; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,0.2); } .company_txt{ margin-top:50px; } .company_txt p{ line-height:50px; color:#333; text-align:center; font-weight:400; font-size:18px; color:#555; } .organization_wrap{ } .sub_bg_gray{ margin-top:110px; padding:120px 0; background:#f9f9f9; } .company_block2{ background:url(/img/ceo_bg3.jpg) no-repeat center; background-size:cover; } .company_wrap2{ padding:80px 5%; } .company_wrap2 .company_txt{ margin-top:0; } .company_wrap2 .company_txt p{ line-height:30px; text-align:left; color:#141414; } .company_block3{} .company_wrap3{ display:flex; justify-content:center; } .company_wrap3 .img_wrap{ width:44%; border-radius:0; background:url(/img/ceo_bg.jpg) no-repeat center; background-size:cover; } .company_wrap3 .img_wrap img{ display:none; } .company_wrap3 .company_txt{ width:56%; padding:3.8% 6% 3.8% 6.5%; margin-top:0; background:#f9f9f9 url(/img/bg_pattern_01.png); } .company_wrap3 .company_txt p{ text-align:left; line-height:44px; color:#141414; } .company_wrap3 .company_txt p b{ font-weight:500; /* color:#0067b4; */ } /* CI */ .ci_box {overflow:hidden; margin-bottom:80px;} .ci_box .tit {float:left; width:33%; font-size:30px; font-weight:400; } .ci_box .info {float:left; width:67%;} .ci_box .info img {max-width:100%} .ci_box .info p {clear:both; padding-top:10px; color:#333; font-weight:400;} .ci_box .color {float:left; width:48%; padding:5%;} .ci_box .info .color:nth-child(1) {background:#1e2752; color:#fff;} .ci_box .info .color:nth-child(2) {margin-left:4%; background:#555857; color:#fff;} .ci_box .info .color span {font-size:20px; font-weight:500} .ci_box .info .color p {opacity:.8; padding-top:2px; color:#fff} /* 고압 안개분무 시스템 */ .coolingfog_block .company_banner{ background:url(/img/coolingfog_img.jpg) no-repeat left center; background-size:cover; } .coolingfog_block .company_banner h4{ font-size:50px; } .icon_spec{ } .icon_spec li{ display:inline-block; margin:40px 4%; } .icon_spec li dl{ width:200px; height:200px; border-radius:100px; box-shadow:0 0 25px rgb(0, 0, 0, 0.15); } .icon_spec li dl dd{ margin-bottom:15px; padding-top:52px; } .icon_spec li dl dd .img_wrap{} .icon_spec li dl dd .img_wrap img{ height:42px; } .icon_spec li dl dt{} /*------------------------------------ 퀵메뉴 우측 고정 ------------------------------------*/ .quick_menu_wrap{ z-index:10; position:fixed; left:auto; width:auto; right:58px; top:200px; } .quick_menu_wrap{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .quick_menu_wrap ul{} .quick_menu_wrap ul li{} .quick_menu_wrap ul li a{ display:block; width:79px; padding:13px 0 8px; background:#333; color:#fff; text-align:center; } .quick_menu_wrap ul li a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .quick_menu_wrap ul li:first-child a{ background:#444; border-radius:6px 6px 0 0; } .quick_menu_wrap ul li:last-child a{ background:#0067b4; border-radius:0 0 6px 6px; } .quick_menu_wrap ul li:nth-child(3) a{ border-top:1px solid #444; } .quick_menu_wrap ul li a span{ position:relative; display:block; font-size:12px; } .quick_menu_wrap ul li a span:before{ display:block; margin-bottom:5px; content:''; height:32px; width:100%; } .quick_menu_wrap ul li a:hover{ background:#242424; } .quick_menu_wrap ul li:first-child a:hover{ background:#383838; } .quick_menu_wrap ul li:last-child a:hover{ background:#085392; } .quick_company span:before{ background:url(/img/quick_company.png) no-repeat center; background-size:auto 30px; } .quick_catalog span:before{ background:url(/img/quick_catalog.png) no-repeat center; background-size:auto 26px; } .quick_tel span:before{ background:url(/img/quick_tel.png) no-repeat center; background-size:auto 30px; } .quick_inquiry span:before{ background:url(/img/quick_inquiry.png) no-repeat center; background-size:auto 31px; } /* headroom */ .quick_menu_wrap.headroom.headroom-hidden{ top:112px; } .quick_menu_wrap.headroom{ top:200px; } /*------------------------------------ TOP 탑 버튼 ------------------------------------*/ .eb-top{ z-index:3; position:relative !important; right:auto !important; bottom:auto !important; left:auto !important; top:auto !important; font-size:0 !important; margin:25px auto 0 !important; width:64px; height:64px; background:none; text-align:center; } .eb-top{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .eb-top p{ display:block !important; margin:0; width:64px; height:64px; background:#333; border-radius:100px; overflow:hidden; } .eb-top p{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .eb-top p:hover{ background:#242424; } .eb-top p i{ margin:14px 0 4px 0; display:block; color:#fff; font-size:11px; } .eb-top p span{ position:relative; display:block; padding-top:34px; font-weight:500; font-size:12px; line-height:14px; color:#fff; text-transform:uppercase; } .eb-top p span:before{ position:absolute; left:50%; top:18px; content:''; width:8px; height:8px; margin-left:-5px; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-45deg); } /* headroom */ /* .eb-top.headroom.headroom-hidden{ top:447px !important; } .eb-top.headroom{ top:535px !important; } */ .quick_menu_wrap .eb-top:nth-of-type(2){ display:none; } /*------------------------------------ 카카오톡 채널 추가 및 상담 버튼 ------------------------------------*/ .kakao_wrap{} .kakao_wrap > a{ z-index:3; display:block; width:110px; position:fixed; right:30px; } .kakao_channel{ bottom:170px; } .kakao_contact{ bottom:120px; } /*------------------------------------ 개인정보처리방침 ------------------------------------*/ .privacy_wrap h2{ margin:0; padding:60px 0 20px; display:block; color:#0067b4; font-weight:500; font-size:22px; } .privacy_wrap h2 span{ font-weight:400; } .privacy_wrap p{ margin:0; padding:8px 0; font-weight:300; font-size:16px; line-height:32px; word-break:keep-all; } .privacy_wrap p.i_wrap{ font-size:18px; line-height:30px; } .privacy_wrap p > span{ color:#434343; font-weight:400; font-size:16px; } .privacy_wrap p > b{ font-weight:400; color:#242424; } .privacy_wrap p > b > u{ text-decoration:none; } .privacy_wrap p > u{ } .privacy_wrap p > i{ font-size:16px; color:#434343; } .privacy_wrap ul{ margin:12px 0 14px; padding:15px 25px; background:rgba(255,255,255,0.5); border:1px solid #eee; border-width:1px 0; } .privacy_wrap ul li{ position:relative; padding-left:10px; margin:5px 0; font-weight:300; font-size:15px; line-height:27px; } .privacy_wrap ul li:before{ position:absolute; left:0; top:11px; display:inline-block; content:''; width:3px; height:3px; border-radius:100em; margin-right:3px; background:#242424; } .privacy_wrap ul li.before_none_li{ padding:5px 0 0 0; } .privacy_wrap ul li.before_none_li:first-child{ padding:0; } .privacy_wrap ul li.before_none_li:before{ display:none; } .privacy_wrap ul li b{ font-weight:400; color:#242424; } /*------------------------------------ 브랜드 ------------------------------------*/ /* 제품소개 */ .stony{ margin-top:-30px; } .stony:after{ clear:both; content:''; display:block; } .stony li{ float:left; width:32%; margin-left:2%; margin-top:30px; text-align:center; } .stony li:nth-child(3n+1){ margin-left:0; } .stony li p{ padding-top:12px; color:#333; font-size:17px; font-weight:500; } .stony li:hover .img_wrap img{ transform:scale(1.05); } /* 표준규격 */ .standard_img{ overflow:hidden; padding:10px 0; max-width:390px; margin:0 auto; } .standard_img div{ vertical-align:middle; float:left; width:30%; border-radius:0; } .standard_img div:last-child{ width:17%; } .standard_img div:last-child img{ max-height:68px; } .standard_img p{ float:left; width:50%; padding:1% 4% 0; font-weight:500; line-height:20px; color:#242424; text-align:left; } .standard_img1 div:last-child{ padding-top:1.3%; } .standard_img1 p{ padding-top:3%; } /* 방염성능 */ .flame_top{ } .flame_top:after{ clear:both; display:block; content:''; } .flame_top .flame_left{ float:left; width:43%; } .flame_top table{ clear:none; float:right; width:53%; } .flame_top .flame_left h3{ position:relative; margin:10px auto 3px; font-size:20px; line-height:30px; font-weight:500; } .flame_top .flame_left h3:first-child{ margin-top:0; } .flame_top .flame_left h3{ padding:6px 0 6px 15px; border-left:solid 8px #0b6fab; background:#f9f9f9; } .flame_top .flame_left h3:after{ position:absolute; right:20px; top:6px; content:""; font:normal 16px/30px "FontAwesome"; color:#0b6fab; opacity:.8; } .flame_top .flame_left p{ padding:15px 25px; color:#333; font-size:17px; } .flame_top .flame_left ul{ margin-top:17px; } .flame_top .flame_left ul li{ position:relative; padding-left:12px; } .flame_top .flame_left ul li:before{ position:absolute; left:0; top:11px; content:''; width:3px; height:3px; border-radius:100px; background:#555; } .flame_img_wrap{ margin-top:70px; text-align:center; } .flame_img_wrap:after{ clear:both; display:block; content:''; } .flame_img_wrap li:first-child{ float:left; width:62%; } .flame_img_wrap li:last-child{ float:right; width:34.9%; } .flame_img_wrap li > .img_wrap:hover img{ transform:scale(1.05); } .flame_img_wrap p{ padding-top:12px; color:#333; font-size:17px; font-weight:500; text-align:center; } /* 라돈 */ .radon_img_wrap{ overflow:hidden; /* float:left; width:36%; */ margin-bottom:35px; } .radon_img_wrap li{ } .radon_img_wrap li:first-child{ float:left; width:44.6%; } .radon_img_wrap li:last-child{ float:right; width:52.6%; } .radon_img_wrap li img{ width:auto; max-width:100%; } .radon_img_wrap li > .img_wrap:hover img{ transform:scale(1.05); } .radon .table01{ /* float:right; width:60%; */ } .radon .table01 th, .radon .table01 td{ padding:2px 5px; height:35px; } /* About */ .about_title{ margin-bottom:60px; } .about_title h2{ padding-bottom:10px; font-size:30px; line-height:40px; font-weight:500; letter-spacing:-0.5px; } .about_title p{ margin-top:20px; font-size:17px; line-height:27px; } .img_row{ overflow:hidden; margin-top:-80px; } .img_row > li{ position:relative; float:left; width:48%; margin-left:4%; margin-top:80px; } .img_row li .img_wrap { } .img_row li:nth-child(2n+1){ margin-left:0; } .img_row li ol{ margin-top:35px; padding:0 10px; } .img_row li ol li{ position:relative; padding-left:15px; color:#444; font-size:18px; line-height:32px; } .img_row li ol li:before{ position:absolute; left:0; top:13px; display:inline-block; content:''; width:4px; height:4px; border-radius:100px; background:#777; } .img_row li ol li b{ font-weight:500; } .img_row li:hover img{ transform:scale(1.05); } .img_row.one li{ float:none; width:100%; margin-left:0; } .img_row li ol.small_size li{ font-size:16px; font-weight:300; } .img_row_link{ z-index:2; position:absolute; right:17px; bottom:81px; display:block; } .img_row_link span{ position:relative; display:block; padding:0 30px 0 17px; background:#0b6fab; color:#fff; line-height:42px; font-weight:500; font-size:16px; } .img_row_link span{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .img_row_link span:after{ position:absolute; right:15px; top:0; content:''; font:normal 16px/41px 'Fontawesome'; } .img_row_link:hover span{ background:#0067b4; } /* Behavior */ .vision_list{ font-size: 0; text-align: center; white-space: nowrap; width: 100%; margin:0 auto; } .vision_list li{ width:calc((100% / 5) + 20px); padding: 60px 0; background-color: rgba(84, 165, 249, 0.15); display: inline-block; border-radius: 50%; } .vision_list li .img_wrap{ margin-bottom:25px; } .vision_list li .img_wrap img{ max-height:70px; } .vision_list li strong{ margin-bottom:5px; font-size: 20px; font-weight: 500; color: #000; display: block; letter-spacing: 1px; } .vision_list li p{ } .vision_list li:nth-child(2n){ margin: 0 -30px; } .left_title_block_wrap{ margin-top:90px; padding:0 12px; } .left_title_wrap{ overflow:hidden; margin-top:55px; } .left_title{ float:left; width:23%; position:relative; padding-top:14px; word-break:keep-all; } .left_title:before{ position:absolute; left:0; top:0; width:100%; height:1px; content:''; background:#ddd; } .left_title strong{ display:block; font-weight:500; font-size:18px; line-height:22px; color:#141414; } .left_title strong:before{ position:absolute; left:0; top:0; width:20px; height:3px; content:''; background:#0b6fab; } .left_title strong span{ display:inline-block; margin-right:5px; font-weight:500; color:#0b6fab; text-transform:uppercase; } .left_title strong i{ font-style:normal; line-height:22px; } .left_title_block{ overflow:hidden; float:right; width:72%; } .left_title_block p{ margin-top:16px; color:#333; font-size:16px; line-height:26px; } .left_title_block p b{ font-weight:500; } .left_title_block.product{ float:none; width:100%; } /* BI */ .bi_wrap{ } .ci_box {overflow:hidden; } .bi_wrap .ci_box{ margin-top:80px; } .ci_box .tit {float:left; width:33%; font-size:28px; font-weight:500;} .ci_box .info {float:left; width:67%;} .ci_box .info > strong{ font-size:28px; font-style:italic; font-weight:500; } .ci_box .info img {max-width:100%} .ci_box .info > img:nth-of-type(2){ margin-top:30px; } .ci_box .info p {clear:both; margin-top:10px; padding:30px 0 0; color:#333; font-weight:400; font-size:16px; } .ci_box .info ul{ overflow:hidden; } .ci_box .info ul li{ position:relative; float:left; width:48%; } .ci_box .info ul li:nth-child(2){ margin-left:4%; } .ci_box .info ul li span{ z-index:3; position:absolute; right:20px; top:18px; padding:1px 12px 0; font-weight:400; font-size:14px; line-height:24px; color:#fff; border-radius:100px; background:#333; } .ci_box .color {float:left; width:48%; padding:5%;} .ci_box .info .color:nth-child(1) {background:#0b318f; color:rgba(255,255,255,0.7);} .ci_box .info .color:nth-child(2) {margin-left:4%; background:#595757; color:rgba(255,255,255,0.7); } .ci_box .info .color span {font-size:20px; font-weight:500; color:rgba(255,255,255,0.9); } .ci_box .info .color:nth-child(2) p{ /* color:#333; */ } .ci_box .info .color p {opacity:.8; padding-top:2px; color:#fff} /* 수상 */ .award_float{ overflow:hidden; } .award_float > div{ float:left; width:54%; display:block; } .award_float:hover a img{ transform:scale(1.05); } .award_float dl{ float:right; width:39%; padding:58px 15px 0; } .award_float h2{ margin:40px auto 10px; font-weight:500; line-height:36px; } .award_float h3{ font-weight:400; color:#333; font-size:20px; line-height:30px; } .award_float p{ margin-top:20px; } .award_float dl dd img{ height:40px; } .san dl dd img{ height:45px; } .wadiz dl dd img{ height:58px; } /* .kb .img_wrap:after{ position:absolute; left:30px; top:30px; content:''; width:80px; height:80px; background:url(/img/kb_mark.png) no-repeat center; background-size:100%; } */ .kb dl dd img{ height:36px; margin-left:-14px; } /* 연혁 */ .history_wrap .sub_title h1:before{ display:none; } .history_wrap .sub_title h1:after{ display:none; } .history{ position:relative; background:url(/img/history_bg_black.png) no-repeat center 65px; background-size:100%; font-weight:400; font-size:14px; line-height:23px; } .history:before{ position:absolute; top:0; left:50%; content:''; width:1px; height:100%; background:#242424; } .history h5{ position:relative; width:62px; height:62px; margin:0 auto; border-radius:100em; background:#333; font-weight:500; font-size:18px; line-height:62px; color:#fff; text-align:center; } .history h5.point{ background:#0c4ca3; } .history h5:before{ position:absolute; left:0; bottom:0; content:''; border-bottom:70px solid transparent; border-left:70px solid rgba(255,255,255,0.05); border-top:0px solid rgba(255,255,255,0.05); } .history ul{ overflow:hidden; padding:25px 0; } .history ul li{ position:relative; clear:both; width:50%; padding:5px 40px; } .history ul li:before{ position:absolute; left:-5px; top:13px; width:11px; height:11px; content:''; border-radius:100px; background:#242424; } .history ul li:after{ position:absolute; left:0; top:18px; width:25px; height:1px; content:''; background:#242424; } .history ul li:nth-child(odd){ float:right; } .history ul li:nth-child(even){ float:left; text-align:right; } .history ul li:nth-child(even):before{ left:auto; right:-6px; } .history ul li:nth-child(even):after{ left:auto; right:-1px; } .history ul.left_array li{ float:left; text-align:right; } .history ul.left_array li:before{ left:auto; right:-6px; } .history ul.left_array li:after{ left:auto; right:-1px; } .history ul li dl{ font-weight:300; font-size:18px; line-height:22px; } .history ul li dl dt{ color:#242424; font-weight:500; } .history ul.point li dl dt{ color:#0c4ca3; } .history ul li dl dd{ font-size:15px; font-weight:400; } /* 서브 본문 */ .kg_contents_wrap h4{ padding-top:20px; font-size:40px; font-weight:600; color:#5aa11e; } .kg_contents_wrap p{ margin-top:25px; font-size:18px; line-height:170%; } .kg_contents_wrap p.dot_txt{ position:relative; padding-left:24px; } .kg_contents_wrap p.dot_txt:before{ position:absolute; left:5px; top:11px; content:''; width:6px; height:6px; border-radius:100px; background:#333; } .kg_contents_wrap p.dot_txt b{ font-weight:500; } .kg_contents_wrap p.line_txt{ position:relative; margin-top:7px; font-size:16px; padding-left:25px; } .kg_contents_wrap p.line_txt:before{ position:absolute; left:10px; top:12px; content:''; width:4px; height:2px; background:#888; } .kg_contents_wrap .first_txt{ margin-top:0 !important; } .kg_contents_wrap > p{ margin:50px auto 30px; } .kg_contents_wrap p strong{ font-weight:500; } .business_wrap2{ text-align:center; } .business_wrap2 .img_wrap{ padding:35px 15px; border-top:none; border-radius:0; } .business_btn{ display:inline-block; margin:30px auto 0; width:100%; max-width:270px; background:#e9f4fa; border:1px solid #0067b4; color:#0067b4; border-radius:4px; font-size:16px; line-height:46px; font-weight:500; } .business_btn{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .business_btn:hover{ color:#fff; background-color:#0067b4; } .business_wrap3{ margin-bottom:100px; } .business_wrap3_2{ margin-bottom:85px; } .flexible_img_wrap{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; } .flexible_img_wrap li{} .flexible_img_wrap li > .img_wrap:hover img{ transform:scale(1.05); } /* 글로벌 > 진출 국가 */ /* 오시는길 */ #Location{ position:absolute; left:0; top:-80px; width:100%; } .location_block{ position:relative; } .location_wrap{ position:relative; overflow:hidden; } .location_wrap li{ position:relative; overflow:hidden; float:right; height:460px; } .location_block .location_wrap:nth-child(2) li{ height:625px; } .location_wrap li.location_map{ float:left; width:67%; border:1px solid #ddd; border-width:1px 0 1px 1px; } .location_wrap li iframe{ position:absolute; left:0; top:0; width:100%; height:100%; } .location_wrap li.location_txt{ width:33%; padding:50px 40px 0 40px; border:1px solid #ddd; background:#0b6fab url(/img/bg_pattern_01.png); background:#eceef2; } .location_wrap li.location_txt:before{ position:absolute; right:0; top:0; content:''; border-top:460px solid transparent; border-right:396px solid rgba(0,0,0,0.02); border-bottom:0px solid rgba(0,0,0,0.02); } .location_block .location_wrap:nth-child(2) li.location_txt:before{ border-right:480px solid rgba(0,0,0,0.02); } .location_wrap li dl{ position:relative; margin-bottom:32px; } .location_wrap li dl dt{ overflow:hidden; position:relative; padding:7px 0 20px 0; margin-bottom:25px; background:url(/img/logo.png) no-repeat left top; background-size:130px; border-bottom:1px dashed rgba(0,0,0,0.2); color:#242424; text-align:right; } .location_wrap li dl dt .img_wrap{ width:152px; border-radius:0; } .location_block .location_wrap:nth-child(4) li dl dt .img_wrap{ width:141px; } .location_wrap li dl dt .img_wrap span{ color:#005bac; font-weight:500; font-size:22px; margin-bottom:-5px; display:inline-block; letter-spacing:-0.5px; } .location_wrap li dl dt .img_wrap img{ /* max-height:100%; */ } .location_wrap li dl dt > span{ display:inline-block; font-weight:400; font-size:14px; color:rgba(0,0,0,0.8); } .location_wrap li dl dt:before{ /* display:block; content:''; width:100px; height:20px; background:url(/img/logo_w.png) no-repeat center; background-size:100%; */ } .location_wrap li dl dd{ padding-left:80px; margin-bottom:10px; font-weight:400; font-size:15px; line-height:22px; color:rgba(0,0,0,0.7); word-break:keep-all; } .location_wrap li dl dd strong{ margin-left:-80px; width:65px; display:inline-block; margin-right:11px; font-weight:500; color:rgba(0,0,0,0.9); } .location_wrap li > .img_wrap{ overflow:hidden; /* height:249px; */ border-radius:0; } /* .location_block .location_wrap:nth-child(5) li > .img_wrap{ height:165px; } .location_block .location_wrap:nth-child(5) li > .img_wrap img{ margin-top:-12px; } */ .location_block .location_wrap:nth-child(6) li > .img_wrap{ height:224px; } .location_block .location_wrap:nth-child(6) li > .img_wrap img{ margin-top:-40px; } .location_wrap li > .img_wrap:hover img{ transform:scale(1.05); } .location_wrap2{ } .location_block .location_wrap2 li.location_txt{ float:left; width:47.5%; padding-top:42px; margin-left:5%; } .location_block .location_wrap2 li:first-child{ margin-left:0; } .location_block .location_wrap2 li.location_txt:before{ border-right:570px solid transparent; } /* 전시장 안내 */ .showroom_block{} .showroom_wrap{} .showroom_wrap iframe{ width:100%; height:550px; } #Showroom{ position:absolute; left:0; top:-120px; margin:0; } .showroom_txt_wrap{ position:relative; margin:50px 0 0 0; /* padding-left:50px; border-left:1px solid #eee; */ } /* .showroom_txt_wrap:before{ position:absolute; left:-200px; top:0; content:''; width:250px; height:100%; background:url(/data/config/shop_logo.png) no-repeat 5px center; background-size:145px auto; } */ .showroom_txt_wrap div{ margin-top:20px; display:flex; align-items:center; width:100%; } .showroom_txt_wrap div dl{ display:flex; align-items:center; } .showroom_txt_wrap div dl dt{ position:relative; padding-left:34px; width:150px; font-size:18px; font-weight:600; line-height:30px; } .showroom_txt_wrap div dl dt:before{ position:absolute; left:0; top:0; content:''; width:30px; height:30px; background-size:auto 20px !important; } .showroom_txt_wrap div dl dd{ font-size:17px; line-height:30px; color:#333; word-break:keep-all; } .showroom_txt_wrap div dl dd a{ display:inline-block; color:#333; } .showroom_txt_wrap div dl dd a:hover{ color:#0067b4; } .showroom_txt_wrap div dl dd span{ display:inline-block; padding-left:15px; font-weight:300; font-size:15px; color:#888; } .showroom_txt dl{ } .showroom_txt dl.showroom_add{ width:60%; } .showroom_txt dl.showroom_tel{ width:40%; } .showroom_txt dl.showroom_tel dt{ width:20%; } .showroom_txt2 dl{ width:100%; } .showroom_txt2 dl dt{ } .showroom_txt2 dl dd{} dl.showroom_add dt:before{ background:url(/img/map_icon.png) no-repeat left center; } dl.showroom_tel dt:before{ background:url(/img/tel_icon.png) no-repeat left center; } dl.showroom_email dt:before{ background:url(/img/email_icon.png) no-repeat left center; } /* 메일 아이콘 */ .mail_icon_wrap{ text-align:center; } .mail_icon_wrap img{ height:70px; } /* 다음 지도 사용 시 */ .new_map{ padding:0 !important; border:none !important; border-radius:0 !important; border-bottom:1px solid #ccc !important; } .wrap_controllers.hide{ display:none !important; } .new_map .roughmap_lebel_text{ padding:5px 8px 6px !important; font-weight:400 !important; } /*------------------------------------ 제품소개 ------------------------------------*/ /* 제품소개 */ .product_block{ margin:0 auto; } .product_wrap{ position:relative; } .product_id{ position:absolute; left:0; top:-150px; width:100%; } .product_wrap .img_block{ position:relative; margin-bottom:70px; } .product_wrap .img_block a{ z-index:3; position:absolute; right:30px; bottom:30px; display:block; padding:0 30px; border-radius:4px; color:#fff; font-weight:500; font-size:20px; line-height:42px; background:#085392; } .product_wrap .img_block a{ -webkit-transition-duration:0.2s; -moz-transition-duration:0.2s; -o-transition-duration:0.2s; -ms-transition-duration:0.2s; transition-duration:0.2s; } .product_wrap .img_block a:hover{ background:#0b6fab; } .product_wrap .img_block:hover img{ transform:scale(1.05); } /* 제품소개 상세 스펙 */ /* .product_spec_wrap{ position:relative; margin:60px auto 0; padding:0 1% 0; } .product_spec_title{ position:relative; overflow:hidden; background:#f4f4f4; text-align:center; border-radius:4px 0 0 4px; } .product_spec_title h3{ float:left; min-width:175px; padding:0 3%; font-size:26px; font-weight:500; line-height:74px; color:#fff; background:#0b6fab; } .product_spec_title h4{ float:right; padding:0 3% 0 0; font-size:20px; line-height:74px; font-weight:400; } .product_spec_contents{ overflow:hidden; margin-top:20px; padding:0 0.5%; } .product_spec_contents li{ position:relative; float:left; width:49%; margin-left:2%; padding:18px 15px 16px 25px; font-size:17px; font-weight:300; border-bottom:1px dashed #ddd; } .product_spec_contents li:before{ position:absolute; left:12px; top:30px; content:''; width:4px; height:4px; border-radius:100px; background:#0b6fab; } .product_spec_contents li:nth-child(2n+1){ margin-left:0; } .one .product_spec_contents li{ float:none; width:100%; margin-left:0; } */ /* .product_spec_wrap.three div p{ width:32%; margin-left:2%; } .product_spec_wrap.three div p:nth-child(2n+1){ margin-left:2%; } .product_spec_wrap.three div p:nth-child(3n+1){ margin-left:0; } */ /* 추천환경 */ .environment_wrap{ position:relative; } .environment_id{ position:absolute; left:0; top:-210px; width:100%; } /*------------------------------------ 핵심기술 ------------------------------------*/ /* 주요기술 */ .img_row li .b_tilte{ } .img_row li .b_tilte li{ margin-top:3px; color:#555; font-weight:300; word-break:keep-all; } .img_row li .b_tilte.number_before li{ padding-left:90px; } .img_row li .b_tilte.number_before li:before{} .img_row li .b_tilte li b{ display:inline-block; width:76px; margin-left:-80px; font-weight:400; color:#333; } .skill_wrap li .img_wrap strong{ z-index:3; display:inline-block; position:absolute; left:0; bottom:0; padding:0 18px; color:rgba(255,255,255,0.7); background:rgba(0,0,0,0.3); font-weight:400; font-size:15px; line-height:28px; } .skill_wrap li .img_wrap:hover img{ transform:scale(1.05); } .skill_wrap .about_title{ padding:0 10px; margin:35px 0 0; } .skill_wrap .about_title h2{ font-size:26px; } .skill_wrap .about_title p{ margin-top:0; } .skill_wrap .img_row li ol{ margin-top:0; } /*------------------------------------ 콘텐츠 ------------------------------------*/ /* PR */ .img_float{ overflow:hidden; } .img_float a{ float:left; width:60%; display:block; } .img_float:hover a img{ transform:scale(1.05); } .img_float dl{ float:right; width:35%; padding:50px 15px 0; } .img_float h2{ margin:40px auto 30px; font-weight:500; } .img_float dl dd img{ height:65px; } .webtoon a div{ border:1px solid #ddd; } .webtoon dl dd img{ height:40px; } /*------------------------------------ new 연혁 ------------------------------------*/ .history_wrap2{ margin-top:30px; } .history2{ display:flex; justify-content:space-between; } .history2 dt{ padding-top:43px; font-size:32px; line-height:42px; font-weight:600; } .history2 dd{ width:75%; padding:30px 1px; border-bottom:6px solid #0067b4; } .history_wrap2 .history2:first-child dd{ border-top:6px solid #0067b4; } .history2 dd ul{} .history2 dd ul > li{ padding:8px 0; font-size:18px; line-height:170%; } .history2 dd ul li ol{ margin-top:5px; padding:5px 0 5px 5px; } .history2 dd ul li ol li{ position:relative; padding:5px 0 5px 15px; font-size:16px; font-weight:300; } .history2 dd ul li ol li:before{ position:absolute; left:0; top:50%; margin-top:-3px; content:''; width:4px; height:4px; border-radius:100px; background:#333; } .history2 dd ul li ol li img{ margin:0 20px; vertical-align:middle; } .history2 dd ul li b{ display:inline-block; font-weight:500; color:#0067b4; } .history_wrap2 .history2:last-child dd ul li b{ } .history2 dd > ul > li > p{ position:relative; padding-left:60px; font-size:18px; line-height:170%; } .history2 dd > ul > li > p > b{ position:absolute; left:1px; top:0; } .history2 dd > ul.long_data_history > li > p{ padding-left:115px; } .history2 dd > ul.long_data_history > li > p > b{ } .history_logo1 img{ height:29px; } .history_logo2 img{ height:17px; } .history_logo3 img{ height:19px; } .history_logo4 img{ height:16px; } .history_logo5 img{ height:27px; } .history_logo6 img{ height:17px; } .history_logo7 img{ height:24px; } .history_logo8 img{ height:28px; } .operation_bg{ margin-top:30px; padding:80px 100px; background:#f5f5f5; background:#f9fbfc url(/img/bg_pattern_01.png); text-align:center; } .operation_bg > h2{ position:relative; display:inline-block; padding:8px 60px; font-weight:600; font-size:32px; line-height:44px; color:#242424; } .operation_bg > h2:before{ position:absolute; left:0; top:0; content:''; width:21px; height:100px; background:url(/img/left_point.png) no-repeat center; } .operation_bg > h2:after{ position:absolute; right:0; top:0; content:''; width:21px; height:100px; background:url(/img/right_point.png) no-repeat center; } .operation_bg > h5{ position:relative; display:inline-block; padding:0 40px 0 35px; margin-bottom:10px; font-weight:600; font-size:36px; line-height:46px; font-style:italic; } .operation_bg > h5:before{ position:absolute; left:0; top:7px; content:''; width:22px; height:18px; background:url(/img/quotation_left.png) no-repeat; background-size:100%; } .operation_bg > h5:after{ position:absolute; right:2px; bottom:7px; content:''; width:22px; height:18px; background:url(/img/quotation_right.png) no-repeat; background-size:100%; } .kg_contents_wrap .operation_bg p{ font-size:18px; color:#555; } .profile_block .kg_contents_wrap:first-child{ margin-bottom:} /* 박스 shadow */ .shadow_box_wrap{ margin-top:30px; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; } .shadow_box_wrap li{ min-height:150px; border-radius:25px; border:1px solid #ddd; box-shadow:3px 3px 6px rgb(0 0 0 / 20%); display:flex; } .shadow_box_wrap li{ padding:25px 30px 33px; justify-content:center; align-items:center; } .shadow_box_wrap li p{ font-weight:500; margin-top:0; width:100%; color:#333; font-weight:300; } .shadow_box_wrap li p b{ display:block; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eee; color:#000; } .material_video .shadow_box_wrap li{ padding-top:25px; } .shadow_box_wrap.two{ grid-template-columns:repeat(2, 1fr); } .shadow_box_wrap.three{ grid-template-columns:repeat(3, 1fr); } .shadow_box_wrap.five{ grid-template-columns:repeat(5, 1fr); } .shadow_box_wrap.two li, .shadow_box_wrap.three li, .shadow_box_wrap.baseline_box li, .shadow_box_wrap.five li{ align-items:baseline; } .shadow_box_wrap.two li p, .shadow_box_wrap.three li p{ } .clients_map{ margin-top:100px; } .clients_block .shadow_box_wrap li p{ font-weight:400; } .shadow_box_wrap.logo{ } .shadow_box_wrap.logo li{ position:relative; } /* .shadow_box_wrap.logo li{ opacity:0.8; filter:grayscale(100%); } .shadow_box_wrap.logo li:hover{ opacity:1; filter:grayscale(0); } */ .shadow_box_wrap.logo li{ flex-direction:column; /* align-items:baseline; */ } .shadow_box_wrap.logo li span{ display:block; width:100%; /* min-height:56.8px; */ line-height:20px; font-size:15px; letter-spacing:-0.5px; font-weight:500; border-bottom:1px solid #ddd; margin-bottom:20px; padding-bottom:15px; } .shadow_box_wrap.logo li span small{ display:block; font-size:13px; font-weight:300; } .shadow_box_wrap.logo li p{ width:100%; height:110px; } .shadow_box_wrap.logo li p:first-child{ position:absolute; left:0; top:0; width:100%; height:100%; font-size:0; } .shadow_box_wrap.logo li.logo01 p{ background:url(/img/customers_img1.gif) no-repeat center; background-size:60%; } .shadow_box_wrap.logo li.logo02 p{ background:url(/img/customers_img2.png) no-repeat center; background-size:56%; } .shadow_box_wrap.logo li.logo03 p{ background:url(/img/customers_img3.png) no-repeat center; background-size:68%; } .shadow_box_wrap.logo li.logo04 p{ background:url(/img/customers_img4.png) no-repeat center; background-size:54%; } .shadow_box_wrap.logo li.logo05 p{ background:url(/img/customers_img5.png) no-repeat center; background-size:94%; } .shadow_box_wrap.logo li.logo06 p{ background:url(/img/customers_img6.png) no-repeat center; background-size:68%; } .shadow_box_wrap.logo li.logo07 p{ background:url(/img/customers_img7.png) no-repeat center; background-size:78%; } .shadow_box_wrap.logo li.logo08 p{ background:url(/img/customers_img8.png) no-repeat center; background-size:96%; } .shadow_box_wrap.logo li.logo09 p{ background:url(/img/customers_img9.jpg) no-repeat center; background-size:72%; } .shadow_box_wrap.logo li.logo10 p{ background:url(/img/customers_img10.png) no-repeat center; background-size:44%; } .shadow_box_wrap.logo li.logo11 p{ background:url(/img/customers_img11.png) no-repeat center; background-size:80%; } .shadow_box_wrap.logo li.logo12 p{ background:url(/img/customers_img12.png) no-repeat center; background-size:90%; } .shadow_box_wrap.logo li.logo13 p{ background:url(/img/customers_img13.png) no-repeat center; background-size:84%; } .shadow_box_wrap.logo li.logo14 p{ background:url(/img/customers_img14.png) no-repeat center; background-size:50%; } .shadow_box_wrap.logo li.logo15 p{ background:url(/img/customers_img15.png) no-repeat center; background-size:85%; } .shadow_box_wrap.logo li.d_logo01 p{ background:url(/img/domestic_img1.jpg) no-repeat center; background-size:89%; } .shadow_box_wrap.logo li.d_logo02 p{ background:url(/img/domestic_img2.jpg) no-repeat center; background-size:86%; } .shadow_box_wrap.logo li.d_logo03 p{ background:url(/img/domestic_img3.jpg) no-repeat center; background-size:68%; } .shadow_box_wrap.logo li.d_logo04 p{ background:url(/img/domestic_img4.jpg) no-repeat center; background-size:76%; } .shadow_box_wrap.logo li.d_logo05 p{ background:url(/img/domestic_img5.gif) no-repeat center; background-size:50%; } .shadow_box_wrap.logo li.d_logo06 p{ background:url(/img/domestic_img6.jpg) no-repeat center; background-size:84%; } .shadow_box_wrap.logo li.d_logo07 p{ background:url(/img/domestic_img7.png) no-repeat center; background-size:59%; } .shadow_box_wrap.logo li.d_logo08 p{ background:url(/img/domestic_img8.jpg) no-repeat center; background-size:66%; } .shadow_box_wrap.logo li.d_logo09 p{ background:url(/img/domestic_img9.jpg) no-repeat center; background-size:64%; } .shadow_box_wrap.logo li.d_logo10 p{ background:url(/img/domestic_img10.jpg) no-repeat center; background-size:59%; } .shadow_box_wrap.logo li.d_logo11 p{ background:url(/img/domestic_img11.jpg) no-repeat center; background-size:46%; } .shadow_box_wrap.logo li.o_logo01 p{ background:url(/img/overseas_img1.jpg) no-repeat center; background-size:54%; } .shadow_box_wrap.logo li.o_logo02 p{ background:url(/img/overseas_img2.jpg) no-repeat center; background-size:84%; } .shadow_box_wrap.logo li.o_logo03 p{ background:url(/img/overseas_img3.jpg) no-repeat center; background-size:100%; } .shadow_box_wrap.logo li.o_logo04 p{ background:url(/img/overseas_img4.jpg) no-repeat center; background-size:68%; } .shadow_box_wrap.logo li.o_logo05 p{ background:url(/img/overseas_img5.jpg) no-repeat center; background-size:42%; } .shadow_box_wrap.logo li.o_logo06 p{ background:url(/img/overseas_img6.jpg) no-repeat center; background-size:42%; } .shadow_box_wrap.logo li.o_logo07 p{ background:url(/img/overseas_img7.jpg) no-repeat center; background-size:64%; } .shadow_box_wrap.logo li.o_logo08 p{ background:url(/img/overseas_img8.jpg) no-repeat center; background-size:100%; } .f_logo_wrap{ } .f_logo_wrap li{ display:flex; margin-top:50px; } .f_logo_wrap li div{ min-height:150px; width:30%; box-shadow:3px 3px 6px rgb(0 0 0 / 20%); border:1px solid #ddd; border-radius:25px; padding:25px 30px 33px; justify-content:center; align-items:center; } .f_logo_wrap li p{ padding:15px 0 15px 50px; font-weight:500; margin-top:0; width:100%; color:#333; font-weight:300; } .f_logo_wrap li p b{ display:block; padding-bottom:10px; margin-bottom:10px; font-size:22px; border-bottom:1px solid #eee; color:#000; } .f_logo_wrap li.f_logo01 div{ background:url(/img/customers_img9.jpg) no-repeat center; background-size:58%; }/* 신우 */ .f_logo_wrap li.f_logo02 div{ background:url(/img/customers_img10.png) no-repeat center; background-size:35%; }/* 휴온스 */ .f_logo_wrap li.f_logo03 div{ background:url(/img/customers_img11.png) no-repeat center; background-size:64%; }/* 에디슨테크 */ .f_logo_wrap li.f_logo04 div{ background:url(/img/customers_img13.png) no-repeat center; background-size:71%; }/* Winnercom */ .f_logo_wrap li.f_logo05 div{ background:url(/img/customers_img14.png) no-repeat center; background-size:36%; }/* central */ .f_logo_wrap li.f_logo06 div{ background:url(/img/customers_img15.png) no-repeat center; background-size:70%; }/* Neuromeka */ .f_logo_wrap li.f_logo07 div{ background:url(/img/sambo_logo.jpg) no-repeat center; background-size:67%; }/* 삼보 */ .f_logo_wrap li.f_logo08 div{ background:url(/img/woojin_logo.png) no-repeat center; background-size:37%; }/* 우진 */ .f_logo_wrap li.f_logo09 div{ background:url(/img/customers_img12.png) no-repeat center; background-size:72%; }/* 에디슨모더 */ .three_box_wrap{ margin:50px auto 30px; display:grid; grid-template-columns:repeat(2, 1fr); gap:40px; text-align:center; } .three_box_wrap div{ border:1px solid #ddd; border-radius:25px; box-shadow:3px 3px 6px rgb(0 0 0 / 20%); } .three_box_wrap div img{ width:100% !important; } .three_box_wrap div span{ display:block; line-height:60px; } .three_box_wrap.one{ grid-template-columns:repeat(1, 1fr); } .three_box_wrap.one div img{ width:auto !important; } .three_box_wrap.shadow_none{} .three_box_wrap.shadow_none div{ border:none; border-radius:0; box-shadow:none; } .three_box_wrap.shadow_none div span{ line-height:120%; margin-top:20px; } .three_box_wrap.one.shadow_none div{ padding:30px 15px; border:1px solid #ddd; } .three_box_wrap.one.shadow_none img{ max-height:500px; } .three_box_wrap.one.shadow_none.seven_height img{ max-height:100%; } /*------------------------------------ Material ------------------------------------*/ /* 영상 */ .company_video_wrap { margin:0 auto; } .company_video{ overflow:hidden; position:relative; width:100%; height:0; margin-top:30px; padding-bottom:56.25%; padding-top:30px; } .company_video iframe, .company_video object, .company_video embed { position:absolute; top:0; left:0; width:100%; height:100%; } .material_block{ } .kg_contents_wrap{ margin-top:40px; } .profile_block > .kg_contents_wrap:nth-of-type(1), .solution_block > .kg_contents_wrap:nth-of-type(1), .reference_block > .kg_contents_wrap:nth-of-type(1), .technology_block > .kg_contents_wrap:nth-of-type(1), .clients_block > .kg_contents_wrap:nth-of-type(1){ margin-top:0; } /* div > .kg_contents_wrap:nth-of-type(1){ margin-top:0; } */ .material_block .kg_contents_wrap:first-child{ margin-top:0; } .material_block .material_video li{ padding-top:50px; } .material_block .float_box .material_video li{ padding-top:50px; } .material_block .float_box:last-child .material_video:last-child{ margin-top:40px; } .material_block .float_box:last-child .float_left:nth-child(3){ margin-top:55px; } .kg_contents_wrap h4{ padding-top:20px; font-size:36px; font-weight:600; color:#0067b4; } .kg_contents_wrap p{ margin-top:25px; font-size:18px; line-height:170%; } .kg_contents_wrap p.dot_txt{ position:relative; padding-left:24px; } .kg_contents_wrap p.dot_txt:before{ position:absolute; left:5px; top:11px; content:''; width:6px; height:6px; border-radius:100px; background:#333; } .kg_contents_wrap p.dot_txt b{ font-weight:500; } .kg_contents_wrap p.line_txt{ position:relative; margin-top:7px; font-size:16px; padding-left:25px; } .kg_contents_wrap p.line_txt:before{ position:absolute; left:10px; top:12px; content:''; width:4px; height:2px; background:#888; } .kg_contents_wrap > p{ margin:20px auto 20px; } .material_video{ position:relative; } .material_video:after{ display:block; content:''; clear:both; } .material_video li{ padding-top:70px; } .material_video li strong{ position:relative; display:block; padding:0 0 5px 24px; font-size:26px; font-weight:500; } /* .material_video li strong:before{ position:absolute; left:0; top:14px; content:''; width:6px; height:6px; border-radius:100px; background:#333; } */ .material_video li strong:before{ position:absolute; left:0; top:9px; content:''; width:7px; height:23px; border-radius:4px; background:#0067b4; } .material_video li > b{ display:block; margin-top:30px; font-weight:500; } .material_video > li > b:nth-of-type(1){ margin-top:15px; } .reference_block .kg_contents_wrap h4 span{ display:block; font-size:38px; } .material_video.two li{ float:left; width:48%; margin-left:4%; } .material_video.two li:nth-child(2n+1){ margin-left:0; } .material_video.two li strong{ padding-left:22px; min-height:78.7px; font-size:22px; } .material_video.two li strong:before{ top:8px; width:7px; height:20px; } .material_inside_video{ display:flex; gap:20px 50px; align-content:space-between; } .material_inside_video li{ overflow:hidden; width:50%; margin-top:35px; padding-top:0; background:#fff; border:1px solid #ddd; box-shadow:3px 3px 6px rgb(0 0 0 / 20%); border-radius:20px; } .material_inside_video li p{ min-height:102px; padding:20px 30px; font-weight:400; } .material_inside_video li p span{ display:inline-block; margin-right:3px; font-weight:500; color:#0067b4; } .material_inside_video .company_video{ margin-top:0; } .kg_contents_wrap .product_txt_wrap p.dot_txt{ margin-top:50px; } .kg_contents_wrap .product_txt_wrap p.dot_txt:nth-of-type(2){ margin-top:70px; } .float_box{ } .float_box:after{ display:block; content:""; clear:both; } .float_box .float_left{ float:left; width:48%; clear:both; } .float_box .float_left p{ line-height:200%; } .float_box .float_left p{ margin-top:35px; } .float_box .float_left p.dot_txt:before{ top:14px; } .float_box .material_video{ float:right; width:48%; } .float_box .material_video:nth-of-type(1){ padding-top:68px; } .float_box .material_video li strong{ padding-left:22px; font-size:22px; } .float_box .material_video li strong:before{ top:8px; width:7px; height:20px; } .float_img_box{ padding:0 25px; } .float_img_box:after{ display:block; content:''; clear:both; } .float_img_box_left{ float:left; width:55%; } .kg_contents_wrap .float_img_box_left p.dot_txt{ color:#0067b4; font-weight:500; } .kg_contents_wrap .float_img_box_left p.dot_txt:before{ background:#0067b4; } .float_img_box_left span, .sup_span{ display:block; padding-left:25px; margin-top:50px; color:#555; font-size:14px; } .float_img_box_left span sup, .sup_span sup{ margin-left:-16px; vertical-align:0; } .float_img_box_left span a, .sup_span a{ color:#0067b4; } .float_img_box_left span b, .sup_span b{ font-weight:500; } .float_img_box .img_wrap{ margin-top:25px; float:right; width:40%; text-align:center; } .float_img_box .img_wrap span{ display:block; margin-top:20px; } .margin_top_m .float_img_box_left{ margin-top:50px; } .margin_top_m.float_img_box .img_wrap{ margin-top:-50px; } .img_box_two{ margin-top:-30px; } .img_box_two:after{ display:block; content:''; clear:both; } .img_box_two li{ float:left; width:48%; margin-left:4%; padding-top:50px; } .img_box_two li:nth-child(2n+1){ margin-left:0; clear:both; } .img_box_two li .img_wrap{ margin-top:20px; } .img_box_two.line li .img_wrap{ padding:20px; border:1px solid #ddd; } .img_box_two.other_title li p{ padding-left:20px; position:relative; } .img_box_two.other_title li b{ display:block; margin-bottom:5px; font-weight:500; font-size:20px; } .img_box_two.other_title li b:before{ position:absolute; left:0; top:13px; content:''; display:inline-block; width:6px; height:6px; border-radius:100px; background:#0067b4; } .module_box_wrap{ margin-top:30px; display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; } .module_box_wrap dl{ box-shadow:3px 3px 6px rgb(0 0 0 / 20%); border-radius:4px; } .module_box_wrap dl{ } .module_box_wrap dl dt{ position:relative; padding:15px 0; font-size:18px; font-weight:500; text-align:center; color:#fff; background:#0067b4; border-radius:4px 4px 0 0; } .module_box_wrap dl:last-child dt{ background:#084172; } .module_box_wrap dl dt span{ display:block; font-weight:300; font-size:14px; } .module_box_wrap dl dt b{ display:inline-block; position:absolute; right:15px; top:15px; font-weight:400; font-size:13px; } .module_box_wrap dl dd{ position:relative; /* min-height:253px; */ padding:25px 30px 30px; line-height:170%; /* border:1px solid #ddd; */ border-width:0 1px 1px 1px; color:#333; border-radius:0 0 4px 4px; font-weight:300; } .module_box_wrap dl dd b{ display:block; margin-bottom:15px; text-align:center; background:#0067b4; color:#fff; font-size:13px; line-height:24px; border-radius:4px; font-weight:300; } .module_box_wrap dl dd b.pre_txt{ background:#e14337; } .module_box_wrap dl dd p{ margin-top:5px !important; padding-left:20px; } .module_box_wrap dl dd p span{ margin-left:-19px; } .module_box_wrap dl dd p:nth-of type(1){ margin-top:0 !important; } .package_box_wrap{ margin-top:30px; display:flex; justify-content:space-between; } .package_box_wrap dl{ margin-left:30px; width:100%; padding-bottom:30px; border:1px solid #ddd; box-shadow:3px 3px 6px rgb(0 0 0 / 20%); border-radius:4px; text-align:center; } .package_box_wrap dl:first-child{ margin-left:0; } .package_box_wrap dl dt{ padding:15px 0; font-size:18px; letter-spacing:-0.5px; font-weight:500; background:#fff; border-bottom:2px dotted #ddd; } .package_box_wrap dl dd{ padding:10px 30px 0; } .package_box_wrap dl dd p{ margin-top:15px !important; padding:5px 0; background:#0067b4; color:#fff; font-weight:400; font-size:14px; border-radius:4px; } .package_box_wrap dl dd p.background_y{ color:#0067b4; background:#f1eea6; } .package_box_wrap dl dd span.plus_icon{ display:block; margin-top:15px; height:33.8px; font-size:24px; font-weight:600; line-height:33.8px; } .package_box_wrap dl dd span.plus_icon{ font-size:0; background:url(/img/plus_icon.png) no-repeat center; background-size:auto 70%; } .package_box_wrap dl:nth-child(2){ background:#ffffdd; } .package_box_wrap dl:nth-child(2) dt{ background:#ffffdd; } .package_box_wrap dl:nth-child(3){ background:#f9f9f9; } .package_box_wrap dl:nth-child(3) dt{ background:#f9f9f9; } .package_box_wrap dl:nth-child(4){ background:#f2f9f1; } .package_box_wrap dl:nth-child(4) dt{ background:#f2f9f1; } .package_box_wrap dl:nth-child(5){ background:#eceef9; } .package_box_wrap dl:nth-child(5) dt{ background:#eceef9; } @media(max-width:1700px){ .middle_wrap .logo{ left:15px; } .header_center .top_wrap .right{ right:15px; } .navbar_center .top_menu{ padding-left:0; display:inline-block; } .quick_menu_wrap{ right:15px; } } @media all and (min-width: 1501px) and (max-width: 1699px) { .depth_flow.box_wrap .box .txt {height:250px;} } @media all and (min-width: 1201px) and (max-width: 1500px) { .depth_flow.box_wrap .box .txt {height:220px;} } @media(max-width:1500px){ .navbar_center .top_menu > li{ padding:0 15px; } .navbar_center .top_menu > li .depth_1{ padding:1px 15px 0; } } @media(max-width:1450px){ .middle_wrap .logo{ left:15px; } .navbar_center .top_menu{ margin-left:20px; } .navbar_center .top_menu > li.store_menu{ margin-left:0; } .lnbTop_wrap{ padding:0 15px; } /* .subVisual { margin:15px 15px 0; } */ .header_center .top_wrap .right{ } footer.footer_center .centerWrap{ padding:0 15px; } .quick_menu_wrap{ top:auto; bottom:15px; height:135px; } .quick_menu_wrap.headroom{ top:auto; bottom:-100%; } .quick_menu_wrap.headroom.headroom-hidden{ top:auto; bottom:15px; } .quick_menu_wrap ul li{ display:none; } .quick_menu_wrap ul li:nth-child(3){ display:block; } .quick_menu_wrap ul li:nth-child(3) a{ border-top:none; } .quick_menu_wrap ul li a{ width:64px; height:64px; background:#0067b4; border-radius:100px; } .quick_menu_wrap ul li a:hover{ background:#085392; } .quick_menu_wrap ul li a span{ font-size:0; } .quick_menu_wrap ul li a span:before{ margin-bottom:0; } .quick_tel span:before{ background-size:auto 25px; } .eb-top{ margin-top:7px !important; } .eb-top p{ font-size:14px; } .eb-top p span:before{ width:6px; height:6px; margin-left:-3px; } #logo{ left:15px; } #gnb{ padding-left:0; text-align:center; } #gnb .gnb_wrap{ display:inline-block; } } @media(max-width:1300px){ .navbar_center .top_menu > li{ padding-right:12px; padding-left:12px; } .navbar_center .top_menu > li .depth_1{ padding-right:12px; padding-left:12px; font-size:18px; } }