@charset "utf-8"; @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); @font-face { font-family: 'SBAggroB'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SBAggroM'; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff'); font-weight: normal; font-style: normal; } /* LAYOUT */ body { -webkit-text-size-adjust: 100%; background-color:#f6f6f6; } #wrap { margin: 0 auto; -webkit-overflow-scrolling : touch; } #header { z-index: 10; position:fixed; left:0; top:0; right:0; background-color:#fff; } #container { height:100%; } #footer { position: relative; margin: 150px 0 0; padding: 25px 30px 15px; background-color:#252726; transition:all 0.3s ease; } #footer.v1 { margin: 0; } #footer.on { left: 0; } :root { --color-start: #3B36CF; --color-end: #5112AB; } input[type=file]::-webkit-file-upload-button { appearance:none;-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box; border:1px solid #ccc;background:#eee;width: 100px; height:35px;line-height:1.0;margin:3px;padding:0px 5px;border-radius: 5px; } input[type=file]::-ms-value {border:1px solid #ccc;background:#fff;} input[type=file]::-ms-browse {border:1px solid #ccc;background:#eee;} :root { --color-start: #2457BD; --color-end: #050099; } input[type="checkbox"] { width: 18px; height: 18px; accent-color: #0361f3; } /* HEADER */ #header .head { display: flex; justify-content: center; flex-wrap: wrap; position:relative; height:70px; } #header .line { height:3px; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(right, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to right, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ } #header .head > h1 { position: absolute; left: 0; top: 15px; margin: 0; padding: 0 0 0 25px; } #header .head > h1 a, #header .head > h1 a:hover { font-family: 'SBAggroM'; font-size:30px; font-weight: normal; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(top, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, top, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to top, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ color: transparent; -webkit-background-clip: text; text-shadow:2px 2px 0 rgba(101, 101, 101, 0.2); } #header .head > h1 span { padding-left: 2px; font-family: "Pretendard", sans-serif; font-weight: 400; font-size:16px; color:#777; text-shadow:none; } #header .head > .lnb { display: flex; gap: 10px; position:absolute; right:25px; top:20px; } #header .head > .lnb .lnb_item { font-weight: 300; font-size: 1rem; line-height: 30px; color: #666666; letter-spacing: -0.5px; text-align: left; } #header .head > .lnb .lnb_item.v1 { padding-right:10px; } #header .head > .lnb .lnb_item.icon { line-height:0; } /* 20241030 수정 및 추가 */ #header .head > .tab { display:flex; gap:6px; } #header .head > .tab .tab_list { position: relative; padding-top:33px; } #header .head > .tab .tab_list a { display: block; padding: 6px 45px; font-weight: 600; font-size: 1.0714rem; line-height: 1.7143rem; color: #777777; letter-spacing: -0.5px; background-color:#fafafc; border-left:1px solid #d9d9d9; border-top:1px solid #d9d9d9; border-right:1px solid #d9d9d9; border-top-left-radius:6px; border-top-right-radius:6px; } #header .head > .tab .tag { position:absolute; right:0; bottom:32px; padding: 1px 10px; font-weight: 400; font-size: 12px; line-height: 18px; color: #fff; letter-spacing: 0; background-color:#c00000; border-radius:4px; } /* HEADER - GNB */ #header > .gnb { height:55px; border-bottom:1px solid #ececec; } #header > .gnb .gnb_outer { width:1280px; height: 100%; margin:0 auto; } #header > .gnb .gnb_outer ul { display: flex; justify-content: space-between; align-items: center; height: 100%; margin: 0; padding: 0; } #header > .gnb .gnb_outer li { position: relative; list-style: none; margin: 0 0 0 45px; } #header > .gnb .gnb_outer li:first-child { margin: 0; } #header > .gnb .gnb_outer a { display: block; font-weight: 400; font-size: 1.1786rem; line-height: 30px; color: #222222; text-align: left; } #header > .gnb .gnb_outer a:hover { color: var(--color-blue); } #header > .gnb:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* HEADER - GNB ALL */ #header > .gnb_all { display: none; position: fixed; left: 0; right: 0; top: 128px; padding: 40px 0 50px; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(right, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to right, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ } #header > .gnb_all .all_outer { display: flex; width: 1280px; margin:0 auto; } #header > .gnb_all .all_outer .all_item { width:20%; } #header > .gnb_all .all_outer .all_item .title { font-weight: 500; font-size: 1.5714rem; line-height: 1.5714rem; color: #ffffff; text-align: left; } #header > .gnb_all .all_outer .all_item .list { margin:20px 0 0; } #header > .gnb_all .all_outer .all_item .list ul { display: flex; flex-direction: column; margin:0; padding:0; } #header > .gnb_all .all_outer .all_item .list li { list-style:none; position:relative; } #header > .gnb_all .all_outer .all_item .list li:after { content:""; position:absolute; width:5px; height:2px; left: 0; top: 14px; background-color:#fff; } #header > .gnb_all .all_outer .all_item .list a, #header > .gnb_all .all_outer .all_item .list a:hover { display: block; padding:0 0 0 15px; font-size: 1.1429rem; line-height: 2.1429rem; color: #ffffff; text-align: left; } /* 모바일버튼 */ .gnb_btn { position:absolute; top:88px; right:3%; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; visibility: hidden; } .gnb_btn .btn_nav { position:relative; width:26px; height:20px; cursor:pointer; } .gnb_btn .btn_nav span { display:block; position:absolute; width:100%; height:3px; left:0; background:#777777; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out; } .gnb_btn .btn_nav span.ico1 { top:0px; } .gnb_btn .btn_nav span.ico2, .gnb_btn .btn_nav span.ico3 { top:8px; } .gnb_btn .btn_nav span.ico4 { top:16px; } .gnb_btn .btn_nav.open span.ico1 { width:0%; left:50%; top:18px; } .gnb_btn .btn_nav.open span.ico2 { width:100%; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);} .gnb_btn .btn_nav.open span.ico3 { width:100%; -webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg); transform:rotate(-45deg); } .gnb_btn .btn_nav.open span.ico4 { width:0%; top:18px; left:50%;} /* 모바일 메뉴영역 */ .gnb_m_bg { position:fixed; overflow-y:auto; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); -webkit-overflow-scrolling:touch; z-index:99999999; display:none; } .gnb_m { position:fixed; overflow-y:auto; width:85%; height:100vh; left:-100%; top:0; margin-right:15%; opacity:0; -webkit-overflow-scrolling:touch; z-index:99999999; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition:none; background: #4a86eb; /* Old browsers */ background: -moz-linear-gradient(right, #4a86eb 0%, #32cca9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,#4a86eb), color-stop(100%,#32cca9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, #4a86eb 0%,#32cca9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, #4a86eb 0%,#32cca9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, #4a86eb 0%,#32cca9 100%); /* IE10+ */ background: linear-gradient(to right, #4a86eb 0%,#32cca9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a86eb', endColorstr='#32cca9',GradientType=0 ); /* IE6-9 */ } .gnb_m .gnb_m_head { height:55px; background-color:#fff; } .gnb_m .gnb_m_head .member_message { display: inline-block; vertical-align: middle; margin: 10px 30px 10px; color:#333; font-size:1rem; line-height:35px; font-weight:400; letter-spacing:0; } .gnb_m .gnb_m_head .member_message ul { margin: 0; padding: 0; } .gnb_m .gnb_m_head .member_message li { list-style: none; float: left; margin-left: 15px; } .gnb_m .gnb_m_head .member_message li:first-child { margin-left: 0; } .gnb_m .gnb_m_head .member_message:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} .gnb_m .gnb_m_head .member_message a, .gnb_m .gnb_m_head .member_message a:hover { display: block; color:#0b415e; font-size:1rem; line-height:35px; font-weight:400; letter-spacing:0; } .gnb_m .gnb_m_head .member_message .btn_login { background-color:#055bc3; border-radius:4px; } .gnb_m .gnb_m_head .member_message .btn_login a, .gnb_m .gnb_m_head .member_message .btn_login a:hover { display:block; padding:0 15px; color:#fff; } .gnb_m .gnb_m_head .gnb_btn_close { position:absolute; right:20px; top:16px; width:20px; cursor:pointer; } .gnb_m .gnb_m_head .gnb_btn_close img { width:100%; } .gnb_m .list { position:relative; margin-bottom:100px; -webkit-overflow-scrolling:touch; z-index:99999999; } .gnb_m .list ul { margin:0; padding:0; } .gnb_m .list li { position:relative; list-style:none; min-height:42px; border-bottom:1px solid rgba(255, 255, 255, 0.4); cursor:pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } .gnb_m .list .list_title { margin:0 0 0 30px; color:#ffffff; font-weight: 500; font-size:0.9rem; line-height:60px; letter-spacing:1px; } .gnb_m .list li.select { background: #32cca9; /* Old browsers */ background: -moz-linear-gradient(right, #32cca9 0%, #4a86eb 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,#32cca9), color-stop(100%,#4a86eb)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, #32cca9 0%,#4a86eb 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, #32cca9 0%,#4a86eb 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, #32cca9 0%,#4a86eb 100%); /* IE10+ */ background: linear-gradient(to right, #32cca9 0%,#4a86eb 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32cca9', endColorstr='#4a86eb',GradientType=0 ); /* IE6-9 */ } .gnb_m .list li.select .list_title { color:#fff; } .gnb_m .list .sub_list { background-color:#fff; display:none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition:none; } .gnb_m .list .sub_list ul { margin:0; padding:0; } .gnb_m .list .sub_list li { padding:0 0 0 30px; list-style:none; border-top:1px solid #dcdcdc; border-bottom:none; font-weight: 500; font-size:0.8rem; line-height:50px; color:#666666; letter-spacing:0; } .gnb_m .list .sub_list a, .gnb_m .list .sub_list a:hover { display: block; } .gnb_m .list:after { content:""; clear:both; display:block; } /* SIDE */ #side { z-index: 9; overflow-y: auto; position: fixed; left: 0; top: 128px; bottom: 0; width:280px; background-color:#ffffff; border-right:1px solid #dee7f4; box-shadow:2px 0 10px rgba(101, 101, 101, 0.1); transition:all 0.3s ease; } #side.on { left: -280px; } #side .subject { display: flex; justify-content: center; align-items: center; height: 104px; border-bottom:1px solid #dee7f4; } #side .subject span { font-weight: 800; font-size:2rem; line-height:2rem; color:#333333; } #side .side_menu { margin:30px 20px 0; } #side .side_menu .menu_subject { border-radius:6px; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(right, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to right, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ } #side .side_menu .menu_subject a, #side .side_menu .menu_subject a:hover { display:block; padding:0 20px; font-size:1.1429rem; line-height:2.8571rem; color:#ffffff; } #side .side_menu .list { margin:20px 0 20px 20px; } #side .side_menu .list ul { display: flex; flex-direction: column; margin:0; padding:0; } #side .side_menu .list li { position: relative; list-style:none; } #side .side_menu .list li:after { content:""; position:absolute; width:5px; height:2px; left: 0; top: 18px; background-color:#4a4a4a; } #side .side_menu .list a { display:block; padding: 6px 0 6px 15px; font-weight: 400; font-size:1.0714rem; line-height:2rem; color:#555555; } #side .side_menu .list a:hover { color:#0056c5; } .side_btn_more { z-index: 10; cursor: pointer; position:fixed; display: flex; justify-content: center; align-items: center; transition:all 0.3s ease; width: 30px; height: 66px; left: 279px; bottom:15%; border-top: 1px solid #dddddd; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-top-right-radius: 6px; border-bottom-right-radius: 6px; box-shadow:5px 0 10px rgba(101, 101, 101, 0.1); background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(right, #ffffff 0%, #f4f4f4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,#ffffff), color-stop(100%, #f4f4f4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, #ffffff 0%, #f4f4f4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, #ffffff 0%, #f4f4f4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, #ffffff 0%, #f4f4f4 100%); /* IE10+ */ background: linear-gradient(to right, #ffffff 0%, #f4f4f4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */ } .side_btn_more.on { left: 0; } .side_btn_more img { transition: transform 0.5s ease; } .side_btn_more.on img { transform: rotate(180deg); } #content { overflow-y: auto; margin: 0 0 0 295px; padding: 128px 0 0; height: 100%; background-color:#ffffff; box-shadow:-5px 0 10px rgba(101, 101, 101, 0.1); transition:all 0.3s ease; } #content.on { margin: 0 0 0 0; } #content .content_outer { margin:0 40px; min-height: 900px; } #content .subject { display: flex; align-items: center; height: 104px; padding: 0 10px; border-bottom:1px solid #dee7f4; } #content .subject span { font-weight: 600; font-size:2rem; line-height:2rem; color:#333333; } /* 20241029 수정 */ .page_info { position: relative; margin:30px 0 40px; transition:all 0.3s ease; } .page_info.v1 { flex-grow: 1; margin:0 0 20px; } .page_info .info { overflow: hidden; height: auto; position: relative; background-color:#f7f9fc; border:1px solid #dee7f4; border-top-left-radius:6px; border-bottom-left-radius:6px; border-top-right-radius:6px; transition:all 0.3s ease; } .page_info .info .list { padding: 30px; } .page_info .info .list ul { display: flex; flex-direction: column; margin:0; padding:0; } .page_info .info .list li { position: relative; list-style:none; padding:0 0 0 15px; font-weight: 400; font-size:1.0714rem; line-height:2rem; color:#555555; } .page_info .info .list li:after { content:""; position:absolute; width:5px; height:2px; left: 0; top: 13px; background-color:#4a4a4a; } .page_info .info .list a, .page_info .info .list a:hover { font-weight: 500; color:#0056c5; text-decoration:underline; } .page_info.on { margin:0 0 60px; } .page_info.on .info { height:0; border:none; } .page_info .btn_more { cursor: pointer; position:absolute; display: flex; justify-content: center; align-items: center; width: 66px; height: 30px; right: -1px; bottom:-30px; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; border-left: 1px solid #dddddd; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow:5px 0 10px rgba(101, 101, 101, 0.1); background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(bottom, #ffffff 0%, #f4f4f4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, bottom, top, color-stop(0%,#ffffff), color-stop(100%, #f4f4f4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, #ffffff 0%, #f4f4f4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(bottom, #ffffff 0%, #f4f4f4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(bottom, #ffffff 0%, #f4f4f4 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */ } .page_info .btn_more img { rotate:90deg; } #search { display: flex; gap: 8px; flex-direction: column; margin:30px 0 0; padding: 30px; background-color:#fafafc; border:1px solid #e7e7e7; border-radius:6px; } /* 20241029 */ #search.v1 { margin:0; } #search.type1 { margin:0; padding: 0; background-color:transparent; border:none; } #search .row { display:flex; align-items: center; gap:0 1%; } #search .row .item { display: flex; align-items: center; gap: 5px; width:19.2%; } #search .row .item.v1 { } #search .row .item.v2 { width: 40%; } #search .row .item.v3 { width: 100%; flex-wrap:wrap; } #search .row .input { width:100%; height:36px; padding: 0 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } #search .row .select { width:100%; height:36px; padding: 0 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } .search_btn { position: relative; flex-shrink: 0; display: inline-block; background-color:#0056c5; border-radius:6px; } .search_btn.gray { background-color:#6f6f6f; } .search_btn a, .search_btn a:hover { display: block; padding: 0 25px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 36px; color: #f1f1f1; } /* 일괄설정 */ #all_setting { z-index: 1; position:fixed; left:335px; bottom:0; right:40px; padding: 25px 30px; border-top-left-radius: 6px; border-top-right-radius: 6px; transition:all 0.3s ease; box-shadow:0 -5px 10px rgba(101, 101, 101, 0.3); background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(right, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to right, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ } #all_setting.on { left:40px; } #all_setting .setting_title { font-weight: 400; font-size:1.1429rem; color:#fff; } #all_setting .setting_title span { font-weight: 300; font-size:1rem; } #all_setting .setting_field { margin:10px 0 0; } /* BUTTON */ .button { display:inline-block; } .button a { display:block; padding:0 20px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 34px; color: #777777; background-color: #fff; border:1px solid #cdcdcd; border-radius:6px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } .button a:hover { color: #0056c5; border:1px solid #0056c5; } .button.small a { flex-shrink: 1; line-height: 28px; } .button.small a:hover { line-height: 28px; color: #fff; background-color: #65c288; border:1px solid #65c288; } .button.small.btn_select a, .button.small.btn_select a:hover { color: #fff; background-color: #65c288; border:1px solid #65c288; } .button.mini a { flex-shrink: 1; padding:0 5px; font-size: 0.85rem; line-height: 24px; background-color:#f7f7f7; color:#444444; } .button.mini a:hover { font-size: 0.85rem; line-height: 24px; color: #fff; background-color: #444444; border:1px solid #444444; } .button.mini2 a { flex-shrink: 1; padding:0 5px; font-size: 0.85rem; line-height: 24px; background-color:#CC3D3D; color:#fff; border:1px solid #CC3D3D;} .button.mini2 a:hover { font-size: 0.85rem; line-height: 24px; color: #fff; background-color: #FF5E00; border:1px solid #CC3D3D; } .button.red a { color: #c50014; } .button.red a:hover { border:1px solid #c50014; } .button.green a { color: #00670c; } .button.green a:hover { border:1px solid #00670c; } /* BOARD */ #board { margin:30px 0 0; } .board_head { display:flex; justify-content:space-between; align-items:flex-end; } .board_head .total_count { padding:0 0 0 20px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: bold; font-size: 1rem; line-height: 1rem; color: #222222; } .board_head .side { display:flex; align-items: center; gap:10px; } .board_head .side .btn_area { display:flex; gap:5px; } .board_head .side .list_count { display:flex; gap:5px; } .board_head .side .select { height: 36px; padding: 0 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 36px; color: #777777; border: none; border-radius: 6px; background-color:#f2f2f2; } .table_outer { margin: 15px 0 0; border-top:1px solid #dadada; } .table { } .table th { padding: 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 14px; font-weight: bold; line-height: 29px; color: #444444; letter-spacing: -0.5px; text-align: center; background-color: #f7f7f7; border-bottom:1px solid #dadada; border-left: 1px solid #dadada; } .table th a, .table th a:hover { font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 14px; font-weight: bold; line-height: 29px; color: #444444; letter-spacing: -0.5px; text-align: center; text-decoration:underline; } .table th.first { border-left: none; } .table th.v1 { line-height: 20px; } .table td { padding: 12px 5px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 14px; font-weight: normal; line-height: 20px; color: #666666; letter-spacing: -0.5px; text-align: center; border-left: 1px solid #dadada; border-bottom: 1px solid #dadada; } .table td.right { text-align: right; } .table td:first-child { border-left: none; } .table td.border_left { border-left: 1px solid #dadada; } .table td.v1 { padding: 10px 5px; } .table td a, .table td a:hover { font-size: 14px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: bold; line-height: 20px; color: #0056c5; letter-spacing: -0.5px; } .table td.col_subject a, .table td.col_subject a:hover { display: block; min-height: 20px; font-size: 14px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: bold; line-height: 20px; color: #0056c5; letter-spacing: -0.5px; text-align:left; background:url('/WEBSITE/images/icon_newopen.png') no-repeat right center; } /* 20241029 */ .table.v1 { border-top:1px solid #dadada; } .table th.v2 { padding: 10px 20px; font-size: 13px; text-align:left; border-left:none; } .table th.v2 span { color:#ff0000; } .table td.v2 { padding: 10px 25px; font-size: 13px; text-align:left; border-left:none; } /* 체크박스 - 요소를 숨기는 class.*/ .col_check .checkbox { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden; } /* 체크박스 - 체크를 안 했을 때*/ .col_check label::before{ content:""; display: inline-block; vertical-align: middle; width: 16px;/*체크박스 크기*/ height: 16px;/*체크박스 크기*/ margin: -5px 0 0 0;/*label과의 여백*/ border: 1px solid #b5bbd5; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background-image:none; background-color: #fff; } /* 체크박스 - 체크했을 때*/ .col_check input:checked+label::before{ background-image:url("/WEBSITE/images/inc/dot_check.png"); background-color: #0066ff; border: 1px solid #0066ff; background-repeat: no-repeat; background-position: center; } /* 체크박스 - 체크박스 선택한 상태일 때 테두리 생김*/ .col_check input:focus+.label::before{ outline:2px solid #000; } /* 갤러리 */ #board .gallery { display: flex; flex-wrap: wrap; gap: 50px 2%; margin: 15px 0 0; padding: 30px 0; border-top:1px solid #dadada; } #board .gallery .gallery_item { flex-shrink: 1; width:18.4%; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #board .gallery .gallery_item .item_head { display:flex; justify-content:space-between; align-items: center; padding:0 5px } #board .gallery .gallery_item .item_head .btn_icon { line-height:0; } #board .gallery .gallery_item .item_thum { overflow: hidden; cursor: pointer; position: relative; margin:10px 0 0; border:1px solid #dcdcdd; border-radius:6px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #board .gallery .gallery_item .item_thum img { width:100%; } #board .gallery .gallery_item .item_thum .thum { position: absolute; left: 0; top: 0; right:0; bottom:0; } #board .gallery .gallery_item .item_thum .thum img { max-width: 100%; /* 이미지가 컨테이너의 너비를 넘지 않도록 설정 */ max-height: 100%; /* 이미지가 컨테이너의 높이를 넘지 않도록 설정 */ object-fit: cover; /* 이미지의 크기를 조정하여 컨테이너를 덮도록 설정 */ -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; } #board .gallery .gallery_item .item_thum .thum:hover img { transform:scale(1.15); -webkit-transform:scale(1.15); -moz-transform:scale(1.15); -o-transform:scale(1.15); } #board .gallery .gallery_item .item_thum .read { position:absolute; right:10px; bottom:10px; padding: 0 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 0.8571rem; line-height: 28px; color: #e2e2e2; background-color: #444444; border-radius:6px; } #board .gallery .gallery_item .item_info { margin:15px 10px 0; font-size: 1.0714rem; line-height: 26px; color: #666666; } #board .gallery .gallery_item .item_info strong { display: block; font-weight: bold; color: #0056c5; } /* 명함 */ #board .card { display: flex; flex-wrap: wrap; gap: 50px 3%; margin: 15px 0 0; padding: 50px 40px; border-top:1px solid #dadada; background-color:#f7f9fc; } #board .card .card_item { flex-shrink: 1; position: relative; width:31.33333%; background-color: #fff; border-radius:6px; box-shadow:0 0 15px rgba(162, 162, 162, 0.1); -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #board .card .card_item .card_check { z-index: 10; position:absolute; right:20px; top:20px; } #board .card .card_item .item_info { position: relative; display: flex; flex-direction: column; gap: 15px; padding:35px 40px; font-size:1.2857rem; line-height: 20px; font-weight:300; color: #555555; } #board .card .card_item .item_info strong { display: block; font-size:2rem; line-height: 34px; font-weight:700; color: #111111; } #board .card .card_item .item_info span { padding-top: 5px; font-size:1.5714rem; font-weight:700; color: #0056c5; } #board .card .card_item .item_info .icon { display: flex; flex-direction: column; gap: 12px; position:absolute; right:20px; bottom:20px; } #board .card .card_item .item_info .icon .icon_item { display:flex; flex-direction:row; gap:10px; } #board .card .card_item .item_info .icon .icon_thum { cursor: pointer; width:20px; height:20px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #board .card .card_item .item_info .icon .icon_thum.tel { background:url('/WEBSITE/images/board/card_tel.png') no-repeat center; } #board .card .card_item .item_info .icon .icon_thum.phone { background:url('/WEBSITE/images/board/card_phone.png') no-repeat center; } #board .card .card_item .item_info .icon .icon_thum.print { background:url('/WEBSITE/images/board/card_print.png') no-repeat center; } #board .card .card_item .item_info .icon .icon_text { font-size:1rem; line-height: 20px; font-weight:400; color: #555555;} #board .card .card_item .item_info .icon .icon_text a, #board .card .card_item .item_info .icon .icon_text a:hover { font-size:1rem; line-height: 20px; font-weight:400; color: #555555;} #board .card .card_item .item_info .icon .icon_item:hover .icon_text { color: #0056c5;} #board .card .card_item .item_info .icon .icon_item:hover .icon_text a, #board .card .card_item .item_info .icon .icon_item:hover .icon_text a:hover { color: #0056c5;} #board .card .card_item .item_info .icon .icon_item:hover .icon_thum.tel { background:url('/WEBSITE/images/board/card_tel_ov.png') no-repeat center; } #board .card .card_item .item_info .icon .icon_item:hover .icon_thum.phone { background:url('/WEBSITE/images/board/card_phone_ov.png') no-repeat center; } #board .card .card_item .item_info .icon .icon_item:hover .icon_thum.print { background:url('/WEBSITE/images/board/card_print_ov.png') no-repeat center; } #board .card .card_item .item_address { padding: 18px 40px; font-size: 1.1429rem; line-height: 24px; color: rgba(255, 255, 255, 0.8); background-color:#0056c5; border-bottom-left-radius:6px; border-bottom-right-radius:6px; } /* FOOTER */ #footer .footer_head { padding: 0 20px 15px; border-bottom:1px solid #464646; } #footer .footer_head .business_name { font-size:1rem; line-height:1.8571rem; color:#ffffff; } #footer .footer_head .list { display:flex; flex-wrap: wrap; gap:0 35px; } #footer .footer_head .list .item { font-size:1rem; line-height:1.8571rem; color:#bababa; } #footer .footer_head .list .item span { color:#ffffff; } #footer .footer_copyright { padding: 20px 20px 0; font-size:1rem; line-height:1.8571rem; color:#bababa; } /* QUICK */ #quick { z-index: 30; position:fixed; right:30px; bottom:40px; transition:all 0.3s ease; } #quick .icon { cursor: pointer; width:54px; height:54px; border-radius:80px; border:3px solid rgba(255, 255, 255, 0.8); box-shadow:0 0 10px rgba(101, 101, 101, 0.4); } #quick .icon img { width: 100%; border-radius:80px; } #quick .quick_list { display: none; position: absolute; width: 200px; right: 0; bottom: 70px; padding: 5px 0; background-color: #fff; border:1px solid #dedede; border-radius:6px; } #quick .quick_list ul { margin:0; padding:0; } #quick .quick_list li { list-style:none; border-top:1px solid #dedede; } #quick .quick_list li:first-child { border-top:none; } #quick .quick_list a, #quick .quick_list a:hover { display:block; font-size:1.0714rem; line-height:2.8571rem; color:#555555; text-align:center; } /* 민원증명 */ h3 { margin:50px 10px 0; padding:0; font-weight:600; font-size:1.4286rem; color:#333333; } h3.v1 { margin:0 10px 0; } h3 span { font-weight:400; font-size:1.1429rem; color:#ff0000; } h4 { display: flex; align-items: center; gap: 8px; margin:50px 10px 0; padding:0; font-weight:600; font-size:1.2857rem; color:#2662e9; } .outer_box { margin:15px 0 0; padding: 30px; font-weight:400; font-size:1.1429rem; line-height: 30px; color:#777777; background-color:#fafafc; border:1px solid #e7e7e7; border-radius:6px; } .outer_box.v1 { background-color:#ffffff; } .outer_box.v2 { padding: 0; background-color:#ffffff; } .outer_box.v3 { padding: 0; } .list_default { display:flex; flex-wrap: wrap; align-items:center; gap:5px 0; } .list_default .item { display: flex; align-items: center; gap: 10px; width:33.3333%; } .list_default .item .title { font-weight:400; font-size:1.1429rem; color:#777777; } .list_type1 { display:flex; align-items: center; gap:10px; } .list_type1 .item { width:260px; } .list_option1 { display:flex; align-items: center; gap:10px; padding: 10px 10px 0; font-weight:400; font-size:1.1429rem; color:#777777; } .list_option1.v1 { color:#ff0000; } .list_option2 { display: flex; align-items: center; padding: 15px 30px; border-top:1px solid #e7e7e7; background-color:#fafafc; border-bottom-left-radius:6px; border-bottom-right-radius:6px; } .list_option2.v1 { border-top:none; } .list_option3 { display:flex; align-items: center; gap:20px; font-weight:400; font-size:1.1429rem; color:#777777; } .input1 { width:100%; height:36px; padding: 0 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } .input2 { width:100%; height:36px; padding: 0 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#f2f2f2; border:1px solid #dddddd; border-radius:6px; } .input3 { width:170px; height:36px; padding: 0 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } .select1 { width:170px; height:36px; padding: 0 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } .select2 { width:120px; height:36px; padding: 0 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } .list_type2 { display:flex; flex-wrap: wrap; align-items:center; padding:30px; } .list_type2 ul { margin:0; padding:0; } .list_type2 li { position:relative; list-style: none; padding-left:15px; font-weight:400; font-size:1.1429rem; color:#777777; word-break: keep-all; } .list_type2 li:after { content:""; position:absolute; width:5px; height:2px; left:0; top:14px; background-color:#4a4a4a; } .list_type2 span { color:#ff0000; } .list_type3 { display:flex; flex-wrap: wrap; align-items:center; gap:5px } .list_type3.v1 { gap:15px } .list_type4 { display:flex; flex-wrap: wrap; } .list_type4 .item { flex-grow:1; display: flex; align-items: center; min-width:50%; padding: 15px 30px; border-top:1px solid #e7e7e7; } .list_type4 .item:first-child { border-top:none; } .list_type4 .item.non_line { border-top:none; } .list_title1 { flex-shrink: 0; width: 220px; font-weight:500; font-size:1.1429rem; color:#777777; } .list_title1 span { color:#ff0000; } .list_title1 span.v1 { color:#777777; } .list_btn_area { margin:20px 0 0; text-align:right; } .list_btn_area.v1 { margin:0; text-align:right; } /* TAB MENU */ #new_tab { display: flex; flex-wrap: wrap; margin:50px auto 0; border-bottom:2px solid #003399; } #new_tab .tab_item { } #new_tab .tab_item a { display:block; padding:20px 30px; font-weight: 500; font-size:1.1rem; color:#222222; text-align: center; background-color:#fff; } #new_tab .tab_item a:hover { font-weight: 600; color:#fff; background-color:#003399; } #new_tab .tab_item.select { } #new_tab .tab_item.select a, #new_tab .tab_item.select a:hover { display:block; padding:20px 30px; font-weight: 600; font-size:1.1rem; color:#fff; background-color:#003399; } /* 20240926추가 */ .head_title { display:flex; justify-content:space-between; align-items:flex-end; } .head_title.v1 { margin-top:50px; } .head_title1 { padding: 15px 5px; font-weight: 500; font-size: 16px; color: #0056c5; text-align: center; letter-spacing: 0; background-color:#efefef; } .list_type5 { display: flex; padding:40px 0; } .list_type5 .item { display: flex; width:50%; padding:0 30px; } .list_type5 .item .item_title { flex-shrink: 0; position: relative; width:160px; padding-left:15px; font-weight: 600; font-size: 16px; color: #333333; } .list_type5 .item .item_title:after { content:""; position:absolute; width:5px; height:2px; left:0; top:14px; background-color:#4a4a4a; } .list_type5 .item .item_info { font-weight: 400; font-size: 16px; color: #777777; line-height:30px; word-break: break-all; } .list_type6 { display: flex; flex-wrap: wrap; gap: 40px 2%; margin-top:40px; } .list_type6 .item_col { flex-grow: 1; width:31.33333%; } .list_type6 .item_col .item_logo { line-height:0 } .outer_box1 { min-height:202px; padding: 25px 30px; border:1px solid #e7e7e7; border-radius:6px; } .list_type7 { display: flex; flex-direction:column; gap:10px; } .list_type7 .item { display: flex; flex-direction:row; position:relative; } .list_type7 .item .item_title { flex-shrink: 0; position: relative; width:160px; padding-left:15px; font-weight: 600; font-size: 16px; line-height: 30px; color: #333333; } .list_type7 .item .item_title span { color: #0056c5; } .list_type7 .item .item_title:after { content:""; position:absolute; width:5px; height:2px; left:0; top:14px; background-color:#4a4a4a; } .list_type7 .item .item_info { font-weight: 400; font-size: 16px; color: #777777; line-height:30px; word-break: break-all; } .info_box1 { padding: 10px; font-weight: 500; font-size: 16px; color: #0056c5; } /* 20241029 */ #modal_view { width:1280px; height: auto; min-height: 100%; margin:0 auto; background-color:#fff; } #modal_view .head_gnb { position: sticky; top: 0; margin: 0 10px; padding: 30px; border-bottom-left-radius:6px; border-bottom-right-radius:6px; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(right, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to right, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ box-shadow:0 6px 10px rgba(101, 101, 101, 0.1); } #modal_view .head_gnb ul { display: flex; gap: 30px; flex-wrap: wrap; margin:0; padding:0; } #modal_view .head_gnb li { position: relative; list-style:none; } #modal_view .head_gnb li a, #modal_view .head_gnb li a:hover { display:block; font-weight: 400; font-size:15px; color:#fff; letter-spacing:0; } #modal_view .head_gnb li a:hover:after { content:""; position:absolute; width:4px; height:4px; left: 50%; margin-left: -2px; top: -10px; background-color: #fff; border-radius:10px; } #modal_view .head_gnb li.select:after { content:""; position:absolute; width:4px; height:4px; left: 50%; margin-left: -2px; top: -10px; background-color: #fff; border-radius:10px; } #modal_view .view_outer { margin: 36px 30px 30px; } #modal_view .view_outer .modal_title { padding:0 10px 15px; font-weight: 700; font-size:24px; color:#333333; letter-spacing:-1px; border-bottom:1px solid #dee7f4; } #modal_view .view_outer .modal_file { margin:20px 0 0; } #modal_view .view_outer .modal_file ul { display: flex; gap: 0.8%; margin:0; padding:0; } #modal_view .view_outer .modal_file li { cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style:none; width: 16%; padding: 18px 11px 18px 20px; border:1px solid #e1e1e1; background-color:#fafafa; border-radius:6px; } #modal_view .view_outer .modal_file .file_title { font-weight: 500; font-size:15px; line-height: 22px; color:#333333; letter-spacing:-0.5px; } #modal_view .view_outer .modal_file .file_icon { line-height:0; } #modal_view .view_outer .view_inner { display:flex; flex-direction:row; justify-content:space-between; gap: 2.3%; margin-top:30px; } #modal_view .view_outer .view_inner.v1 { display:flex; flex-direction:column; } #modal_view .view_outer .view_inner .view_map { width:40%; height: 360px; border:1px solid #e1e1e1; border-radius:6px; } #modal_view .view_outer .view_inner .view_side { flex-grow:1; } #modal_view .view_outer .view_inner .view_side .btn_area { display: flex; justify-content: end; margin:10px 0; } /* 20241107 추가 */ #popup_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); z-index:999999; } #popup { display: flex; justify-content: center; align-items: center; position:fixed; width:100%; height:100vh; left:0; top:0; padding: 0 20px; -webkit-overflow-scrolling:touch; z-index:999999; } #popup .outer { width: 480px; padding-bottom: 20px; background-color:#fff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; } #popup .outer .popup_head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom:1px solid #EDEDED; } #popup .outer .popup_head .subject { font-family: "Pretendard", sans-serif; font-weight: 600; font-size:16px; color:#202020; letter-spacing: 0; } #popup .outer .popup_head .btn_close { cursor:pointer; } #popup .outer .popup_content { display: flex; flex-direction: column; align-items: center; gap: 16px; padding:32px 24px; } #popup .outer .popup_content .info { display: flex; flex-direction: column; align-items: center; gap: 8px; } #popup .outer .popup_content .info .info_title { font-family: "Pretendard", sans-serif; font-weight: 700; font-size:16px; color:#202020; letter-spacing: 0; } #popup .outer .popup_content .info .info_text { font-family: "Pretendard", sans-serif; font-weight: 400; font-size:14px; line-height: 140%; color:#404040; letter-spacing: 0; text-align:center; } #popup .outer .popup_button { display:flex; justify-content: end; gap: 6px; padding:0 24px; } #popup .outer .popup_button .btn { flex-shrink: 0; display: inline-block; background-color:#0056c5; border-radius:6px; } #popup .outer .popup_button .btn a, #popup .outer .popup_button .btn a:hover { display: block; padding: 0 20px; font-family: "Pretendard", sans-serif; font-weight: 500; font-size:14px; line-height: 36px; color: #f1f1f1; } #popup .outer .popup_button .btn.v1 { flex-shrink: 0; display: inline-block; background-color:#fff; border-radius:6px; border:1px solid #D9D9D9; } #popup .outer .popup_button .btn.v1 a, #popup .outer .popup_button .btn.v1 a:hover { display: block; padding: 0 20px; font-family: "Pretendard", sans-serif; font-weight: 500; font-size:14px; line-height: 36px; color: #5F5F5F; } #popup .outer .popup_agree { display:flex; gap: 6px; align-items: center; padding:20px 24px 0; font-family: "Pretendard", sans-serif; font-weight: 400; font-size:14px; line-height: 140%; color:#404040; letter-spacing: 0; border-top:1px solid #EDEDED; } #logo { cursor: pointer; display:flex; justify-content: center; align-items:center; gap:10px; position: absolute; left: 15px; top: 0; } #logo .emblem { line-height:0; } #logo .business_name { font-family: "Pretendard", sans-serif; font-weight: 600; font-size:20px; color:#333333; } /* 241210 추가 */ #header .head > .new_lnb { display: flex; gap: 30px; align-items: center; position:absolute; right:25px; top:20px; } #header .head > .new_lnb .lnb_item { } #header .head > .new_lnb .lnb_item a, #header .head > .new_lnb .lnb_item a:hover { display: block; font-weight: 500; font-size: 15px; line-height: 36px; color: #777777; letter-spacing: 0; text-align: center; } #header .head > .new_lnb .lnb_item.v1 a, #header .head > .new_lnb .lnb_item.v1 a:hover { display: block; padding: 0 20px; background-color: #055bc3; font-weight: 500; font-size: 15px; line-height: 36px; color: #fff; letter-spacing: 0; text-align: center; border-radius:4px; } #container .slide { margin-top: 73px; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(right, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, right, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(right, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to right, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ } #container .slide ul { margin:0; padding:0; } #container .slide li { list-style:none; } #container .slide .slogan { display: flex; flex-direction: column; gap: 20px; padding:100px 0 60px; } #container .slide .slogan .slogan_title { font-weight: 700; font-size: 60px; line-height: 60px; color: #fff; letter-spacing: 0; text-align: center;} #container .slide .slogan .slogan_info { font-size: 18px; line-height: 28px; color: #ffffff; letter-spacing: 0; text-align: center; padding:0 5%; word-break: keep-all; } #container .slide .slide_thum { line-height: 0; text-align: center; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #container .app { position: relative; width:1300px; margin:0 auto; padding:260px 0 160px; } #container .app .app_thum { display:flex; justify-content: center; gap:80px; } #container .app .app_thum .thum1 { line-height:0; opacity:0; } #container .app .app_thum .thum2 { padding-top: 160px; line-height:0; opacity:0; } #container .app .slogan { display: flex; flex-direction: column; gap: 20px; position:absolute; top:190px; left:55.38%; opacity:0; } #container .app .slogan .slogan_title { font-weight: 700; font-size: 52px; line-height: 52px; color: #000000; letter-spacing: 0; text-align: left; } #container .app .slogan .slogan_info { font-weight: 400; font-size: 18px; line-height: 28px; color: #555555; letter-spacing: 0; text-align: left; word-break: keep-all; } .thum1_animation { animation-name: app_thum_fade1; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */ animation-duration: 0.6s; /* 속도 */ animation-delay: 0.1s; /* 대기시간 */ animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */ animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */ animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */ animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/ } @keyframes app_thum_fade1 { 0% { opacity: 0; padding:0 100px 0 0; } /* 0% 대신 from 으로 대체가능 */ 100% { opacity: 1; padding:0 0 0; } /* 100% 대신 to 로 대체가능 */ } .thum2_animation { animation-name: app_thum_fade2; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */ animation-duration: 0.6s; /* 속도 */ animation-delay: 0.1s; /* 대기시간 */ animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */ animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */ animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */ animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/ } @keyframes app_thum_fade2 { 0% { opacity: 0; padding:260px 0 0; } /* 0% 대신 from 으로 대체가능 */ 100% { opacity: 1; padding:160px 0 0; } /* 100% 대신 to 로 대체가능 */ } .slogan_animation { animation-name: slogan_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */ animation-duration: 1s; /* 속도 */ animation-delay: 0.1s; /* 대기시간 */ animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */ animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */ animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */ animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/ } @keyframes slogan_fade { 0% { opacity: 0; padding:0; } /* 0% 대신 from 으로 대체가능 */ 100% { opacity: 1; padding:0; } /* 100% 대신 to 로 대체가능 */ } #container .service { padding: 110px 3%; background-color:#e2edff; opacity:0; } #container .service .service_title { font-weight: 700; font-size: 52px; line-height: 52px; color: #000000; letter-spacing: 0; text-align: center; } #container .service .card { display: flex; justify-content: center; gap: 100px; margin:135px 0 0; } #container .service .card .card_item { display: flex; flex-direction: column; justify-content: space-between; width: 300px; height: 370px; padding: 32px 32px 40px; background-color:#fff; border-radius:10px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.06); } #container .service .card .card_item.v1 { margin-top:-60px; } #container .service .card .card_item .info {} #container .service .card .card_item .info .icon { line-height:0; } #container .service .card .card_item .info .info_title { margin-top: 16px; font-weight: 700; font-size: 32px; line-height: 32px; color: #000000; letter-spacing: 0; text-align: left; } #container .service .card .card_item .info .info_text { margin-top: 20px; font-weight: 400; font-size: 16px; line-height: 24px; color: #8a8a8a; letter-spacing: 0; text-align: left; } #container .service .card .card_item .info .info_text i { display:block; } #container .service .card .card_item .tag { display:flex; gap:6px; flex-wrap:wrap; } #container .service .card .card_item .tag .tag_item { padding: 0 10px; font-size: 13px; line-height: 24px; color: #ffffff; letter-spacing: 0; text-align: center; background-color:#898989; border-radius:4px; } #container .service .card .card_item .tag .tag_item.v1 { margin-top:-60px; } .service_animation { animation-name: service_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */ animation-duration: 1s; /* 속도 */ animation-delay: 0.1s; /* 대기시간 */ animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */ animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */ animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */ animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/ } @keyframes service_fade { 0% { opacity: 0; } 100% { opacity: 1; } } #container .press { display: flex; gap: 50px; width: 1300px; margin: 0 auto; padding: 120px 0; opacity:0; } #container .press .press_item { cursor: pointer; width:400px; height: 340px; padding: 0 30px; background-color:#fff; border-radius:20px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.06); } #container .press .press_item .logo { display: flex; justify-content: center; align-items: center; height: 130px; border-bottom:1px solid #dddddd; } #container .press .press_item .info { margin:30px 8px 0; } #container .press .press_item .info .info_title { font-weight: 700; font-size: 24px; line-height: 24px; color: #000000; letter-spacing: 0; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } #container .press .press_item .info .info_text { margin: 20px 0 0; font-weight: 400; font-size: 16px; line-height: 28px; color: #8a8a8a; letter-spacing: 0; text-align: left; display: block; overflow: hidden; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .press_animation { animation-name: press_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */ animation-duration: 1s; /* 속도 */ animation-delay: 0.1s; /* 대기시간 */ animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */ animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */ animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */ animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/ } @keyframes press_fade { 0% { opacity: 0; } 100% { opacity: 1; } } .counsel { padding: 100px 0; background-color:#0353b8; } .counsel .outer { display: flex; justify-content: space-between; align-items: center; width:1300px; margin:0 auto; } .counsel .outer .info { } .counsel .outer .info .info_title { font-weight: 700; font-size: 52px; line-height: 52px; color: #ffffff; letter-spacing: 0; text-align: left; } .counsel .outer .info .info_text { margin: 20px 0 0; font-size: 18px; line-height: 28px; color: #ffffff; letter-spacing: 0; text-align: left; word-break: keep-all; } .counsel .outer .info .info_tel { margin: 50px 0 0; } .counsel .outer .info .info_tel a, .counsel .outer .info .info_tel a:hover { display: block; font-weight: 700; font-size: 36px; line-height: 36px; color: #ffffff; letter-spacing: 0; text-align: left; } .counsel .outer .side { width:400px; } .counsel .outer .side .field { display:flex; flex-direction:column; gap:10px; } .counsel .outer .side .field .input { width:100%; height:50px; padding: 0 20px; font-size: 16px; line-height: 50px; color: #8a8a8a; background-color:#fff; border:none; outline: none; border-radius:6px; } .counsel .outer .side .agree { display: flex; gap: 4px; align-items: center; margin-top: 16px; padding:0 10px; font-size: 16px; line-height: 16px; color: #ffffff; } .counsel .outer .side .submit { margin-top:28px; height:60px; font-weight: 500; font-size: 18px; line-height: 60px; color: #ffffff; text-align:center; background-color:#00b1f4; border-radius:6px; } .counsel .outer .side .submit a, .counsel .outer .side .submit a:hover { display: block; font-weight: 500; font-size: 18px; line-height: 60px; color: #ffffff; text-align:center; } /* 로그인 */ #login_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); z-index:999999; display:none; } #login { position:fixed; width:100%; height:100vh; left:0; top:0; -webkit-overflow-scrolling:touch; z-index:999999; display:table; display:none; } #login .outer { display:table-cell; vertical-align:middle; } #login .outer .inner { position:relative; width:460px; margin:0 auto; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; } #login .outer .inner .inner_box { overflow-y:auto; position:relative; padding:50px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #login .outer .inner .btn_close { position:absolute; right:-40px; top:4px; cursor:pointer; } .login { display:flex; flex-direction:column; } .login .field { display:flex; flex-direction:column; gap:10px; } .login .field .input_outer { display:flex; align-items: center; border:1px solid #d9d9d9; border-radius:6px; } .login .field .input_outer .icon { width:50px; text-align:center; line-height:0; } .login .field .input_outer .icon_input { flex-grow:1; } .login .field .input_outer .input { width:100%; height:50px; font-size: 14px; line-height: 44px; color: #adadad; background-color:transparent; border:none; outline: none;} .login .agree { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: 14px; line-height: 16px; color: #adadad; } .login .agree .toggle { cursor: pointer; position: relative; width:36px; height:16px; background-color:#dbdbdb; border-radius:80px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } .login .agree .toggle .point { position:absolute; width:12px; height:12px; left: 2px; top: 2px; background-color:#fff; border-radius:80px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } .login .agree .toggle.on { background-color:#055bc3; } .login .agree .toggle.on .point { left: auto; right: 2px; } .login .login_button { display:flex; flex-direction: column; gap: 10px; margin-top:30px; } .login .login_button .item { height:50px; font-weight: 500; font-size: 18px; line-height: 50px; color: #ffffff; text-align:center; background-color:#055bc3; border-radius:6px; } .login .login_button .item a, .login .login_button .item a:hover { display: block; font-weight: 500; font-size: 16px; line-height: 50px; color: #ffffff; text-align:center; } .login .login_button .item.v1 { color: #055bc3; background-color:#fff; border:1px solid #2a7fe5; } .login .login_button .item.v1 a, .login .login_button .item.v1 a:hover { color: #055bc3; } /* 회원가입 */ #sub { margin-top: 73px; } #join { width:650px; margin:0 auto; padding:80px 0 200px; } #join .join_head { padding-bottom: 45px; border-bottom:2px solid #dbdbdb; } #join .join_head .title { font-weight: 700; font-size: 32px; line-height: 32px; color: #000000; letter-spacing: 0; text-align: center; } #join .join_head .title_info { margin-top: 20px; font-weight: 400; font-size: 18px; line-height: 28px; color: #444444; letter-spacing: -0.5px; text-align: center; } #join .join_head .title_info span { color: #055bc3; } #join .join_field { display: flex; flex-direction: column; gap: 28px; padding:40px 0 0; } #join .join_field .field_item { display:flex; flex-direction:column; gap:8px; } #join .join_field .field_item .subject { padding: 0 10px; font-weight: 600; font-size: 14px; line-height: 14px; color: #222222; letter-spacing: 0; text-align: left; } #join .join_field .field_item .item_row { display:flex; gap:8px; align-items:center; } #join .join_field .field_item .item_row.v1 { } #join .join_field .field_item .item_row.v2 { } #join .join_field .field_item .item_row .input { flex-grow: 1; font-weight: 500; height:46px; padding: 0 20px; font-size: 14px; line-height: 46px; color: #adadad; background-color:#fff; border:1px solid #d9d9d9; outline: none; border-radius:4px; } #join .join_field .field_item .item_row .btn { } #join .join_field .field_item .item_row .btn a, #join .join_field .field_item .item_row .btn a:hover { display: block; height:46px; padding: 0 20px; font-weight: 500; font-size: 14px; line-height: 46px; color: #5f5f5f; background-color:#fff; border:1px solid #d9d9d9; border-radius:4px; } #join .join_field .field_item .item_row .textarea { flex-grow: 1; font-weight: 500; height:150px; padding: 20px; font-size: 14px; line-height: 28px; color: #adadad; background-color:#fff; border:1px solid #d9d9d9; outline: none; border-radius:4px; resize:none; } #join .agree { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: 14px; line-height: 16px; color: #adadad; } #join .agree .toggle { cursor: pointer; position: relative; width:36px; height:16px; background-color:#dbdbdb; border-radius:80px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #join .agree .toggle .point { position:absolute; width:12px; height:12px; left: 2px; top: 2px; background-color:#fff; border-radius:80px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; } #join .agree .toggle.on { background-color:#055bc3; } #join .agree .toggle.on .point { left: auto; right: 2px; } #join .join_button { display:flex; gap: 8px; margin-top:50px; } #join .join_button .item { flex-grow: 1; height:50px; font-weight: 500; font-size: 18px; line-height: 50px; color: #ffffff; text-align:center; background-color:#055bc3; border-radius:6px; } #join .join_button .item a, #join .join_button .item a:hover { display: block; font-weight: 500; font-size: 16px; line-height: 50px; color: #ffffff; text-align:center; } #join .join_button .item.v1 { color: #055bc3; background-color:#fff; border:1px solid #2a7fe5; } #join .join_button .item.v1 a, #join .join_button .item.v1 a:hover { color: #055bc3; } /* 컨텐츠소개 */ #introduce { padding:80px 0 0; } #introduce.v1 { padding:0 0 0; } #introduce .introduce_head { width:1300px; margin:0 auto; padding-bottom:80px; } #introduce .introduce_head .head_thum { line-height:0; box-shadow:0 0 12px rgba(0, 0, 0, 0.06); } #introduce .introduce_head .head_info { display: flex; flex-direction: column; gap: 34px; margin:80px 40px 0; } #introduce .introduce_head .head_info .item { display: flex; gap:20px; } #introduce .introduce_head .head_info .item .number { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width:32px; height:32px; font-weight: 700; font-size: 16px; color: #fff; background-color:#055bc3; border-radius:80px; } #introduce .introduce_head .head_info .item .info { padding-top: 3px; font-weight: 400; font-size: 18px; line-height: 28px; color: #444444; letter-spacing:-0.5px; word-break: keep-all; } #introduce .introduce_row { padding: 50px 0; background-color:#ecf3ff; } #introduce .introduce_row.v1 { background-color:#fff; } #introduce .introduce_row .outer { display: flex; flex-direction: column; gap: 0; width:1300px; margin:0 auto; padding:0 0 0 30px; } #introduce .introduce_row .outer .row_item { flex-grow: 1; display:flex; justify-content:space-between; align-items:center; gap:100px; } #introduce .introduce_row .outer .row_item .thum_info { } #introduce .introduce_row .outer .row_item .thum_info .info_title { font-weight: 700; font-size: 32px; line-height: 32px; color: #000000; letter-spacing: 0; text-align: left; } #introduce .introduce_row .outer .row_item .thum_info .info_p { margin-top: 25px; font-weight: 400; font-size: 18px; line-height: 28px; color: #444444; letter-spacing: -0.5px; text-align: left; word-break: keep-all; } #introduce .introduce_row .outer .row_item .thum_info .info_p span { font-weight: 600; color: #055bc3; } #introduce .introduce_row .outer .row_item .thum_info .info_p i { display:block; } #introduce .introduce_row .outer .row_item .info_tag { display:flex; flex-wrap:wrap; gap:6px; margin-top:35px; } #introduce .introduce_row .outer .row_item .info_tag .tag_item { padding: 0 10px; font-weight: 400; font-size: 13px; line-height: 24px; color: #ffffff; background-color: #898989; border-radius:4px; } #introduce .introduce_row .outer .row_item .thum { line-height:0; } #introduce .introduce_row .outer .row_item .info_btn { display: flex; margin-top:25px; } #introduce .introduce_row .outer .row_item .info_btn .button { cursor: pointer; display:flex; gap: 10px; align-items: center; padding: 13px 20px; font-weight: 400; font-size: 16px; line-height: 16px; color: #ffffff; background-color: #055bc3; border-radius:6px; } /* 리포트 팝업 */ #report_bg { position:fixed; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); z-index:999999; display:none; } #report { position:fixed; width:100%; height:100vh; left:0; top:0; -webkit-overflow-scrolling:touch; z-index:999999; display:table; display:none; } #report .outer { display:table-cell; vertical-align:middle; } #report .outer .inner { position:relative; width:750px; margin:0 auto; padding: 0; background-color:#fff; } #report .outer .inner .inner_box { position:relative; width:750px; height: 980px; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #report .outer .inner .inner_box.v1 { overflow-y: auto; } #report .outer .inner .btn_close { position:absolute; right:-40px; top:4px; cursor:pointer; } /* 게시판 */ #press { width:1220px; margin:0 auto; padding:60px 0 100px; } /* 게시판 - 일반리스트 */ #press > .list { overflow: hidden; border:1px solid #ededed; border-radius: 6px; } #press > .list ul { margin:0; padding:0; } #press > .list li { display:table; list-style:none; width:100%; border-bottom: 1px solid #ededed; } #press > .list li:last-child { border-bottom: none; } #press > .list li .th { display:table-cell; vertical-align:middle; position: relative; padding: 10px 0; font-size: 16px; font-weight: 500; line-height: 28px; color: #202020; letter-spacing: 0; text-align: center; background-color: #f8f9fb; border-left: 1px solid #ededed; border-bottom: 1px solid #ededed; } #press > .list li .th:first-child { border-left: none; } #press > .list li .td { display:table-cell; vertical-align:middle; padding: 16px; font-size: 14px; font-weight: 400; line-height: 28px; color: #5f5f5f; letter-spacing: 0; text-align: center; border-left: 1px solid #ededed; } #press > .list li .td:first-child { border-left: none; } #press > .list li .col_no { width:120px; } #press > .list li .col_subject { } #press > .list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #press > .list .list_head { } #press > .list .list_body { } #press > .list .list_body ul { margin:0; padding:0; } #press > .list .list_body li { list-style:none; background-color:#fff; } #press > .list .list_body li .col_subject { cursor: pointer; display:flex; gap:20px; align-items:center; } #press > .list .list_body li .col_subject .thum { line-height:0; } #press > .list .list_body li .col_subject .thum_info { display:flex; flex-direction:column; } #press > .list .list_body li .col_subject .thum_info .subject { font-weight: 500; font-size: 16px; line-height: 28px; color: #404040; } #press > .list .list_body li .col_subject .thum_info .date { font-weight: 300; font-size: 14px; line-height: 28px; color: #5f5f5f; } #press > .list .list_body:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* 게시판 - 보기 */ #press > .view { } #press > .view .subject { position: relative; margin: 0 30px 20px; font-size: 18px; font-weight: 600; line-height: 28px; color: #222222; } #press > .view .option { border-top: 3px solid #444444; } #press > .view .option ul { margin: 0; padding: 0; } #press > .view .option li { list-style: none; padding: 16px 0; border-bottom: 1px solid #d9d9d9; font-size: 0; } #press > .view .option .col { display: inline-block; vertical-align: middle; position: relative; width: 50%; } #press > .view .option .col .title { position: absolute; left: 30px; top: 0; padding-left: 28px; font-size: 16px; line-height: 28px; color: #222222; } #press > .view .option .col .title:after { content: ""; position: absolute; width: 12px; height: 9px; left: 0; top: 50%; margin-top: -5px; background: url("/WEBSITE/images/board/dot1.png") no-repeat; } #press > .view .option .col .info { margin: 0 0 0 165px; font-size: 16px; line-height: 28px; color: #5f5f5f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } #press > .view .option:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #press > .view .content { margin: 40px 30px 80px; font-size: 16px; font-weight: 400; line-height: 28px; color: #5f5f5f; } #press > .view .list_preview { border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } #press > .view .list_preview ul { margin: 0; padding: 0; font-size: 0; } #press > .view .list_preview li { display: inline-block; vertical-align: top; position: relative; width: 50%; padding: 16px 0; } #press > .view .list_preview .title { position: absolute; left: 30px; top: 16px; padding-left: 28px; font-size: 16px; line-height: 28px; color: #333333; letter-spacing: -0.5px; text-align: left; } #press > .view .list_preview .title:after { content: ""; position: absolute; width: 7px; height: 12px; left: 0; top: 50%; margin-top: -6px; background: url("/WEBSITE/images/board/dot_prev.png") no-repeat; } #press > .view .list_preview .info { margin: 0 0 0 165px; font-size: 16px; line-height: 28px; color: #888888; letter-spacing: -0.5px; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } #press > .view .list_preview .info a, #press > .view .list_preview .info a:hover { font-size: 16px; font-weight: normal; line-height: 28px; color: #888888; letter-spacing: -0.5px; text-align: left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } #press > .view .list_preview li:nth-child(2) { } #press > .view .list_preview li:nth-child(2) .title { left: auto; right: 30px; padding-left: 0; padding-right: 28px; text-align: right; } #press > .view .list_preview li:nth-child(2) .title:after { left: auto; right: 0; background: url("/WEBSITE/images/board/dot_next.png") no-repeat; } #press > .view .list_preview li:nth-child(2) .info { margin: 0 165px 0 0; text-align: right; } #press > .view .list_preview li:nth-child(2) .info a, #press > .view .list_preview li:nth-child(2) .info a:hover { text-align: right; } #press > .view .list_preview:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #press > .view .btn_list { margin: 50px 0 0; } #press > .view .btn_list ul { margin: 0; padding: 0; font-size: 0; text-align: center; } #press > .view .btn_list li { display: inline-block; vertical-align: top; list-style: none; width: 24.4%; margin: 0 0 0 0.8%; background-color: #8f8f8f; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #press > .view .btn_list li:last-child { background-color: #282828; } #press > .view .btn_list li:first-child { margin: 0; } #press > .view .btn_list a, #press > .view .btn_list a:hover { display: block; font-size: 15px; font-weight: normal; line-height: 50px; color: #ffffff; letter-spacing: 0; text-align: center; } #press > .view .btn_list:after{ content:""; display:block; clear:both; /* height:0; visibility:hidden; */} #press > .view .btn_list .input { cursor: pointer; width: 100%; height: 50px; font-size: 15px; font-weight: normal; line-height: 48px; color: #ffffff; text-align: center; background-color: #8f8f8f; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; border:none; } /* 페이징 */ #paging { position: relative; margin: 40px 0 0; padding: 16px 0 20px; background-color: #fff; font-size: 0; text-align: center; } #paging.paging_reple { position: relative; left: auto; right: auto; bottom: auto; padding: 35px 0 20px; background-color: transparent; border-top: none; } #paging .paging_btn { cursor: pointer; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-top: 3px; text-align: center; text-indent:-9999px } #paging .paging_btn.first { background: url("/WEBSITE/images/board/first.svg") no-repeat center; margin-right: 10px; } #paging .paging_btn.before { background: url("/WEBSITE/images/board/before.svg") no-repeat center; } #paging .paging_btn.next { background: url("/WEBSITE/images/board/next.svg") no-repeat center; } #paging .paging_btn.last { background: url("/WEBSITE/images/board/last.svg") no-repeat center; margin-left: 10px; } #paging .paging_list { display: inline-block; vertical-align: middle; margin: 0 18px; } #paging .paging_list ul { margin: 0; padding: 0; } #paging .paging_list li { display: inline-block; vertical-align: top; list-style: none; margin: 0 10px; } #paging .paging_list a, #paging .paging_list a:hover { display: block; font-weight: normal; font-size: 14px; line-height: 24px; color: #888888; letter-spacing: -0.5px; text-align: center; } #paging .paging_list li.select a, #paging .paging_list li.select a:hover { font-weight: bold; font-size: 14px; color: #242424; } #paging .paging_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */} /* TABLE TITLE */ #table_title { display: flex; justify-content: space-between; align-items: center; padding:20px; font-weight: 600; font-size:20px; color:#222222; text-align: center; background-color:#fff; } #table_title .btn_area { display:flex; gap:8px; } #table { background-color:#fff; border-top: 1px solid #dadada; } #table th { padding: 10px 20px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 13px; font-weight: bold; line-height: 20px; color: #444444; letter-spacing: -0.5px; text-align: left; background-color: #f7f7f7; border-bottom:1px solid #dadada; word-break: keep-all; } #table th a, #table th a:hover { font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 14px; font-weight: bold; line-height: 29px; color: #444444; letter-spacing: -0.5px; text-align: center; text-decoration:underline; } #table th .th_option { margin-top: 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 12px; font-weight: bold; line-height: 18px; color: #666666; letter-spacing: -0.5px; text-align: left; } #table td { padding: 10px 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-size: 13px; font-weight: normal; line-height: 20px; color: #666666; letter-spacing: -0.5px; text-align: left; border-bottom: 1px solid #dadada; } #table td a, #table td a:hover { font-size: 14px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: bold; line-height: 20px; color: #0056c5; letter-spacing: -0.5px; } #table .option1 { display: flex; align-items: center; gap: 8px; margin: 5px 0 0; font-size: 12px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: bold; line-height: 20px; color: #666666; letter-spacing: -0.5px; } #table .input { width:100%; height:36px; padding: 0 15px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } #table .textarea { width:100%; height:100px; padding: 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 150%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; resize:none; } #table .select { width:100%; height:36px; padding: 0 10px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 100%; color: #777777; background-color:#fff; border:1px solid #dddddd; border-radius:6px; } #table .btn1 { position: absolute; right: 4px; top: 4px; bottom: 4px; background-color:#999; border-radius:6px; } #table .btn1 a, #table .btn1 a:hover { padding: 0 15px; font-size: 13px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; line-height: 27px; color: #fff; letter-spacing: -0.5px; } #table .row { display:flex; flex-direction:column; gap:6px; } #table .row .row_item { position:relative; } #table .row1 { display:flex; align-items: center; gap:10px; } #table .row1 .item { position: relative; max-width:260px; } #table .row1 .item .icon { cursor: pointer; position: absolute; right:8px; top:8px; } /* TAB MENU1 */ #new_tab1 { display: flex; flex-wrap: wrap; margin:0 auto; background-color:#fff; } #new_tab1 .tab_item { } #new_tab1 .tab_item a { display:block; padding:16px 30px; font-weight: 500; font-size:1.1rem; color:#222222; text-align: center; background-color:#fff; } #new_tab1 .tab_item a:hover { font-weight: 600; color:#fff; background-color:#003399; } #new_tab1 .tab_item.select { } #new_tab1 .tab_item.select a, #new_tab1 .tab_item.select a:hover { display:block; padding:16px 30px; font-weight: 600; font-size:1.1rem; color:#fff; background-color:#003399; } /* 인쇄팝업 */ .print_pop_outer { display: none; justify-content: center; align-items: center; position:fixed; width:100%; height:100vh; left:0; top:0; z-index:999999; } .print_pop { width:450px; padding: 30px 0; background-color:#fff; border-radius:20px; border:1px solid #dee7f4; } .print_pop .pop_title { padding: 0 30px; font-size:18px; font-weight:800; color:#333; } .print_pop .pop_list { display:flex; flex-wrap: wrap; gap: 15px 0; width:100%; margin:20px 0 0; padding:0 26px; } .print_pop .pop_list .list_item { display: flex; align-items: center; gap: 5px; width:50%; } .print_pop .pop_list .list_item .item_subject { font-size:16px; line-height:20px; } .print_pop .pop_button { display: flex; justify-content: center; gap: 6px; margin:30px 20px 0; padding: 15px 0; border-top:1px solid #dee7f4; } .print_pop .pop_button .item { flex-grow: 1; background-color:#0056c5; border-radius:6px; } .print_pop .pop_button .item.gray { background-color:#6f6f6f; } .print_pop .pop_button .item a, .print_pop .pop_button .item a:hover { display: block; padding: 0 25px; font-family: "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",dotum,"돋움", sans-serif; font-weight: normal; font-size: 1rem; line-height: 36px; color: #f1f1f1; text-align:center; } @media screen and (max-width:1700px) { /* 갤러리 */ #board .gallery .gallery_item { width:23.5%; } /* 명함 */ #board .card .card_item { width:48.5%; } } @media screen and (max-width:1280px) { #header .head { display: flex; justify-content: center; flex-wrap: wrap; height:103px; } #header .head > h1 { position: absolute; left: 0; top: 68px; margin: 0; padding: 0 0 0 25px; line-height:0; } #header .head > .lnb { display:none; } #header > .gnb { display:none; } .gnb_btn { top:60px; } /* HEADER - GNB */ #header > .gnb .gnb_outer { display:none; } .gnb_btn { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; visibility: visible; } #header .head > .tab { order: 1; gap: 1%; width: 98%; height: 33px; margin: 0 auto; justify-content: center; } #header .head > .tab .tab_list { width: 32.66666%; padding-top:0; } #header .head > .tab .tab_list a { padding: 4px 0; text-align: center; border-top:none; border-bottom:1px solid #d9d9d9; border-top-left-radius:0; border-top-right-radius:0; border-bottom-left-radius:6px; border-bottom-right-radius:6px; } #header .head > .tab .tag { bottom:auto; top: 22px; padding: 1px 4px; } /* SIDE */ #side { left: -280px; } #side.on { left: 0; } .side_btn_more { left: 0; } .side_btn_more img { transform: rotate(180deg); } .side_btn_more.on { left: 279px; } .side_btn_more.on img { transform: rotate(0); } #content { margin: 0 0 0 0; } /* BOARD */ .table_outer { overflow-x:auto; } .table { width:1280px; } /* 20241029 */ .table.v1 { width:auto; } #modal_view { width:auto; } #modal_view .head_gnb ul { gap: 20px 30px; } #footer { left: 0; } /* 일괄설정 */ #all_setting { left:40px; } .list_default .item { width:50%; } /* TAB MENU */ #new_tab .tab_item { width:20%; border-bottom:1px solid #003399; } /* 20240926추가 */ .list_type5 { flex-direction: column; } .list_type5 .item { width:100%; } .list_type6 .item_col { width:49%; } /* 20241128 대메뉴추가 */ #logo { left: 15px; top: auto; bottom:0; } /* 241210 추가 */ #header .head > .new_lnb { right:90px; top:50px; } #container .slide .slide_thum { margin: 0 5%; } #container .slide .slide_thum img { width: 100%; } #container .app { width:auto; margin:0 5%; } #container .press { gap: 5%; width: auto; margin: 0 3%; } #container .press .press_item { width:30%; } .counsel .outer { width:auto; margin:0 3%; } /* 회원가입 */ #sub { margin-top: 103px; } /* 컨텐츠소개 */ #introduce .introduce_head { width:auto; margin:0 auto; padding: 0 30px 80px; } #introduce .introduce_head .head_thum img { width:100%; } #introduce .introduce_row .outer { gap: 50px; width:auto; margin:0 auto; padding:0 0 0 30px; } #introduce .introduce_row .outer .row_item .thum { text-align:right; } #introduce .introduce_row .outer .row_item .thum img { width:90% } /* 게시판 */ #press { width:auto; margin:0 3%; } } @media screen and (max-width:1024px) { #side { top: 106px;} #content { padding: 110px 0 0; } #content .content_outer { margin:0 3.5%; } /* BOARD */ #board .board_head { flex-direction: column; flex-wrap:wrap; } #board .board_head .total_count { order: 2; padding:0 10px 0 0; } #board .board_head .side { order: 1; flex-wrap: wrap; align-items: center; gap:10px; } #board .board_head .side .btn_area { flex-wrap:wrap; } /* 갤러리 */ #board .gallery .gallery_item { width:32%; } .list_title1 { width: 160px; font-size:1rem; } .list_option3 { gap:10px; font-size:1rem; } .list_type4 .item { min-width:100%; padding: 15px 30px; border-top:1px solid #e7e7e7; } .list_type4 .item.non_line { border-top:1px solid #e7e7e7; } /* TAB MENU */ #new_tab .tab_item { width:33.33333%; } /* 20241029 */ #modal_view .view_outer .modal_file ul { flex-wrap: wrap; gap: 6px 1%; margin:0; padding:0; } #modal_view .view_outer .modal_file li { width: 32.66666%; } #container .slide .slogan .slogan_title { font-size: 48px; line-height: 48px; } #container .app { padding:220px 0 120px; } #container .app .app_thum { padding: 0 5%; } #container .app .app_thum .thum1 img { width:100%; } #container .app .app_thum .thum2 img { width:100%; } #container .app .slogan { top:160px; } #container .app .slogan .slogan_title { font-size: 40px; line-height: 40px; } #container .service { padding: 100px 3%; } #container .service .service_title { font-size: 40px; line-height: 40px; } #container .service .card { gap: 40px; margin:135px 0 0; } #container .service .card .card_item .info .info_title { font-size: 28px; line-height: 28px; } .counsel .outer { display: flex; justify-content: space-between; align-items: center; width:auto; margin:0 3%; } .counsel .outer .info .info_title { font-size: 40px; line-height: 40px; } .counsel .outer .info .info_tel a, .counsel .outer .info .info_tel a:hover { font-size: 30px; line-height: 30px; } .counsel .outer .side { width:300px; } /* 컨텐츠소개 */ #introduce { padding:50px 0 0; } #introduce .introduce_head { padding: 0 20px 60px; } #introduce .introduce_head .head_info { gap: 20px; margin:60px 15px 0; } #introduce .introduce_head .head_info .item { gap:15px; } #introduce .introduce_head .head_info .item .info { font-size: 15px; line-height: 24px; } #introduce .introduce_row { padding: 40px 0; } #introduce .introduce_row .outer { gap: 40px; padding:0 0 0 0; } #introduce .introduce_row .outer .row_item { flex-direction: column; align-items: start; gap:20px; } #introduce .introduce_row .outer .row_item .thum_info { padding-left:20px; } #introduce .introduce_row .outer .row_item .thum_info .info_title { font-size: 28px; line-height: 28px; } #introduce .introduce_row .outer .row_item .thum_info .info_p { margin-top: 20px; font-size: 15px; line-height: 24px; } #introduce .introduce_row .outer .row_item .thum_info .info_p i { display:none; } #introduce .introduce_row .outer .row_item .info_tag { margin-top:25px; } #introduce .introduce_row .outer .row_item .thum { width: 100%; } #introduce .introduce_row .outer .row_item .thum img { width:100% } /* 리포트 팝업 */ #report .outer { padding:15px; } #report .outer .inner { width:auto; } #report .outer .inner img { width:100%; } #report .outer .inner .btn_close { position: fixed; left: 0; bottom: 0; right: 0; top: auto; height:40px; background-color:#999; text-align:center; cursor:pointer; } #report .outer .inner .btn_close img { width:16px; margin-top:10px; } #report .outer .inner .inner_box { width:auto; height: auto; } #report .outer .inner .inner_box.v1 { height: 60vh; } } @media screen and (max-width:768px) { /* 명함 */ #board .card { padding: 40px 30px; } #board .card .card_item { width:100%; } #board .card .card_item .item_info { padding:25px 30px; font-size:1.1429rem; line-height: 18px; } #board .card .card_item .item_info strong { display: block; font-size:1.7143rem; line-height: 30px; } #board .card .card_item .item_info span { font-size:1.4286rem; } #board .card .card_item .item_address { padding: 15px 30px; font-size: 1.0714rem; } /* 20240926추가 */ .list_type6 .item_col .item_logo img { height:45px; } .list_type5 { padding:15px 0;} .list_type5 .item { width:100%; padding:0 20px; } .list_type6 .item_col { width:100%; } .outer_box1 { min-height:50px; padding: 20px 15px; } #container .service { padding: 60px 3%; } #container .service .card { flex-direction: column; gap: 20px; margin:40px 0 0; } #container .service .card .card_item { width: auto; height: auto; padding: 24px; } #container .service .card .card_item.v1 { margin-top:0; } #container .service .card .card_item .info .info_title { font-size: 28px; line-height: 28px; } #container .service .card .card_item .tag { margin-top: 30px; } #container .press { flex-direction: column; gap: 20px; padding: 80px 0; } #container .press .press_item { width:auto; height: auto; padding: 0 30px 30px; } } @media screen and (max-width:640px) { #header .head { display: flex; justify-content: center; flex-wrap: wrap; height:83px; } #header .head > h1 { top: 54px; padding: 0 0 0 15px; } #header .head > h1 a, #header .head > h1 a:hover { font-size:24px } #header .head > h1 span { font-size:14px; } .gnb_btn { top:44px; } #header .head > .tab .tab_list a { font-size: 1rem; line-height: 1.5rem; } #side { top: 86px;} #content { padding: 110px 0 0; } #content .subject { height: auto; padding:20px 10px 10px; } #content .subject span { font-size:1.8rem; line-height:2rem; color:#333333; } /* 20241029 수정 */ .page_info .info .list { padding: 20px 15px; } #search { padding: 20px 15px; } #search .row { flex-wrap: wrap; gap:10px 1%; } #search .row .item { width:32.66666%; } #search .row .item.v1 { width: 100%; } #search .row .item.v2 { width: 100%; } /* FOOTER */ #footer { position: relative; left: auto; right: auto; bottom: auto; padding: 20px 10px 20px; } #footer .footer_head { padding: 0 10px 15px; } #footer .footer_head .list { gap:0 20px; } #footer .footer_copyright { padding: 15px 10px 0; } /* QUICK */ #quick { bottom:30px; } /* 갤러리 */ #board .gallery .gallery_item { width:49%; } /* 일괄설정 */ #all_setting { left:10px; right:10px; padding: 10px 10px; background: var(--color-start); /* Old browsers */ background: -moz-linear-gradient(bottom, var(--color-start) 0%, var(--color-end) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, bottom, left, color-stop(0%,var(--color-start)), color-stop(100%,var(--color-end))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, var(--color-start) 0%,var(--color-end) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(bottom, var(--color-start) 0%,var(--color-end) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(bottom, var(--color-start) 0%,var(--color-end) 100%); /* IE10+ */ background: linear-gradient(to bottom, var(--color-start) 0%,var(--color-end) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--color-start)', endColorstr='var(--color-end)',GradientType=0 ); /* IE6-9 */ } #all_setting .setting_title { display:none; } h3 { font-size:1.2rem; } h3 span { font-size:1rem; } h4 { margin:50px 5px 0; font-size:1.15rem; } .outer_box { padding: 15px; font-size:1rem; line-height: 26px; } .list_default .item { width:100%; } .list_type2 { padding:20px 15px; } .list_type2 li { font-size:1rem; } .list_option2 { padding: 15px; } .input3 { width:100%; } .select1 { width:100%; } .select2 { width:100%; } .list_title1 { width: 130px; } .list_title1 span.v1 { display:block; } .list_type3.v1 { gap:5px } /* TAB MENU */ #new_tab { margin:40px auto 0; } #new_tab .tab_item a { padding:10px 5px; font-size:0.9rem; } #new_tab .tab_item.select a, #new_tab .tab_item.select a:hover { padding:10px 5px; font-size:0.9rem; } /* 20241029 */ #modal_view .head_gnb { padding: 20px; } #modal_view .head_gnb ul { gap: 15px 20px; } #modal_view .head_gnb li a, #modal_view .head_gnb li a:hover { font-size:14px; } #modal_view .view_outer { margin: 30px 15px 10px; } #modal_view .view_outer .modal_title { padding:0 10px 10px; font-size:20px; } #modal_view .view_outer .modal_file ul { flex-wrap: wrap; gap: 6px 1%; margin:0; padding:0; } #modal_view .view_outer .modal_file li { width: 49.5%; padding: 12px 10px 12px 15px; } #logo { left: 10px; bottom:5px; } #logo .emblem img { height: 50px; } #logo .business_name { font-size:18px; } /* 241210 추가 */ #header .head > .new_lnb { display:none; } #container .slide { margin-top: 83px; } #container .slide .slogan { gap: 16px; padding:60px 0 40px; } #container .slide .slogan .slogan_title { font-size: 32px; line-height: 32px; } #container .slide .slogan .slogan_info { font-size: 15px; line-height: 24px; } #container .slide .slide_thum { margin: 0 5%; } #container .app { padding:100px 0 100px; } #container .app .app_thum { gap:20px; margin-top:50px } #container .app .app_thum .thum2 { padding-top: 60px; } @keyframes app_thum_fade2 { 0% { opacity: 0; padding:100px 0 0; } /* 0% 대신 from 으로 대체가능 */ 100% { opacity: 1; padding:60px 0 0; } /* 100% 대신 to 로 대체가능 */ } #container .app .slogan { position: relative; gap: 20px; top:auto; left:auto; text-align:center; } #container .app .slogan .slogan_title { font-size: 32px; line-height: 32px; text-align:center; } #container .app .slogan .slogan_info { font-size: 15px; line-height: 24px; text-align:center; } #container .service .service_title { font-size: 32px; line-height: 32px; } #container .service .card .card_item .info .icon img { width:40px; } #container .service .card .card_item .info .info_title { margin-top: 12px; font-size: 24px; line-height: 24px; } #container .service .card .card_item .info .info_text { margin-top: 16px; font-size: 15px; } #container .press { padding: 60px 0; } #container .press .press_item { padding: 0 20px 20px; } #container .press .press_item .info .info_title { font-size: 20px; line-height: 20px; } #container .press .press_item .info .info_text { font-size: 15px; line-height: 24px; } .counsel { padding: 60px 0; } .counsel .outer { flex-direction: column; gap: 30px; align-items: center; width:auto; } .counsel .outer .info { width:100%; } .counsel .outer .info .info_title { font-size: 32px; line-height: 32px; text-align:center; } .counsel .outer .info .info_text { margin: 20px 0 0; font-size: 16px; line-height: 24px; color: #ffffff; letter-spacing: 0; text-align: center; } .counsel .outer .info .info_tel { margin: 30px 0 0; text-align: center; } .counsel .outer .info .info_tel a, .counsel .outer .info .info_tel a:hover { font-size: 24px; line-height: 24px; text-align: center; } .counsel .outer .side { width:100%; } #login .outer .inner { width:auto; margin:15px; } #login .outer .inner .inner_box { padding:30px; } #login .outer .inner .btn_close { height:40px; left:auto; right:10px; top:-40px; } #login .outer .inner .btn_close img { width:20px; } /* 회원가입 */ #sub { } #join { width:auto; padding:40px 5% 100px; } #join .join_head .title_info { font-size: 15px; line-height: 24px; } #join .join_field .field_item .item_row.v1 { flex-direction:column; } #join .join_field .field_item .item_row.v1 .input { width:100%; } #join .join_field .field_item .item_row.v2 { gap:3.5%; } #join .join_field .field_item .item_row.v2 .input { flex-grow: 1; width:31%; } #join .join_field .field_item .item_row .input { padding: 0 10px; } #join .join_field .field_item .item_row .btn a, #join .join_field .field_item .item_row .btn a:hover { padding: 0 10px; } #join .join_field .field_item .item_row .textarea { padding: 10px; } #press { padding:40px 0 100px; } #press > .list li { display:block; padding: 15px; } #press > .list li .td { display:inline-block; padding: 0; font-size: 15px; } #press > .list li .col_no { display: none; } #press > .list li .col_subject { border:none; } #press > .list .list_head { display: none; } #press > .list .list_body li .col_subject { gap:10px; } #press > .list .list_body li .col_subject .thum img { width:80px; } #press > .list .list_body li .col_subject .thum_info .subject { font-size: 15px; line-height: 24px; } #press > .list .list_body li .col_subject .thum_info .date { font-size: 13px; line-height: 24px; } /* 게시판 - 보기 */ #press > .view .subject { margin: 0 15px 15px; font-size: 20px; line-height: 30px; } #press > .view .option { border-top: 2px solid #444444; } #press > .view .option li { padding: 0; border-bottom: none; } #press > .view .option .col { display: block; width: auto; padding: 10px 0; border-bottom: 1px solid #d9d9d9; } #press > .view .option .col .title { left: 20px; top: 10px; padding-left: 25px; } #press > .view .option .col .info { margin: 0 0 0 125px; } #press > .view .content { margin: 30px 20px 60px; } #press > .view .content img { width:100%; height: auto; } #press > .view .list_preview li { display: block; width: auto; padding: 10px 0; } #press > .view .list_preview .title { position: relative; left: auto; top: auto; margin: 0 20px; padding-left: 25px; } #press > .view .list_preview .title:after { width: 12px; height: 7px; margin-top: -3px; background: url("/WEBSITE/images/board/dot_prev_m.png") no-repeat; } #press > .view .list_preview .info { margin: 0 0 0 45px; } #press > .view .list_preview li:nth-child(2) { border-top: 1px solid #d9d9d9; } #press > .view .list_preview li:nth-child(2) .title { left: auto; right: auto; padding-left: 25px; padding-right: 0; text-align: left; } #press > .view .list_preview li:nth-child(2) .title:after { left: 0; right: auto; background: url("/WEBSITE/images/board/dot_next_m.png") no-repeat; } #press > .view .list_preview li:nth-child(2) .info { margin: 0 0 0 45px; text-align: left; } #press > .view .list_preview li:nth-child(2) .info a, #press > .view .list_preview li:nth-child(2) .info a:hover { text-align: left; } #press > .view .btn_list { margin: 40px 0 0; } #press > .view .btn_list a, #press > .view .btn_list a:hover { line-height: 40px; } #press > .view .btn_list .input { height: 40px; line-height: 40px; } /* 인쇄팝업 */ .print_pop { width:auto; padding: 20px 0; margin:20px; } .print_pop .pop_title { padding: 0 20px; font-size:16px; } .print_pop .pop_list { gap: 10px 0; margin:10px 0 0; padding:0 16px; } .print_pop .pop_list .list_item .item_subject { font-size:15px; } }