@charset "utf-8";
/* 당근고양이 'ㅅ' */

/* 초기화 */
@import url("default.css");

/* 기본 레이아웃 */
html, body {width:100%; overflow-x:hidden; word-break:keep-all;}
input.text,
select.text,
textarea.text {border:#ddd 1px solid; outline:0; background:#fff; transition:.2s linear;}
input.text,
select.text {height:30px;}
input.text {padding:0 10px;}
textarea.text {padding:10px;}
input.text:focus,
select.text:focus,
textarea.text:focus {border-color:#aaa;}
body.ie select.text {padding:0 0 0 0 !important; background:none;}
button,input,a {transition:.2s linear;}
a.smoth {scroll-behavior:smooth;}
.imgin img {position:absolute; top:50%; left:50%; width:auto; height:auto; max-width:100%; max-height:100%; transform:translate(-50%,-50%);}

.inner {width:100%; max-width:1760px; margin:0 auto;}
span.br {display:block;}
.mo_vw {display:none !important;}

.red {color:#f00 !important;}
.blue {color:#20427b !important;}

/* 익스 브라우저 사용시 */
.ie_wrap {display:none; font-family:'Noto Sans Korean', sans-serif;}
.ie_wrap .outbox {position:fixed; top:0; left:0; width:100%; height:100%; background:#f286af; display:table; table-layout:fixed; z-index:1000;}
.ie_wrap .inbox {display:table-cell; vertical-align:middle;}
.ie_wrap p {font-size:19px; color:#fff; font-weight:500; line-height:30px; text-align:center; margin-bottom:20px; text-shadow:rgba(0,0,0,.2) 0 0 10px;}
.ie_wrap .link {text-align:center; font-size:0;}
.ie_wrap .link a {display:inline-block; vertical-align:top; font-size:60px; color:#fff; margin:0 40px; text-shadow:rgba(0,0,0,.1) 0 0 10px;}
body.ie {overflow:hidden;}
body.ie .ie_wrap {display:block;}

/* 게시판 목록 */
.board_list {border-top:#333 1px solid;}
.board_list th,
.board_list td {height:59px; text-align:center; border-bottom:#ddd 1px solid;}
.board_list th {font-size:17px; color:#333;}
.board_list td {font-size:16px; color:#898989;}
.board_list td.tal a {display:inline-block; vertical-align:top; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.board_list .w1 {width:110px;}
.board_list .w2 {width:140px;}
.board_list .w3 {width:120px;}
.board_list td i.file {display:block; width:20px; height:48px; background:url('/images/icon_file.png') no-repeat 50% 50% / contain; margin:0 auto;}

.board_bottom .btns {overflow:hidden; margin-top:40px; display:flex; justify-content:center; gap:10px;}
.board_bottom .btns .btn {width:130px; height:50px; line-height:50px; background:#000; font-size:17px; color:#fff; text-align:center; border:0; vertical-align:top; border-radius:25px;}
.board_bottom .btns .btn_l {color:#000; line-height:48px; border:#000 1px solid; background:#fff;}
.board_bottom .paging {text-align:center; font-size:0; margin-top:50px;}
.board_bottom .paging a {display:inline-block; width:34px; height:34px; line-height:32px; text-align:center; border:#ddd 1px solid; font-size:13px; color:#999; vertical-align:top; margin:0 1px;}
.board_bottom .paging a.on {background:#000; color:#fff; border-color:#000;}
.board_bottom .paging .arrow {font-size:0; margin:0 2px;}
.board_bottom .search_wrap {text-align:center; font-size:0; margin-top:20px;}
.board_bottom .search_wrap .text,
.board_bottom .search_wrap .btn {display:inline-block; vertical-align:top; height:40px; font-size:15px;}
.board_bottom .search_wrap .text {line-height:38px;}
.board_bottom .search_wrap select.text {width:100px;}
.board_bottom .search_wrap input.text {width:300px; margin:0 10px;}
.board_bottom .search_wrap .btn {width:120px; line-height:40px; border:0; background:#0e5ba2; color:#fff; font-weight:bold; text-align:center;}

/* 게시판 상세 */
.board_in {border-top:#333 1px solid;}
.board_in th,
.board_in td {text-align:left; padding:10px 0; border-bottom:#ddd 1px solid; word-break:break-all;}
.board_in td {color:#666;}
.board_in thead th {font-size:24px; color:#333; font-weight:700; line-height:30px; padding:25px 20px; text-align:center;}
.board_in thead td .flex {display:flex; justify-content:space-between;}
.board_in thead td .file {width:calc(100% - 200px); display:flex; font-size:18px; line-height:40px;}
.board_in thead td .file dt {width:110px; color:#333;}
.board_in thead td .file dd {width:calc(100% - 110px); color:#898989;}
.board_in thead td .date {width:200px; font-size:16px; color:#898989; line-height:40px; text-align:right;}
.board_in thead td span {display:inline-block; vertical-align:top; font-size:15px; line-height:26px; padding:10px;}
.board_in tbody td {padding:20px 0;}
.board_in tfoot td {position:relative; padding-left:80px; font-size:15px; line-height:26px;}
.board_in tfoot td em {position:absolute; top:10px; left:10px;}
.board_in tfoot td a {display:block;}
.board_write .w1 {width:140px;}
.board_write tbody td {padding:10px;}

/* 갤러리 목록 */
.gall_list {overflow:hidden; margin-top:-10px;}
.gall_list li {float:left; width:calc((100% - 20px)/3); margin:10px 0 0 10px;}
.gall_list li:nth-child(3n-2) {margin-left:0; clear:both;}
.gall_list li a {display:block;}
.gall_list li i {display:block; width:100%; height:240px; overflow:hidden;}
.gall_list li p {display:block; height:30px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* 접근성 */
.blind_link {position:fixed; top:0; left:0; width:100%; z-index:101;}
.blind_link a {position:fixed; top:0; left:0; width:100%; height:0; font-size:20px; color:#fff; font-weight:500; line-height:60px; text-align:center; background:#999e; overflow:hidden;}
.blind_link a:focus {height:auto;}

/* header */
.header {position:fixed; top:0; left:0; width:100%; z-index:100; background:#fff; transition:.2s linear;}
.header.fixed {box-shadow:rgba(0,0,0,.1) 0 0 10px;}
.header .inner {position:relative; height:100px;}
.header .logo {position:absolute; top:0; left:0; line-height:100px; z-index:1; font-size:0;}
.header h1 {display:none;}
.header .gnb ul {display:flex; justify-content:center;}
.header .gnb li {position:relative;}
.header .gnb li > a {display:block; font-size:22px; color:#222; font-weight:500; line-height:100px; padding:0 40px;}
.header .snb {position:absolute; top:100px; left:50%; width:220px; background:#fff; transform:translate(-50%,0); height:0; overflow:hidden; transition:.2s linear;}
.header .snb a {display:block; font-size:16px; color:#222; font-weight:300; line-height:50px; text-align:center;}
.header .abso {position:absolute; top:25px; right:80px; width:150px; height:50px; line-height:50px; font-size:18px; color:#fff; font-weight:700; text-align:center; background:#20427b; border-radius:25px; font-family:'Play';}

/* footer */
.footer {background:#302f35; padding:75px 0 80px;}
.footer .inner {position:relative;}
.footer .flogo {margin-bottom:50px;}
.footer .address {display:flex; flex-wrap:wrap; gap:10px 30px; color:#aaa;}
.footer .address strong {font-size:18px; line-height:30px;}
.footer .address span {font-size:14px; line-height:26px;}
.footer .copy {font-size:15px; color:#666; line-height:1; padding-top:20px; margin-top:20px; border-top:rgba(255,255,255,.17) 1px solid;}
.footer .cs_center {position:absolute; bottom:80px; right:0; text-align:center;}
.footer .cs_center i {display:block; width:100%; height:35px; background:url('/images/icon_tel.png') no-repeat 50% 50% / contain;}
.footer .cs_center p {font-size:20px; color:#ada2a1; margin:13px 0;}
.footer .cs_center strong {display:block; font-size:30px; color:#fff; font-weight:700; line-height:1;}

/* main */
.mvisual {position:relative; margin-top:100px;}
.mvisual .slick-slide {font-size:0;}
.mvisual .slick-dots {position:absolute; bottom:20px; left:0; width:100%; display:flex; justify-content:center;}
.mvisual .slick-dots li {margin:0 4px;}
.mvisual .slick-dots li button {display:block; font-size:0; width:10px; height:10px; border:#525252 1px solid; border-radius:50%;}
.mvisual .slick-dots li.slick-active button {background:#525252;}

.mcon .title {text-align:center; line-height:1; margin-bottom:70px;}
.mcon .title strong {font-size:48px; color:#20427b; font-family:'Play';}
.mcon .title p {font-size:18px; color:#222; margin-top:20px;}

.m_product {padding:140px 0 140px;}
.mproduce_slide {position:relative; margin:0 -27px;}
.mproduce_slide .slick-slide {padding:0 27px;}
.produce_list a {position:relative; display:block; border:#ececec 1px solid; padding:15px 0 15px; text-align:center; border-radius:10px;}
.produce_list .img {width:100%; height:auto; display:flex; justify-content:center; align-items:center;}
.produce_list p {font-size:18px; color:#222; line-height:20px; margin-top:55px;}
.produce_list i {position:absolute; top:20px; right:20px; width:32px; height:32px; border:#ddd 1px solid; border-radius:50%;background:#fff;}
.produce_list i:before,
.produce_list i:after {content:""; position:absolute; top:50%; left:50%; background:#20427b; transform:translate(-50%,-50%);}
.produce_list i:before {width:12px; height:2px;}
.produce_list i:after {width:2px; height:12px;}
.mproduce_slide .slick-arrow {position:absolute; top:-128px; width:54px; height:54px; background:url('/images/arrow_slide.png') #20427b no-repeat 50% 50%; border-radius:50%; border:0; font-size:0; z-index:1;}
.mproduce_slide .slick-prev {right:92px;}
.mproduce_slide .slick-next {right:27px; transform:rotate(180deg);}

.m_category {background:url('/images/bg_m_category.jpg') no-repeat 50% 100% / cover; padding:140px 0 140px;}
.m_category .links {display:flex; flex-wrap:wrap; gap:34px 30px;}
.m_category .links a {position:relative; width:calc((100% - 90px)/4); height:90px; border:#d7d7d7 1px solid; border-radius:5px; display:flex; align-items:center; padding:0 28px; background:#fff; font-size:18px; color:#222; font-weight:700; box-shadow:rgba(94,94,94,.13) 3px 4px 9px;}
.m_category .links i {position:absolute; top:calc(50% - 16px); right:20px; width:32px; height:32px; border:#ddd 1px solid; border-radius:50%;}
.m_category .links i:before,
.m_category .links i:after {content:""; position:absolute; top:50%; left:50%; background:#20427b; transform:translate(-50%,-50%);}
.m_category .links i:before {width:12px; height:2px;}
.m_category .links i:after {width:2px; height:12px;}

.m_customer {padding:140px 0;}
.m_customer .title {margin-bottom:110px;}
.m_customer .flex {display:flex; gap:14px;}
.m_customer .boards {width:770px;}
.m_customer .boards .jq_tab {display:flex; gap:70px; margin-bottom:30px;}
.m_customer .boards .jq_tab li {position:relative; font-size:26px; color:#999; font-weight:500; line-height:38px; cursor:pointer; transition:.2s linear;}
.m_customer .boards .jq_tab li:before {content:"/"; position:absolute; top:0; left:-70px; width:70px; text-align:center; color:#999; font-weight:500;}
.m_customer .boards .jq_tab li:first-child:before {display:none;}
.m_customer .boards .jq_tab li.on {color:#20427b; font-weight:700;}
.m_customer .boards .cont {position:relative;}
.m_customer .boards .more {position:absolute; top:-68px; right:0; width:38px; height:38px; background:#20427b; border-radius:50%;}
.m_customer .boards .more:before,
.m_customer .boards .more:after {content:""; position:absolute; top:50%; left:50%; background:#fff;}
.m_customer .boards .more:before {width:15px; height:1px; margin:0px 0 0 -7px;}
.m_customer .boards .more:after {width:1px; height:15px; margin:-7px 0 0 0px;}
.m_customer .boards .list {border-top:#666 2px solid;}
.m_customer .boards .list a {position:relative; display:block; font-size:17px; color:#222; line-height:58px; border-bottom:#ddd 1px solid; padding:0 80px 0 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.m_customer .boards .list a .date {position:absolute; top:0; right:0; width:80px; text-align:center; font-size:15px; color:#999; font-weight:300;}
.m_customer .links {width:calc(100% - 784px); display:flex; gap:32px;}
.m_customer .links a {width:calc((100% - 64px)/3); height:366px; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.m_customer .links i {display:block; width:136px; height:136px; background:#fff no-repeat 50% 50%; border-radius:50%; margin:0 auto 40px; box-shadow:inset #f1f1f1 0 8px 0;}
.m_customer .links p {font-size:26px; color:#fff; font-weight:700; text-align:center;}
.m_customer .links .i1 {background:#20427b;}
.m_customer .links .i1 i {background-image:url('/images/icon_m_customer01.png');}
.m_customer .links .i2 {background:#3e629e;}
.m_customer .links .i2 i {background-image:url('/images/icon_m_customer02.png');}
.m_customer .links .i3 {background:#326195;}
.m_customer .links .i3 i {background-image:url('/images/icon_m_customer03.png');}

/* sub */
.container {display:flex; margin-top:100px; min-height:calc(100vh - 100px); font-size:16px; color:#222; line-height:25px; font-weight: 500;}
.container .aside {position:relative; width:370px; background:#f3f4f8;}
.container .aside .home,
.container .aside .g dd,
.container .aside .s dt {display:none;}
.container .aside .g dt {font-size:41px; color:#20427b; font-weight:700; line-height:40px; padding:50px 0 50px 50px;}
.container .aside .g dt .pc_vw {font-family:'play';}
.container .aside .s dd a {display:block; font-size:18px; color:#222; line-height:26px; margin-bottom:20px; padding-left:50px;}
.container .aside .s dd a:last-child {margin-bottom:0;}
.container .aside .s dd a.on {color:#20427b; font-weight:500;}
.container .contents {width:calc(100% - 370px); padding:50px 140px 100px 50px;}
.container .title {position:relative; font-size:25px; color:#20427b; font-weight:700; line-height:28px; margin-bottom:50px;}
.container .title .locat {position:absolute; top:0; right:0; display:flex;}
.container .title .locat i.home {width:15px; height:15px; background:url('/images/icon_home.png') no-repeat 50% 50% / contain;}
.container .title .locat em {width:50px; height:15px; background:url('/images/arrow_locat.png') no-repeat 50% 50%;}
.container .title .locat span {font-size:14px; color:#222; font-weight:300; line-height:15px;}

label.check {position:relative; display:block; font-size:16px; color:#898989; line-height:18px; padding-left:28px;}
label.check input {display:none;}
label.check i {position:absolute; top:0; left:0; width:18px; height:18px; border:#ddd 1px solid;}
label.check i:before {content:""; position:absolute; top:50%; left:50%; width:0; height:0; background:#20427b; transform:translate(-50%,-50%); transition:.2s linear;}
label.check input:checed + i:before {width:12px; height:12px;}

/* 인사말 */
.greeting .ibox {font-size:24px; color:#fff; line-height:35px; background:url('/images/bg_greeting.jpg') no-repeat 50% 50% / cover; margin-bottom:50px; width:100%; height:460px; display:flex; justify-content:center; align-items:center; text-align:center;}
.greeting .ibox strong {font-size:29px;}

/* 연혁 */
.history {position:relative;}
.history:before {content:""; position:absolute; top:10px; left:10px; width:1px; height:calc(100% - 20px); background:#ccc;}
.history dl {position:relative; margin-top:100px;}
.history dl:first-child {margin-top:0;}
.history dl:last-child:after {content:""; position:absolute; bottom:0; left:10px; width:1px; height:100%; background:#fff;}
.history dt {position:relative; padding-left:30px; font-size:24px; color:#222; font-weight:700; line-height:21px; z-index:1;}
.history dt:before,
.history dt:after {content:""; position:absolute; border-radius:50%; background:#20427b;}
.history dt:before {top:0; left:0; width:21px; height:21px; opacity:.22;}
.history dt:after {top:6px; left:6px; width:9px; height:9px;}
.history dd {padding-left:35px;}
.history ul {margin-top:25px;}
.history li {position:relative; padding-left:45px; font-size:16px; color:#222; line-height:30px;}
.history span {position:absolute; top:0; left:0;}

/* 납품실적 */
.tbl tr > * {border:#ddd 1px solid;}
.tbl tr > *:first-child {border-left:0;}
.tbl tr > *:last-child {border-right:0;}
.tbl thead th {font-size:16px; color:#fff; background:#20427b; text-align:center; height:58px;}
.tbl tbody td {font-size:14px; color:#222; height:64px; padding-left:20px; letter-spacing:-.5px;}
.tbl .w1 {width:24%;}
.tbl .w2 {width:31%;}
.tbl .w3 {width:15%;}

/* 찾아오시는 길 */
.map_wrap {margin-bottom:50px;}
.root_daum_roughmap {max-width:100%;}
.map_text {display:flex; justify-content:space-between;}
.map_text li {position:relative; flex:1 1 auto; padding-left:55px;}
.map_text li i {position:absolute; top:0; left:0; width:45px; height:45px; border-radius:50%; overflow:hidden; background:no-repeat 50% 50% / contain;}
.map_text li .tt {font-size:17px; color:#222; font-weight:700; line-height:22px;}
.map_text li p {font-size:17px; color:#666; line-height:17px; margin-top:6px;}
.map_text li.c1 i {background-image:url('/images/icon_map01.png');}
.map_text li.c2 i {background-image:url('/images/icon_map02.png');}
.map_text li.c3 i {background-image:url('/images/icon_map03.png');}
.map_text li.c4 i {background-image:url('/images/icon_map04.png');}

.pdf_wrap {display:flex; justify-content:center; background:#f8f8f8; padding:40px 20px; margin-bottom:50px;}
.pdf_wrap .btn_pdf {display:block; font-size:15px; color:#222; font-weight:500; line-height:54px; width:250px; background:#fff; border:#20427b 2px solid; border-radius:29px; text-align:center; margin:0 15px;}
.pdf_wrap .btn_pdf:before {content:""; display:inline-block; vertical-align:top; width:26px; height:54px; margin-right:20px; background:url('/images/icon_pdf.png') no-repeat 50% 50% / contain;}
.content .produce_list {display:flex; flex-wrap:wrap; gap:44px;}
.content .produce_list a {width:calc((100% - 88px)/3);}
.content .produce_list .img {padding:0 30px;}

.produce_view .tit {font-size:19px; color:#fff; font-weight:700; line-height:38px; padding:10px; text-align:center; background:#20427b;}
.produce_view .item {padding:90px 0; text-align:center; border-bottom:#ddd 1px solid;}
.produce_view .spec {font-size:17px; color:#222; line-height:28px; padding:60px 0; border-bottom:#ddd 1px solid;}
.btn_list {display:block; font-size:17px; color:#fff; line-height:50px; height:50px; width:130px; text-align:center; border-radius:25px; margin:35px auto 0; background:#000;}

/* 온라인문의 */
.tbl.tbl_l th,
.tbl.tbl_l td {padding:15px 0;}
.tbl.tbl_l th {width:190px; border-right:0; padding-left:25px; text-align:left; font-size:18px; color:#333; font-weight:400;}
.tbl.tbl_l td {border-left:0;}
.tbl.tbl_l td .text {border:0; background:#f7f7f7; max-width:100%;}
.tbl.tbl_l td .text::placeholder {color:#ccc;}
.tbl.tbl_l td input.text {height:50px; padding:0 20px;}
.tbl.tbl_l td .w1 {width:410px;}
.filebutton {position:relative; width:92px; height:50px; overflow:hidden;}
.filebutton span {display:inline-block; width:100%; height:inherit; line-height:50px; font-size:16px; color:#fff; background:#222; text-align:center;}
.filebutton input {z-index:999; position:absolute; top:-2px; left:-700px; margin:0; padding:0; font-size:50px; line-height:0; opacity:0; filter:alpha(opacity = 0); -ms-filter:"alpha(opacity=0)"; cursor:pointer; _cursor:hand;}
.filebox {float:left; width:410px; height:50px; line-height:50px; padding:0 20px; overflow:hidden; color:#333; font-size:16px; white-space:nowrap; background:#f7f7f7; margin-right:10px;}
.tbl.tbl_l .yak {padding:40px 0; border-bottom:#ddd 1px solid; margin-bottom:50px;}
.tbl.tbl_l .yak .tit {font-size:20px ;color:#333; line-height:1; margin-bottom:35px;}
.tbl.tbl_l .yak p {font-size:16px; color:#898989; line-height:24px;}
.tbl.tbl_l .tac label.check {display:inline-block; vertical-align:top;}
.tbl.tbl_l .btn {display:block; font-size:18px; color:#fff; font-weight:700; line-height:60px; height:60px; width:230px; text-align:center; background:#20427b; margin:25px auto 0;}