@charset "UTF-8"; /* NotoSansKR 적용 */ /*@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(../../assets/fonts/NotoSansKR-Light.woff2) format('woff2'), url(../../assets/fonts/NotoSansKR-Light.woff) format('woff'), url(../../assets/fonts/NotoSansKR-Light.otf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../../assets/fonts/NotoSansKR-Regular.woff2) format('woff2'), url(../../assets/fonts/NotoSansKR-Regular.woff) format('woff'), url(../../assets/fonts/NotoSansKR-Regular.otf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 600; src: url(../../assets/fonts/NotoSansKR-Medium.woff2) format('woff2'), url(../../assets/fonts/NotoSansKR-Medium.woff) format('woff'), url(../../assets/fonts/NotoSansKR-Medium.otf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../../assets/fonts/NotoSansKR-Bold.woff2) format('woff2'), url(../../assets/fonts/NotoSansKR-Bold.woff) format('woff'), url(../../assets/fonts/NotoSansKR-Bold.otf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 800; src: url(../../assets/fonts/NotoSansKR-Black.woff2) format('woff2'), url(../../assets/fonts/NotoSansKR-Black.woff) format('woff'), url(../../assets/fonts/NotoSansKR-Black.otf) format('opentype');} */ /* Paperlogy 적용 */ @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 300; src: url(../../assets/fonts/Paperlogy-3Light.ttf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; src: url(../../assets/fonts/Paperlogy-4Regular.ttf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 600; src: url(../../assets/fonts/Paperlogy-6SemiBold.ttf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; src: url(../../assets/fonts/Paperlogy-7Bold.ttf) format('opentype');} @font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 800; src: url(../../assets/fonts/Paperlogy-8ExtraBold.ttf) format('opentype');} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;} body { font-family: "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif; font-size: 16px; color: #222; line-height: 1.6; -webkit-text-size-adjust: none; letter-spacing: -0.1px; word-break: keep-all;} caption { display:none;} ol, ul { list-style: none;} blockquote, q { quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none;} table { border-collapse: collapse; border-spacing: 0;} button { padding: 0; border: 0; border-radius: 0; background-color: transparent; font-family: "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif; cursor: pointer;} input, textarea { border: 0; box-shadow: none; appearance: none; font-family: "Noto Sans KR", "Malgun Gothic", "NanumGothic";} input::placeholder, textarea::placeholder { color: #bcbcbc; opacity: 1;} input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #bcbcbc;} input::-ms-input-placeholder, textarea::-ms-input-placeholder { /* Microsoft Edge */ color: #bcbcbc;} textarea { word-break: keep-all;} input[type="button"], input[type="email"], input[type="password"], input[type="reset"], input[type="search"], input[type="submit"], input[type="tel"], input[type="text"] { -webkit-appearance: none; border-radius: 0;} input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none;} img { vertical-align: top; image-rendering: -webkit-optimize-contrast; transform: translateZ(0); backface-visibility: hidden;} a { color: inherit; text-decoration: none;} address, em, i { font-style: normal;} mark { background-color: transparent;} .skip_nav { position: relative; width: 100%; z-index: 99999;} .skip_nav a { position: absolute; left: 0; top: -1000px; display: block; width: 100%; padding: 14px 0; font-style: normal; font-variant: normal; text-align: center; font-size: 17px; color: #ffffff; background: #21649c;} .skip_nav a:active, .skip_nav a:focus { top: 0; text-decoration: none; color: #ffffff;} .hidden { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; color: transparent;} @media screen and (max-width: 799px) { .mobile { display: block !important;} .tablet, .pc { display: none !important;} } @media screen and (min-width: 800px) and (max-width: 1023px) { .mobile, .pc { display: none !important;} .tablet { display: block !important;} } @media screen and (min-width: 1024px) { .mobile, .tablet { display: none !important;} .pc { display: block !important;} } @media screen and (max-width: 1023px) { .min-pc { display: none !important;} .max-tablet { display: block !important;} } @media screen and (min-width: 1024px) { .max-tablet { display: none !important;} .min-pc { display: block !important;} } .overflow-hidden { overflow: hidden;} .btn-area.center { text-align: center; display: flex; justify-content: center;} .btn-area.center.view_btn { margin-top:40px;margin-bottom:40px;} .btn { display: inline-block; padding: 11px 15px 11px 15px; border: 1px solid #dadada; background: #fff; color: #222; font-size: 14px;} .btn.btn-download { min-width: 145px;} .btn.btn-download:hover { color: #339933;} .btn.btn-download::after { content: ""; display: inline-block; width: 15px; height: 14px; margin-left: 45px; background: url("../../assets/images/icon-download.png") no-repeat 0 0; background-size: 15px 14px; vertical-align: middle;} @media screen and (max-width: 1023px) { .btn.btn-download { min-width: auto; height: 40px;} .btn.btn-download::after { margin-left: 0;} .btn.btn-download span { display: inline-block; text-indent: -9999em;} } @media screen and (max-width: 799px) { .btn.btn-download { padding: 0 11px;} .btn.btn-download::after { width: 12px; height: 11px; background-size: 12px 11px;} } @media screen and (max-width: 520px) { .btn-area.center.view_btn { margin-bottom:120px;} } .btn.btn-preview { min-width: 145px;} .btn.btn-preview:after { content: ""; display: inline-block; width: 21px; height: 20px; margin-left: 45px; background: url("../../assets/images/icon-pdf.png") no-repeat 0 0; background-size: 21px 20px; vertical-align: middle;} .btn.btn-filter { height: 44px;} .btn.btn-filter::after { content: ""; display: inline-block; width: 17px; height: 17px; margin-left: 12px; background: url("../../assets/images/icon-filter.png") no-repeat 0 0; background-size: 17px 17px; vertical-align: middle;} .btn.btn-filter.on { color: #339933;} .btn.btn-filter.on::after { background: url("../../assets/images/icon-filter-on.png") no-repeat 0 0; background-size: 17px 17px;} @media screen and (max-width: 1023px) { .btn.btn-filter { min-width: auto; height: 40px; padding: 0 8px;} .btn.btn-filter::after { margin-left: 0; background-size: 12px 12px; vertical-align: middle;} .btn.btn-filter span { display: inline-block; margin-top: 2px; text-indent: -9999em;} } @media screen and (max-width: 799px) { .btn.btn-filter { width: 34px; height: 34px; padding: 0;} .btn.btn-filter::after { width: 12px; height: 12px; background-size: 12px 12px !important;} } .btn.btn-more { min-width: 380px; padding: 18px 0; font-size: 16px; line-height: 1; color: #444;} @media screen and (max-width: 799px) { .btn.btn-more { width: 100%; min-width: auto; padding: 12px 0; font-size: 12px;} } .btn.btn-list { min-width: 380px; padding: 18px 0; font-size: 14px; line-height: 1;} .btn.btn-list:before { display: inline-block; width: 12px; height: 11px; margin-right: 13px; background: url("../../assets/images/icon-list.png") no-repeat 0 0; background-size: 12px auto; content: "";} @media screen and (min-width: 800px) and (max-width: 1023px) { .btn.btn-list { min-width: 152px; font-size: 16px;} } @media screen and (max-width: 799px) { .btn.btn-list { min-width: 166px; padding: 12px 0;} } .btn.btn-detail { display: flex; align-items: center;} .btn.btn-detail:before, .btn.btn-detail:after { position: absolute; top: calc(50% - 4px); width: 1px; height: 8px; background-color: #222; content: "";} .btn.btn-detail:after { transform: rotate(90deg);} .btn.btn-detail:before, .btn.btn-detail:after { right: 18px;} .btn.btn-detail span { margin-right: 38px;} @media screen and (max-width: 799px) { .btn.btn-detail { padding: 5px 10px;} .btn.btn-detail:before, .btn.btn-detail:after { right: 10px;} .btn.btn-detail span { margin-right: 25px; font-size: 13px;} } .btn.btn-black { min-width: 230px; height: 58px; padding: 15px; background: #444343; border-radius: 5px; color: #fff; font-size: 20px;} @media screen and (max-width: 799px) { .btn.btn-black { min-width: 165px; height: 40px; padding: 7px 15px; font-size: 14px;} } .btn.btn-green { background: #00ade9; color: #fff;} .add-file { display: inline-block; font-size: 14px; color: #666;} .add-file::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 15px; margin-top: -5px; background: url("../../assets/images/icon-download.png") no-repeat 0 0; background-size: 16px 16px; vertical-align: middle;} @media screen and (max-width: 1023px) { .add-file { font-size: 13px;} .add-file::before { margin-right: 7px; width: 15px; height: 15px; background-size: 15px 15px;} } .btn-call { display: inline-block; margin-top: 8px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.28); font-size: 12px; line-height: 1; color: #fff; vertical-align: 8px;} .btn-call:after { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #7a807c; border-right: 1px solid #7a807c; content: ""; transform: rotate(45deg);} .table-wrap { position: relative; margin-top: 20px; border-top: 1px solid #999;} .table-wrap .table { width: 100%; border-bottom: 1px solid #999; max-width: 1200px;} .table-wrap .table th, .table-wrap .table td { min-width: 80px; color: #000;} .table-wrap .table th.min-pc, .table-wrap .table td.min-pc { display: table-cell !important;} @media screen and (max-width: 1023px) { .table-wrap .table th.min-pc.min-pc, .table-wrap .table td.min-pc.min-pc { display: none !important;} } .table-wrap .table th.max-tablet, .table-wrap .table td.max-tablet { display: none;} @media screen and (max-width: 1023px) { .table-wrap .table th.max-tablet.max-tablet, .table-wrap .table td.max-tablet.max-tablet { display: table-cell;} } .table-wrap .table thead th { padding: 13px 8px 13px 8px; font-size: 16px; text-align: center; font-weight: 500; background-color: #519f3f; color: #fff;} .table-wrap .table thead th > span { display: inline-flex; min-height: 30px; align-items: center;} .table-wrap .table tbody th, .table-wrap .table tbody td { padding: 14px 20px 14px; font-size: 16px; text-align: center; vertical-align: middle;} .table-wrap .table tbody th { color: #333; font-weight: 600;} .table-wrap .table tbody td { color: #666;} .table-wrap .table tbody td.num { color: #666;} .table-wrap .table tbody td.td-title { /* font-weight: 500; */} .table-wrap .table tbody td.left { text-align: left;} .table-wrap .table tbody td.left2 { text-align: left;} .table-wrap .table tbody td.nowrap { white-space: nowrap;} .table-wrap .table tbody td.f-green { color: #00ade9 !important;} .table-wrap .table tbody td.highlight { color: #383838 !important;} .table-wrap .table tbody td .cricle-gray { display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 6px solid #999; background: #f7f7f7;} .table-wrap .table tbody td .cricle-gray.ty2 { border-color: #c2c2c2;} @media screen and (max-width: 799px) { .table-wrap .table tbody td .cricle-gray { width: 20px; height: 20px; border-width: 4px;} } .table-wrap .table tbody td .list-style { margin-bottom: 0;} .table-wrap .table tbody td .list-style li { font-size: 16px;} @media screen and (max-width: 799px) { .table-wrap .table tbody td .list-style li { font-size: 13px;} } @media screen and (max-width: 1023px) { .table-wrap .table colgroup, .table-wrap .table thead { display: none;} .table-wrap .table .sm-none { display: none !important;} .table-wrap .table .sm-view { display: block;} } .acc-tabletype .table-wrap { margin-top: 0;} .acc-tabletype .table-wrap .table-inner { border-top: 0;} .table-wrap .table.tb-sm th, .table-wrap .table.tb-sm td { padding: 13px 18px 12px 35px; font-size: 16px;} .table-wrap .table.tb-sm th{ text-align:left;} @media screen and (max-width: 799px) { .table-wrap .table.tb-sm th, .table-wrap .table.tb-sm td { font-size: 12px; padding: 13px 15px 12px;} } .table-wrap .table.tb-sm2 th, .table-wrap .table.tb-sm2 td { font-size: 16px;} @media screen and (max-width: 799px) { .table-wrap .table.tb-sm2 th, .table-wrap .table.tb-sm2 td { font-size: 13px;} } .table-wrap .table.border-b tbody tr:last-child th, .table-wrap .table.border-b tbody tr:last-child td { } .table-wrap .table.tb-gray thead th { border-left: 1px solid #ddd; background: #efefef; color: #333; font-size: 16px; font-weight: 500;} .table-wrap .table.tb-gray thead th:first-child { border-left: 0;} .table-wrap .table.tb-gray tbody td { border-left: 1px solid #ddd; color: #333;} .table-wrap .table.tb-gray tbody td:first-child { border-left: 0;} @media screen and (max-width: 1023px) { .table-wrap .table.grid-ty1 thead { display: flex;} .table-wrap .table.grid-ty1 thead th:nth-child(3), .table-wrap .table.grid-ty1 thead th:nth-child(4) { display: none;} .table-wrap .table.grid-ty1 tr { display: flex; flex-wrap: wrap; width: 100%;} .table-wrap .table.grid-ty1 th, .table-wrap .table.grid-ty1 td { display: inline-flex; align-items: center; justify-content: center;} .table-wrap .table.grid-ty1 th:nth-child(odd), .table-wrap .table.grid-ty1 td:nth-child(odd) { width: 35%; border-left: 0;} .table-wrap .table.grid-ty1 th:nth-child(even), .table-wrap .table.grid-ty1 td:nth-child(even) { width: 65%;} } @media screen and (max-width: 799px) { .table-wrap .table.grid-ty1 thead th, .table-wrap .table.grid-ty1 tbody th, .table-wrap .table.grid-ty1 tbody td { font-size: 14px;} } @media screen and (max-width: 1023px) { .table-wrap .table.grid-ty2 tr td { display: block; padding: 12px 12px 12px 12px; text-align: left;} .table-wrap .table.grid-ty2 tr td.sm-inline { } .table-wrap .table.grid-ty2 tr > td:nth-child(2) { padding-top: 20px !important; padding-bottom: 1px !important;} .table-wrap .table.grid-ty2 tr > td:nth-child(6) { padding-bottom: 20px !important;} .table-wrap .table.grid-ty2 tr > td.last { padding-bottom: 20px !important;} .table-wrap .table.grid-ty2 tr td.sm-inline { display: inline-block; position: relative; padding: 10px 12px 0 12px; border-bottom: 0; font-size: 14px; color: #666; } .table-wrap .table.grid-ty2 tr td.sm-inline + .sm-inline::after { content: ""; display: inline-block; position: absolute; bottom: 24px; left: -5px; width: 1px; height: 12px; background: #e4e4e4;} .table-wrap .table.grid-ty2 tr td.sm-block { /*padding-bottom: 30px; */ padding: 12px 15px 0 12px;} } @media screen and (max-width: 1023px) { .table-wrap .table.grid-ty3 tbody td { padding: 25px 20px;} .table-wrap .table.grid-ty3 tbody td .date { display: block; margin-top: 5px; color: #777; font-size: 16px;} } @media screen and (max-width: 799px) { .table-wrap .table.grid-ty3 tbody td { padding: 25px 10px; font-size: 20px;} .table-wrap .table.grid-ty3 tbody td .date { display: block; margin-top: 5px; color: #777; font-size: 16px;} } @media screen and (max-width: 1023px) { .table-wrap .table.grid-ty4 tbody tr { display: flex; flex-wrap: wrap;} .table-wrap .table.grid-ty4 tbody th { width: 30%;} .table-wrap .table.grid-ty4 tbody td { width: 70%;} } @media screen and (max-width: 799px) { .table-wrap .table.grid-ty4 th, .table-wrap .table.grid-ty4 td { padding: 20px 15px; font-size: 14px;} } @media screen and (max-width: 1023px) { .table-wrap .table.grid-ty5 { border-bottom: 1px solid #999;} .table-wrap .table.grid-ty5 tr:not(:first-child) td.sm-block { border-top: 1px solid #dadada;} .table-wrap .table.grid-ty5 tr td { display: block; padding: 12px 12px 12px 12px; border-bottom: 0; text-align: left;} .table-wrap .table.grid-ty5 tr td.sm-inline { display: inline-block; position: relative; padding: 0 12px; font-size: 14px; line-height: 20px; color: #666; vertical-align: top;} .table-wrap .table.grid-ty5 tr td.sm-inline:not(:last-child)::after { content: ""; display: inline-block; position: absolute; top: 4px; right: 0; width: 1px; height: 12px; background: #e4e4e4;} .table-wrap .table.grid-ty5 tr td.sm-inline:last-child { padding-bottom: 30px;} .table-wrap .table.grid-ty5 tr td.sm-block { padding-top: 30px; font-weight: 700; font-size: 20px; line-height: 30px; color: #000;} } @media screen and (min-width: 1024px) { .table-wrap .table.tb-default tbody tr:hover td { background-color: #f7fdf6;} } .scroll-table .table-wrap { overflow-x: auto; overflow-y: hidden;} .scroll-table .table-inner { white-space: nowrap;} .scroll-table .table { white-space: normal; width: 100%;} @media screen and (max-width: 1023px) { .scroll-table .table colgroup { display: table-column-group;} } .scroll-table .table thead th { vertical-align: middle; background-color: #519f3f;} @media screen and (max-width: 1023px) { .scroll-table .table thead { display: table-header-group;} } .scroll-table .table th, .scroll-table .table td { border-left: 1px solid #dadada; border-bottom: 1px solid #dadada;} .scroll-table .table th:first-child, .scroll-table .table td:first-child { border-left: 0;} .scroll-table .table th.boder-lf, .scroll-table .table td.boder-lf { border-left: 1px solid #dadada;} .scroll-table .table thead tr + tr th:first-child { border-left: 1px solid #dadada;} .selectbox { position: relative;} .selectbox .select { position: relative; display: block; border: 1px solid #ccc; padding: 12px 5px 10px 10px; font-size: 14px; color: #bcbcbc; cursor: pointer;} .selectbox .select:after { position: absolute; top: calc(50% - 4px); right: 12px; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #333; border-right: 1px solid #333; content: ""; transform: rotate(135deg); transform: translateY(-50%) rotate(135deg);} .selectbox .select.active { color: #222;} .selectbox .lists { display: none; position: absolute; top: 100%; left: 0; z-index: 3; overflow-y: auto; min-width: 100%; max-height: 230px; padding: 10px; border: 1px solid #ccc; background-color: #fff; font-size: 14px; line-height: 30px; color: #222;} .selectbox .lists li { cursor: pointer;} .selectbox.on .select:after { top: calc(50% + 1px); transform: translateY(-50%) rotate(-45deg);} .checkbox-wrap .checkbox { display: none;} .checkbox-wrap .checkbox + label { display: inline-block; position: relative; font-size: 14px; line-height: 24px; color: #fff; vertical-align: middle;} .checkbox-wrap .checkbox + label::before { display: inline-block; content: ""; width: 16px; height: 16px; margin-right: 10px; border: 1px solid #dadada; cursor: pointer; vertical-align: middle;} @media screen and (max-width: 799px) { .checkbox-wrap .checkbox + label { font-size: 15px; line-height: 100%;} .checkbox-wrap .checkbox + label::before { width: 15px; height: 15px; margin-right: 10px;} } .checkbox-wrap .checkbox:checked + label::after { position: absolute; top: 0; left: 6px; text-align: center; display: inline-block; width: 8px; height: 16px; border-right: 5px solid #00ade9; border-bottom: 5px solid #00ade9; transform: rotate(45deg); content: "";} @media screen and (max-width: 799px) { .checkbox-wrap .checkbox:checked + label::after { left: 4px; display: inline-block; width: 5px; height: 10px; border-right: 3px solid #00ade9; border-bottom: 3px solid #00ade9; transform: rotate(45deg); content: "";} } .checkbox-wrap.checkbox-inline { display: flex; margin-left: 3px; justify-content: space-between;} .file-box { display: flex; width: 100%; height: 100%;} .file-box .upload-name { flex: 1; padding: 10px; background-color: #fff;} .file-box label { display: inline-block; align-self: center; max-height: 36px; padding: 0 10px; color: #000; font-size: 16px; line-height: 36px; color: #fff; vertical-align: middle; background-color: #444; border-radius: 5px; vertical-align: middle; cursor: pointer;} @media screen and (max-width: 799px) { .file-box label { max-height: 28px; font-size: 12px; line-height: 28px;} } .form-box { display: flex; align-items: center; width: 100%; height: 80px; padding: 0 10px; border-bottom: 1px solid #dadada;} @media screen and (max-width: 799px) { .form-box { height: 70px; padding: 0 7px;} } .form-box .title { width: 100px; font-size: 16px;} .form-box .title .require::after { display: inline-block; content: "*"; color: #ff4444;} @media screen and (max-width: 799px) { .form-box .title { width: 90px; font-size: 16px;} } .form-box .form-wrap { flex: 1; height: 100%;} .form-box .form-wrap .inp { width: 100%; height: 100%; padding: 0 10px; box-sizing: border-box; font-size: 16px; outline: none;} .form-box .form-wrap .inp::placeholder { font-size: 14px; color: #777;} @media screen and (max-width: 799px) { .form-box .form-wrap .inp { font-size: 16px;} .form-box .form-wrap .inp::placeholder { font-size: 12px;} } .form-box .form-wrap .selectbox { width: 100%; height: 100%;} .form-box .form-wrap .selectbox .select { display: flex; align-items: center; width: 100%; height: 100%; color: #777; border: 0;} .form-box .form-wrap .selectbox .select::after { display: inline-block; width: 8px; height: 8px; border-top: 3px solid #333; border-right: 3px solid #333; content: ""; transform: rotate(135deg);} .form-box .form-wrap .selectbox.on .select:after { top: calc(50% + 5px); transform: translateY(-50%) rotate(-45deg);} .form-box .form-wrap .selectbox.selectbox-lg .lists li { padding: 3px 0; font-size: 14px;} @media screen and (max-width: 799px) { .form-box .form-wrap .selectbox.selectbox-lg .lists li { font-size: 14px;} } .form-box .form-wrap .textarea { width: 100%; height: 100%; padding: 0 10px; box-sizing: border-box; font-size: 20px; outline: none;} .form-box .form-wrap .textarea::placeholder { font-size: 14px; color: #777;} @media screen and (max-width: 799px) { .form-box .form-wrap .textarea { font-size: 16px;} .form-box .form-wrap .textarea::placeholder { font-size: 12px;} } .tabs-wrap .tabs { display: flex; flex-wrap: wrap;} .tabs-wrap .tabs .tab:not(:first-child) { margin-left: 5px;} .tabs-wrap .tabs .tab a { display: block; padding: 9px 20px; background-color: #f5f5f5; font-size: 18px; color: #666;} .tabs-wrap .tabs .tab.active a { background-color: #00ade9; color: #fff;} .tabs-wrap .tabs.wide { width: 100%; margin-bottom: 40px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; align-content: stretch;} .tabs-wrap .tabs.wide .tab { flex: 1; text-align: center; flex-basis: 0;} .tabs-wrap .tabs.wide .tab:not(:first-child) { margin-left: 0;} .tabs-wrap .tabs.wide .tab a { display: flex; align-items: center; justify-content: center; white-space: nowrap; height: 100%; padding: 12px 8px 10px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; background-color: #fff; font-weight: 600; font-size: 16px;} .tabs-wrap .tabs.wide .tab.active a { border-color: #00ade9; background-color: #00ade9; color: #fff;} .tabs-wrap .tabs.wide .tab:last-child.active a { border-right-color: #00ade9;} @media screen and (max-width: 799px) { .tabs-wrap .tabs.wide.type2 li { flex-basis: 50%;} } @media screen and (max-width: 799px) { .tabs-wrap .tabs .tab:not(:first-child) { margin-left: 4px;} .tabs-wrap .tabs .tab a { padding: 7px 12px; font-size: 15px;} .tabs-wrap + .board-wrap { margin-top: 17px;} } .tab-title-wrap { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px;} .tab-title-wrap .title-wrap { margin-bottom: 0;} .tab-title-wrap .title-wrap .title { position: relative; padding-left: 58px; font-size: 40px; color: #000; font-weight: 700; line-height: 1.6; margin-right: 10px;} @media screen and (max-width: 799px) { .tab-title-wrap .title-wrap .title { padding-left: 40px; font-size: 24px;} } .tab-title-wrap .title-wrap .title::before { display: inline-block; content: ""; position: absolute; top: 50%; left: 0; width: 40px; height: 40px; transform: translateY(-50%); background: url("../../assets/images/icon-logo.png") no-repeat center center; background-size: 40px 40px;} @media screen and (max-width: 799px) { .tab-title-wrap .title-wrap .title::before { width: 28px; height: 28px; background-size: 28px 28px;} } .tab-title-wrap .title-wrap .eng { margin-top: 5px; font-size: 24px; color: #666; font-weight: 700;} @media screen and (max-width: 799px) { .tab-title-wrap .title-wrap .eng { font-size: 16px;} } .tab-title-wrap .btn-wrap .btn { font-size: 12px; color: #666;} .tab-title-wrap .btn-wrap .btn.pre { padding: 8px 18px;} .tab-title-wrap .btn-wrap .btn.pre:before { margin-right: 15px; display: inline-block; width: 7px; height: 7px; border-top: 1px solid #666; border-right: 1px solid #666; content: ""; transform: rotate(-135deg);} .tab-title-wrap .btn-wrap .btn.next { padding: 8px 18px;} .tab-title-wrap .btn-wrap .btn.next:after { margin-left: 15px; display: inline-block; width: 7px; height: 7px; border-top: 1px solid #666; border-right: 1px solid #666; content: ""; transform: rotate(45deg);} @media screen and (max-width: 799px) { .tab-title-wrap .btn-wrap .btn { text-align: center;} .tab-title-wrap .btn-wrap .btn.pre { padding: 7px 9px 6px 12px;} .tab-title-wrap .btn-wrap .btn.pre::before { margin-right: 0; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #666; border-right: 2px solid #666; content: ""; transform: rotate(-135deg);} .tab-title-wrap .btn-wrap .btn.next { padding: 7px 12px 6px 9px;} .tab-title-wrap .btn-wrap .btn.next::after { margin-left: 0; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #666; border-right: 2px solid #666; content: ""; transform: rotate(45deg);} .tab-title-wrap .btn-wrap .btn span { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; color: transparent;} } .board-wrap .board-title { display: flex; justify-content: space-between; align-items: center;} .board-wrap .board-title .title-wrap { margin-bottom: 0;} .board-wrap .board-title .title-wrap .title-h3 { margin-bottom: 0;} @media screen and (max-width: 799px) { .board-wrap.not-full { padding-top:60px;} .board-wrap .board-title .title-wrap .title-h3 { font-size: 28px;} } .board-wrap .board-title2 { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: -20px; font-size: 24px;} .board-wrap .board-title2 .title-wrap2 .title2-h3 { } .board-wrap .board-title2 .title-wrap2 .title2-h3 .text2 { font-size: 14px;} .board-wrap .board-title2 .title-wrap2 .title2-h3 .text3 { color: #ff4444;} .board-wrap .title2-h4 { font-size: 16px; text-align:right; margin-top:10px; margin-bottom:-10px;} .board-wrap .title2-h4 .text4 { color: #00ade9; font-weight:600;} .board-wrap .title2-h4 .text5 { color: #999;} @media screen and (max-width: 799px) { .board-wrap .board-title2 .title-wrap2 .title2-h3 { font-size: 24px;} .board-wrap .board-title2 .title-wrap2 { margin-bottom: 10px;} .board-wrap .title2-h4 { margin-bottom: 20px; font-size: 13px;} } @media screen and (min-width: 800px) and (max-width: 1280px) { .board-wrap .board-title2 .title-wrap2 .title2-h3 { margin-bottom: 0; font-size: 24px;} .board-wrap .board-title2 .title-wrap2 .title2-h3 .text2 { font-size: 14px;} } .board-wrap .board-title .button-wrap .btn-arrow:after { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #000; border-right: 1px solid #000; content: ""; transform: rotate(45deg); margin-left: 40px;} @media screen and (max-width: 799px) { .board-wrap .board-title .button-wrap .btn-arrow { padding: 5px 15px 3px; font-size: 12px;} .board-wrap .board-title .button-wrap .btn-arrow:after { margin-left: 15px;} } .board-wrap .board-title + .board-list, .board-wrap .board-title + .text-box { margin-top: 20px;} .board-wrap .board-list-head { margin-bottom: 15px; position: relative; display: flex; justify-content: space-between;} .board-wrap .board-list-head .selectbox { width: 100px; margin-right: 16px; } .board-wrap .board-list-head .search-wrap { display: flex; justify-content: flex-end;width: 100%;} .board-wrap .board-list-head .search-wrap .search-area { display: flex; height: 44px; background-color: #fff;height: 34px;} .board-wrap .board-list-head .search-wrap .search-area .search-box { display: inline-block; vertical-align: middle;width: 100%; padding-right: 10px;} .board-wrap .board-list-head .search-wrap .search-area .search-box .inp-search { width: 155px; height: 42px; padding: 0; font-size: 14px; border-bottom: 1px solid #ccc;font-size: 14px;} .board-wrap .board-list-head .search-wrap .search-area .search-btn .search-go { width: 34px; height: 100%; padding: 12px 8px; background: url("../../assets/images/icon-list-search.png") no-repeat center center;width: 30px; padding: 8px 7px; background-size: 16px;} .board-wrap .board-list-head .total-count { color: #777; padding-top: 20px; font-size: 12px; display: flex; font-size: 14px;} .board-wrap .board-list-head .total-count p span { margin-left: 5px;} .board-wrap .board-list-head .total-count ul { width: 300px;} .board-wrap .board-list-head .total-count ul li { float: left; margin-left: 20px; font-weight: 600;} .board-wrap .board-list-head .total-count ul li .active { color: #222;} .board-wrap .board-list-head .total-count ul li a:hover { color: #222;} .board-wrap .board-list-head .total-count { position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: row;} .board-wrap .list-wrap .lists .item { position: relative; display: block; width: 100%; padding: 24px 0 0; } .board-wrap .list-wrap .lists .thumbnail { border-radius: 10px; position: relative; overflow: hidden; width: 100%; display: flex; align-items: center;} .board-wrap .list-wrap .infect .thumbnail { display: unset;} .board-wrap .list-wrap .lists .thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: auto; transform: translateX(0) scale(1); transition: all 0.3s ease-out;} .board-wrap .list-wrap .lists .item:hover { border-color: #00ade9;} .board-wrap .list-wrap .lists .item:hover:after { background-image: url("../../assets/images/icon-list-arrow-on.png");} .board-wrap .list-wrap .lists .item:hover .thumbnail img { transform: translateX(0) scale(1.1); transition: all 0.3s ease-out;} .board-wrap .list-wrap .lists .contents { padding: 20px;} .board-wrap .list-wrap .lists .contents.radius { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;} @media screen and (max-width: 1024px) { } @media screen and (max-width: 800px) { .board-wrap .board-list-head { flex-wrap: wrap;} .board-wrap .board-list-head .search-wrap form { width: 100%;} .board-wrap .board-list-head .search-wrap .search-area .search-box .inp-search { width: 100%;} .board-wrap .board-list-head .total-count { display: block; position: unset; padding-top: 40px;} .board-wrap .list-wrap .lists .contents { height: unset;} .board-wrap .list-wrap .lists .contents.radius { padding: 20px;} .board-wrap .list-wrap .lists .thumbnail img { max-height: 250px;} #container.main-container .board-wrap .list-wrap .lists .thumbnail img { max-height: unset;} } @media screen and (max-width: 640px) { .board-wrap .list-wrap .lists .thumbnail img { max-height: 200px;} .contents-sec2 .board-wrap .list-wrap .about { padding-top: 30px !important;} } .board-wrap .list-wrap .lists .title { overflow: hidden; display: -webkit-box; max-height: 56px; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 28px; font-size: 18px; word-break: keep-all; font-weight:500;color: #222; } .board-wrap .list-wrap .lists .content { overflow: hidden; display: -webkit-box; max-height: 48px; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 24px; margin-top: 6px; font-size: 16px; color: #666; word-break: keep-all; font-weight: 300;} .board-wrap .flag { display: block; margin-bottom: 5px; font-size: 14px; color: #d70c18; margin-top: 10px; margin-right: 10px;} .board-wrap .date { font-size: 14px; color: #777; margin-top: 10px;} @media screen and (max-width: 800px) { .board-wrap .list-wrap .lists { margin: 0;} .board-wrap .list-wrap .lists .item { width: 100%; padding: 0;} .board-wrap .list-wrap .lists .item:after { display: none;} .board-wrap .list-wrap .lists .thumbnail { padding-bottom: 0;} .board-wrap .list-wrap .lists .thumbnail img { position: static; width: 100%; height: auto; transform: none; transition: none; max-height: unset;} .board-wrap .list-wrap .lists .item:hover { border-color: #eee;} .board-wrap .list-wrap .lists .item:hover .thumbnail img { transform: none; transition: none;} .board-wrap .flag { font-weight: 400;} .board-wrap .date { font-size: 12px;} } @media screen and (max-width: 520px) { .board-wrap .list-wrap .lists .item:not(:first-child) { padding-top: 30px;} } .board-wrap .list-wrap .lists.type2 .item { width: 50%;} .board-wrap .list-wrap .lists.type2 .item2 { width: 33%;} .board-wrap .list-wrap .lists.type2 .box { position: relative; display: flex; /*height: 262px;*/ padding: 30px;} .board-wrap .list-wrap .lists.type2 .box:after { display: none;} .board-wrap .list-wrap .lists.type2 .thumbnail { flex-shrink: 0; width: auto;} .board-wrap .list-wrap .lists.type2 .thumbnail img { max-width: 130px;} @media screen and (min-width: 800px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.type2 .thumbnail img { max-width: 130px;} } .board-wrap .list-wrap .lists.type2 .contents { padding: 5px 0 61px 23px;} .board-wrap .list-wrap .lists.type2 .contents .title { display: block; max-height: none; font-size: 16px;} .board-wrap .list-wrap .lists.type2 .contents .content { display: block; max-height: none; margin-top: 20px;} .board-wrap .list-wrap .lists.type2 .btn { position: absolute; bottom: 30px; right: 30px; z-index: 1;} .board-wrap .list-wrap .lists.type2 .btn[class*="preview"] { margin-top: auto;} @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.type2 .btn[class*="preview"] { padding: 11px 15px;} } .board-wrap .list-wrap .lists.type2 .btn[class*="preview"] span { text-indent: 0;} .board-wrap .list-wrap .lists.type2 .btn[class*="preview"]:after { margin-left: 45px;} .board-wrap .list-wrap .lists.type2 .btn[class*="download"] { margin-top: auto;} @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.type2 .btn[class*="download"] { padding: 11px 15px;} } .board-wrap .list-wrap .lists.type2 .btn[class*="download"] span { text-indent: 0;} .board-wrap .list-wrap .lists.type2 .btn[class*="download"]:after { margin-left: 45px;} .board-wrap .list-wrap .lists.type2.brochure .thumbnail { border: 1px solid #ccc;} .board-wrap .list-wrap .lists.type2.brochure .contents { padding: 15px 0 61px 23px; word-break: break-word;} .board-wrap .list-wrap .lists.type2.certify .thumbnail { border: 1px solid #ccc; height: 183px;} @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.type2.certify .thumbnail { -ms-grid-row-align: start; align-self: flex-start;} .board-wrap .list-wrap .lists.type2.certify .thumbnail img { width: 100%;} } .board-wrap .list-wrap .lists.type2.certify .contents { flex: 1; display: flex; flex-direction: column; padding: 0 0 0 30px;} .board-wrap .list-wrap .lists.type2.certify .contents .content { margin-bottom: 20px;} .board-wrap .list-wrap .lists.type2.certify .contents p { margin-top: 10px;} .board-wrap .list-wrap .lists.type2.certify .btn-group { display: flex; margin-top: auto;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn { flex: 1 0; display: flex; justify-content: space-between; align-items: center; position: static; min-width: auto; height: 42px; padding: 0 15px;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn:after { margin-left: 0;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn + .btn { margin-left: 15px;} @media screen and (min-width: 1024px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.type2.certify .btn-group .btn { flex: 0; justify-content: center; width: 36px; min-width: 36px; height: 36px; padding: 0; border-color: #000; border-radius: 100px;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn span { height: 0; text-indent: -9999em;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn.btn-preview:after { width: 16px; height: 18px; background-size: 16px 18px;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn.btn-download:after { width: 16px; height: 16px; background-size: 16px 16px;} } @media screen and (min-width: 800px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.type2.certify .btn-group .btn:hover { border-color: #00ade9;} .board-wrap .list-wrap .lists.type2 .item2 { width: 50%;} } @media screen and (max-width: 800px) { .board-wrap .list-wrap .lists.type2 .thumbnail { padding-bottom: 0;} .board-wrap .list-wrap .lists.type2 .thumbnail img { position: static; height: auto; transform: translateX(0) scale(1);} .board-wrap .list-wrap .lists.type2 .box:hover .thumbnail img { transform: scale(1.1);} .board-wrap .list-wrap .lists.type2 .box:hover .btn { color: #00ade9;} .board-wrap .list-wrap .lists.type2 .box:hover .btn[class*="detail"]:before, .board-wrap .list-wrap .lists.type2 .box:hover .btn[class*="detail"]:after { background-color: #00ade9;} .board-wrap .list-wrap .lists.type2 .box:hover .btn[class*="download"]:after { background-image: url("../../assets/images/icon-download-on.png");} .board-wrap .list-wrap .lists.type2.certify .box:hover .btn { color: #000;} .board-wrap .list-wrap .lists.type2.certify .box:hover .btn[class*="download"]:after { background-image: url("../../assets/images/icon-download.png");} .board-wrap .list-wrap .lists.type2.certify .box .btn:hover { color: #00ade9;} .board-wrap .list-wrap .lists.type2.certify .box .btn:hover[class*="download"]:after { background-image: url("../../assets/images/icon-download-on.png");} .board-wrap .list-wrap .lists.type2.certify .box .btn:hover[class*="preview"]:after { background-image: url("../../assets/images/icon-pdf-on.png");} .board-wrap .list-wrap .lists.type-row { margin: 0;} .board-wrap .list-wrap .lists.type-row .box { display: flex; align-items: center; min-height: 166px;} .board-wrap .list-wrap .lists.type-row .thumbnail { flex-shrink: 0; max-width: 282px; min-height: 164px; padding-bottom: 0;} .board-wrap .list-wrap .lists.type-row.prd .thumbnail { } .board-wrap .list-wrap .lists.type-row .contents { padding: 0 30px;} } @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.type2.certify .btn-group .btn { flex: 0; justify-content: center; width: 36px; min-width: 36px; height: 36px; padding: 0; border-color: #000; border-radius: 100px;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn span { height: 0; text-indent: -9999em;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn.btn-preview:after { width: 16px; height: 18px; background-size: 16px 18px;} .board-wrap .list-wrap .lists.type2.certify .btn-group .btn.btn-download:after { width: 16px; height: 16px; background-size: 16px 16px;} } @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.type2.certify .btn-group .btn + .btn { margin-left: 6px;} .board-wrap .list-wrap .lists.type2 .item { width: 100%;} .board-wrap .list-wrap .lists.type2 .item2 { width: 100%;} .board-wrap .list-wrap .lists.type2 .box { padding: 16px;} .board-wrap .list-wrap .lists.type2 .thumbnail img { width: 129px;} .board-wrap .list-wrap .lists.type2 .contents { padding: 6px 0 50px 13px;} .board-wrap .list-wrap .lists.type2 .contents .title { font-size: 18px;} .board-wrap .list-wrap .lists.type2 .contents .content { margin-top: 13px;} .board-wrap .list-wrap .lists.type2 .btn-detail { bottom: 16px; right: 16px;} .board-wrap .list-wrap .lists.type2.brochure .btn-download { bottom: 16px; right: 16px; min-width: 108px; height: 30px; padding: 6px 11px; font-size: 13px;} .board-wrap .list-wrap .lists.type2.brochure .btn-download:after { margin-left: 25px; vertical-align: 0;} } .board-wrap .list-wrap .lists.type2-row { margin: -30px 0 0;} .board-wrap .list-wrap .lists.type2-row .item { width: 100%; padding: 30px 0 0;} .board-wrap .list-wrap .lists.type2-row .box { position: relative; display: flex; height: 100%; padding: 30px;} .board-wrap .list-wrap .lists.type2-row .box:after { display: none;} .board-wrap .list-wrap .lists.type2-row .thumbnail { flex-shrink: 0; width: auto; border: 1px solid #ccc;} .board-wrap .list-wrap .lists.type2-row .contents { display: flex; flex-direction: column; align-items: flex-start; padding: 0 0 0 40px;} .board-wrap .list-wrap .lists.type2-row .contents .title { display: block; max-height: none; padding-right: 110px; font-weight: 500; font-size: 20px;} /* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .board-wrap .list-wrap .lists.type2-row .contents .title { height: 40px; } } .board-wrap .list-wrap .lists.type2-row .contents .content { display: block; max-height: none; margin: 20px 0;} .board-wrap .list-wrap .lists.type2-row .contents .content li { display: flex; line-height: 30px;} .board-wrap .list-wrap .lists.type2-row .contents .content li span { flex-shrink: 0; width: 160px;} .board-wrap .list-wrap .lists.type2-row .contents .info span { display: block; margin-bottom: 2px;} .board-wrap .list-wrap .lists.type2-row .contents .date { position: absolute; top: 25px; right: 30px; font-size: 14px; color: #777;} .board-wrap .list-wrap .lists.type2-row .btn-download { margin-top: auto; min-width: 145px;} .board-wrap .list-wrap .lists.type2-row .btn-download span { text-indent: 0;} .board-wrap .list-wrap .lists.type2-row .btn-download:after { margin-left: 45px;} @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.type2-row .thumbnail { -ms-grid-row-align: start; align-self: flex-start; padding-bottom: 0;} .board-wrap .list-wrap .lists.type2-row .thumbnail img { position: static; height: auto; transform: translateX(0) scale(1);} .board-wrap .list-wrap .lists.type2-row .box:hover .thumbnail img { transform: scale(1.1);} .board-wrap .list-wrap .lists.type2-row .box:hover .btn-download { color: #00ade9;} .board-wrap .list-wrap .lists.type2-row .box:hover .btn-download:after { background-image: url("../../assets/images/icon-download-on.png");} } @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .list-wrap .lists.type2-row .btn-download { padding: 10px 15px 12px;} .board-wrap .list-wrap .lists.type2-row .btn-download:after { vertical-align: -2px;} } @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.type2-row { margin: -20px 0 0;} .board-wrap .list-wrap .lists.type2-row .item { padding: 20px 0 0;} .board-wrap .list-wrap .lists.type2-row .box { padding: 15px;} .board-wrap .list-wrap .lists.type2-row .thumbnail img { width: 126.5px;} .board-wrap .list-wrap .lists.type2-row .contents { padding: 5px 0 0 15px;} .board-wrap .list-wrap .lists.type2-row .contents .title { padding-right: 0; font-size: 14px;} .board-wrap .list-wrap .lists.type2-row .contents .content { display: none;} .board-wrap .list-wrap .lists.type2-row .contents .date { position: static; margin-top: 15px; font-size: 12px; color: #666;} .board-wrap .list-wrap .lists.type2-row .btn-download { min-width: 108px; height: 30px; padding: 6px 11px; font-size: 13px;} .board-wrap .list-wrap .lists.type2-row .btn-download:after { margin-left: 25px; vertical-align: 0;} } .board-wrap .list-wrap .lists.request { position: relative; margin: -40px -45px 0;} .board-wrap .list-wrap .lists.request .item { position: relative; width: 20%; margin-bottom: 110px; padding: 40px 40px 0;} @media screen and (min-width: 1024px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.request .item { width: 25%; padding: 40px 45px 0;} } @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .list-wrap .lists.request .item { width: 25%; padding: 40px 45px 0;} } .board-wrap .list-wrap .lists.request .item .thumbnail { width: auto; background-color: #fff; padding: 5px; height: 220px;} @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.request .item .thumbnail { width: auto; background-color: #fff; padding: 5px; height: auto;} } .board-wrap .list-wrap .lists.request .item .thumbnail img { position: static; width: 100%; height: auto; transform: translateX(0) scale(1);} .board-wrap .list-wrap .lists.request .item .contents { position: absolute; top: 100%; width: 100%; padding: 25px 10px 10px;} .board-wrap .list-wrap .lists.request .item .contents .title { overflow: hidden; display: -webkit-box; max-height: 72px; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 24px; font-size: 14px; text-align: center;} .board-wrap .list-wrap .lists.request .item .hover-cont { display: flex; align-items: center; justify-content: center; position: absolute; top: 40px; left: 40px; right: 40px; bottom: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; z-index: -1; transition: all 0.5s ease;} @media screen and (min-width: 1024px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.request .item .hover-cont { left: 25px; right: 25px;} } .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap { position: relative;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn { padding-top: 56px; border: 0; background: transparent; color: #fff; font-size: 12px; box-sizing: border-box;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn::before { display: inline-block; content: ""; position: absolute; top: 0; left: 50%; margin-left: -25px; width: 50px; height: 50px; background-color: #fff; border: 1px solid #00ade9; border-radius: 50%; box-sizing: border-box;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.view::before { background: #fff url("../../assets/images/icon-pdf.png") no-repeat center center; background-size: 19px 19px;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.view:hover::before { background: #fff url("../../assets/images/icon-pdf-on.png") no-repeat center center; background-size: 19px 19px;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.down::before { background: #fff url("../../assets/images/icon-download.png") no-repeat center center; background-size: 18px 18px;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.down:hover::before { background: #fff url("../../assets/images/icon-download-on.png") no-repeat center center; background-size: 18px 18px;} .board-wrap .list-wrap .lists.request .item.on .hover-cont { opacity: 1; visibility: visible; z-index: 1;} @media screen and (min-width: 1024px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.request { margin: -40px -25px 0;} .board-wrap .list-wrap .lists.request .item { padding: 40px 25px 0; width: 25%;} .board-wrap .list-wrap .lists.request .hover-cont { left: 25px; right: 12px;} } @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .list-wrap .lists.request { margin: -40px -12px 0;} .board-wrap .list-wrap .lists.request .item { padding: 40px 12px 0; width: 25%; margin-bottom: 20px;} .board-wrap .list-wrap .lists.request .hover-cont { left: 12px; right: 12px;} } @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.request .item { width: 33%; margin-bottom: 10px; padding: 46px 15px 0;} } @media screen and (max-width: 500px) { .board-wrap .list-wrap .lists.request .item { width: 50%;} } @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.request { margin: -40px -7px 0;} .board-wrap .list-wrap .lists.request .item .box { border: none !important; pointer-events: none;} .board-wrap .list-wrap .lists.request .item .box::after { display: none; content: "";} .board-wrap .list-wrap .lists.request .item .box .contents { position: static;} .board-wrap .list-wrap .lists.request .item .hover-cont { position: static; padding-top: 15px; background: none; visibility: visible; opacity: 1; z-index: 1; transition: none;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn { width: 36px; height: 36px; margin: 0; padding: 0; font-size: 0;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn::before { position: static; width: 100%; height: 100%; margin: 0; border-color: #000;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.view::before, .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.view:hover::before { background-size: 16px 18px;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.down::before, .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn.down:hover::before { background-size: 16px 16px;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap .btn span { height: 0; text-indent: -9999em;} .board-wrap .list-wrap .lists.request .item .hover-cont .button-wrap + .button-wrap { margin-left: 22px;} } .board-wrap .list-wrap .lists.test-dept .box { height: 100%;} .board-wrap .list-wrap .lists.test-dept .box:after { display: none;} @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.test-dept .thumbnail { padding-bottom: 59%;} .board-wrap .list-wrap .lists.test-dept .box:hover .btn-more { color: #00ade9;} .board-wrap .list-wrap .lists.test-dept .box:hover .btn-more:after { border-color: #00ade9;} } .board-wrap .list-wrap .lists.test-dept .contents { padding-bottom: 50px;} .board-wrap .list-wrap .lists.test-dept .contents .title { display: block; max-height: none;} .board-wrap .list-wrap .lists.test-dept .contents .content { display: block; max-height: none; font-size: 16px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.test-dept .contents { padding-bottom: 35px;} .board-wrap .list-wrap .lists.test-dept .contents .content { font-size: 12px; line-height: 20px;} } .board-wrap .list-wrap .lists.test-dept .btn-more { position: absolute; bottom: 20px; right: 20px; font-size: 14px; color: #666;} .board-wrap .list-wrap .lists.test-dept .btn-more:after { margin-left: 3px; display: inline-block; width: 5px; height: 5px; border-top: 1px solid #555; border-right: 1px solid #555; content: ""; transform: rotate(45deg);} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.test-dept .btn-more { bottom: 10px; right: 15px; font-size: 12px;} } @media screen and (min-width: 1024px) { .board-wrap .list-wrap .lists.infect.type-row .thumbnail { max-width: 50%; cursor: auto;} } @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.infect.type-row .thumbnail img { position: static; transform: translateX(0); width: 100%; height: auto;} } @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.infect.type-row .thumbnail { max-width: none; min-height: auto;} } @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.infect .slider-wrap .sliders { padding: 0;} } .board-wrap .list-wrap .lists.infect .box { align-items: flex-start;} @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .list-wrap .lists.infect .box { flex-direction: column;} } .board-wrap .list-wrap .lists.infect .box:after { display: none;} .board-wrap .list-wrap .lists.infect .box:hover { border-color: #eee;} .board-wrap .list-wrap .lists.infect .box:hover .thumbnail img { transform: scale(1);} .board-wrap .list-wrap .lists.infect .contents { padding: 28px; cursor: auto;} .board-wrap .list-wrap .lists.infect .contents .title { display: block; max-height: none; font-size: 24px; font-weight: 600;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.infect .contents .title { font-size: 18px;} } .board-wrap .list-wrap .lists.infect .contents .content { display: block; max-height: none; margin-top: 20px; font-size: 14px;} .board-wrap .list-wrap .lists.infect .contents .content .list-style { margin-bottom: 0;} .board-wrap .list-wrap .lists.infect .contents .infect-study { margin-top: 14px; padding: 13px; background-color: #f7f7f7; font-size: 14px; color: #666; text-align: center;} .board-wrap .list-wrap .lists.infect .contents .infect-study span { display: inline-block;} .board-wrap .list-wrap .lists.infect .contents .infect-study span:not(:last-child):after { display: inline-block; width: 1px; height: 14px; margin: 0 14px; background-color: #959595; vertical-align: -2px; content: ""; vertical-align: -3px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.infect .contents { padding: 20px;} .board-wrap .list-wrap .lists.infect .contents .content { margin-top: 16px;} .board-wrap .list-wrap .lists.infect .contents .infect-study { margin-top: 10px; padding: 10px; font-size: 11px;} .board-wrap .list-wrap .lists.infect .contents .infect-study span:not(:last-child):after { margin: 0 5px; height: 10px; vertical-align: -2px;} } .board-wrap .list-wrap .lists.infect .item { padding-top: 0;} @media screen and (min-width: 1024px) { .board-wrap .list-wrap .lists.infect .item:nth-child(2) .thumbnail { order: 2;} .board-wrap .list-wrap .lists.infect .item:nth-child(2) .box .contents { order: 1;} } @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.test-order.type-row .thumbnail { max-width: 50%;} .board-wrap .list-wrap .lists.test-order.type-row .thumbnail img { position: static; transform: translateX(0); width: 100%; height: auto;} } .board-wrap .list-wrap .lists.test-order .box { align-items: flex-start;} .board-wrap .list-wrap .lists.test-order .box:after { display: none;} .board-wrap .list-wrap .lists.test-order .thumbnail { position: relative;} .board-wrap .list-wrap .lists.test-order .thumbnail .text { position: absolute; top: 3px; left: 20px; font-weight: 700; font-size: 30px; color: #fff;} .board-wrap .list-wrap .lists.test-order .thumbnail .text em { font-weight: 800; font-size: 64px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.test-order .thumbnail .text { font-size: 20px;} .board-wrap .list-wrap .lists.test-order .thumbnail .text em { margin-right: 5px; font-size: 42px;} } .board-wrap .list-wrap .lists.test-order .box:hover { border-color: #eee;} .board-wrap .list-wrap .lists.test-order .contents { padding: 40px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.test-order .contents { padding: 32px;} } .board-wrap .list-wrap .lists.test-order .contents .content { display: block; max-height: none;} .board-wrap .list-wrap .lists.test-order .contents .content > li { padding-left: 30px; background: url("../../assets/images/icon-check.png") no-repeat left top 2px; background-size: 20px auto; font-size: 20px; color: #000;} .board-wrap .list-wrap .lists.test-order .contents .content > li:not(:last-child) { margin-bottom: 20px;} .board-wrap .list-wrap .lists.test-order .contents .content .list-style { margin-top: 20px; margin-bottom: 0;} .board-wrap .list-wrap .lists.test-order .contents .content .text { margin-top: 20px; font-size: 16px; line-height: 28px; color: #666;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.test-order .contents .content > li { padding-left: 23px; background-size: 16px auto; font-size: 16px;} .board-wrap .list-wrap .lists.test-order .contents .content > li:not(:last-child) { margin-bottom: 12px;} .board-wrap .list-wrap .lists.test-order .contents .content .list-style { margin-top: 15px;} .board-wrap .list-wrap .lists.test-order .contents .content .text { margin-top: 15px; font-size: 13px; line-height: 140%;} } .board-wrap .list-wrap .lists.test-order .contents .btn-group { margin-top: 25px; font-size: 0;} .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow { margin-top: 5px; padding: 11px 20px 10px 15px /* 20220315수정 */} .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow:not(:last-child) { margin-right: 15px; /* 20220315수정 */} .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow:after { display: inline-block; width: 17px; height: 11px; margin-left: 18px; background: url("../../assets/images/icon-list-arrow-off.png") no-repeat center center; content: "";} @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow:hover { border-color: #00ade9;} .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow:hover:after { background-image: url("../../assets/images/icon-list-arrow-on.png");} } @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow { margin-top: 0; padding: 11px 20px 9px; font-size: 11px;} .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow:not(:last-child) { margin-right: 15px;} .board-wrap .list-wrap .lists.test-order .contents .btn-group .btn-arrow:after { width: 13px; height: 9px; margin-left: 15px; background-size: 13px auto;} } @media screen and (min-width: 1024px) { .board-wrap .list-wrap .lists.biological.type-row .thumbnail { max-width: 44%;} } @media screen and (min-width: 800px) { .board-wrap .list-wrap .lists.biological.type-row .thumbnail img { position: static; transform: translateX(0); width: 100%; height: auto;} } @media screen and (max-width: 1023px) { .board-wrap .list-wrap .lists.biological.type-row .thumbnail { max-width: none; min-height: auto;} } .board-wrap .list-wrap .lists.biological .box { align-items: flex-start;} @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .list-wrap .lists.biological .box { flex-direction: column;} } .board-wrap .list-wrap .lists.biological .box:after { display: none;} .board-wrap .list-wrap .lists.biological .box:hover { border-color: #eee;} .board-wrap .list-wrap .lists.biological .box:hover .thumbnail img { transform: scale(1);} .board-wrap .list-wrap .lists.biological .contents { padding: 28px;} .board-wrap .list-wrap .lists.biological .contents .title { display: block; max-height: none; font-size: 22px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.biological .contents .title { font-size: 18px;} } .board-wrap .list-wrap .lists.biological .contents .content { display: block; max-height: none; margin-top: 20px; font-size: 16px;} .board-wrap .list-wrap .lists.biological .contents .content .list-style { margin-bottom: 0;} .board-wrap .list-wrap .lists.biological .contents .content .list-style li { margin-top: 0;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.biological .contents { padding: 20px;} .board-wrap .list-wrap .lists.biological .contents .content { margin-top: 16px; font-size: 14px; line-height: 20px;} } .board-wrap .list-wrap .lists.gradient .box { padding-top: 4px;} .board-wrap .list-wrap .lists.gradient .box:before { top: 0; right: 0; left: 0; content: ""; display: inline-block; position: absolute; width: 100%; height: 4px; background: linear-gradient(90deg, #43af2e, #02a9dc);} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors { margin-top: -20px;} } .board-wrap .list-wrap .lists.doctors .item { width: 25%;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors .item { width: 50%; padding-top: 20px;} .board-wrap .list-wrap .lists.doctors .item:not(:first-child) { padding-top: 20px;} .board-wrap .list-wrap .lists.doctors .item:nth-child(even) { padding-left: 10px;} .board-wrap .list-wrap .lists.doctors .item:nth-child(odd) { padding-right: 10px;} } .board-wrap .list-wrap .lists.doctors .item .box { border-color: #e4e4e4; transition: all 0.5s ease;} .board-wrap .list-wrap .lists.doctors .item .box::after { display: none;} .board-wrap .list-wrap .lists.doctors .item .box .contents { padding: 50px 20px; text-align: center;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors .item .box .contents { padding: 25px 20px;} } .board-wrap .list-wrap .lists.doctors .item .box .contents .title { display: inline-block; position: relative; padding-left: 38px; font-size: 28px; color: #000; font-weight: 700; line-height: 1.6;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors .item .box .contents .title { padding-left: 30px; font-size: 19px;} } .board-wrap .list-wrap .lists.doctors .item .box .contents .title::before { display: inline-block; content: ""; position: absolute; top: 50%; left: 0; width: 32px; height: 32px; margin-top: -2px; transform: translateY(-50%); background: url("../../assets/images/icon-logo.png") no-repeat center center; background-size: 32px 32px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors .item .box .contents .title::before { width: 23px; height: 23px; background-size: 23px 23px;} } .board-wrap .list-wrap .lists.doctors .item .box .contents .eng { margin-top: 5px; font-size: 18px; color: #666; font-weight: 700;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors .item .box .contents .eng { font-size: 14px;} } .board-wrap .list-wrap .lists.doctors .item .box:hover, .board-wrap .list-wrap .lists.doctors .item .box:focus { background-color: #00ade9;} .board-wrap .list-wrap .lists.doctors .item .box:hover .contents .title, .board-wrap .list-wrap .lists.doctors .item .box:focus .contents .title { color: #fff;} .board-wrap .list-wrap .lists.doctors .item .box:hover .contents .title::before, .board-wrap .list-wrap .lists.doctors .item .box:focus .contents .title::before { background: url("../../assets/images/icon-logo-wh.png") no-repeat center center; background-size: 32px 32px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.doctors .item .box:hover .contents .title::before, .board-wrap .list-wrap .lists.doctors .item .box:focus .contents .title::before { background-size: 23px 23px;} } .board-wrap .list-wrap .lists.doctors .item .box:hover .contents .eng, .board-wrap .list-wrap .lists.doctors .item .box:focus .contents .eng { color: #fff;} .board-wrap .list-wrap .lists.clinical .item { display: flex; flex-direction: column; align-items: stretch; position: relative; width: 33.33%; min-height: 380px;} @media screen and (min-width: 1024px) and (max-width: 1280px) { .board-wrap .list-wrap .lists.clinical .item { width: 50%;} } @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .list-wrap .lists.clinical .item { width: 50%;} } @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item { width: 100%; min-height: 290px;} } .board-wrap .list-wrap .lists.clinical .item.title .thumbnail { height: 100%;} .board-wrap .list-wrap .lists.clinical .item.title .thumbnail img { width: 100%; height: 100%;} .board-wrap .list-wrap .lists.clinical .item .inner { position: relative; display: flex; flex-direction: column; align-items: stretch; height: 100%;} .board-wrap .list-wrap .lists.clinical .item .box { height: 100%; border: 1px solid #ccc;} .board-wrap .list-wrap .lists.clinical .item .box::after { display: none;} .board-wrap .list-wrap .lists.clinical .item .contents { position: relative; padding: 200px 40px 40px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item .contents { padding: 170px 20px 20px;} } .board-wrap .list-wrap .lists.clinical .item .contents::before { content: ""; display: inline-block; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 120px; height: 120px; background-size: 120px 120px !important;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item .contents::before { width: 100px; height: 100px; background-size: 100px 100px !important;} } .board-wrap .list-wrap .lists.clinical .item .contents.ty1::before { background: url("../../assets/images/icon-scope-01.png");} .board-wrap .list-wrap .lists.clinical .item .contents.ty2::before { background: url("../../assets/images/icon-scope-02.png");} .board-wrap .list-wrap .lists.clinical .item .contents.ty3::before { background: url("../../assets/images/icon-scope-03.png");} .board-wrap .list-wrap .lists.clinical .item .contents.ty4::before { background: url("../../assets/images/icon-scope-04.png");} .board-wrap .list-wrap .lists.clinical .item .contents.ty5::before { background: url("../../assets/images/icon-scope-05.png");} .board-wrap .list-wrap .lists.clinical .item .contents .title { font-size: 20px; color: #000; text-align: center;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item .contents .title { font-size: 18px;} } .board-wrap .list-wrap .lists.clinical .item .hover-cont { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 24px 14px; background-color: #4661a1; transition: all 0.3s ease-in-out; color: #fff;} .board-wrap .list-wrap .lists.clinical .item .hover-cont .title { font-size: 24px; font-weight: 700;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item .hover-cont .title { font-size: 17px;} } .board-wrap .list-wrap .lists.clinical .item .hover-cont .desc { margin-top: 6px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item .hover-cont .desc { font-size: 13px;} } .board-wrap .list-wrap .lists.clinical .item .hover-cont .list-wrap.ty2 { display: flex;} .board-wrap .list-wrap .lists.clinical .item .hover-cont .list-wrap.ty2 ul { flex: 1;} .board-wrap .list-wrap .lists.clinical .item .hover-cont .list-style { margin: 0;} .board-wrap .list-wrap .lists.clinical .item .hover-cont .list-style li { font-size: 14px; line-height: 1.4; color: #fff; letter-spacing: -0.5px;} @media screen and (max-width: 799px) { .board-wrap .list-wrap .lists.clinical .item .hover-cont .list-style li { font-size: 12px;} } .board-wrap .list-wrap .lists.clinical .item .hover-cont .list-style li + li { margin-top: 0;} .board-wrap .list-wrap .lists.clinical .item:hover .hover-cont, .board-wrap .list-wrap .lists.clinical .item.on .hover-cont { opacity: 1; visibility: visible;} .board-wrap .board-view-head { padding: 30px 0; border-bottom: 1px solid #ccc; text-align: center;} .board-wrap .board-view-head .title-area .location { margin-bottom: 10px;} .board-wrap .board-view-head .title-area .location span { display: inline-block; font-size: 20px;} .board-wrap .board-view-head .title-area .location span:not(:last-child):after { display: inline-block; width: 8px; height: 8px; border-top: 2px solid #00ade9; border-right: 2px solid #00ade9; content: ""; transform: rotate(45deg); margin: 0 7px; vertical-align: 1px;} .board-wrap .board-view-head .title-area .location span a { font-weight: 600;} .board-wrap .board-view-head .title-area .title { display: block; margin-bottom: 14px; font-weight: 600; font-size: 34px; line-height: 50px;} .board-wrap .board-view-head .title-area .date { font-size: 15px; line-height: 24px; color: #666;} @media screen and (min-width: 1024px) { .board-wrap .board-view-head .title-area { padding: 0 110px;} } @media screen and (max-width: 799px) { .board-wrap .board-view-head { padding: 25px 0;} .wrap .container .contents-wrap .board-wrap .board-view-head .contents-inner {padding-bottom: 10px;} .wrap .container .contents-wrap .board-wrap .board-view {padding-top: 30px;} .board-wrap .board-view-head .title-area .location { margin-bottom: 7px;} .board-wrap .board-view-head .title-area .location span { font-size: 15px;} .board-wrap .board-view-head .title-area .location span:not(:last-child):after { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #00ade9; border-right: 1px solid #00ade9; content: ""; transform: rotate(45deg); margin: 0 4px;} .board-wrap .board-view-head .title-area .location span a { font-weight: 600;} .board-wrap .board-view-head .title-area .title { margin-bottom: 9px; font-size: 24px; line-height: 32px;} } .board-wrap .view-wrap { padding-top: 54px; margin-bottom: 52px;} .board-wrap .view-wrap .image-area { margin-bottom: 52px; text-align: center;} .board-wrap .view-wrap .image-area img { max-width: 100%;} .board-wrap .view-wrap .headline { margin-bottom: 35px; padding-bottom: 35px; border-bottom: 1px solid #ccc;} .board-wrap .view-wrap .headline .text { line-height: 30px; color: #666;} .board-wrap .view-wrap .contents { line-height: 30px; color: #666;} .board-wrap .view-wrap .related-article { margin-top: 45px; padding-top: 45px; border-top: 1px solid #ccc;} .board-wrap .view-wrap .related-article .title { display: block; margin-bottom: 16px; font-weight: 700; font-size: 18px;} .board-wrap .view-wrap .related-article .text { line-height: 30px; color: #666;} @media screen and (min-width: 1280px) { .board-wrap .view-wrap .view-contents { padding: 0 110px;} } @media screen and (max-width: 1279px) { .board-wrap .view-wrap .view-contents { padding: 0 50px;} } @media screen and (max-width: 799px) { .board-wrap .view-wrap { padding-top: 30px;} .board-wrap .view-wrap .image-area { margin-bottom: 27px;} .board-wrap .view-wrap .headline { margin-bottom: 44px; padding-bottom: 0; border-bottom: 0;} .board-wrap .view-wrap .headline .text { font-size: 17px; line-height: 24px;} .board-wrap .view-wrap .headline .text + .text { margin-top: 30px;} .board-wrap .view-wrap .contents { line-height: 24px;} .board-wrap .view-wrap .contents img { width:100% !important; height:unset; max-width:700px;} .board-wrap .view-wrap .view-contents { padding: 0 30px;} .board-wrap .view-wrap .related-article { margin-top: 55px; padding-top: 0; border-top: 0;} .board-wrap .view-wrap .related-article .title { font-size: 16px;} .board-wrap .view-wrap .related-article .text { line-height: 24px;} .board-wrap .view-wrap .related-article .text + .text { margin-top: 30px;} } @media screen and (max-width: 640px) { .board-wrap .view-wrap .contents img { width:100% !important; height:unset;} .board-wrap .view-wrap .view-contents { padding: 0 10px;} } .board-wrap .board-navi { margin-top: 84px;} .board-wrap .board-navi .navi { display: flex; padding: 22px 0; border-bottom: 1px solid #dadada; color: #666;} .board-wrap .board-navi .navi .label { flex-shrink: 0; width: 170px; padding-left: 48px;} .board-wrap .board-navi .prev { border-top: 1px solid #dadada;} .board-wrap .board-navi .prev .label:after { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #666; border-right: 1px solid #666; content: ""; transform: rotate(-45deg); margin-left: 16px;} .board-wrap .board-navi .next .label:after { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #666; border-right: 1px solid #666; content: ""; transform: rotate(135deg); margin-left: 16px;} @media screen and (min-width: 800px) and (max-width: 1023px) { .board-wrap .board-navi .navi .label { width: 140px; padding-left: 20px;} } @media screen and (max-width: 799px) { .board-wrap .board-navi .navi .label { width: 84px; padding-left: 0;} .board-wrap .board-navi { margin-top: 50px;} } .board-wrap .btn-area { margin-top: 60px;} @media screen and (max-width: 799px) { .board-wrap .btn-area { margin-top: 43px;} } .board-wrap .search-detail { margin-left: 20px;} @media screen and (max-width: 799px) { .board-wrap .search-detail { margin-left: 12px;} } .board-wrap .section { margin-bottom: 40px;} .board-wrap .section .tit { width: 100%; margin-bottom: 25px; font-size: 20px; color: #333; font-weight: 700;} @media screen and (max-width: 799px) { .board-wrap .section .tit { font-size: 16px;} } .board-wrap .section.grid-flex { display: flex;} @media screen and (min-width: 1024px) { .board-wrap .section.grid-flex { flex-wrap: wrap;} } @media screen and (max-width: 799px) { .board-wrap .section.grid-flex { flex-direction: column;} } .board-wrap .section.grid-flex .flex-cont { flex: 1;} .board-wrap .section.grid-flex.test-info .flex-none { flex: none; width: 290px; padding-left: 40px;} @media screen and (max-width: 799px) { .board-wrap .section.grid-flex.test-info .flex-none { width: 100%; flex: 1; margin-top: 40px; padding-left: 0;} } .board-wrap .section.grid-flex.test-info .flex-none .img-area { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(100% - 53px); background-color: #f4f4f4; padding: 20px 15px 15px 15px; align-content: space-around; flex-direction: column;} .board-wrap .section.grid-flex.test-info .flex-none .img-area img { max-height: 275px; max-width: 200px; width: auto; padding-bottom: 30px;} .board-wrap .section.grid-flex.test-info .flex-none .img-area .txt { /*text-align: center; padding-left: 15px; padding-right: 15px; */ position: relative; margin-top: -10px;} span.itembtn { display: inline-block; padding: 7px 35px 7px 12px; border: 1px solid #dadada; background: #fff; color: #666; font-size: 14px;} span.itembtn.btn-detail { display: flex; align-items: center; max-width:220px;} span.itembtn.btn-detail:before, span.itembtn.btn-detail:after { position: absolute; top: calc(50% - 4px); width: 1px; height: 8px; background-color: #222; content: "";} span.itembtn.btn-detail:after { transform: rotate(90deg);} span.itembtn.btn-detail:before, span.itembtn.btn-detail:after { right: 18px;} span.itembtn.btn-detail span { margin-right: 38px;} span.itembtn :hover { color: #339933;} @media screen and (max-width: 799px) { span.itembtn.btn-detail { padding: 7px 35px 7px 12px;} span.itembtn.btn-detail:before, span.itembtn.btn-detail:after { right: 20px;} span.itembtn.btn-detail span { margin-right: 25px; font-size: 13px;} } span.itembtn.btn-detail:hover:after { background-color: #339933; } @media screen and (max-width: 799px) { .board-wrap .section.grid-flex.test-info .flex-none .img-area { padding: 25px 0;} .board-wrap .section.grid-flex.test-info .flex-none .img-area img { height: 135px;} } .board-wrap .flex-list { margin-top: 40px; border-top: 1px solid #000;} @media screen and (max-width: 799px) { .board-wrap .flex-list { margin-top: 10px;} } .board-wrap .flex-list .lists-wrap { display: flex; align-items: stretch; flex-wrap: wrap; margin: 0 -20px 0;} @media screen and (max-width: 799px) { .board-wrap .flex-list .lists-wrap { flex-direction: column; margin: 0;} } .board-wrap .flex-list .lists-wrap .item { width: 50%; height: 80px; padding: 0 20px; align-self: center;} @media screen and (max-width: 799px) { .board-wrap .flex-list .lists-wrap .item { width: 100%; height: 70px; padding: 0;} } .board-wrap .flex-list .lists-wrap .item .form-box { height: 100%;} .board-wrap .flex-list .lists-wrap .item.wide { width: 100%;} .board-wrap .flex-list .lists-wrap .item.wide2 { display: block; width: 100%; height: auto;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .board-wrap .flex-list .lists-wrap .item.wide2 { display: block; width: 100%; height: 250px;} .board-wrap .flex-list .lists-wrap .item.wide2 .form-wrap .textarea{ border-bottom: 1px solid #dadada; border-left: 1px solid #dadada;} .board-wrap .flex-list .lists-wrap .item.wide2 .form-box { width: 100%;} .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box { width: 100%;} } .board-wrap .flex-list .lists-wrap .item.wide2 .form-box { height: auto; padding: 0; flex-direction: column;} .board-wrap .flex-list .lists-wrap .item.wide2 .title { display: flex; align-items: center; width: 100%; height: 80px; padding: 0 10px; align-items: center; border-bottom: 1px solid #dadada;} @media screen and (max-width: 799px) { .board-wrap .flex-list .lists-wrap .item.wide2 .title { height: 70px;} } .board-wrap .flex-list .lists-wrap .item.wide2 .form-wrap { display: block; width: 100%;} .board-wrap .flex-list .lists-wrap .item.wide2 .form-wrap .textarea { height: 150px; padding: 20px 10px;} .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt { height: 150px; padding: 20px ; font-size: 14px; color: #666; overflow-y: auto; border-left: 1px solid #dadada; border-right: 1px solid #dadada;} .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt p, .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt ul, .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt ol { margin-bottom: 25px;} .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt ul li { margin-bottom: 10px;} @media screen and (max-width: 799px) { .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt { font-size: 14px;} .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt p, .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt ul, .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt ol { margin-bottom: 15px;} .board-wrap .flex-list .lists-wrap .item.wide2 .txt-box .txt ul li { margin-bottom: 8px;} } .board-wrap .flex-list + .agree-wrap { margin-top: 30px;} @media screen and (max-width: 799px) { .board-wrap .flex-list + .agree-wrap { margin-top: 20px;} } .board-wrap .flex-content { display: flex; margin-top: 90px;} @media screen and (max-width: 799px) { .board-wrap .flex-content { margin-top: 25px;} } .board-wrap .flex-content .cont { flex: 1;} .board-wrap .flex-content .cont:first-child { padding-right: 20px;} .board-wrap .flex-content .cont .text-box { position: relative; padding: 0 0 0 20px; border: 0; font-size: 20px;} .board-wrap .flex-content .cont .text-box::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(#43af2e, #02a9dc);} .board-wrap .flex-content .cont .text-box .point { font-weight: 500; color: #00ade9;} .board-wrap .flex-content .cont .text-box .point .tel { font-weight: 600;} .board-wrap .flex-content .cont .text-box .point .tel::before { content: "☎"; display: inline-block; margin-right: 3px; color: #00ade9; vertical-align: middle;} @media screen and (max-width: 799px) { .board-wrap .flex-content .cont .text-box { font-size: 18px; line-height: 1.6;} } .board-wrap .flex-content .cont .confirm-wrap { margin-top: 20px;} .board-wrap .flex-content .cont .confirm-wrap .btn-area { margin-top: 50px;} @media screen and (max-width: 799px) { .board-wrap .flex-content .cont .confirm-wrap { margin-top: 40px; border-top: 1px solid #000;} } @media screen and (max-width: 799px) { .board-wrap .flex-content .cont.im { display: none;} } .board-wrap .flex-content .cont .img-area { width: 100%;} .board-wrap .flex-content .cont .img-area img { width: 100%;} .search-filter-box { margin-top: 20px; padding: 25px 20px; border: 1px solid #ededed; display:none} @media screen and (max-width: 799px) { .search-filter-box { margin-top: 10px; padding: 20px 15px; } } .search-filter-box .search-detail { display: flex; flex-wrap: wrap;} .search-filter-box .search-detail + .search-detail { margin-top: 28px;} @media screen and (max-width: 799px) { .search-filter-box .search-detail { display: block; margin-bottom: 0;} .search-filter-box .search-detail + .search-detail { margin-top: 20px;} } .search-filter-box .search-detail .tit { flex: none; width: 60px; font-size: 16px; color: #666;} @media screen and (max-width: 799px) { .search-filter-box .search-detail .tit { width: 100%; margin-bottom: 10px; font-size: 13px;} } .search-filter-box .search-detail .btn-detail { display: flex; flex-wrap: wrap; flex: 1;} .search-filter-box .search-detail .btn-detail input { display: inline-block; height: 32px; margin: 0 5px 5px 0 ; padding: 0 12px; border: 1px solid #ccc; border-radius: 5px; background: #fff; color: #666; font-size: 14px; line-height: 30px; cursor: pointer } .search-filter-box .search-detail .btn-detail :hover { color: #fff; background-color: #339933; border-color: #339933;} @media screen and (max-width: 799px) { .search-filter-box .search-detail .btn-detail input { height: 28px; margin: 0 5px 5px 0; font-size: 12px; line-height: 26px; padding: 0 13px 0 13px;} } .search-filter-box .search-detail .btn-detail.type2 input { min-width: 40px; padding: 0 10px 0 10px; text-align: center; cursor: pointer } .search-filter-box .search-detail .btn-detail.type2 :hover { color: #fff; background-color: #339933; border-color: #339933;} @media screen and (max-width: 799px) { .search-filter-box .search-detail .btn-detail.type2 input { width: 30px;} } .search-filter-box .search-detail .btn-detail input.all { color: #fff; background-color: #339933; border-color: #339933;} @media screen and (max-width: 799px) { .search-filter-box .search-detail .btn-detail input.all { } } .search-filter-box .search-detail .btn-detail input.etc { letter-spacing: -0.4px;} .accordion-wrap { position: relative; margin-top: 20px;} .accordion-wrap .accordion-inner { border-top: 1px solid #dadada;} .accordion-wrap .accordion-header, .accordion-wrap .accordion-list { width: 100%;} .accordion-wrap .accordion-header { display: flex; flex-wrap: wrap; height: 60px; align-items: center; border-bottom: 1px solid #dadada; background-color: #519f3f;} @media screen and (max-width: 1023px) { .accordion-wrap .accordion-header { display: none;} } .accordion-wrap .accordion-header .tit { padding: 0 20px; font-size: 16px; text-align: center; color: #fff; font-weight: 500;} .accordion-wrap .accordion-header .tit.tit-num { width: 150px;} .accordion-wrap .accordion-header .tit.tit-cell { width: 150px;} .accordion-wrap .accordion-header .tit.tit-cont { flex: 1;} .accordion-wrap .accordion-list { width: 100%;} .accordion-wrap .accordion-list .acc-item { width: 100%;} .accordion-wrap .accordion-list .acc-item .acc-tit, .accordion-wrap .accordion-list .acc-item .acc-cont { width: 100%;} .accordion-wrap .accordion-list .acc-item .acc-tit span, .accordion-wrap .accordion-list .acc-item .acc-cont span { display: inline-block;} .accordion-wrap .accordion-list .acc-item .acc-cont span.tit-txt { color:#000;} .accordion-wrap .accordion-list .acc-item .acc-cont span.tit-txt2 { margin-top:10px;} .accordion-wrap .accordion-list .acc-item .acc-cont span.tit-txt3 { margin-top:20px; color:#000;} .accordion-wrap .accordion-list .acc-item .acc-tit { display: flex; position: relative; min-height: 80px; padding-right: 50px; border-bottom: 1px solid #dadada;} .accordion-wrap .accordion-list .acc-item .acc-tit::after { position: absolute; top: 50%; margin-top: -5px; right: 34px; display: inline-block; width: 13px; height: 13px; border-top: 3px solid #000; border-right: 3px solid #000; content: ""; transform: rotate(135deg); transition: all 0.2s ease;} @media screen and (max-width: 799px) { .accordion-wrap .accordion-list .acc-item .acc-tit::after { right: 15px; display: inline-block; width: 10px; height: 10px; border-top: 1px solid #000; border-right: 1px solid #000; content: ""; transform: rotate(135deg);} } .accordion-wrap .accordion-list .acc-item.on .acc-tit::after { margin-top: -9px; display: inline-block; width: 13px; height: 13px; border-top: 3px solid #000; border-right: 3px solid #000; content: ""; transform: rotate(-45deg);} @media screen and (max-width: 799px) { .accordion-wrap .accordion-list .acc-item.on .acc-tit::after { display: inline-block; width: 10px; height: 10px; border-top: 1px solid #000; border-right: 1px solid #000; content: ""; transform: rotate(-45deg);} } .accordion-wrap .accordion-list .acc-item .acc-tit .cell-sm, .accordion-wrap .accordion-list .acc-item .acc-tit .num, .accordion-wrap .accordion-list .acc-item .acc-tit .tit-cell { width: 150px; text-align: center; color: #666; font-size: 16px; line-height: 80px;} @media screen and (max-width: 1023px) { .accordion-wrap .accordion-list .acc-item .acc-tit .num { display: none;} } .accordion-wrap .accordion-list .acc-item .acc-tit .cell-sm { font-weight: 400;} .accordion-wrap .accordion-list .acc-item .acc-tit .cell-sm .state.on { color: #00ade9;} @media screen and (max-width: 1023px) { .accordion-wrap .accordion-list .acc-item .acc-tit .cell-sm { width: auto; height: auto; margin-top: 10px; margin-left: 20px; line-height: 1; font-size: 14px;} } @media screen and (min-width: 800px) and (max-width: 1023px) { .accordion-wrap .accordion-list .acc-item .acc-tit .tit-txt + .cell-sm { margin-left: 28px;} } @media screen and (max-width: 799px) { .accordion-wrap .accordion-list .acc-item .acc-tit .tit-txt + .cell-sm { margin-left: 25px;} } .accordion-wrap .accordion-list .acc-item .acc-tit .tit-txt { flex: 1; position: relative; padding: 30px 30px; color: #000; font-size: 16px;} @media screen and (max-width: 1023px) { .accordion-wrap .accordion-list .acc-item .acc-tit .tit-txt { padding: 30px 30px;} } @media screen and (max-width: 799px) { .accordion-wrap .accordion-list .acc-item .acc-tit .tit-txt { font-size: 16px;} } @media screen and (max-width: 1023px) { .accordion-wrap .accordion-list .acc-item .acc-tit { display: block; padding: 30px 30px 30px 20px;} .accordion-wrap .accordion-list .acc-item .acc-tit .tit-cell, .accordion-wrap .accordion-list .acc-item .acc-tit .tit-txt { display: block; padding: 0; line-height: 1.4; text-align: left;} .accordion-wrap .accordion-list .acc-item .acc-tit .tit-cell { padding-bottom: 0; font-size: 14px; color: #666;} .accordion-wrap .accordion-list .acc-item .acc-tit .tit-cell + .tit-txt { padding-top: 10px;} } @media screen and (max-width: 799px) { .accordion-wrap .accordion-list .acc-item .acc-tit { padding: 26px 30px 20px 7px;} .accordion-wrap .accordion-list .acc-item .acc-tit .tit-cell { font-size: 14px;} } .accordion-wrap .accordion-list .acc-cont { display: none; position: relative; padding: 30px 40px; border-bottom: 1px solid #dadada; color: #666; font-size: 16px;} @media screen and (max-width: 799px) { .accordion-wrap .accordion-list .acc-cont { padding: 35px 7px; font-size: 15px;} } .accordion-wrap .accordion-list .acc-cont .cont-txt { position: relative;} .accordion-wrap .accordion-list .acc-cont .cont-txt .file-wrap { display: block; margin-top: 50px;} .accordion-wrap.acc-faq .accordion-list .acc-item .acc-tit .tit-txt { padding-left: 60px;} .accordion-wrap.acc-faq .accordion-list .acc-item .acc-tit .tit-txt::before { content: "Q."; display: inline-block; position: absolute; top: 28px; left: 30px; width: 27px; font-weight: 800;} @media screen and (max-width: 1023px) { .accordion-wrap.acc-faq .accordion-list .acc-item .acc-tit .tit-txt::before { left: 0; top: 10px;} } @media screen and (max-width: 799px) { .accordion-wrap.acc-faq .accordion-list .acc-item .acc-tit .tit-txt { padding-left: 25px; padding-right: 40px;} } /* 문의답변 추가 */ .accordion-wrap .accordion-list .acc-cont .cont-txt2 { position: relative;} .accordion-wrap .accordion-list .acc-cont .cont-txt3 { position: relative; border-top: 1px solid #ccc; margin-top: 30px; padding-top: 30px;} .accordion-wrap.acc-faq .acc-cont .cont-txt3:before { content: "A."; display: inline-block; position: absolute; top: 30px; left: -27px; width: 27px; color: #00ade9; font-weight: 800;} .accordion-wrap.acc-faq .acc-cont .cont-txt2:before { content: "Q."; display: inline-block; position: absolute; top: 10px; left: -27px; width: 27px; color: #afafaf; font-weight: 800;} .accordion-wrap .accordion-list .acc-item .acc-tit2 span { content: "Q."; display: inline-block; position: absolute; top: 0px; left: -27px; width: 27px; color: #afafaf; font-weight: 800;} .accordion-wrap.acc-faq .acc-cont { padding: 29px 40px 29px 75px;} @media screen and (max-width: 1023px) { .accordion-wrap.acc-faq .acc-cont { padding: 35px 10px 35px 50px;} } @media screen and (max-width: 799px) { .accordion-wrap.acc-faq .acc-cont { padding: 35px 10px 35px 35px;} } .accordion-wrap.acc-faq .acc-cont .cont-txt::before { content: "A."; display: inline-block; position: absolute; top: 0px; left: -27px; width: 27px; color: #00ade9; font-weight: 800;} .accordion-wrap.type2 { margin-top: 90px;} .accordion-wrap.type2 .accordion-list .acc-item .acc-tit { padding-right: 0;} @media screen and (max-width: 1023px) { .accordion-wrap.type2 .accordion-list .acc-item .acc-tit { padding-right: 60px;} } .accordion-wrap.type2 .accordion-list .acc-item .acc-tit::after { display: none;} @media screen and (max-width: 1023px) { .accordion-wrap.type2 .accordion-list .acc-item .acc-tit::after { display: inline-block;} } @media screen and (max-width: 1023px) { .accordion-wrap.type2 .accordion-list .acc-item .acc-tit .tit-txt::before { top: 0;} } .accordion-wrap.type2 .acc-cont { padding-left: 60px; background-color: #f4f4f4;} @media screen and (min-width: 800px) and (max-width: 1023px) { .accordion-wrap.type2 .acc-cont { padding-left: 50px;} } @media screen and (max-width: 799px) { .accordion-wrap.type2 .acc-cont { padding-left: 35px;} } .accordion-wrap.acc-tabletype .accordion-list .acc-item.on .acc-cont { border-bottom: 0;} .accordion-wrap.acc-tabletype .accordion-list .acc-cont { padding: 0;} .accordion-wrap.acc-tabletype .accordion-list .acc-cont .cont-txt::before { display: none;} .paging-wrap { position: relative; margin: 60px auto 0; text-align: center;} .paging-wrap a { display: inline-block; position: relative; width: 35px; height: 35px; background-color: #fff; color: #222; text-align: center; line-height: 34px; font-size: 16px;} .paging-wrap a.first::before, .paging-wrap a.last::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; width: 17px; height: 13px; transform: translate(-50%, -50%); background: url("../../assets/images/btn_board_first.png") no-repeat 0 0; vertical-align: top; background-size: 17px 13px} .paging-wrap a.next::before, .paging-wrap a.pre::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; width: 9px; height: 13px; transform: translate(-50%, -50%); background: url("../../assets/images/btn_board_prev.png") no-repeat 0 0; vertical-align: top; background-size: 9px 13px} .paging-wrap a.last::before, .paging-wrap a.next::before { transform: rotate(-180deg) translate(50%, 50%);} .paging-wrap a.first:hover, .paging-wrap a.last:hover { background-color: #00ade9;} .paging-wrap a.next:hover, .paging-wrap a.pre:hover { background-color: #00ade9;} .paging-wrap a.first:hover::before, .paging-wrap a.last:hover::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; width: 17px; height: 13px; transform: translate(-50%, -50%); background: url("../../assets/images/btn_board_first_w.png") no-repeat 0 0; vertical-align: top; background-size: 17px 13px} .paging-wrap a.next:hover::before, .paging-wrap a.pre:hover::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; width: 9px; height: 13px; transform: translate(-50%, -50%); background: url("../../assets/images/btn_board_prev_w.png") no-repeat 0 0; vertical-align: top; background-size: 9px 13px} .paging-wrap a.last:hover::before, .paging-wrap a.next:hover::before { transform: rotate(-180deg) translate(50%, 50%);} .paging-wrap .paging { display: inline-block; margin: 0 24px; vertical-align: top;} .paging-wrap .paging li { display: inline-block;} .paging-wrap .paging li a:hover, .paging-wrap .paging li a:focus { background-color: #00ade9; color: #fff;} .paging-wrap .paging li.on a { font-weight: 800; text-underline-offset: 8px; text-decoration: underline; text-decoration-thickness: 2px;} .paging-wrap .paging li + li { margin-left: 5px;} @media screen and (max-width: 640px) { .paging-wrap { display: flex; justify-content: center; max-width:350px;} .paging-wrap a { width: 28px; font-size: 14px; margin: 0 2px;} .paging-wrap .paging { margin: 0;} .paging-wrap a.next::before, .paging-wrap a.pre::before { width: 8px; height: 12px; background-size: 8px 12px;} .paging-wrap a.first::before, .paging-wrap a.last::before { width: 15px; height: 12px; background-size: 15px 12px;} } .dimmed-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 999 !important; background-color: rgba(0, 0, 0, 0.5);} .popup-layer { display: none; position: absolute; top: 50%; left: 50%; width: 100%; max-width: 905px; z-index: 1000; transform: translateX(-50%); transition: 0.4s all;} .popup-layer.active { display: block !important;} .popup-layer .popup-wrap { position: absolute; top: 50%; left: 50%; z-index: 2; width: 100%; padding: 50px 30px; transform: translate(-50%, -50%); vertical-align: middle;} .popup-layer .popup-wrap .popup-close { position: absolute; top: 50px; right: 30px; width: 68px; height: 68px;} .popup-layer .popup-wrap .popup-close .close { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);} .popup-layer .popup-wrap .popup-close .close:before, .popup-layer .popup-wrap .popup-close .close:after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #fff; content: "";} .popup-layer .popup-wrap .popup-close .close:before { transform: rotate(-45deg);} .popup-layer .popup-wrap .popup-close .close:after { transform: rotate(45deg);} .popup-layer.full { max-width: 1260px;} .popup-layer.full .popup-wrap .popup-close { top: -18px;} .popup-layer.full .popup-wrap .popup-container, .popup-layer.full .popup-wrap .popup-body, .popup-layer.full .popup-wrap .media { height: 100%;} .popup-layer.full .popup-wrap .popup-body { padding: 0;} @media screen and (min-width: 1024px) { .popup-layer.full { height: 650px;} .popup-layer.full .popup-wrap { height: 650px;} } @media screen and (max-width: 799px) { .popup-layer .popup-wrap { max-width: none; padding: 0 15px;} .popup-layer .popup-wrap .popup-close { top: -1px; right: 15px; width: 44px; height: 44px;} .popup-layer .popup-wrap .popup-close .close { width: 11px; height: 11px;} .popup-layer.full .popup-wrap .popup-close { top: -58px; width: 58px; height: 58px;} .popup-layer.full .popup-wrap .popup-close .close { width: 22px; height: 22px;} } .popup-container { background-color: #fff;} .popup-container .popup-head { padding: 20px 40px; background-color: #00ade9; font-weight: 600; font-size: 24px; line-height: 28px; color: #fff;} .popup-container .popup-body { padding: 24px 30px 28px;} .popup-container .popup-body .media { max-width: 1200px;} @media screen and (max-width: 799px) { .popup-container .popup-head { padding: 10px 20px; font-size: 18px; line-height: 24px; color: #fff;} .popup-container .popup-body { padding: 25px 8px 21px;} } /* Slider base */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;} .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0;} .slick-list:focus { outline: none;} .slick-list.dragging { cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto;} .slick-track:before, .slick-track:after { content: ""; display: table;} .slick-track:after { clear: both;} .slick-loading .slick-track { visibility: hidden;} .slick-slide { float: left; height: 100%; min-height: 1px; display: none;} [dir="rtl"] .slick-slide { float: right;} .slick-slide img { display: block;} .slick-slide.slick-loading img { display: none;} .slick-slide.dragging img { pointer-events: none;} .slick-initialized .slick-slide { display: block;} .slick-loading .slick-slide { visibility: hidden;} .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;} .slick-arrow.slick-hidden { display: none;} .slider-wrap { margin: 0 -15px; padding: 0 15px; background: #f3f3f3;} @media screen and (max-width: 799px) { .slider-wrap .sliders { padding: 30px 15px;} } .slider-wrap .test-slider { margin: 20px 0 90px; padding: 58px 40px;} @media screen and (max-width: 799px) { .slider-wrap .test-slider { margin: 20px 0 35px; padding: 30px 0;} } .slider-wrap .test-slider .slick-slide { position: relative; margin-bottom: 100px;} @media screen and (max-width: 799px) { .slider-wrap .test-slider .slick-slide { max-width: initial; padding: 0;} } .slider-wrap .test-slider .slick-slide .item { position: relative;} .slider-wrap .test-slider .slick-slide .item .box { display: block; max-width: 160px; margin: 0 auto;} @media screen and (max-width: 799px) { .slider-wrap .test-slider .slick-slide .item .box { pointer-events: none;} } .slider-wrap .test-slider .slick-slide .item .thumbnail { box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.3); background-color:#fff; padding:5px; height: 210px;} .slider-wrap .test-slider .slick-slide .item .thumbnail img { width: 100%; height: 200px;} .slider-wrap .test-slider .slick-slide .item .box .contents { position: absolute; top: 100%; width: 100%; max-width: 160px; padding: 10px; margin-top: 15px; text-align: center;} @media screen and (min-width: 800px) and (max-width: 1280px) { .slider-wrap .test-slider .slick-slide .item .box .contents { max-width: 160px;} } .slider-wrap .test-slider .slick-slide .item .box .contents .title { overflow: hidden; display: -webkit-box; max-height: 72px; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 24px; font-size: 16px; font-weight: 500; text-align: center;} .slider-wrap .test-slider .slick-slide .item .hover-cont { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; width: 100%; max-width: 160px; height: 100%; background: rgba(0, 0, 0, 0.6); transform: translate(-50%, -50%); opacity: 0; visibility: hidden; z-index: -1; transition: all 0.5s ease;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap { position: relative;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn { padding-top: 56px; border: 0; background: transparent; color: #fff; font-size: 13px; box-sizing: border-box;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn::before { display: inline-block; content: ""; position: absolute; top: 0; left: 50%; margin-left: -25px; width: 50px; height: 50px; background-color: #fff; border: 1px solid #00ade9; border-radius: 50%; box-sizing: border-box;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.view::before { background: #fff url("../../assets/images/icon-pdf.png") no-repeat center center; background-size: 19px 19px} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.view:hover::before { background: #fff url("../../assets/images/icon-pdf-on.png") no-repeat center center; background-size: 19px 19px } .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.down::before { background: #fff url("../../assets/images/icon-download.png") no-repeat center center; background-size: 18px 18px;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.down:hover::before { background: #fff url("../../assets/images/icon-download-on.png") no-repeat center center; background-size: 18px 18px;} .slider-wrap .test-slider .slick-slide .item.on .hover-cont { opacity: 1; visibility: visible; z-index: 1;} @media screen and (min-width: 1024px) and (max-width: 1280px) { .slider-wrap .test-slider .slick-slide { padding: 0 1.5%;} } @media screen and (min-width: 800px) and (max-width: 1023px) { .slider-wrap .test-slider .slick-slide { padding: 0 1.5%;} } @media screen and (max-width: 799px) { .slider-wrap .test-slider .slick-slide { padding: 0 1.5%;} } @media screen and (max-width: 1023px) { .slider-wrap .test-slider .slick-slide { margin: 0;} .slider-wrap .test-slider .slick-slide .item .box .contents { position: static;} .slider-wrap .test-slider .slick-slide .item .hover-cont { position: static; margin: 0 auto; padding-top: 15px; background: none; visibility: visible; opacity: 1; z-index: 1; transition: none; transform: none;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn { width: 36px; height: 36px; margin: 0; padding: 0; font-size: 0;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn::before { position: static; width: 100%; height: 100%; margin: 0; border-color: #000;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.view::before, .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.view:hover::before { background-size: 16px 16px;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.down::before, .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn.down:hover::before { background-size: 16px 16px;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap .btn span { height: 0; text-indent: -9999em;} .slider-wrap .test-slider .slick-slide .item .hover-cont .button-wrap + .button-wrap { margin-left: 22px;} } .slider-wrap .slick-arrow { position: absolute; top: 0; width: 40px; height: 100%; font-size: 0; background: #f3f3f3; z-index: 10;} .slider-wrap .slick-arrow::after { margin-bottom: 100px;} .slider-wrap .slick-arrow.slick-prev { left: 0;} .slider-wrap .slick-arrow.slick-prev::after { display: inline-block; width: 24px; height: 24px; border-top: 5px solid #ccc; border-right: 5px solid #ccc; content: ""; transform: rotate(-135deg); margin-left: 7px;} .slider-wrap .slick-arrow.slick-next { right: 0;} .slider-wrap .slick-arrow.slick-next::after { display: inline-block; width: 24px; height: 24px; border-top: 5px solid #ccc; border-right: 5px solid #ccc; content: ""; transform: rotate(45deg); margin-left: -7px;} .slider-wrap .slick-dots { position: absolute; bottom: 18px; right: 0; left: 0; font-size: 0; text-align: center;} .slider-wrap .slick-dots li { display: inline-block;} .slider-wrap .slick-dots li button { padding: 5px; font-size: 0; text-indent: -9999em;} .slider-wrap .slick-dots li button:before { display: block; width: 10px; height: 10px; border-radius: 100px; background-color: #fff; content: "";} .slider-wrap .slick-dots li.slick-active button:before { background-color: #00ade9;} .slider-wrap .slick-dots li:first-child:last-child { display: none;} @media screen and (max-width: 799px) { .slider-wrap .slick-dots { bottom: 6px;} .slider-wrap .slick-dots li button { padding: 4px;} .slider-wrap .slick-dots li button:before { width: 8px; height: 8px;} } .list-style { position: relative; margin-bottom: 40px;} @media screen and (max-width: 799px) { .list-style { margin-bottom: 20px;} } .list-style > li { position: relative; font-size: 16px; color: #666; line-height: 1.6;} .list-style > li + li { margin-top: 8px;} .list-style > li .img-area { width: calc(100% + 10px); margin: 18px 0 18px -10px;} .list-style > li .img-area img { width: 100%;} @media screen and (max-width: 799px) { .list-style > li { font-size: 13px;} .list-style > li + li { margin-top: 5px;} } .list-style > li .gray-box { margin: 15px 0;} .list-style.dot li { padding-left: 10px;} .list-style.dot li::before { content: "·"; display: inline-block; position: absolute; top: 0; left: 0;} .list-style.type2 strong { color: #000;} .list-style.type2 li + li { margin-top: 25px;} .list-style .detail span { display: inline-block; font-size: 14px; color: #666;} .list-style .detail span + span::before { margin: 0 3px !important; display: inline-block; width: 1px; height: 11px; margin: 0 1px; background-color: #666; vertical-align: -2px; content: ""; vertical-align: -1px;} .text-box .list-style { margin-bottom: 0;} .mb-20 { margin-bottom: -20px; margin-top: 10px;} p.dot { position: relative; margin-bottom: 40px; padding-left: 10px; font-size: 16px; color: #666; line-height: 1.6;} p.dot::before { content: "·"; display: inline-block; position: absolute; top: 0; left: 0;} @media screen and (max-width: 799px) { p.dot { margin-bottom: 15px; font-size: 13px;} } p.text-info { margin-bottom: 40px; font-size: 18px; color: #666; line-height: 1.6;} p.text-info span { font-weight:600; color: #00ade9;} p.text-info + .list-style, p.text-info + .dot { margin-top: -32px;} @media screen and (max-width: 800px) { p.text-info { margin-bottom: 20px; font-size: 16px;} p.text-info + .list-style, p.text-info + .dot { margin-top: -10px;} } .banner-wrap { position: relative; margin-bottom: 40px;} .banner-wrap.not-full { padding-top: 160px;} @media screen and (max-width: 799px) { .banner-wrap { margin-bottom: 40px;} } .banner-wrap .image-area img { width: 100%; max-height: 250px;} @media screen and (max-width: 799px) { .banner-wrap .image-area img { width: 100%; height: 250px;} } @media screen and (max-width: 640px) { .banner-wrap .image-area img { width: 100%; height: 200px;} .banner-wrap { margin-bottom: 20px;} } .banner-wrap .text-area { position: absolute; top: 50%; right: 40px; left: 40px; transform: translateY(-50%); color: #fff;} .banner-wrap .text-area .eyebrow { display: block; margin-bottom: 3px;} .banner-wrap .text-area .title { display: block; font-weight: 600; font-size: 32px;} .banner-wrap .text-area .desc { margin-top: 10px; font-size: 16px; line-height: 26px; color: #fff;} @media screen and (max-width: 799px) { .banner-wrap .text-area .eyebrow { margin-bottom: 0; font-size: 12px;} .banner-wrap .text-area .title { font-size: 20px;} } .banner-wrap + .board-wrap .info-box { margin-top: -20px;} @media screen and (max-width: 799px) { .banner-wrap + .board-wrap .info-box { margin-top: -28px;} } html, body { height: 100%;} body { -webkit-overflow-scrolling: touch;} body.main { overflow-x: hidden;} .wrap .container { padding: 0;} .wrap .container.nobtm { padding: 0;} @media screen and (min-width: 800px) and (max-width: 1023px) { .wrap .container { padding: 0 0 40px;} } @media screen and (max-width: 799px) { .wrap .container { padding: 0 ;} } .wrap .container .contents-wrap .contents-wide { width: 100%;} .wrap .container .contents-wrap .contents-wide.bg-gray { background: #f3f3f3;} .wrap .container .contents-wrap .contents-inner { max-width: 1260px; margin: 0 auto; padding: 0 30px 150px 30px;} .wrap .container .contents-wrap .contents-sec1 { padding-bottom:120px} .wrap .container .contents-wrap .contents-sec2 { padding-top:80px; padding-bottom:150px} .wrap .container .contents-wrap .contents-sec3 { padding-top:80px; padding-bottom:150px} .board-wrap.not-full { padding-top:90px;} .board-wrap.not-full .board-view-head .contents-inner { padding-bottom:10px;} @media screen and (max-width: 1440px) { .wrap .container .contents-wrap .contents-inner { padding: 0 50px 150px 50px;} .wrap .container .contents-wrap .contents-sec1 { padding-bottom:120px} .wrap .container .contents-wrap .contents-sec2 { padding-top:80px; padding-bottom:150px} .wrap .container .contents-wrap .contents-sec3 { padding-top:80px; padding-bottom:150px} } @media screen and (max-width: 1023px) { .wrap .container .contents-wrap .contents-inner { padding: 0 50px 150px 50px;} .wrap .container .contents-wrap .contents-sec1 { padding-bottom: 80px;} .wrap .container .contents-wrap .contents-sec2 { padding-top:60px; padding-bottom:100px} .wrap .container .contents-wrap .contents-sec3 { padding-top:60px; padding-bottom:80px} } @media screen and (max-width: 799px) { .wrap .container .contents-wrap .contents-inner { padding: 0 40px 120px 40px;} .wrap .container .contents-wrap .contents-sec1 { padding-top:60px; padding-bottom:120px} .wrap .container .contents-wrap .contents-sec2 { padding-top:60px; padding-bottom:120px} .wrap .container .contents-wrap .contents-sec3 { padding-top:60px; padding-bottom:120px} } @media screen and (max-width: 520px) { .wrap .container .contents-wrap .contents-inner { padding-left:20px; padding-right:20px} .wrap .container .contents-wrap .contents-sec1 { padding-top:60px; padding-bottom:120px} .wrap .container .contents-wrap .contents-sec2 { padding-top:60px; padding-bottom:120px} .wrap .container .contents-wrap .contents-sec3 { padding-top:60px; padding-bottom:120px} } .wrap .floating-wrap { position: fixed; right: 30px; bottom: 30px; z-index: 98;} @media screen and (min-width: 1440px) { .wrap .floating-wrap { right: 50%; margin-right: -697px;} } @media screen and (max-width: 799px) { .wrap .floating-wrap { right: 15px;} } .wrap .floating-wrap .quick-menu li:not(:first-child) { margin-top: 5px;} .wrap .floating-wrap .quick-menu a { display: flex; justify-content: center; align-items: center; width: 57px; height: 51px; background-color: #9d9d9d; font-size: 12px; color: #fff;} .wrap .floating-wrap .quick-menu a:hover, .wrap .floating-wrap .quick-menu a:focus { background-color: #333;} @media screen and (max-width: 1023px) { .wrap .floating-wrap .quick-menu { display: none;} } .wrap .floating-wrap .to-top { border-radius: 26px; width: 52px; background: #333 url("../../assets/images/icon-top.png") no-repeat center center; background-size: 14px 23px; transition: all 0.3s;} .wrap .floating-wrap .to-top:hover { background: #555 url("../../assets/images/icon-top.png") no-repeat center center; background-size: 14px 23px;} @media screen and (min-width: 1024px) { .wrap .floating-wrap .to-top { display: block; height: 0;} .wrap .floating-wrap .to-top.active { margin-top: 5px; height: 52px;} } @media screen and (max-width: 1023px) { .wrap .floating-wrap .to-top { height: 52px; opacity: 0;} .wrap .floating-wrap .to-top.active { opacity: 1;} } @media screen and (max-width: 799px) { .wrap .floating-wrap .to-top { width: 50px; height: 50px;} } .breadcrumb { padding-top: 30px; text-align: right; margin-top:20px;} .breadcrumb span { display: inline-block; font-size: 13px; color: #000;} .breadcrumb span:not(:last-child):after { display: inline-block; width: 7px; height: 7px; border-top: 1px solid #aaa; border-right: 1px solid #aaa; content: ""; transform: rotate(45deg); margin: 0 3px; vertical-align: 1px;} .breadcrumb span a { color: #777; font-family: "Malgun Gothic", sans-serif;} @media screen and (max-width: 799px) { .breadcrumb { padding-top: 0px; display:none;} } .page-title { margin-top: 7px; margin-bottom: 30px; letter-spacing: -0.5px;} .page-title .title { margin-bottom: 20px; font-weight: 700; font-size: 32px; line-height: 1; margin-top: -40px;} .page-title .text { font-size: 17px; color: #666;} .page-title .text span{ color: #00ade9;} @media screen and (max-width: 800px) { .page-title { margin-top: 30px; margin-bottom: 30px;} .page-title .title { font-weight: 700; font-size: 28px; } .page-title .text { font-size: 14px; line-height: 20px;} } .contents-section + .contents-section { margin-top: 50px;} .title-wrap { margin-bottom: 30px;} .title-wrap .desc { margin-top: 8px; font-size: 20px; color: #666;} .title-wrap h3.title-sub { font-size: 28px; font-weight: 700;} @media screen and (max-width: 799px) { .title-wrap { margin-bottom: 20px;} .title-wrap .desc { margin-top: -4px; font-size: 14px;} } .title-h3 { font-size: 28px; font-weight: 700;} @media screen and (max-width: 799px) { .title-h3 { margin-bottom: 15px; font-size: 24px; font-weight: 700;} } .title-h3 + .desc-box { margin-top: 20px;} @media screen and (max-width: 799px) { .title-h3 + .desc-box { margin-top: 15px;} } .title-h3 .number { color: #00ade9;} .title-h4 { font-size: 24px; font-weight:600;} .title-h4-t { position: relative; font-size: 24px; font-weight:600; padding-top: 10px; padding-bottom: 20px; text-align:left;} .title-h4-tc { position: relative; font-size: 24px; font-weight:600; padding-top: 10px; padding-bottom: 20px; text-align:center;} .title-h4-tc span { padding-left:10px; font-size: 18px; font-weight:400; color:#666;} @media screen and (max-width: 799px) { .title-h4-tc { margin-bottom: 15px; padding-left: 20px; font-size: 18px;} .title-h4-tc::before { top: 0; width: 12px; height: 12px; transform: translateY(5px);} } .title-h5 { margin-bottom: 20px; font-size: 20px; color: #000;} @media screen and (max-width: 799px) { .title-h5 { margin-bottom: 15px; font-size: 16px;} } .text-box { position: relative; padding: 30px 30px 30px; border: 1px solid #ccc; border-top: 0;} .text-box::before { top: 0; left: 0; content: ""; display: inline-block; position: absolute; width: 100%; height: 4px; background: linear-gradient(#43af2e, #02a9dc);} @media screen and (max-width: 799px) { .text-box { padding: 22px 20px 20px;} .text-box::before { content: ""; display: inline-block; position: absolute; width: 100%; height: 2px; background: linear-gradient(#43af2e, #02a9dc);} } .text-box .text { font-size: 16px; color: #666; line-height: 1.6;} @media screen and (max-width: 799px) { .text-box .text { font-size: 16px;} } .text-box .title { margin-bottom: 20px; font-size: 20px; color: #000;} @media screen and (max-width: 799px) { .text-box .title { font-size: 16px;} } .text-box .title::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 10px; background: url("../../assets/images/icon-notice-title.png") no-repeat center center; background-size: 18px 18px; vertical-align: middle;} .text-box + .board-list { margin-top: 60px;} .title-wrap .text-box { margin-top: 20px;} .info-box .text { font-size: 16px; line-height: 28px; color: #666;} @media screen and (max-width: 799px) { .info-box .text { font-size: 13px; line-height: 20px;} } .info-box + .board-list { margin-top: 60px;} @media screen and (max-width: 799px) { .info-box + .board-list { margin-top: 30px;} } .bottom-desc { margin-top: 30px; font-size: 16px; line-height: 28px; color: #666;} @media screen and (max-width: 799px) { .bottom-desc { margin-top: 20px; font-size: 12px; line-height: 20px;} } .no-data { padding: 160px 0; text-align: center;} .no-data:before { display: inline-block; width: 114px; height: 102px; margin-bottom: 54px; background: url("../../assets/images/icon-nodata.png") no-repeat center center; content: "";} .no-data .text { font-size: 24px;} @media screen and (max-width: 799px) { .no-data:before { width: 57px; height: 51px; margin-bottom: 40px; background-size: 57px auto;} .no-data .text { font-size: 14px;} } /************************* header *************************/ header { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1000;} header::after { content: ""; position: absolute; top: 89px; left: 0; right: 0; width: 100%; height: 1px; z-index: 10;} @media screen and (min-width: 800px) and (max-width: 1023px) { header::after { top: 88px;} } @media screen and (max-width: 799px) { header::after { content: ""; position: absolute; top: 44px; left: 0; right: 0; width: 100%; height: 1px; background: #fff; z-index: 10;} } header .header-wrap { display: flex; justify-content: space-between; align-items: center; max-width: 1920px; margin: 0 auto; height: 89px; padding: 0 40px;} @media screen and (min-width: 1024px) and (max-width: 1280px) { header .header-wrap { max-width: 1280px; padding: 0 40px;} } @media screen and (max-width: 799px) { header .header-wrap { height: 60px; padding: 0 50px 0 20px;} } @media screen and (max-width: 520px) { header .header-wrap { padding: 0 20px 0 20px;} } @media screen and (min-width: 800px) and (max-width: 1023px) { header .header-wrap { height: 89px; padding: 0 90px 0 30px;} } header .top-logo { position: relative; width: 150px; margin-right: 20px; font-size: 0; z-index: 12;} header .top-logo a { display: inline-block; width: 142px; height: 40px; background: url("../../assets/images/top-logo.png") no-repeat center center; background-size: 142px ;} @media screen and (max-width: 799px) { header .top-logo a { width: 115px; height: 32px; background-size: 115px !important;} } @media screen and (max-width: 520px) { header .top-logo a { width: 100px; height: 28px; background-size: 100px !important;} } @media screen and (min-width: 1024px) and (max-width: 1440px) { header .top-logo { width: auto;} header .top-logo a { width: 142px; height: 40px; background-size: 142px !important;} } header .toggle-memu-mo { display: block; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);} header .toggle-memu-mo .toggle-btn { margin-right: 20px; display: inline-block; width: 20px; height: 18px; padding: 10px 0 10px 10px; box-sizing: content-box; background: url("../../assets/images/icon-menu-mo-wh.png") no-repeat center center; background-size: 22px 17px;;} @media screen and (min-width: 1024px) { header .toggle-memu-mo { display: none;} } @media screen and (max-width: 799px) { header .toggle-memu-mo { right: 0;} } @media screen and (min-width: 800px) and (max-width: 1024px) { header .toggle-memu-mo { right: 10px;} header .toggle-memu-mo .toggle-btn { width: 30px; height: 26px; background-size: 30px 26px !important;} } header .gnb { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: #fff; z-index: 11;} @media screen and (max-width: 1023px) { header .gnb { padding-top: 45px; z-index: 99;} } #header.gnb-open .gnb { display: block;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb { padding-top: 88px;} } @media screen and (max-width: 1023px) { header .gnb .gnb-wrap { z-index: 99;} } header .gnb .back-bg { display: none;} header .gnb .mobile-top { position: fixed; top: 0; right: 0; width: 100%; height: 45px; padding: 0 15px; border-bottom: 2px solid #adadad;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .mobile-top { height: 88px; padding: 0 30px;} } header .gnb .mobile-top .mo-inner { display: flex; align-items: center; justify-content: space-between; height: 100%;} header .gnb .mobile-top .lang-list { display: flex; align-items: center; height: 100%;} header .gnb .mobile-top .lang-list li a { display: inline-block; padding: 0 15px; color: #c3c3c3; font-size: 12px; line-height: 1.4;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .mobile-top .lang-list li a { font-size: 24px;} } header .gnb .mobile-top .lang-list li a span { display: inline-block; position: relative;} header .gnb .mobile-top .lang-list li.active a { color: #00ade9;} header .gnb .mobile-top .lang-list li.active span::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #00ade9;} header .gnb .mobile-top .mobile-close .mo-closed { display: inline-block; position: absolute; top: 50%; margin-top: -6px; right: 15px; width: 15px; height: 15px;} header .gnb .mobile-top .mobile-close .mo-closed:before, header .gnb .mobile-top .mobile-close .mo-closed:after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #666; content: "";} header .gnb .mobile-top .mobile-close .mo-closed:before { transform: rotate(-45deg);} header .gnb .mobile-top .mobile-close .mo-closed:after { transform: rotate(45deg);} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .mobile-top .mobile-close .mo-closed { right: 30px; width: 30px; height: 30px; margin-top: -15px;} header .gnb .mobile-top .mobile-close .mo-closed:before, header .gnb .mobile-top .mobile-close .mo-closed:after { position: absolute; top: 50%; left: 0; width: 100%; height: 3px; background-color: #666; content: "";} header .gnb .mobile-top .mobile-close .mo-closed:before { transform: rotate(-45deg);} header .gnb .mobile-top .mobile-close .mo-closed:after { transform: rotate(45deg);} } header .gnb .menu-closed-pc { display: none;} header .gnb .gnb-wrap { height: 100%;} @media screen and (max-width: 1023px) { header .gnb .gnb-wrap { overflow-y: auto;} } @media screen and (max-width: 1023px) { header .gnb .depth1-wrap { min-height: 100%; overflow: auto;} } header .gnb .depth1-wrap .depth1 { border-bottom: 1px solid #adadad;} header .gnb .depth1-wrap .depth1 .item { display: block; position: relative; height: 55px; padding: 0 30px; font-size: 18px; line-height: 54px; color: #222; font-weight: 400;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth1 .item { height: 110px; line-height: 108px; font-size: 30px;} } header .gnb .depth1-wrap .depth1 .item::after { position: absolute; top: 50%; margin-top: -2px; right: 17px; display: inline-block; width: 8px; height: 8px; border-top: 2px solid #666; border-right: 2px solid #666; content: ""; transform: rotate(135deg); transition: all 0.2s ease;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth1 .item::after { margin-top: -4px; right: 33px; display: inline-block; width: 17px; height: 17px; border-top: 3px solid #666; border-right: 3px solid #666; content: ""; transform: rotate(135deg);} } @media screen and (max-width: 1023px) { header .gnb .depth1-wrap .depth1 .item.mobile { display: block !important; overflow: hidden;} } header .gnb .depth1-wrap .depth1.active .item { background: #333; color: #fff;} header .gnb .depth1-wrap .depth1.active .item::after { margin-top: -7px; display: inline-block; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; content: ""; transform: rotate(-45deg); transition: all 0.2s ease;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth1.active .item::after { margin-top: -14px; display: inline-block; width: 17px; height: 17px; border-top: 3px solid #fff; border-right: 3px solid #fff; content: ""; transform: rotate(-45deg);} } header .gnb .depth1-wrap .depth2-menu { display: none;} header .gnb .depth1-wrap .depth2-menu .depth2 { padding: 0 15px;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth2-menu .depth2 { padding: 0 30px;} } header .gnb .depth1-wrap .depth2-menu .depth2 .item-d2 { display: block; position: relative; padding: 18px 0 18px 15px; color: #666; font-size: 15px; font-weight: 500;} header .gnb .depth1-wrap .depth2-menu .depth2 .item-d2.mobile { display: block !important;} header .gnb .depth1-wrap .depth2-menu .depth2 .item-d2.pc { display: none !important;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth2-menu .depth2 .item-d2 { padding: 35px 0 35px 30px; font-size: 30px;} } header .gnb .depth1-wrap .depth2-menu .depth2 .item-d2.mobile.icon::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; width: 9px; height: 9px; background: url("../../assets/images/icon-plus.png") no-repeat 0 0; background-size: 9px 9px;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth2-menu .depth2 .item-d2.mobile.icon::after { width: 18px; height: 18px; background-size: 18px 18px;} } header .gnb .depth1-wrap .depth2-menu .depth2.active .item-d2 { color: #00ade9;} header .gnb .depth1-wrap .depth2-menu .depth2.active .item-d2::after { width: 9px; height: 2px; margin-top: 3px; background: url("../../assets/images/icon-minus.png") no-repeat 0 0; background-size: 9px 2px;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth2-menu .depth2.active .item-d2::after { width: 18px; height: 4px; margin-top: 7px; background-size: 18px 4px;} } header .gnb .depth1-wrap .depth2-menu .depth2.active .depth3-wrap { display: block;} header .gnb .depth1-wrap .depth3-wrap { display: none;} header .gnb .depth1-wrap .depth3-wrap .depth3 { padding: 0 0 15px 25px;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth3-wrap .depth3 { padding: 0 0 30px 50px;} } header .gnb .depth1-wrap .depth3-wrap .depth3 .item-d3 { font-size: 12px; color: #666;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .gnb .depth1-wrap .depth3-wrap .depth3 .item-d3 { font-size: 24px;} } header .gnb .depth1-wrap .depth3-wrap .depth3.current .item-d3 { color: #00ade9;} @media screen and (min-width: 1024px) { header .mobile-top { display: none;} header .dimmed { content: ""; position: absolute; top: 88px; left: 0; right: 0; height: 100vh; background: rgba(0, 0, 0, 0.6); transition: opacity 600ms ease-out; opacity: 0; z-index: -1; visibility: hidden;} header .gnb { display: block; position: relative; top: auto; left: auto; right: auto; bottom: auto; flex: 1; height: 88px; background: none;} header .gnb .gnb-inner { height: 100%;} header .gnb .gnb-wrap { max-width: 1100px; height: 100%; padding: 0 50px 0 90px; margin: 0 auto; padding-top: 0;} } @media screen and (min-width: 1024px) and (min-width: 1024px) and (max-width: 1280px) { header .gnb .gnb-wrap { max-width: 770px; padding: 0 40px; } } @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .back-bg { display: block; position: absolute; top: 0; left: 0; right: 0; height: 88px; z-index: 10; background: #010101;} } @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .depth1-wrap .depth1 .item { display: inline-block; position: relative; height: 88px; padding: 0; font-size: 18px; line-height: 88px; color: #666; text-decoration: none; z-index: 99; font-weight:500;} } @media screen and (min-width: 1280px) { header .gnb .gnb-wrap .depth1-wrap .depth1 .item { display: inline-block; position: relative; height: 88px; padding: 0; font-size: 18px; line-height: 88px; color: #666; text-decoration: none; z-index: 99; font-weight:500;} } @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .depth1-wrap { display: flex; justify-content: space-between; align-items: center; position: relative; height: 100%; overflow: initial;} header .gnb .gnb-wrap .depth1-wrap::after { content: ""; display: block; position: fixed; top: 0; left: 0; right: 0; height: 520px; visibility: hidden; background-color: #fff; transform: translateY(-100%); transition: all 0.5s ease-in-out; z-index: -1;} header .gnb .gnb-wrap .depth1-wrap .depth1 { position: relative; height: 100%; flex-basis: auto; border-bottom: 0;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item::before, header .gnb .gnb-wrap .depth1-wrap .depth1 .item::after { content: ""; display: inline-block; position: absolute; top: auto; bottom: 0; left: auto; right: 0; height: 3px;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item::before { opacity: 0; width: 100%; background: #fff; transition: opacity 0.5s ease-in; transition-delay: 0.2s;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item::after { width: 0; margin-top: 0; border: 0; transform: none; background-image: linear-gradient(to right, #d70c18, #d70c18); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);} header .gnb .gnb-wrap .depth1-wrap .depth1 .item:hover { color: #222;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item:hover::after { left: 0; right: auto; width: 100%;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item:hover span { color: #222; transition:0.3s } header .gnb .gnb-wrap .depth1-wrap .depth1.active .item { background: none; color: #000;} header .gnb .gnb-wrap .depth1-wrap .depth1.active .item::after { left: 0; right: auto; width: 100%;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu { display: block; position: absolute; top: 88px; opacity: 0; transform: translateY(-100%); transition: all 0.5s ease-in-out;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap { height: 432px; padding-top: 20px; z-index: 10; opacity: 0; transition: all 0.8s ease-in-out;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2 { min-width: 110px; padding: 0;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2 .item-d2 { padding: 0; font-size: 16px; line-height: 1.7; color: #222; white-space: nowrap; font-weight: 300;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2 .item-d2.mobile { display: none !important;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2 .item-d2.pc { display: block !important;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2 .item-d2::after { display: none;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2:hover .item-d2, header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2:focus .item-d2, header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2.acitve .item-d2 { color: #d70c18;} header .gnb .gnb-wrap .depth1-wrap .depth2-menu .depth2-wrap .depth2 + .depth2 { margin-top: 16px;} header .gnb .gnb-wrap .depth1-wrap .depth3-wrap { display: block;} header .gnb .gnb-wrap .depth1-wrap .depth3-wrap .depth3 { padding: 0 0 0 2px;} header .gnb .gnb-wrap .depth1-wrap .depth3-wrap .depth3 .item-d3 { font-size: 13px; line-height: 1.8; color: #666; white-space: nowrap; font-weight: 400; } header .gnb .gnb-wrap .depth1-wrap .depth3-wrap .depth3 .item-d3::before { /*content: "·"; */ display: inline-block; padding-right: -5px;} header .gnb .gnb-wrap .depth1-wrap .depth3-wrap .depth3 .item-d3:hover, header .gnb .gnb-wrap .depth1-wrap .depth3-wrap .depth3 .item-d3:focus { color: #222;} header .gnb .gnb-wrap .depth1-wrap .depth3-wrap .depth3.active .item-d3 { color: #222;} } @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .menu-closed-pc { display: inline-block; position: absolute; top: -40px; left: 50%; width: 50%; opacity: 0; transition: all 0.5s ease-in-out;} } @media screen and (min-width: 1024px) and (min-width: 1024px) and (max-width: 1280px) { header .gnb .gnb-wrap .menu-closed-pc { left: auto; right: 30px;} } @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .menu-closed-pc .inner { max-width: 600px; text-align: right;} } @media screen and (min-width: 1024px) and (max-width: 1280px) { header .gnb .gnb-wrap .menu-closed-pc .inner { max-width: auto;} } @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed { position: absolute; top: 0; right: 15px; width: 25px; height: 25px;} header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed:before, header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed:after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #666; content: "";} header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed:hover::before, header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed:hover::after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #222; content: "";} header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed:before { transform: rotate(-45deg);} header .gnb .gnb-wrap .menu-closed-pc .btn-menu-closed:after { transform: rotate(45deg);} } @media screen and (min-width: 1024px) { #header.gnb-open .dimmed { opacity: 1; z-index: -1; visibility: visible;} #header.gnb-open .menu-closed-pc { opacity: 1; top: 465px;} #header.gnb-open .depth1-wrap { height: 520px;} #header.gnb-open .depth1-wrap::after { transform: translateY(0); visibility: visible;} #header.gnb-open .depth1-wrap .depth1 .item::before { opacity: 1; transition: opacity 0.1s ease; transition-delay: 0.2s;} #header.gnb-open .depth2-menu { height: 432px; transform: translateY(0); opacity: 1;} #header.gnb-open .depth2-menu .depth2-wrap { opacity: 1;} } header .top-util { display: flex; justify-content: flex-end; align-items: center; max-width: 150px; z-index: 11; margin-right: 0;} header .top-util .top-search .btn-search { width: 25px; height: 20px; box-sizing: content-box; vertical-align: top; background: url("../../assets/images/icon-lan-w.png") no-repeat center center;} @media screen and (max-width: 1023px) { header .top-util .top-search .btn-search { width: 24px; height: 24px; background: url("../../assets/images/icon-lan-w.png") no-repeat center center; background-size: 24px 24px !important; vertical-align: middle;} } @media screen and (max-width: 799px) { header .top-util .top-search .btn-search { width: 15px; height: 13px; background: url("../../assets/images/icon-lan-w.png") no-repeat center center; background-size: 18px 18px !important;} } header .top-util .top-search .search-layer { position: absolute; top: 100%; left: 0; right: 0; visibility: hidden;} @media screen and (max-width: 1023px) { header .top-util .top-search .search-layer { top: 100%;} } header .top-util .top-search .search-layer::after { content: ""; display: block; position: absolute; left: 0; right: 0; opacity: 0; z-index: -1; transition: all 600ms ease-out;} header .top-util .top-search .search-layer .search-inner { position: absolute; width: 100%; transition-duration: 400ms; transition: opacity 400ms cubic-bezier(0.86, 0, 0.07, 1); opacity: 0; z-index: 2;} header .top-util .top-search .search-layer .search-inner::after { display: inline-block; position: absolute; top: 0; left: 100%; content: ""; width: 0; height: 100%; background-color: #fff; z-index: -1; transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);} @media screen and (max-width: 1023px) { header .top-util .top-search .search-layer .search-inner::after { width: 100%; left: 0;} } header .top-util .top-search .search-layer .search-inner .inner { display: flex; justify-content: flex-end; max-width: 1920px; margin: 0 auto; height: 65px; padding: 1px 60px 0;} @media screen and (max-width: 799px) { header .top-util .top-search .search-layer .search-inner .inner { height: 45px; padding: 0 5px;} } @media screen and (min-width: 800px) and (max-width: 1023px) { header .top-util .top-search .search-layer .search-inner .inner { height: 65px; padding: 0 30px;} } header .top-util .top-search .search-layer .search-inner form { width: 380px; height: 100%;} @media screen and (max-width: 1023px) { header .top-util .top-search .search-layer .search-inner form { width: 100%;} } header .top-util .top-search .search-layer .search-area { display: flex; align-items: center; width: 380px; height: 100%; margin-right: 85px; background: #fff;} @media screen and (max-width: 1023px) { header .top-util .top-search .search-layer .search-area { width: 100%; margin-right: 0;} } header .top-util .top-search .search-layer .search-area .search-box { display: inline-block; flex: 1; height: 100%;} header .top-util .top-search .search-layer .search-area .search-box .inp-search { width: 100%; height: 100%; padding: 0 20px; font-size: 16px; color: #000; box-sizing: border-box;} @media screen and (min-width: 800px) and (max-width: 1023px) { header .top-util .top-search .search-layer .search-area .search-box .inp-search { padding: 0 10px 0 20px; font-size: 28px;} } @media screen and (max-width: 799px) { header .top-util .top-search .search-layer .search-area .search-box .inp-search { padding: 0 5px 0 10px; font-size: 14px;} } header .top-util .top-search .search-layer .search-area .search-box .inp-search::placeholder { color: #999;} header .top-util .top-search .search-layer .search-area .search-box .inp-search:active, header .top-util .top-search .search-layer .search-area .search-box .inp-search:focus { outline: none;} header .top-util .top-search .search-layer .search-area .search-btn { display: inline-flex; align-items: center; height: 100%;} header .top-util .top-search .search-layer .search-area .search-btn .search-go { width: 25px; height: 20px; padding: 10px; box-sizing: content-box; background: url("../../assets/images/icon-lan-w.png") no-repeat center center; background-size: 25px 20px !important;} @media screen and (max-width: 799px) { header .top-util .top-search .search-layer .search-area .search-btn .search-go { background: url("../../assets/images/icon-lan-w.png") no-repeat center center; background-size: 15px 13px !important;} } @media screen and (min-width: 800px) and (max-width: 1023px) { header .top-util .top-search .search-layer .search-area .search-btn .search-go { width: 31px; height: 27px; padding: 10px 0 10px 10px; background-size: 31px 27px !important;} } header .top-util .top-search.sch-open::after { opacity: 1;} header .top-util .top-search.sch-open .btn-search { position: relative; background: none;} header .top-util .top-search.sch-open .btn-search:before, header .top-util .top-search.sch-open .btn-search:after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #000; content: "";} header .top-util .top-search.sch-open .btn-search:before { transform: rotate(-45deg);} header .top-util .top-search.sch-open .btn-search:after { transform: rotate(45deg);} header .top-util .top-search.sch-open .search-layer { visibility: visible;} header .top-util .top-search.sch-open .search-layer::after { width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.3); opacity: 1;} header .top-util .top-search.sch-open .search-layer .search-inner { opacity: 1; transition: opacity 400ms cubic-bezier(0.86, 0, 0.07, 1);} header .top-util .top-search.sch-open .search-layer .search-inner::after { left: 0; width: 100%; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; transition-delay: 5000ms; transition-duration: 600ms; transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);} header .top-util .top-lang { position: relative; margin-left: 40px;} @media screen and (max-width: 1023px) { header .top-util .top-lang { display: none;} } header .top-util .top-lang .curr-lang { position: relative; padding-right: 0;} header .top-util .top-lang .curr-lang a { font-size: 16px;} /*header .top-util .top-lang .curr-lang::after { content: ""; display: inline-block; position: absolute; right: 0; top: 8px; width: 0; height: 0; border-top: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 0 solid transparent;} */ header .top-util .top-lang .lang-list-wrap { position: absolute; top: 33px; left: -27px; background: #0091ff; z-index: 12; opacity: 0; visibility: hidden; transition: opacity 300ms ease-out, visibility 300ms ease-out; border-radius: 15px;} header .top-util .top-lang .lang-list-wrap .lang-list { width: 80px; padding: 10px 0; border: 1px solid #0091ff; border-radius: 15px;} header .top-util .top-lang .lang-list-wrap .lang-list li { width: 100%; text-align: center;} header .top-util .top-lang .lang-list-wrap .lang-list li a { display: block; padding: 10px; font-size: 14px; color: #fff;} header .top-util .top-lang .lang-list-wrap .lang-list li a span.lang-txt { display: inline-block; text-decoration : underline; text-decoration-color: #69beff; text-underline-offset : 5px; text-underline-offset: 13px;} header .top-util .top-lang .lang-list-wrap .lang-list li:last-child a span.lang-txt { text-decoration : none;} header .top-util .top-lang.active .curr-lang::after { top: 5px; transform: rotate(180deg);} header .top-util .top-lang.active .lang-list-wrap { opacity: 1; visibility: visible;} .main-header-wrap header { background: transparent; color: #fff;} .main-header-wrap header::after { display: none;} .main-header-wrap header .top-logo a { background: url("../../assets/images/top-logo.png") no-repeat center center; background-size: 140px ; transition: all 0.1s ease; transition-delay: 0.2s;} @media screen and (min-width: 1024px) { header .gnb .gnb-wrap .back-bg { position: fixed; top: 0; left: 0; right: 0; height: 0; background: transparent; transition: all 0.3s ease; transition-delay: 0.2s;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item { transition: color 0.15s ease-in-out; transition-delay: 0.2s;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item span { font-weight:600;} header .gnb .gnb-wrap .depth1-wrap .depth1 .item span:hover { color:#d70c18; } .main header .gnb .gnb-wrap .depth1-wrap .depth1 .item span { color:#666; font-weight:600;} } header .top-util .top-lang .curr-lang_btn { background: url(../../assets/images/icon-lan-w.png) no-repeat center center; transition: all 0.1s ease; transition-delay: 0.2s; background-size: 25px 25px; display: inline-block; width: 25px; height: 25px; padding: 0;} header .top-util .top-lang .curr-lang_btn:hover { background: url(../../assets/images/icon-lan-b.png) no-repeat center center; transition: all 0.1s ease; transition-delay: 0.2s; background-size: 25px 25px; display: inline-block; width: 25px; height: 25px; padding: 0;} header .top-util .top-lang.sch-open .curr-lang_btn { background: none; transition: all 0.1s ease; transition-delay: 0.2s;} header .top-util .top-lang.sch-open .curr-lang_btn:before, .main-header-wrap header .top-util .top-lang.sch-open .curr-lang_btn:after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #fff; content: "";} header .top-util .top-lang.sch-open .curr-lang_btn:before { transform: rotate(-45deg);} header .top-util .top-lang.sch-open .curr-lang_btn:after { transform: rotate(2025-02-2345deg);} header .top-util .top-lang .curr-lang a { color: #fff; transition: all 0.1s ease; transition-delay: 0.2s; display: flex;} /*.main-header-wrap header .top-util .top-lang .curr-lang::after { border-top-color: #fff; transition: all 0.1s ease; transition-delay: 0.2s;}*/ @media screen and (max-width: 1023px) { .main-header-wrap header .toggle-memu-mo .toggle-btn { background: url(../../assets/images/icon-menu-mo-wh.png) no-repeat center center; background-size: 22px 17px;} } .main-header-wrap header.gnb-open .top-logo a { background: url("../../assets/images/top-logo.png") no-repeat center center; background-size: 142px ;} @media screen and (min-width: 1024px) { .main-header-wrap header.gnb-open .gnb .gnb-wrap .depth1-wrap .depth1 .item { color: #fff; transition: color 0.05s ease-in-out; transition-delay: 0.2s;} } .main-header-wrap header.gnb-open .top-util .top-lang .curr-lang_btn { background: url("../../assets/images/icon-lan-w.png") no-repeat center center; background-size: 25px 25px; display: inline-block; width: 25px; height: 25px; padding: 0;} .main-header-wrap header.gnb-open .top-util .top-lang .curr-lang a { color: #fff;} .main-header-wrap header.gnb-open .top-util .top-lang .curr-lang::after { border-top-color: #fff;} .main-header-wrap.fixed { height: 89px; background: #fff;} @media screen and (max-width: 799px) { .main-header-wrap.fixed { height: 45px;} } .main-header-wrap.fixed header { background: #fff;} .main-header-wrap.fixed header::after { display: block;} @media screen and (max-width: 1023px) { .main-header-wrap.fixed header .toggle-memu-mo .toggle-btn { background: url(../../assets/images/icon-menu-mo-wh.png) no-repeat center center; background-size: 22px 17px;} } .main-header-wrap.fixed header .top-logo a { background: url("../../assets/images/top-logo.png") no-repeat center center; background-size: 142px ;} .main-header-wrap.fixed header .curr-lang .curr-lang_btn { background: url("../../assets/images/icon-lan-w.png") no-repeat center center; transition: all 0.1s ease; transition-delay: 0.2s; background-size: 25px 25px; display: inline-block; width: 25px; height: 25px; padding: 0} .main-header-wrap.fixed header .curr-lang.btn-open .curr-lang_btn { background: none;} .main-header-wrap.fixed header .curr-lang.btn-open .curr-lang_btn:before, .main-header-wrap.fixed header .curr-lang.btn-open .curr-lang_btn:after { position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #fff; content: "";} .main-header-wrap.fixed header .curr-lang.btn-open .curr-lang_btn:before { transform: rotate(-45deg);} .main-header-wrap.fixed header .curr-lang.btn-open .curr-lang_btn:after { transform: rotate(45deg);} @media screen and (min-width: 1024px) { .main-header-wrap.fixed header .gnb .gnb-wrap .depth1-wrap .depth1 .item { transition: color 0.15s ease-in-out; transition-delay: 0.2s;} .main-header-wrap.fixed header .gnb .gnb-wrap .depth1-wrap .depth1 .item span { color:#666;} .main-header-wrap.fixed header .gnb .gnb-wrap .depth1-wrap .depth1 .item span:hover { color:#d70c18;} } .main-header-wrap.fixed h4 { color: #fff;} .main-header-wrap.fixed header .top-util .top-lang .curr-lang::after { border-top-color: #ccc;} .main-header-wrap header.gnb-open { background: transparent;} @media screen and (min-width: 1024px) { .main-header-wrap header.gnb-open .gnb .gnb-wrap .back-bg { height: 88px; background: #fff; transition: all 0.3s ease-in;} .main-header-wrap header.gnb-open .gnb .gnb-wrap .depth1-wrap::before { opacity: 1; transition-delay: 0.1s;} } /************************* footer *************************/ .footer-wrap { /*background-color: #f2f1ed; padding: 0 127px 40px 127px; */} .footer-wrap { background-color: #333; padding: 20px 127px 60px 127px; } .footer-wrap .foot-head .inner { display: flex; max-width: 1260px; margin: 0 auto; padding: 0 30px; justify-content: space-between;} .footer-wrap .foot-head .inner .foot-menu { width:80%; color: #fff; transition: color 0.15s ease-in-out; transition-delay: 0.2s;;} .footer-wrap .foot-head .inner .foot-logo { width:20%;} .footer-wrap .foot-head { padding-top: 40px;} .footer-wrap .foot-head .inner { justify-content: space-between;} .footer-wrap .foot-util { display: flex; height: 55px; position: relative;} .footer-wrap .foot-util .link { display: flex; justify-content: space-between; font-size: 16px; color: #fff; align-items: center;} .footer-wrap .foot-logo .logo { display: block; width: 150px; height: 37px; background: url("../../assets/images/footer-logo.png") no-repeat 0 0; background-size: 150px auto;} @media screen and (max-width: 1024px) { .footer-wrap .foot-head .inner { flex-direction: column;} .footer-wrap .foot-head .inner .foot-menu { margin-top: 10px; width: 100%;} .footer-wrap { padding-left: 30px ; padding-right: 30px ;} .footer-wrap .foot-util .link { width: 150px; padding: 21px 20px 0 20px;;} } @media screen and (max-width: 799px) { .footer-wrap { padding-bottom: 38px;} .footer-wrap .foot-body .foot-util .link { padding:0; display: flex; justify-content: flex-start; align-items: center; width: 120px;} .footer-wrap .foot-body .foot-util a.link img { margin-left: 20px;} .footer-wrap .foot-body .inner .foot-util { width:100%; align-items: unset; flex-direction: unset;} .footer-wrap .foot-util { width: 100%; margin-left: 0;} .footer-wrap .foot-util { margin-left: -30px;} .footer-wrap .foot-util { flex-direction: column; /* align-items: flex-end; */} } @media screen and (max-width: 640px) { .footer-wrap .foot-head .inner { padding:0;} .footer-wrap .foot-head .inner .foot-menu { display: none;} .footer-wrap .foot-body .inner .foot-content { width:100%;} } @media screen and (max-width: 799px) { .footer-wrap .foot-logo .logo { width: 120px; height: 31px; background-size: 120px auto; margin-top: 5px;} } .footer-wrap .foot-body .inner { display: flex; max-width: 1260px; margin: 0 auto; padding: 0 30px 0 30px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;} .footer-wrap .foot-body { font-size: 14px; color: #dadada;} .footer-wrap .foot-body .info { display: flex; flex-wrap: wrap;} .footer-wrap .foot-body .info address { display: inline-block;} .footer-wrap .foot-body .info span:not(:last-child):after { display: inline-block; width: 1px; height: 13px; margin: 0 10px; background-color: #666; vertical-align: -2px; content: "";} .footer-wrap .foot-content { width:700px; } .footer-wrap .foot-content .foot-link { display: flex; flex-wrap: wrap; margin-bottom: 10px;} .footer-wrap .foot-content .foot-link li { margin-top: 10px;} .footer-wrap .foot-content .foot-link li a { font-size: 15px; color: #dadada;} .footer-wrap .foot-content .foot-link li:not(:last-child):after { display: inline-block; width: 1px; height: 13px; margin: 0 12px; background-color: #666; vertical-align: -2px; content: "";} .footer-wrap .foot-content .foot-link li.highlight a { color: #fff; font-weight:600;} .footer-wrap .foot-content .foot-address .copyright { margin-top: 10px;} @media screen and (max-width: 799px) { .footer-wrap .foot-content { padding: 20px 0 0;} .footer-wrap .foot-content .foot-address { margin-top: 13px;} .footer-wrap .foot-content .foot-address .info span { margin-top: 13px;} .footer-wrap .foot-content .foot-address .copyright { margin-top: 13px;} .footer-wrap .foot-content .foot-link { margin-top: -15px;} .footer-wrap .foot-content .foot-link li { margin-top: 15px;} .footer-wrap .foot-content .foot-link li a { font-size: 14px;} .footer-wrap .foot-content .foot-link { margin-top: -20px;} .footer-wrap .foot-content .foot-link li { margin-top: 20px;} } @media screen and (max-width: 640px) { .footer-wrap .foot-body .inner { padding:0;} .footer-wrap .foot-content .foot-address .info span { margin-top: 5px;} } /************************* main *************************/ .wrap.main { display: block; height: 100%; padding: 0;} .wrap.main .footer-wrap { margin: 0;} .wrap.main .main-header-wrap.fixed { position: fixed; transition: all 0.5s ease; top: -90px; left: 0; right: 0; z-index: 99;} .wrap.main #header { position: absolute;} #container.main-container { padding: 0;} #container .main-wrap .main-top { position: relative; width: 100%; height: 100vh;} @media screen and (min-width: 800px) { #container .main-wrap .main-top .main-visual .sliders .slick-slide { height: auto; position:relative;} } #container .main-wrap .main-top .main-visual .sliders img { position: absolute; top: 0; left: 50%; height: 100vh; transform: translateX(-50%);} #container .main-wrap .main-top.full { height: 100vh;} #container .main-wrap .main-top .slider-wrap.main-visual { margin: 0; padding: 0;} #container .main-wrap .main-top .slider-wrap.main-visual .sliders { padding: 0; position:relative;} #container .main-wrap .main-top .slider-wrap.main-visual .slick-dots { bottom: 50px;} #container .main-wrap .main-btm .main-btm-bg { height: 1000px ;} #container .main-wrap .main-top.full .image_top { background: linear-gradient(to bottom, #000, transparent);height: 300px;width: 100%;position: absolute; top:0; left:0;z-index: 100;} #container .main-wrap .main-top.full .image_btm { background: linear-gradient(to top, #000, transparent);height: 150px;width: 100%;position: absolute; bottom:0; left:0;z-index: 101;;} #container .main-wrap .main-top .main-visual .sliders .slick-slide .text { position:absolute;z-index: 101;top: 40%;left: 10%; color:#fff;margin: 0 auto;} #container .main-wrap .main-top .main-visual .sliders .slick-slide .text .tit { text-align:left; font-size:48px; font-weight:700; line-height:130%;} #container .main-wrap .main-top .main-visual .sliders .slick-slide .text .txt { text-align:left; padding-top:20px;font-size:28px; font-weight:600; line-height:140%;} #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .title { line-height: 140%; font-size: 24px; font-weight:700;} #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .content { line-height: 140%; font-size: 18px; max-height: 90px;-webkit-line-clamp: 3;} #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .box { background-color: unset;} #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .contents { padding: 20px 0 20px 0; } @media screen and (max-width: 1440px) { #container .main-wrap .main-btm .main-btm-bg { height: 1000px;} } @media screen and (max-width: 1280px) { #container .main-wrap .main-btm .main-btm-bg { height: 950px;} #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .content { max-height: unset;-webkit-line-clamp: unset;} } @media screen and (max-width: 1024px) { #container .main-wrap .main-btm .main-btm-bg { height: 900px;} #container .main-wrap .main-top.full .image_top { background-color: #000; height:100%; opacity: 0.2;} #container .main-wrap .main-top.full .image_btm { height: unset;} } @media screen and (max-width:800px) { #container .main-wrap .main-btm .main-btm-bg { height: unset;} #container .main-wrap .main-top .main-visual .sliders .slick-slide .text { left: unset; margin-left:30px;} #container .main-wrap .main-top .main-visual .sliders .slick-slide .text .tit { font-size:36px; } #container .main-wrap .main-top .main-visual .sliders .slick-slide .text .txt { font-size:20px; } #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .title { max-height: unset; font-size: 22px;} #container .main-wrap .main-top.full .image_top { opacity: 0.05;} #container .main-wrap .main-btm-bg .board-wrap .list-wrap .lists .content { max-height: unset;-webkit-line-clamp: unset;} } @media screen and (max-width: 520px) { #container .main-wrap .main-top .main-visual .sliders .slick-slide .text .tit { font-size:28px; width: 95%;} #container .main-wrap .main-top .main-visual .sliders .slick-slide .text .txt { font-size:18px; width: 90%;} } /* 비주얼 이미지 넣을 경우 */ /* #container .main-wrap .main-top.full .image { height: 100vh; background: no-repeat center center; background-size: cover;} @media screen and (max-width: 799px) { #container .main-wrap .main-top .slider-wrap.main-visual .slick-dots { bottom: 180px;} } */ /* 비주얼 이미지 넣을 경우 */ /* 비주얼 영상 넣을 경우 */ #container .main-wrap .main-top.full .image { position: relative; width: 100%; height: 100vh; overflow: auto; background: #000;} #container .main-wrap .main-top.full .image video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); margin: 0; padding: 0;} #container .main-wrap .main-top.full .image video::-webkit-media-controls { display:none !important;} @media screen and (max-width: 520px) { #container .main-wrap .main-top.full .image { background-position: center right;} } /* 비주얼 영상 넣을 경우 */ #container .main-wrap .main-top .slider-wrap.main-visual .slick-dots li button:before { border: 1px solid #fff; background-color: transparent;} #container .main-wrap .main-top .slider-wrap.main-visual .slick-dots li.slick-active button:before { background-color: #fff;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause { position: absolute; bottom: 50px; left: calc(50% + 55px);} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause, #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .play { display: none; font-size: 0; text-indent: -9999em;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause.active, #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .play.active { display: block;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .play { padding: 5px;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .play:before { display: inline-block; margin-left: 2px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid #fff; content: "";} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause { padding: 5px;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause:before, #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause:after { display: inline-block; width: 4px; height: 12px; margin: 0 2px; background-color: #fff; content: "";} @media screen and (max-width: 799px) { #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause { bottom: 50px; left: calc(50% + 45px);} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .play { padding: 4px;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .play:before { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 10px;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause { padding: 4px;} #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause:before, #container .main-wrap .main-top .slider-wrap.main-visual .btn-play-pause .pause:after { width: 3px; height: 10px;} } #container .main-wrap .main-top .main-top-content-wrap { position: absolute; bottom: 0; right: 0; left: 0; padding: 20px 0; background-color: rgba(70, 70, 70, 0.95);} @media screen and (min-width: 800px) and (max-width: 1023px) { #container .main-wrap .main-top .main-top-content-wrap { height: 184px;} } @media screen and (max-width: 799px) { #container .main-wrap .main-top .main-top-content-wrap { height: 163px;} } #container .main-wrap .main-btm .main-section { max-width: 1439px; margin: 0 auto 0; padding: 120px 127px 0 127px;} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section { padding-top: 60px;} } @media screen and (min-width: 1024px) and (max-width: 1440px) { #container .main-wrap .main-btm .main-section { max-width: none; padding: 120px 127px 0 127px;} } @media screen and (max-width: 1023px) { #container .main-wrap .main-btm .main-section { padding: 120px 80px;} } @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section { max-width: none; padding-left: 20px; padding-right: 20px;} } #container .main-wrap .main-btm .main-section.now-on { padding-top: 120px; display: flex; flex-direction: column;} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section.now-on { padding-top: 60px;} } #container .main-wrap .main-btm .main-section .title-wrap { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;} #container .main-wrap .main-btm .main-section .title-wrap h3 img { width: 100%;} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section .title-wrap { flex-direction: column; } } #container .main-wrap .main-btm .main-section .title-wrap .view-more { display: inline-block; margin-left: 10px; color: #666; line-height: 1;} #container .main-wrap .main-btm .main-section .title-wrap .view-more::after { margin-left: 6px; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #888; border-right: 2px solid #888; content: ""; transform: rotate(45deg);} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section .title-wrap .view-more { margin-top: 15px; margin-left: 0; font-size: 14px;} #container .main-wrap .main-btm .main-section .title-wrap .view-more::after { display: inline-block; width: 6px; height: 6px; border-top: 2px solid #888; border-right: 2px solid #888; content: ""; transform: rotate(45deg);} } #container .main-wrap .main-btm .main-section .title-wrap.ty2 { flex-direction: column; align-items: flex-start !important;} #container .main-wrap .main-btm .main-section .title-wrap.ty2 .text { margin-top: 10px; font-size: 16px; font-weight: 400; color: #666;} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section .title-wrap.ty2 .text { font-size: 14px;} } #container .main-wrap .main-btm .main-section .title-wrap.ty2 .view-more { margin-left: 0; margin-top: 10px;} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section .title-wrap.ty2 .view-more { margin-top: 15px;} } #container .main-wrap .main-btm .main-section.now-on .title-wrap h5 { width: 100%; text-align: left; font-size: 20px; color: #d70c18;font-weight:600;} #container .main-wrap .main-btm .main-section.now-on .title-wrap h3 { width: 100%; text-align: left; font-size: 36px; font-weight:500;color: #222; padding-top: 10px;line-height:140%;} #container .main-wrap .main-btm .main-section.banner-area { max-width: 100%; padding: 120px 0 0 0; height: 900px;} #container .main-wrap .main-btm .main-section.banner-area .title-wrap h5 { width: 100%; text-align: center; font-size: 20px; color: #d70c18;font-weight:600;} #container .main-wrap .main-btm .main-section.banner-area .title-wrap h3 { width: 100%; text-align: center; font-size: 36px; font-weight:500;color: #fff; padding-top: 10px;line-height:140%;} #container .main-wrap .board-wrap .list-wrap .lists .thumbnail { padding-bottom: 120%;} #container .main-wrap .board-wrap .list-wrap .lists .item { width: 33.33%;} #container .main-wrap .board-wrap .list-wrap .lists { display: flex; gap: 0 20px; justify-content: space-between;} @media screen and (max-width: 1440px) { #container .main-wrap .main-btm .main-section.banner-area { height: 900px;} } @media screen and (max-width: 1280px) { #container .main-wrap .main-btm .main-section.banner-area { height: 800px;} } @media screen and (max-width: 1024px) { #container .main-wrap .main-btm .main-section.banner-area { height: 750px;} #container .main-wrap .main-btm .main-section.now-on .title-wrap h3 { font-size: 30px;} #container .main-wrap .main-btm .main-section.banner-area .title-wrap h3 { font-size: 30px;} } @media screen and (max-width: 800px) { #container .main-wrap .main-btm .main-section.banner-area { height: 700px;} #container .main-wrap .board-wrap .list-wrap .lists { flex-wrap: wrap;} #container .main-wrap .board-wrap .list-wrap .lists .item { width: calc(33% - 15px);} #container .main-wrap .board-wrap .list-wrap .lists .thumbnail { padding-bottom: 0; } #container .main-wrap .main-btm .main-section.now-on .title-wrap h5 { font-size: 16px;} #container .main-wrap .main-btm .main-section.now-on .title-wrap h3 { font-size: 24px;} #container .main-wrap .main-btm .main-section.now-on .title-wrap br { display:none;} #container .main-wrap .main-btm .main-section.banner-area .title-wrap h5 { font-size: 16px;} #container .main-wrap .main-btm .main-section.banner-area .title-wrap h3 { font-size: 24px;} } @media screen and (max-width: 640px) { #container .main-wrap .main-btm .main-section.now-on .title-wrap h5 { font-size: 18px;} #container .main-wrap .main-btm .main-section.now-on .title-wrap h3 { font-size: 22px;} #container .main-wrap .main-btm .main-section.banner-area { height: 700px;} #container .main-wrap .board-wrap .list-wrap .lists .item { width: 100%;} #container .main-wrap .board-wrap .list-wrap .lists .thumbnail { max-height: 300px;} } @media screen and (max-width: 520px) { } #container .main-wrap .main-btm .main-section.business-div .title-wrap h3 { display: flex;} #container .main-wrap .main-btm .main-section.business-div .title-wrap h3 img:first-child { width: 145px;} #container .main-wrap .main-btm .main-section.business-div .title-wrap h3 img:last-child { width: 347px; margin-left: 15px;} @media screen and (max-width: 799px) { #container .main-wrap .main-btm .main-section.business-div .title-wrap h3 { flex-direction: column-reverse;} #container .main-wrap .main-btm .main-section.business-div .title-wrap h3 img:first-child { width: 90px; margin-top: 10px;} #container .main-wrap .main-btm .main-section.business-div .title-wrap h3 img:last-child { width: 235px; margin-left: 0;} } #container .main-wrap .main-section { padding: 0 127px;} @media screen and (min-width: 800px) and (max-width: 1023px) { #container .main-wrap .main-section { padding: 0 30px;} } @media screen and (max-width: 799px) { #container .main-wrap .main-section { padding: 0 15px;} } #container .main-wrap .main-section .ani { opacity: 0; transform: translateY(80px); transition: all 0.8s ease-in-out;} #container .main-wrap .main-section .ani.delay-1 { transition-delay: 200ms;} #container .main-wrap .main-section .ani.delay-2 { transition-delay: 400ms;} #container .main-wrap .main-section .ani.delay-3 { transition-delay: 600ms;} #container .main-wrap .main-section .ani.delay-4 { transition-delay: 700ms;} #container .main-wrap .main-section .ani.active { opacity: 1 !important; transform: translate(0, 0) scale(1, 1) !important;} #container .main-wrap .nowon-slider-wrap { /* margin-bottom: 70px; */ display: flex; justify-content: center;;} #container .main-wrap .nowon-slider-wrap .slider-wrap { background: url("../../assets/images/main-global-bg.png") no-repeat top center; background-position-y: 1.5vw; height:50vw; width:80vw; resize: both; background-size: contain; padding: 0; position: relative;} #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders.slick-initialized { padding: 0;} @media screen and (min-width: 1440px) { #container .main-wrap .nowon-slider-wrap .slider-wrap { width: 1185px; height: 806px;} } @media screen and (max-width: 1280px) { #container .main-wrap .nowon-slider-wrap .slider-wrap { height:650px;} } @media screen and (max-width: 900px) { } @media screen and (max-width: 800px) { #container .main-wrap .nowon-slider-wrap .slider-wrap { background: url("../../assets/images/main-global-bg-m.png") no-repeat top center; background-position-y: 5vw; background-size: contain;} } @media screen and (max-width: 799px) { #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap { max-width: 300px;} } @media screen and (max-width: 520px) { #container .main-wrap .nowon-slider-wrap .slider-wrap { height: 350px;} } #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .item { padding: 0 15px; height: 100%;} #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .item .thumbnail { height: 100%; overflow: hidden;} #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .item .thumbnail img { width: 100%; height: 100%; transform: scale(1); transition: all 0.3s ease-out;} #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .item:hover .thumbnail img, #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .item:focus .thumbnail img { transform: scale(1.1);} #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents { display: flex; flex-direction: column; justify-content: flex-end; position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 50px 40px; color: #fff; background-color: rgba( 0, 0, 0, 0.3 ); margin:0 15px ;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents { padding: 20px 30px;} } #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents .title, #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents span { flex: none; display: inline-block; width: 100%;} #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents .title { font-size: 24px;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents .title { font-size: 15px;} } #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents span { margin-top: 20px; font-size: 20px;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-slider-wrap .slider-wrap .sliders .item-wrap .contents span { margin-top: 15px; font-size: 13px;} } @media screen and (min-width: 800px) { /* #container .main-wrap .nowon-slider-wrap .slider-wrap { padding: 0;} #container .main-wrap .nowon-slider-wrap .nowon-slider { display: flex; align-items: stretch; width: 100%;} */ #container .main-wrap .nowon-slider-wrap .nowon-slider .slick-slide { display: block; position: relative; float: none; width: 100%; height: auto;} #container .main-wrap .nowon-slider-wrap .nowon-slider .slick-slide .item.delay-1 { transition-delay: 200ms;} #container .main-wrap .nowon-slider-wrap .nowon-slider .slick-slide .item.delay-2 { transition-delay: 400ms;} #container .main-wrap .nowon-slider-wrap .nowon-slider .slick-slide .item.delay-3 { transition-delay: 600ms;} #container .main-wrap .nowon-slider-wrap .nowon-slider .slick-slide .item.delay-4 { transition-delay: 0;} } #container .main-wrap .nowon-news { width: 100%; display: flex; border-top: 2px solid #666; border-bottom: 1px solid #d2d2d2;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-news { flex-direction: column;} } #container .main-wrap .nowon-news .title-wrap { min-width: 200px; max-width: 270px; width: 20%; margin-bottom: 0; padding: 25px 30px;} #container .main-wrap .nowon-news .title-wrap .title { font-size: 26px; color: #000; font-weight: 700;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-news .title-wrap { min-width: initial; width: 100%; padding: 20px 0;} #container .main-wrap .nowon-news .title-wrap .title { font-size: 17px;} } #container .main-wrap .nowon-news ul { display: flex; flex: 1;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-news ul { flex-direction: column;} } #container .main-wrap .nowon-news ul li { flex: 1; padding: 30px; font-size: 18px; color: #000; line-height: 1.8; border-left: 1px dotted #d2d2d2;} #container .main-wrap .nowon-news ul li .txt-sm { display: block; color: #777;} @media screen and (max-width: 799px) { #container .main-wrap .nowon-news ul li { padding: 20px 0; font-size: 15px; border-left: 0; border-top: 1px dotted #d2d2d2;} #container .main-wrap .nowon-news ul li .txt-sm { font-size: 13px;} } #container .main-wrap .business-div .list-wrap { margin: 0;} #container .main-wrap .business-div .list-wrap .lists { margin-top: 0;} #container .main-wrap .business-div .list-wrap .lists .item { width: 33.33%; margin-bottom: 25px; padding: 0 15px 0;} @media screen and (min-width: 1024px) { #container .main-wrap .business-div .list-wrap .lists .item:first-child { transition-delay: 300ms !important;} #container .main-wrap .business-div .list-wrap .lists .item:nth-child(2) { transition-delay: 500ms !important;} #container .main-wrap .business-div .list-wrap .lists .item:nth-child(3) { transition-delay: 600ms !important;} } #container .main-wrap .business-div .list-wrap .lists .item .box { height: 100%;} #container .main-wrap .business-div .list-wrap .lists .item .box::after { display: none;} #container .main-wrap .business-div .list-wrap .lists .item .thumbnail img { width: 100%;} #container .main-wrap .business-div .list-wrap .lists .item .box .contents { background-color: #fff;} @media screen and (max-width: 799px) { #container .main-wrap .business-div .list-wrap .lists { flex-direction: column;} #container .main-wrap .business-div .list-wrap .lists .item { width: 100%; padding: 0;} } #container .main-wrap .banner-area { padding: 0; background: url("../../assets/images/main-bg-03-pc.png") no-repeat ; height: 100vh; width: 100%; height: 100%; margin: 0 auto; background-position: center center; background-size: 100% 100%;} @media screen and (max-width: 1023px) { #container .main-wrap .banner-area { flex-direction: column;} } #container .main-wrap .banner-area .banner { position: relative; width: 100%; display: flex; justify-content: center;} #container .main-wrap .banner-area .banner .content { position: absolute; top: 0; bottom: 0; width: 100%; max-width: 600px; color: #fff;} @media screen and (max-width: 1023px) { #container .main-wrap .banner-area .banner .content { max-width: initial;} } #container .main-wrap .banner-area .banner .content .box_txt { display: flex; flex-direction: column; padding-top: 120px; align-items: center;} #container .main-wrap .banner-area .banner .content .box_txt strong { display: block; margin-bottom: 15px; font-size: 36px;} #container .main-wrap .banner-area .banner .content .box_txt span { font-size: 18px; text-align: center; line-height: 160%; max-width: 400px;} #container .main-wrap .banner-area .banner .content .box span.link-text { font-size: 16px;} #container .main-wrap .banner-area .banner .content .box span.link-text::after { margin-left: 3px; display: inline-block; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; content: ""; transform: rotate(45deg);} #container .main-wrap .banner-area .banner .content .btn_box { width: 350px; display: flex; flex-direction: column; padding-top: 80px; align-items: center;} @media screen and (max-width: 799px) { #container .main-wrap .banner-area .banner .content .box strong { margin-bottom: 5px; font-size: 21px;} #container .main-wrap .banner-area .banner .content .box span { font-size: 14px;} #container .main-wrap .banner-area .banner .content .box span.link-text { margin: 0; font-size: 13px;} #container .main-wrap .banner-area .banner .content .btn_box { width: 160px;} #container .main-wrap .banner-area { background-size: auto 100%;} } @media screen and (max-width: 520px) { #container .main-wrap .banner-area .banner .content .box span { margin-left: 20px;} #container .main-wrap .banner-area .banner .content .box_txt span { padding: 0 30px;} } #container .main-wrap .banner-area .banner .img-area { display: block;} #container .main-wrap .banner-area .banner .img-area img { display: inline-block; min-height: 300px;} @media screen and (max-width: 799px) { #container .main-wrap .banner-area .banner .img-area img { min-height: initial;} } #container .main-wrap .banner-area .banner:nth-child(2) .content { transition-delay: 200ms;} #container .main-wrap .banner-area .banner:hover .img-area, #container .main-wrap .banner-area .banner:focus .img-area { overflow: hidden;} #container .main-wrap .banner-area .banner:hover .img-area img, #container .main-wrap .banner-area .banner:focus .img-area img { transition: all 0.3s ease-out; transform: scale(1.1);} #container .main-wrap .banner-area .banner.banner1 .content { display: flex; justify-content: center; width: 100%; flex-wrap: wrap; max-width: 590px;} #container .main-wrap .banner-area .banner.banner1 .content .select { border-bottom: 1px solid #fff;} #container .main-wrap .banner-area .banner.banner1 .content .select select { width:300px; background-color:transparent; padding: 8px 3px 10px 0; font-size:16px; height: 38px; box-sizing: border-box; border: 0; border-radius: 2px; transition: all 0.2s ease; color: #fff; font-weight: 700;} #container .main-wrap .banner-area .banner.banner1 .content .select select:invalid { color:#fff; font-weight:400;font-family: "Noto Sans KR", "Malgun Gothic", "NanumGothic", sans-serif;} #container .main-wrap .banner-area .banner.banner1 .content .select option { color:#222;} #container .main-wrap .banner-area .banner.banner1 .content .input { border-bottom: 1px solid #fff; margin-top: 15px;} #container .main-wrap .banner-area .banner.banner1 .content .input input { color:#fff; width:300px; background-color:transparent; padding: 10px 3px 10px 3px; font-size:16px; height: 38px; box-sizing: border-box; border: 0; border-radius: 2px; transition: all 0.2s ease;} #container .main-wrap .banner-area .banner.banner1 .content .input input::placeholder { color:#fff; font-weight:400;} #container .main-wrap .banner-area .banner.banner1 .content .check { width:300px;margin-top: 15px;} #container .main-wrap .banner-area .banner.banner1 .content .check .prv_view span { text-decoration: underline; font-size:14px; text-underline-offset:3px;} @media only screen and (max-width: 799px) { #container .main-wrap .banner-area .banner.banner1 .content { max-width: 450px;} } /************************* goBtn *************************/ .goBtn img { width: 7px; height: 9px;} .goBtn img.down { width: 17px; height: 15px;} .goBtn { padding: 0 10px; height: 45px; width:199px; line-height: 45px; color: #222; border-radius: 30px;font-weight: 600; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 2; overflow: hidden; border: 1px solid #222;} .goBtn span { font-size: 16px ; margin-left:30px;} .goBtn span.down { margin-left:20px;} .goBtn:before { content: ""; width: 100%; height: 100%; position: absolute; left: -100%; top: 0; transition: all 0.3s; z-index: -1;background: #ee2e2e;} .goBtn:hover, .goBtn:focus { color: #fff ; border: 1px solid #ee2e2e;} .goBtn:hover:before, .goBtn:focus:before { left: 0;} .goBtn:hover img, .goBtn:focus img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} .mainBtn { color: #fff; border: 1px solid #fff;} .lst_btn { color: #222; border: 1px solid #555;} .lst_btn img { filter: brightness(0);} .lst_btn:hover img { filter: brightness(1);} .lst_btn span { margin-left: 45px;} @media only screen and (max-width: 799px) { .goBtn { height: 37px; line-height: 37px;} .goBtn span { font-size:14px ; margin-left: 27px;} .lst_btn span { margin-left: 43px;} } @media only screen and (max-width: 520px) { .goBtn span { margin-left: 35px;} .lst_btn span { margin-left: 39px;} } .team-wrap .flex-cont .goBtn { width: 180px;} .team-wrap .flex-cont .goBtn span { margin-left: 10px;} /************************* btm_inquiry *************************/ .btm_inquiry { margin-top: 60px; background: #f6f6f6; padding: 20px; border-radius: 15px; border: 1px solid #dedede; display: flex; justify-content: center;} .btm_inquiry a { display: flex; align-items: center; color: #666;} .btm_inquiry a:hover { color: #222;} .btm_inquiry img.mail { padding-right: 10px;} .btm_inquiry img.link { padding-left: 10px;} /************************* sup page visual *************************/ .container .sub-top .sub-visual .sliders img { position: absolute; top: 0; left: 50%; height: 50vh; transform: translateX(-50%);} .container .sub-top.full { height: 50vh;} .container .sub-top.full .image { height: 50vh; background: no-repeat center center; background-size: cover;} .container .sub-top.full .image_top { /* background: linear-gradient(to bottom, #000, transparent); */ height: 300px;width: 100%;position: absolute; top:0; left:0;z-index: 100;} .container .sub-top.full .image_btm { /* background: linear-gradient(to top, #000, transparent); */ height: 150px;width: 100%;position: absolute; bottom:0; left:0;z-index: 101;;} .container .sub-top .sub-visual { margin: 0; padding: 0;} .sub-btm .main-btm-bg { background-color:#efefef; height: 1000px ;} .container .sub-top.not-full { height: 90px;} @media screen and (max-width: 1440px) { .container .sub-btm .main-btm-bg { height: 900px;} } @media screen and (max-width: 1024px) { .container .sub-btm .main-btm-bg { height: 800px;} .container .sub-top.full .image_top { top: 0;} } @media screen and (max-width: 799px) { .container .sub-btm .main-btm-bg { height: 600px;} .container .sub-top.not-full { height: 60px;} } @media screen and (max-width: 520px) { .container .sub-btm .main-btm-bg { height: 500px;} } .container .sub-top { position: relative; width: 100%; height: 100vh;} @media screen and (max-width: 799px) { .container .sub-top .sub-visual .slick-dots { bottom: 180px;} } .container .sub-top .sub-visual .slick-dots li button:before { border: 1px solid #fff; background-color: transparent;} .container .sub-top .sub-visual .slick-dots li.slick-active button:before { background-color: #fff;} .container .sub-top .sub-visual .sub-visual-text { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 50vh; width: 100%; color: #fff; z-index: 101;padding: 40px 18px 0 18px;} .container .sub-top .sub-visual .sub-visual-text h2 { font-size: 36px; line-height: 140%; color: #ee8b00; font-weight: 700; text-shadow: 2px 2px 5px #222;text-align: center;} .container .sub-top .sub-visual .sub-visual-text h4 { font-size: 20px; line-height: 140%; color: #fff; font-weight: 500; text-shadow: 2px 2px 5px #222;text-align: center; margin-top: 10px;} .container .sub-top .sub-visual .sub-visual-text p { font-size: 20px; line-height: 140%; color: #fff; font-weight: 600; text-shadow: 2px 2px 5px #222; text-align: center; margin-top: 15px;} @media screen and (max-width: 640px) { .container .sub-top .sub-visual .sub-visual-text { padding: 40px 40px 0 40px;} .container .sub-top .sub-visual .sub-visual-text br { display:none;} .container .sub-top .sub-visual .sub-visual-text h2 { font-size: 32px;} .container .sub-top .sub-visual .sub-visual-text h4 { font-size: 18px;} .container .sub-top .sub-visual .sub-visual-text p { font-size: 16px; margin-top: 8px;} } /************************* Email *************************/ .email-wrap { max-width: 1110px; padding: 180px 70px;} @media screen and (max-width: 799px) { .email-wrap { padding: 50px 30px;} } .email-wrap .text { position: relative; padding-top: 150px; font-size: 18px; line-height: 1.6; text-align: center;} .email-wrap .text::before { content: ""; display: inline-block; position: absolute; top: 0; left: 50%; width: 90px; height: 90px; transform: translateX(-50%); background: url("../../assets/images/icon-email.png") no-repeat center center; background-size: 90px 90px;} @media screen and (max-width: 799px) { .email-wrap .text { padding-top: 100px; font-size: 16px;} .email-wrap .text::before { width: 50px; height: 50px; background-size: 50px 50px;} } /************************* 개인정보처리방침 *************************/ .sub_top.policy_top h2 { color: #000;} .policy_wrap { padding-top: 30px;} .policy_wrap .top_desc p { font-size: 16px; line-height: 28px; color: #666;} .policy_wrap .top_desc ul { display: flex; flex-wrap: wrap; margin-top: 60px;} .policy_wrap .top_desc ul li { width: calc(50% - 12px); margin-right: 24px; margin-top: 6px;} .policy_wrap .top_desc ul li:nth-child(2n) { margin-right: 0;} .policy_wrap .top_desc ul li:nth-child(-n+2) { margin-top: 0;} .policy_wrap .top_desc ul li a { font-size: 16px; font-weight: 500; display: block; background: #f7f7f7; padding: 12px 12px 12px 37px; line-height: 26px; word-break: keep-all;} .policy_wrap .policy_cont { margin-top: 62px;} .policy_wrap .policy_cont .policybox { padding-top: 62px;} .policy_wrap .policy_cont .policybox:first-child { padding-top: 0;} .policy_wrap .policy_cont .policybox h3 { font-size: 20px; font-weight: bold; color: #004ac4;} .policy_wrap .policy_cont .policybox .descbox { background: #f7f7f7; padding: 24px 25px 26px 29px; margin-top: 16px; font-size: 16px; color: #666; line-height: 28px; word-break: keep-all;} .policy_wrap .policy_cont .policybox .descbox .triangle { color: #000;} .policy_wrap .policy_cont .policybox .descbox .margin-p { margin-bottom: 13px;} .policy_wrap .policy_cont .policybox .descbox .margin-t { margin-top: 13px;} .policy_wrap .policy_cont .policybox .descbox .b { color: #004ac4;} .policy_wrap .policy_cont .policybox .descbox .ulstyle1 > li { margin-bottom: 12px;} .policy_wrap .policy_cont .policybox .descbox .ulstyle1 > li:last-child { margin-bottom: 0;} .policy_wrap .policy_cont .policybox .descbox table { width: 100%; margin: 16px 0;} .policy_wrap .policy_cont .policybox .descbox table th { border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; border-top: 1px solid #000; background: #fff; text-align: center; padding: 10px 8px 12px; vertical-align: middle;} .policy_wrap .policy_cont .policybox .descbox table th:last-child { border-right: 0;} .policy_wrap .policy_cont .policybox .descbox table td { border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; text-align: center; padding: 10px 8px 12px; vertical-align: middle;} .policy_wrap .policy_cont .policybox .descbox table td:last-child { border-right: 0;} .policy_wrap .policy_cont .policybox .descbox table .col1 { width: 20%;} .policy_wrap .policy_cont .policybox .descbox table .col2 { width: 80%;} .col_bd_top { border-top: 1px solid #000;} .policy_version { margin-top: 62px;} .policy_version p { color: #777;} @media screen and (max-width: 1280px) { .policy_wrap .top_desc ul{margin-top:26px;} } @media screen and (max-width: 800px) { .policy_wrap .top_desc ul li{width:100%; margin-right:0;} .policy_wrap .top_desc ul li:nth-child(-n+2){margin-top:6px;} .policy_wrap .top_desc ul li:nth-child(-n+1){margin-top:0;} } @media screen and (max-width: 640px) { .policy_wrap .policy_cont{margin-top:30px;} .policy_wrap .policy_cont .policybox{padding-top:30px;} .policy_wrap .policy_cont .policybox .descbox{margin-top:12px; padding:24px 28px 26px 30px;} .policy_wrap .policy_cont .policybox .descbox .margin-p{margin-bottom:0;} .policy_wrap .policy_cont .policybox .descbox .margin-t{margin-top:17px;} .policy_wrap .policy_cont .policybox .descbox table{margin:17px 0;} .policy_wrap .policy_cont .policybox .descbox table th { padding:11px 8px 8px; line-height:120% ;} .policy_wrap .policy_cont .policybox .descbox table td { padding:11px 8px 8px;} .policy_wrap .policy_cont .policybox .descbox table .col1{width:30%;} .policy_wrap .policy_cont .policybox .descbox table .col2{width:70%;} } /************************* About us *************************/ .aboutus-wrap.aboutus-bg01 { width: 100%; position: relative;} .aboutus-wrap.aboutus-bg01::after { content: ""; width: 100%; height:100%; background: url(../../assets/images/sub/about_bg01.png) no-repeat bottom right; background-size: contain;opacity: 0.3;position: absolute; bottom: 0; right: 0; background-color: #eee; z-index: -1;} .aboutus-wrap .title-wrap .title-msg { padding-top: 30px;text-align: left; line-height: 160%; font-size: 38px; font-weight: 700;} .aboutus-wrap .title-wrap p { text-align: left; line-height: 160%; padding-top: 20px; font-size: 18px;} .aboutus-wrap .title-wrap h3 br { display:none;} .aboutus-wrap .image-list-wrap { text-align: center; line-height: 160%; padding-top: 20px; padding-bottom: 40px;} .aboutus-wrap .image-list .image { overflow: hidden; display: flex; align-items: center; border-radius: 10px; justify-content: center;} .aboutus-wrap .image-list .image img { border-radius: 15px; transform: scale(1); transition: all 0.3s ease-out;} .aboutus-wrap .image-list .image:hover img { transform: scale(1.1); transition: all 0.3s ease-out;} .aboutus-wrap .about_base { padding-top:30px; display: flex; flex-wrap: wrap; gap:30px;} .aboutus-wrap .about_base .base { width:30%; } .aboutus-wrap .about_base .company_title { font-size: 24px; font-weight: 600; padding-top:40px; padding-bottom:20px; border-bottom: 1px solid #dadada;} .aboutus-wrap .about_base .company_desc { font-size: 18px; padding-top:20px; } .aboutus-wrap .about_base .company_desc p { padding-bottom:10px; } .aboutus-wrap .about_base .company_desc span { font-size: 16px; color:#666; } .aboutus-wrap .about_img .logo img { padding-top:50px; width:250px;} .aboutus-wrap .image-list { display: flex; flex-wrap: wrap; margin: 0 -15px;} .aboutus-wrap .image-list li { width: 50%; padding: 0 15px; position: relative;} @media screen and (max-width: 1024px) { .aboutus-wrap .title-wrap .title-msg { font-size: 32px; } } @media screen and (max-width: 800px) { .aboutus-wrap .image-list { display: flex; flex-wrap: wrap; margin: 0 -15px;} .aboutus-wrap .image-list li { width: 50%; padding: 0 15px; position: relative;} .aboutus-wrap .image-list .image { width: 100%;padding-bottom: 0;} .aboutus-wrap .image-list .image img { position:unset; transform:unset;} .aboutus-wrap .title-wrap .title-msg { font-size: 28px; } } @media screen and (max-width: 640px) { .aboutus-wrap .title-wrap h3 { font-size: 24px; line-height: 140%;} .aboutus-wrap .title-wrap h3 br { display:block;} .aboutus-wrap .image-list li:not(:last-child) { padding-bottom: 0;} .aboutus-wrap .title-wrap .title-msg { font-size: 24px; } } .aboutus-wrap .list-wrap .about .thumbnail { border-radius: 10px; max-width: 550px; min-height: 350px; width: 100%;} .aboutus-wrap .list-wrap .about .thumbnail_mo { display:none;} .aboutus-wrap .list-wrap .about .title { font-size: 28px; margin-bottom: 20px; font-weight: 700; color: #222; line-height: 140%; display: unset; text-align: left; overflow: visible;} .aboutus-wrap .list-wrap .about .contents { margin-left: 20px; display: flex; flex-direction: column;} .aboutus-wrap .list-wrap .about .text { font-size: 18px; color: #222; line-height:160%; text-align: left; } .aboutus-wrap .list-wrap .lists .item .box {display: flex; } .aboutus-wrap .list-wrap .lists .item .box .thumbnail {width:50%;} .aboutus-wrap .list-wrap .lists .item .box .contents {width:50%;} .aboutus-wrap .list-wrap-n .about .content { text-align: left; font-size: 18px;} @media screen and (max-width: 1280px) { .aboutus-wrap .list-wrap .about .box { justify-content: space-between; align-items: unset !important; box-shadow: unset} .aboutus-wrap .list-wrap .about .thumbnail img { border-radius: 15px;} .aboutus-wrap .list-wrap .about .title { font-size: 28px;} .aboutus-wrap .list-wrap-n { padding-top:20px;} } @media screen and (max-width: 1024px) { .aboutus-wrap .list-wrap .about .title { font-size: 24px;} .aboutus-wrap .list-wrap .about .thumbnail { border-radius: 15px; max-width: unset !important; min-height: unset !important; width: 100%; height: 300px;} .aboutus-wrap .list-wrap-n { padding-top:0;} .aboutus-wrap .list-wrap .about .contents { padding-top:0;} } @media screen and (max-width: 800px) { .aboutus-wrap .list-wrap .about .thumbnail_mo { display:block;} .aboutus-wrap .list-wrap .about .thumbnail_pc { display:none;} .aboutus-wrap .list-wrap .lists.about { padding-top: 80px;} .aboutus-wrap .list-wrap .about .contents { padding: 15px 15px 15px 0; width: 100%;margin-left:0; margin-top: 0;display: flex; flex-direction: column;} .aboutus-wrap .list-wrap .about .title { text-align: left;} .aboutus-wrap .list-wrap .about .content { text-align: left;} .aboutus-wrap .list-wrap-n .lists.about { padding-top:10px;} .aboutus-wrap .list-wrap .about .title { max-height: 38px;} .aboutus-wrap .list-wrap .lists .item .box {flex-wrap: wrap;} .aboutus-wrap .list-wrap .lists .item .box .thumbnail {width:100%; height: unset;} .aboutus-wrap .list-wrap .lists .item .box .contents {width:100%; padding: 30px 0 0 0; } .aboutus-wrap .about_base .base { width: 47%;} } @media screen and (max-width: 640px) { .aboutus-wrap .list-wrap .about .contents { width: 100%;} .aboutus-wrap .about_img .logo img { width:200px;} .aboutus-wrap .about_base .base { width: 100%;} .aboutus-wrap .about_base .company_title { padding-top: 20px; padding-bottom: 10px;} .aboutus-wrap .about_base .company_desc {padding-top: 10px; } } /************************* Team ISTN *************************/ .team-wrap .about_cont { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 60px 0 0 0;} .team-wrap .about_cont .left { width: 25%; padding-right: 20px;} .team-wrap .about_cont .right { width: 75%;} .team-wrap .about_cont .title-h2 img { height: 60px; vertical-align: middle;} .team-wrap .about_cont .title-h2 + .goBtn { margin-top: 30px;} .team-wrap .about_cont .title-h3 img { height: 60px; vertical-align: middle; } .team-wrap .about_cont p { margin: 20px 0; font-size: 18px; line-height:160%;} .team-wrap .about_cont .title-h3 span.istn_t { color:#d70c19; } .team-wrap .title-wrap .h3-dec { font-size: 20px; color:#ff6410; font-weight: 600; line-height:160%;} .team-wrap .istn-img img { width:100%;} .team-wrap.team-bg01 { width: 100%; position: relative;} .team-wrap.team-bg01::after { content: ""; width: 100%; height:100%; background: url(../../assets/images/sub/about_bg01.png) no-repeat bottom right; background-size: contain;opacity: 0.3;position: absolute; bottom: 0; right: 0; background-color: #eee; z-index: -1;} .team-wrap .about_base { padding-top:30px; display: flex; flex-wrap: wrap; gap:30px;} .team-wrap .about_base .base { width:48%; background:#fff; padding: 30px;} .team-wrap .about_base .base img { width: 150px; } .team-wrap .about_base .company_img { height:40px;} .team-wrap .about_base .company_title { font-size: 24px; font-weight: 600; padding-top:30px; padding-bottom:20px; border-bottom: 1px solid #dadada;} .team-wrap .about_base .company_title span { font-size: 20px; color:#666; margin-left:10px; font-weight: 400;} .team-wrap .about_base .company_desc { font-size: 18px; padding-top:20px; } .team-wrap .about_base .company_desc p { padding-bottom:10px; } .team-wrap .about_base .company_desc span { font-size: 16px; color:#666; } @media screen and (max-width: 1024px) { .team-wrap .about_cont .left { width: 35%; } .team-wrap .about_cont .right { width: 65%;} .team-wrap .about_base { justify-content: space-between;} .team-wrap .about_base .base { width: 46%;} } @media screen and (max-width: 800px) { .team-wrap .about_cont .left { width: 100%; display: flex;} .team-wrap .about_cont .right { width: 100%;} .team-wrap .about_cont .title-h2 + .goBtn { margin-top: 30px; margin-left: 30px; margin-bottom: 60px;} .team-wrap .about_cont p img {margin-top: 30px; } .team-wrap .about_base .base { width: 47%;} } @media screen and (max-width: 640px) { .team-wrap .about_base .base { width: 100%;} } @media screen and (max-width: 520px) { .team-wrap .about_cont .left { flex-wrap: wrap;} .team-wrap .about_cont .title-h2 + .goBtn { margin-left: 0;} .team-wrap .about_cont .title-h2 + .goBtn span { margin-left: 10px;} } /************************* Location *************************/ .location-wrap .network_contWrap { padding-top: 60px;} .location-wrap .co_support { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 30px 24px;} .location-wrap .co_support > li { width: calc(50% - 12px);border: 1px solid #dadada; border-radius: 15px;} .location-wrap .co_support li h5 { font-size: 22px; line-height: 140%; font-weight: 700; margin-bottom: 24px; margin-top: unset;} .location-wrap .co_support li .support_txtbox { display: flex; align-items: center; padding: 41px 47px;} .location-wrap .co_support li .icobox { width: 116px; min-width: 116px; height: 116px; background: #f4f5f7; border-radius: 50%; display: flex; align-items: center; justify-content: center;} .location-wrap .co_support li .icobox img { ;} .location-wrap .co_support .txtbox { font-size: 16px; line-height: 26px; color: #555; letter-spacing: -0.1px; word-break: keep-all;width: 100%;} .location-wrap .co_support .txtbox ul.dot li { padding-left: 18px;position: relative;font-size: 16px;line-height: 140%;padding-bottom: 5px;} .location-wrap .co_support .txtbox ul.dot li:before { content: "��"; position: absolute; left: 0; top: 0;} .location-wrap .co_support .txtbox .desc_box > li { display: flex; padding-top: 10px;} .location-wrap .co_support .txtbox .desc_box > li p { font-size: 18px; font-weight: 500; width: 120px; box-sizing: border-box; padding-left: 5px; color: #222;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox { width: calc(100% - 120px); box-sizing: border-box;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox p { font-size: 18px; color: #666; line-height:140%;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox ul.bus_list li { padding-left: 26px; display: flex; font-size: 16px; line-height: 28px; margin-bottom: 20px;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox ul.bus_list li:last-child { margin-bottom: 0;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox ul.bus_list li.subway { background: url(../../web/images/sub/subway_ico.png) no-repeat left top 5px; background-size: 19px;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox ul.bus_list li.bus { background: url(../../web/images/sub/bus_ico.png) no-repeat left top 5px; background-size: 19px;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox ul.bus_list li b { display: block; width: 59px;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox ul.bus_list li span { display: block; width: calc(100% - 59px); color: #666;} .location-wrap .network_box { margin-bottom: 55px;} .location-wrap .network_box:last-child { margin-bottom: 0;} .location-wrap .network_box h4 { font-size: 30px; font-weight: bold; padding-bottom: 22px;} .location-wrap .network_box .inner_cont { display: flex; border-top: 1px solid #000; padding: 29px 0; border-bottom: 1px solid #dadada;} .location-wrap .network_box .imgbox { width: 448px;} .location-wrap .network_box .imgbox img { max-width: 100%;} .location-wrap .network_box .txtbox { width: calc(100% - 448px); box-sizing: border-box; padding-left: 59px; word-break: keep-all;} .location-wrap .network_box .txtbox .txtbox_top { padding-bottom: 20px; border-bottom: 1px solid #dadada;} .location-wrap .network_box .txtbox .txtbox_top p { font-size: 24px; font-weight: bold;} .location-wrap .network_box .txtbox .txtbox_top p em { font-weight: normal;} .location-wrap .network_contWrap .btn_box { padding-top: 20px; display: flex; justify-content: flex-end;} .location-wrap .network_contWrap .btn_box .goBtn { height: 35px; font-weight: 400; justify-content: center; border: 1px solid #dadada; color: #666; width: 150px;} .location-wrap .network_contWrap .btn_box .goBtn:hover { color: #fff;} .location-wrap .network_contWrap .btn_box .goBtn img { width: 13px; height: 13px;} .location-wrap .network_contWrap .btn_box .goBtn span { margin-left: 10px;} .location-wrap .network_map { background: #edeff2; text-align: center; margin-top: 60px; border-radius: 15px;} .location-wrap .map_top { padding: 60px 0 33px; } .location-wrap .map_box { position: relative;} .location-wrap .map_box ul { position: absolute; top:160px; left: 73%;} .location-wrap .map_box ul li { position: relative; height: 40px; display: flex; align-items: center;} .location-wrap .map_box ul li a { position: relative; } .location-wrap .map_box ul li a:after { content: ""; width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 50%; left: -20px; transform: translateY(-50%);} .location-wrap .map_box li.map01 a:after { background: #ee1500; } .location-wrap .map_box li.map02 a:after { background: #ee8b00; } .location-wrap .map_box li.map03 a:after { background: #ee8b00; } .location-wrap .map_box li.map04 a:after { background: #ee0071; } @media screen and (max-width: 1024px) { .location-wrap .map_box img { width: 100%; } .location-wrap .co_support li .support_txtbox { padding: 40px 25px;} } @media screen and (max-width: 800px) { .location-wrap .co_support > li {width: 100%;} .location-wrap .co_support .txtbox .desc_box > li { flex-wrap: wrap;} .location-wrap .co_support .txtbox .desc_box > li p { width: 100%; padding-left: 0; padding-top: 10px;} .location-wrap .co_support .txtbox .desc_box > li .desc_txtbox { width: 100%;} .location-wrap .map_box ul {position:unset; padding-top: 30px;} .location-wrap .map_box ul li {justify-content: center;} } @media screen and (max-width: 640px) { } @media screen and (max-width: 520px) { } /************************* 문의하기 *************************/ .inquiry_wrap .inquiry_annon { padding-top: 30px; } .inquiry_wrap h4 { padding-bottom: 40px; position: relative; } .inquiry_wrap .inquiry_annon h3 { font-size: 26px; line-height: 38px; font-weight: 500; word-break: keep-all; text-align: center;} .inquiry_wrap .inquiry_annon .inquiry_agreebox { background: #f6f6f6; padding: 20px 36px; height: 182px; box-sizing: border-box; overflow-y: auto; } .inquiry_wrap .inquiry_annon .inquiry_agreebox p { font-size: 16px; line-height: 28px; color: #555; letter-spacing: -1px; word-break: keep-all; margin-right: 50px; } .inquiry_wrap .inquiry_annon .inquiry_agreebox ul { } .inquiry_wrap .inquiry_annon .inquiry_agreebox ul li { font-size: 16px; line-height: 28px; color: #555; letter-spacing: -1px; word-break: keep-all; } .inquiry_wrap .inquiry_annon .noti { display: flex; align-items: center; margin-top: 13px; justify-content: center;} .inquiry_wrap .inquiry_annon input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; display: inline-block; padding-left: 29px; background: url(../../assets/images/sub/check_off.png) no-repeat left center; cursor: pointer; letter-spacing: -1px; width: 20px; height: 20px; border: none; } .inquiry_wrap .inquiry_annon input[type="checkbox"] + label { font-size: 18px; line-height: 28px; color: #555; cursor: pointer; } .inquiry_wrap .inquiry_annon input[type="checkbox"]:checked { background: url(../../assets/images/sub/check_on.png) no-repeat left center; } .inquiry_wrap .inquiry_box { background: #fff;margin-bottom: 50px; } .inquiry_wrap .inquiry_box.b_box { background: #f4f7fc;} .inquiry_wrap .inquiry_box p { font-size: 16rem; line-height: 26rem;} .inquiry_wrap .inquiry_box p b { font-weight: 500; padding-right: 22rem;} .inquiry_wrap .inquiry_box p span { color: #666;} .inquiry_wrap .inquiry_box p span img { padding-right: 10rem; vertical-align: -3rem; width: 21rem;} .inquiry_wrap .inquiry_box h4 a { display: block; width: 155px; height: 45px; text-align: center; border: 1px solid #dadada; line-height: 43px; font-size: 14px; color: #444; position: absolute; right: 0; top: 0; } .inquiry_wrap .inquiry_box:last-child { margin-bottom: 0; } .inquiry_wrap .inquiry_box .formWrap { border-top: 1px solid #000; } .inquiry_wrap .inquiry_box .formWrap .formLine { display: flex; align-items: center; border-bottom: 1px solid #dadada; padding: 11px 0 10px; } .inquiry_wrap .inquiry_box .formWrap h5 { width: 102px; text-align: center; font-size: 18px; color: #555; } .inquiry_wrap .inquiry_box .formWrap .formCont { width: calc(100% - 102px); box-sizing: border-box; padding-left: 20px; } .inquiry_wrap .inquiry_box .formWrap .formCont .inputWrap { display: flex; align-items: center; } .inquiry_wrap .inquiry_box .formWrap .formCont input[type="text"] { border: 1px solid #dadada; height: 36px; width: 780px; box-sizing: border-box; font-size: 16px; padding-left: 12px; font-family: "NotoSansCJKkr"; border-radius: 0; } .inquiry_wrap .inquiry_box .formWrap .formCont input[type="text"] + label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); } .inquiry_wrap .inquiry_box .formWrap .formCont input.w30 { width: 300px; } .inquiry_wrap .inquiry_box .formWrap .formCont input.w15 { width: 157px; } .inquiry_wrap .inquiry_box .formWrap .formCont select { border: 1px solid #dadada; height: 36px; width: 212px; box-sizing: border-box; font-size: 16px; padding-left: 12px; font-family: "NotoSansCJKkr"; color: #999; margin-left: 10px; background: url(../../assets/images/sub/select_arrow.png) no-repeat right 14px center; background-size: 12px; -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; } .inquiry_wrap .inquiry_box .formWrap .formCont select.first { margin-left: 0px; } .inquiry_wrap .inquiry_box .formWrap .formCont select::-ms-expand { display: none } .inquiry_wrap .inquiry_box .formWrap .formCont select + label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); } .inquiry_wrap .inquiry_box .formWrap .formCont span { font-size: 16px; color: #666; } .inquiry_wrap .inquiry_box .formWrap .formCont .noti { font-size: 15px; line-height: 28px; color: #555; margin-top: 10px; display: flex; justify-content: flex-start;color: rgb(249, 133, 133); } .inquiry_wrap .inquiry_box .formWrap .formCont .noti img { padding-right: 6px; vertical-align: -3px; } .inquiry_wrap .inquiry_box .formWrap .mail .formCont span { margin: 0 6px; } .inquiry_wrap .inquiry_box .formWrap .number .formCont span { margin: 0 9px; } .inquiry_wrap .inquiry_box .formWrap .formCont input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; display: inline-block; font-size: 16px; line-height: 20px; color: #555; background: url(../../assets/images/sub/radio_off.png) no-repeat left center; width: 20px; height: 20px; margin-right: 7px; cursor: pointer; border: none; } .inquiry_wrap .inquiry_box .formWrap .formCont input[type="radio"] + label { } .inquiry_wrap .inquiry_box .formWrap .formCont input[type="radio"]:checked { background: url(../../assets/images/sub/radio_on.png) no-repeat left center; } .inquiry_wrap .inquiry_box .formWrap .formCont textarea { width: 100%; max-width: 925px; height: 245px; box-sizing: border-box; border: 1px solid #dadada; padding: 12px; font-family: "NotoSansCJKkr"; font-size: 16px; line-height: 28px; color: #555; resize: none; border-radius: 0; } .inquiry_wrap .inquiry_box .formWrap .formCont textarea + label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); } .inquiry_wrap .inquiry_box .formWrap .cate { padding: 23px 0 25px; } .inquiry_wrap .inquiry_box .formWrap .cate .formCont ul { display: flex; } .inquiry_wrap .inquiry_box .formWrap .cate .formCont ul li { margin-right: 35px; display: flex; align-items: center; font-size: 16px; line-height: 20px; color: #555; } .inquiry_wrap .inquiry_box .formWrap .cate .formCont ul li:last-child { margin-right: 0; } .inquiry_wrap .btn-area { margin-top: 60px;} .inquiry_wrap .btnWrap { display: flex; align-items: center; justify-content: center; margin-top: 32px; } .inquiry_wrap .btnWrap a { display: block; width: 152px; height: 50px; border: 1px solid #dadada; line-height: 48px; text-align: center; font-size: 16px; margin-right: 10px; box-sizing: border-box; } .inquiry_wrap .btnWrap a:last-child { margin-right: 0; } .inquiry_wrap .btnWrap a.submitBtn { border-color: #0147a2; color: #fff; } .inquiry_wrap .btnWrap a.submitBtn:hover, .inquiry_wrap .btnWrap a.submitBtn:focus { color: #000; } .inquiry_wrap .btnWrap a.submitBtn { border-color: #01b6ef; background: #01b6ef;} .inquiry_wrap .title-h4-ag { font-size: 20px; font-weight:600; padding-bottom: 10px; text-align:left;} @media screen and (max-width: 1024px) { } @media screen and (max-width: 800px) { .inquiry_wrap .inquiry_annon h3 { font-size: 18px; line-height: 160%; padding: 0 20px;} .inquiry_wrap .inquiry_annon h3 br { display:none;} .inquiry_wrap .inquiry_box .formWrap .formCont input.w30 {width: 100%;} .inquiry_wrap .inquiry_box .formWrap .formCont input[type="text"] {width: 100%;} } @media screen and (max-width: 640px) { } @media screen and (max-width: 520px) { .inquiry_wrap .inquiry_box .formWrap .formLine { flex-wrap: wrap;} .inquiry_wrap .inquiry_box .formWrap h5 {width: 100%; text-align: left;} .inquiry_wrap .inquiry_box .formWrap .formCont {width: 100%; padding-left: 0; padding-top: 5px;} } /************************* Online Business *************************/ .onbiz-wrap.onbiz-bg01 { background-color: #eee;} .onbiz-wrap .onbiz-top { padding-top: 30px; } .onbiz-wrap .onbiz-top .img_box { position: relative; padding-top: 40%;} .onbiz-wrap .onbiz-top .img_box .img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%;} .onbiz-wrap .onbiz-top .img_box img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px;} .onbiz-wrap .onbiz-top .img_box .left { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #fff;} .onbiz-wrap .onbiz-top .img_box .right { position: absolute; right: 0; top: 0; width: 0; height: 100%; background-color: #fff;} .onbiz-wrap .onbiz-top .top_text { padding-top:60px; display: flex; flex-direction: column; align-items: center; font-weight: 600;} .onbiz-wrap .onbiz-top .top_text .text { font-size: 24px; text-align: center;} .onbiz-wrap .onbiz-top .top_text span { font-size: 22px; text-align: center; color: #666; padding-top: 10px; font-weight: 400;} .onbiz-wrap .onbiz-cont ul { margin-top: 120px; display: flex; flex-wrap: wrap; gap: 26px 24px;} .onbiz-wrap .onbiz-cont ul li { position: relative; width: calc(33% - 18px); box-sizing: border-box; border: 1px solid #dadada;text-align: center; padding: 80px 15px 40px 15px; display: flex; flex-direction: column; align-items: center; border-radius: 15px;} .onbiz-wrap .onbiz-cont ul li p { color:#666;} .onbiz-wrap .onbiz-cont ul li span { font-size: 18px; font-weight: 400;padding-top: 30px;} .onbiz-wrap .onbiz-cont .imgbox { position: absolute; top: -50px; width: 110px; height: 110px; background: #f6f6f6; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;} .onbiz-wrap .onbiz-cont .imgbox p { padding-top: 15px; font-size: 16px; color: #666; } .onbiz-wrap .onbiz-cont .txtbox { font-size: 20px; font-weight: 600;} .onbiz-wrap .bt-wrap { display: flex; flex-wrap: wrap;} .onbiz-wrap .bt-wrap .onbiz-img { width:50%; padding-right: 50px; padding-bottom: 20px;} .onbiz-wrap .bt-wrap .onbiz-text { width:50%; display: flex; align-items: center;} .onbiz-wrap .onbiz-img .image-area { width:100%; border-radius: 15px; position: relative; overflow: hidden; display: flex; align-items: center; } .onbiz-wrap .onbiz-img .image-area img { max-height: 300px; border-radius: 15px; transform: translateX(0) scale(1); transition: all 0.3s ease-out;} .onbiz-wrap .onbiz-img .image-area img:hover { transform: translateX(0) scale(1.1); transition: all 0.3s ease-out;} @media screen and (max-width: 799px) { .onbiz-wrap .image-area.onbiz-img img { max-height: 500px;} } @media screen and (max-width: 640px) { .onbiz-wrap .onbiz-top .img_box { padding-top: 50%;} .onbiz-wrap .onbiz-top .top_text {padding-top: 40px;} .onbiz-wrap .onbiz-cont ul li { width: 100%;} .onbiz-wrap .onbiz-cont ul li:not(:first-child) { margin-top:50px; } .onbiz-wrap .onbiz-cont ul li span br {display:none;} .onbiz-wrap .onbiz-top .top_text .text { font-size: 22px;} .onbiz-wrap .onbiz-top .top_text span {font-size: 18px; padding-top: 20px;} .onbiz-wrap .bt-wrap .onbiz-img { width: 100%; padding-right: 0;} .onbiz-wrap .bt-wrap .onbiz-text { width: 100%;} .onbiz-wrap .bt-wrap .onbiz-text .title-h4-t{ font-size: 22px;} .onbiz-wrap .bt-wrap .onbiz-text p.text-info { font-size: 18px;} .onbiz-wrap .onbiz-img .image-area img {height: unset;} } /************************* Solution Business *************************/ .solbiz-wrap.solbiz-bg01 { background-color: #eee;} .solbiz-wrap .solbiz-top { padding-top: 30px;} .solbiz-wrap .solbiz-top .img_box { position: relative; padding-top: 40%;} .solbiz-wrap .solbiz-top .img_box .img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%;} .solbiz-wrap .solbiz-top .img_box img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px;} .solbiz-wrap .solbiz-top .img_box .left { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #fff;} .solbiz-wrap .solbiz-top .img_box .right { position: absolute; right: 0; top: 0; width: 0; height: 100%; background-color: #fff;} .solbiz-wrap .solbiz-top .top_text { padding-top:60px; display: flex; flex-direction: column; align-items: center; font-weight: 600;} .solbiz-wrap .solbiz-top .top_text .text { font-size: 24px; text-align: center;} .solbiz-wrap .solbiz-top .top_text span { font-size: 22px; text-align: center; color: #666; padding-top: 10px; font-weight: 400;} .solbiz-wrap .solbiz-cont ul { margin-top: 120px; display: flex; flex-wrap: wrap; gap: 26px 24px;} .solbiz-wrap .solbiz-cont ul li { position: relative; width: calc(33% - 18px); box-sizing: border-box; border: 1px solid #dadada;text-align: center; padding: 80px 15px 40px 15px; display: flex; flex-direction: column; align-items: center; border-radius: 15px;} .solbiz-wrap .solbiz-cont ul li p { color:#666;} .solbiz-wrap .solbiz-cont ul li span { font-size: 18px; font-weight: 400;padding-top: 30px;} .solbiz-wrap .solbiz-cont .imgbox { position: absolute; top: -50px; width: 110px; height: 110px; background: #f6f6f6; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;} .solbiz-wrap .solbiz-cont .imgbox p { padding-top: 15px; font-size: 16px; color: #666; } .solbiz-wrap .solbiz-cont .txtbox { font-size: 20px; font-weight: 600;} .solbiz-wrap .bt-wrap { display: flex; flex-wrap: wrap;} .solbiz-wrap .bt-wrap .solbiz-img { width:50%; padding-right: 50px; padding-bottom: 20px;} .solbiz-wrap .bt-wrap .solbiz-text { width:50%; display: flex; align-items: center;} .solbiz-wrap .solbiz-img .image-area { width:100%; border-radius: 15px; position: relative; overflow: hidden; display: flex; align-items: center; } .solbiz-wrap .solbiz-img .image-area img { max-height: 300px; border-radius: 15px; transform: translateX(0) scale(1); transition: all 0.3s ease-out;} .solbiz-wrap .solbiz-img .image-area img:hover { transform: translateX(0) scale(1.1); transition: all 0.3s ease-out;} @media screen and (max-width: 799px) { .solbiz-wrap .image-area.solbiz-img img { max-height: 500px;} } @media screen and (max-width: 640px) { .solbiz-wrap .solbiz-top .img_box { padding-top: 50%;} .solbiz-wrap .solbiz-top .top_text {padding-top: 40px;} .solbiz-wrap .solbiz-cont ul li { width: 100%;} .solbiz-wrap .solbiz-cont ul li:not(:first-child) { margin-top:50px; } .solbiz-wrap .solbiz-cont ul li span br {display:none;} .solbiz-wrap .solbiz-top .top_text .text { font-size: 22px;} .solbiz-wrap .solbiz-top .top_text span {font-size: 18px; padding-top: 20px;} .solbiz-wrap .bt-wrap .solbiz-img { width: 100%; padding-right: 0;} .solbiz-wrap .bt-wrap .solbiz-text { width: 100%;} .solbiz-wrap .bt-wrap .solbiz-text .title-h4-t{ font-size: 22px;} .solbiz-wrap .bt-wrap .solbiz-text p.text-info { font-size: 18px;} .solbiz-wrap .solbiz-img .image-area img {height: unset;} } /************************* AI Business *************************/ .aibiz-wrap.aibiz-bg01 { background-color: #eee;} .aibiz-wrap .aibiz-top { padding-top: 30px;} .aibiz-wrap .aibiz-top .img_box { position: relative; padding-top: 40%;} .aibiz-wrap .aibiz-top .img_box .img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%;} .aibiz-wrap .aibiz-top .img_box img { position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px;} .aibiz-wrap .aibiz-top .img_box .left { position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: #fff;} .aibiz-wrap .aibiz-top .img_box .right { position: absolute; right: 0; top: 0; width: 0; height: 100%; background-color: #fff;} .aibiz-wrap .aibiz-top .top_text { padding-top:60px; display: flex; flex-direction: column; align-items: center; font-weight: 600;} .aibiz-wrap .aibiz-top .top_text .text { font-size: 24px; text-align: center;} .aibiz-wrap .aibiz-top .top_text span { font-size: 22px; text-align: center; color: #666; padding-top: 10px; font-weight: 400;} .aibiz-wrap .aibiz-cont ul { margin-top: 120px; display: flex; flex-wrap: wrap; gap: 26px 24px;} .aibiz-wrap .aibiz-cont ul li { position: relative; width: calc(33% - 18px); box-sizing: border-box; border: 1px solid #dadada;text-align: center; padding: 80px 15px 40px 15px; display: flex; flex-direction: column; align-items: center; border-radius: 15px;} .aibiz-wrap .aibiz-cont ul li p { color:#666;} .aibiz-wrap .aibiz-cont ul li span { font-size: 18px; font-weight: 400;padding-top: 30px;} .aibiz-wrap .aibiz-cont .imgbox { position: absolute; top: -50px; width: 110px; height: 110px; background: #f6f6f6; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center;} .aibiz-wrap .aibiz-cont .imgbox p { padding-top: 15px; font-size: 16px; color: #666; } .aibiz-wrap .aibiz-cont .txtbox { font-size: 20px; font-weight: 600;} .aibiz-wrap .bt-wrap { display: flex; flex-wrap: wrap;} .aibiz-wrap .bt-wrap .aibiz-img { width:50%; padding-right: 50px; padding-bottom: 20px;} .aibiz-wrap .bt-wrap .aibiz-text { width:50%; display: flex; align-items: center;} .aibiz-wrap .aibiz-img .image-area { width:100%; border-radius: 15px; position: relative; overflow: hidden; display: flex; align-items: center; } .aibiz-wrap .aibiz-img .image-area img { max-height: 300px; border-radius: 15px; transform: translateX(0) scale(1); transition: all 0.3s ease-out;} .aibiz-wrap .aibiz-img .image-area img:hover { transform: translateX(0) scale(1.1); transition: all 0.3s ease-out;} @media screen and (max-width: 800px) { .aibiz-wrap .image-area.aibiz-img img { max-height: 500px;} } @media screen and (max-width: 640px) { .aibiz-wrap .aibiz-top .img_box { padding-top: 50%;} .aibiz-wrap .aibiz-top .top_text {padding-top: 40px;} .aibiz-wrap .aibiz-cont ul li { width: 100%;} .aibiz-wrap .aibiz-cont ul li:not(:first-child) { margin-top:50px; } .aibiz-wrap .aibiz-cont ul li span br {display:none;} .aibiz-wrap .aibiz-top .top_text .text { font-size: 22px;} .aibiz-wrap .aibiz-top .top_text span {font-size: 18px; padding-top: 20px;} .aibiz-wrap .bt-wrap .aibiz-img { width: 100%; padding-right: 0;} .aibiz-wrap .bt-wrap .aibiz-text { width: 100%;} .aibiz-wrap .bt-wrap .aibiz-text .title-h4-t{ font-size: 22px;} .aibiz-wrap .bt-wrap .aibiz-text p.text-info { font-size: 18px;} .aibiz-wrap .aibiz-img .image-area img {height: unset;} } /************************* 주요고객사 *************************/ .cus_wrap h4.title-h4-t { padding-top: 30px;padding-bottom: 0; } .cus_wrap .cons_box { padding-top: 30px; padding-bottom: 60px;} .cus_wrap .cons_box ul { display: flex; flex-wrap: wrap; gap: 50px 24px;} .cus_wrap .cons_box ul li { width: calc(25% - 18px); box-sizing: border-box; border: 1px solid #dadada; border-top-left-radius: 10px; border-top-right-radius: 10px;border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} .cus_wrap .cons_box ul li a { height: 100%; display: block; position: relative; overflow: hidden;border-radius: 10px; } .cus_wrap .cons_box ul li a:before { content: ""; width: 100%; height: 0; background: #d70c18; position: absolute; left: 0; top: 0; margin-top: 30px;z-index: -1; transition: height 0.2s; border-radius: 10px; } .cus_wrap .cons_box ul li .imgbox { width: 100%; height: 150px; background: #f6f6f6; display: flex; align-items: center; justify-content: center; box-sizing: border-box;border-top-left-radius: 10px; border-top-right-radius: 10px;} .cus_wrap .cons_box ul li .imgbox img { max-width: 170px; max-height: 80px; } .cus_wrap .cons_box ul li .txtbox { padding: 26px 30px 26px 26px;border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;} .cus_wrap .cons_box ul li .txtbox p { font-size: 18px; font-weight: 500;} .cus_wrap .cons_box ul li .txtbox span { font-size: 16px; color: #666; margin-top: 10px; display: block;} .cus_wrap .cons_box ul li a:hover, .cus_wrap .cons_box ul li a:focus { } .cus_wrap .cons_box ul li a:hover:before, .cus_wrap .cons_box ul li a:focus:before { height: 100%; transition: height 0.4s;} .cus_wrap .cons_box ul li a:hover .txtbox p, .cus_wrap .cons_box ul li a:focus .txtbox p { color: #fff;} .cus_wrap .cons_box ul li a:hover .txtbox span, .cus_wrap .cons_box ul li a:focus .txtbox span { color: #fff;} @media screen and (max-width: 1024px) { .cus_wrap .cons_box ul li { width: calc(33% - 18px); } } @media screen and (max-width: 800px) { .cus_wrap .cons_box ul { gap: 40px 20px; justify-content: space-between;} .cus_wrap .cons_box ul li { width: calc(50% - 18px); } } @media screen and (max-width: 640px) { .cus_wrap .cons_box ul li { width: calc(49% - 10px); } .cus_wrap .cons_box ul li .txtbox {padding:20px;} } @media screen and (max-width: 520px) { .cus_wrap .cons_box ul li { width: 100%; } } /************************* 스마트제조지원 *************************/ .smtwork-wrap.smtwork-bg01 { background-color: #040d19; } .smtwork-wrap.smtwork-bg01 .title-h3 { color:#fff; } .smtwork-wrap .title-wrap .title-msg { padding-top: 30px;text-align: left; line-height: 160%; font-size: 36px; font-weight: 700;} .smtwork-wrap .title-wrap p { text-align: left; line-height: 160%; padding-top: 20px; font-size: 18px;} .smtwork-wrap .boxtxt-wrap { padding: 30px; border-radius: 20px; line-height: 190%; margin-top: 30px; border: 1px solid #dadada;} .smtwork-wrap .boxtxt-wrap .title-h3 { font-size: 22px; font-weight: 600; } .smtwork-wrap .boxtxt-wrap p { text-align: left; line-height: 190%; padding-top: 20px; font-size: 18px;} .smtwork-wrap .boxtxt-wrap p > span { color:#d23f32; font-size: 18px;} .smtwork-wrap .boxtxt-wrap span.tit { color:#222; font-weight: 600;} .smtwork-wrap .list-wrap .lists .title { text-align: center; font-size: 22px; line-height: 140%; color:#fff; -webkit-line-clamp:unset; max-height: unset;} .smtwork-wrap .list-wrap .lists .content { text-align: center; font-size: 18px; line-height: 140%; max-height: unset; margin-top: 15px; color:#bcbcbc; -webkit-line-clamp:unset; } .smtwork-wrap .list-wrap .lists .content span { color:#d23f32;} .smtwork-wrap .list-wrap .lists .contents { padding: 30px 20px 0px 20px;} .smtwork-wrap .smtwork-blk { padding: 20px 0 50px 0;} .smtwork-wrap .smtwork-blk.t-sld { border-top: 1px solid #ddd; padding-top:50px;} .smtwork-wrap .smtwork-blk.btm { padding-bottom: 0;} .smtwork-wrap .smtwork-cont { counter-reset: number 0;} .smtwork-wrap .boxtxt-nm { border: unset; padding: 0 0 0 50px; margin-top: 0;position: relative; } .smtwork-wrap .boxtxt-nm .title-nm { font-size: 22px; line-height: 140%; font-weight: 600; padding-top: 4px;} .smtwork-wrap .boxtxt-nm .title-nm:before { content: counter(number); background-color: #ee8b00; border-radius: 4px; color: #fff; counter-increment: number 1; height: 35px; line-height: 35px; position: absolute; text-align: center; top: 0; left: 0; vertical-align: middle; width: 35px;} .smtwork-wrap .boxtxt-nm p.text { text-align: left; line-height: 190%; padding-top: 20px; font-size: 18px;} .smtwork-wrap .img_box { position: relative; padding-top: 10px; padding-bottom: 30px;} .smtwork-wrap .img_box img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px; max-height: 350px;} .smtwork-wrap.smtwork-bg02 { background-color: #eee; } .smtwork-wrap .prd_list .tit { margin-right: 28px; font-size: 20px; line-height: 30px; font-weight: 600; } .smtwork-wrap .prd_list .tit span { color: #666;font-weight: 400; } .smtwork-wrap .prd_list ul { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 20px 20px;padding-top: 30px; justify-content: space-between;} .smtwork-wrap .prd_list ul li { width: calc(18.5% - 44px); display: flex; flex-direction: column; background: #4db6db; padding: 15px 10px; border-radius: 10px;} .smtwork-wrap .prd_list ul li:hover { background: #02a9dc; } .smtwork-wrap .prd_list.thr { padding-top: 60px;} .smtwork-wrap .prd_list.thr ul li { background: #f0a76d;} .smtwork-wrap .prd_list.thr ul li:hover { background: #ee8b00d9;} .smtwork-wrap .prd_list ul li .imgbox img { width: 25px; filter: brightness(0) invert(1);} .smtwork-wrap .prd_list ul li p { font-size: 20px; color: #fff; font-weight: 600; text-align: center; line-height: 28px; word-break: keep-all; margin-top: 12px;} .smtwork-wrap .prd_list ul li span { font-size: 16px; color: rgba(0, 0, 0, 0.6); text-align: center; margin-top: 12px;} .smtwork-wrap .list-wrap .lists {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 60px 30px;} .smtwork-wrap .list-wrap .lists .item { width:31%; } .smtwork-wrap .list-wrap .lists .item .thumbnail { height: 250px;} @media screen and (max-width: 1024px) { .smtwork-wrap .title-wrap .title-msg { font-size: 32px; } .smtwork-wrap .prd_list ul { justify-content: flex-start;} .smtwork-wrap .prd_list ul li { width: 23%;} .smtwork-wrap .list-wrap .lists .item .box .contents { padding-top: 0;} .smtwork-wrap .list-wrap .lists .item .thumbnail { height: 200px;} } @media screen and (max-width: 800px) { .smtwork-wrap .title-wrap .title-msg { font-size: 28px; } .smtwork-wrap .prd_list ul li { width: 22%;} .smtwork-wrap .list-wrap .lists .item {width:30%; } .smtwork-wrap .list-wrap .lists .item .box .thumbnail {width: 100%; height: 250px;} .smtwork-wrap .list-wrap .lists .item .box .contents {width: 100%; padding-top: 30px ; padding-left: 0;} .smtwork-wrap .list-wrap .lists .thumbnail { max-width: unset !important; min-height: unset !important; width: 100%;} .smtwork-wrap .list-wrap .lists .thumbnail img {max-height: unset; height: 100%; width: auto;} } @media screen and (max-width: 640px) { .smtwork-wrap .prd_list ul li { width: 30%;} .smtwork-wrap .list-wrap .lists .item {width: 100%;} .smtwork-wrap .list-wrap .lists { flex-wrap: wrap;} .smtwork-wrap .list-wrap .lists .item .thumbnail { height: 250px;} .smtwork-wrap .list-wrap .lists .item .thumbnail img { height: unset;; width: 100%;} .smtwork-wrap .img_box .img {height: 250px;} } @media screen and (max-width: 520px) { .smtwork-wrap .prd_list ul { justify-content: space-between;} .smtwork-wrap .prd_list ul li { width: 47%;} } /************************* Smart Factory *************************/ .smtfac-wrap.smtfac-bg01 { background-color: #040d19; } .smtfac-wrap.smtfac-bg01 .title-h3 { color:#fff; } .smtfac-wrap .img_box { position: relative; padding-top: 10px; padding-bottom: 30px;} .smtfac-wrap .img_box img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 15px; max-height: 350px;} .smtfac-wrap .boxtxt-wrap { padding: 30px; border-radius: 20px; line-height: 190%; margin-top: 30px; border: 1px solid #dadada;} .smtfac-wrap .boxtxt-wrap .title-h3 { font-size: 22px; font-weight: 600; } .smtfac-wrap .boxtxt-wrap p { text-align: left; line-height: 190%; padding-top: 20px; font-size: 18px;} .smtfac-wrap .boxtxt-wrap p > span { color:#d23f32; font-size: 18px;} .smtfac-wrap .boxtxt-wrap span.tit { color:#222; font-weight: 600;} .smtfac-wrap .list-wrap .lists { /*margin-bottom: 60px;*/ gap: 60px 30px; display: flex; justify-content: space-around;} .smtfac-wrap .list-wrap .lists .title { text-align: center; font-size: 22px; line-height: 140%; max-height: unset; color:#fff;-webkit-line-clamp: unset;} .smtfac-wrap .list-wrap .lists .content { text-align: center; font-size: 18px; line-height: 160%; max-height: unset; margin-top: 15px; color:#bcbcbc; -webkit-line-clamp: unset;} .smtfac-wrap .list-wrap .lists .content span { color:#d23f32;} .smtfac-wrap .list-wrap .lists .smtfac .contents { padding: 30px 20px 0px 20px;} .smtfac-wrap .list-wrap .lists .thumbnail img { border-radius: 10px; } .smtfac-wrap .list-wrap .lists .item .box {display: flex; flex-wrap: wrap;} .smtfac-wrap .list-wrap .lists .item .box .thumbnail {width:50%;} .smtfac-wrap .list-wrap .lists .item .box .contents {width:50%; padding-left: 40px;} .smtfac-wrap .list-wrap .lists.smtfac .item .thumbnail {padding-bottom:unset;} .smtfac-wrap .list-wrap .lists .item .thumbnail { height: 250px;} .smtfac-wrap .list-wrap .lists .contents { padding: 30px 20px 0px 20px;} .smtfac-wrap .list-wrap .smtfac .box {margin-bottom: 30px;} .smtfac-wrap .list-wrap .smtfac .thumbnail { border-radius: 10px; max-width: 550px; min-height: 350px; width: 100%;} .smtfac-wrap .list-wrap .smtfac .title { font-size: 32px; margin-bottom: 10px; font-weight: 700; color: #222; line-height: 140%; text-align: left; overflow: visible;} .smtfac-wrap .list-wrap .smtfac .contents p, .smtfac-wrap .list-wrap .smtfac-ctxt p {padding-top:15px; font-size: 18px;} .smtfac-wrap .smtfac-cont { counter-reset: number 0;display: flex; flex-wrap: wrap;justify-content: space-between; gap: 50px;} .smtfac-wrap .smtfac-blk { padding-top: 30px; width:30%; } .smtfac-wrap .smtfac-blk.btm { padding-bottom: 0;} .smtfac-wrap .boxtxt-nm { border: unset; padding: 0 0 20px 50px; margin-top: 0;position: relative; } .smtfac-wrap .boxtxt-nm .title-nm { font-size: 22px; line-height: 140%; font-weight: 600; padding-top: 4px;} .smtfac-wrap .boxtxt-nm .title-nm:before { content: counter(number); background-color: #55b6aa; border-radius: 4px; color: #fff; counter-increment: number 1; height: 35px; line-height: 35px; position: absolute; text-align: center; top: 0; left: 0; vertical-align: middle; width: 35px;} .smtfac-wrap .smtfac-txt { width:100%;} .smtfac-wrap .smtfac-txt p.text { text-align: center; line-height: 160%; padding-top: 20px; font-size: 18px;} .smtfac-wrap .smtfac-txt .item .thumbnail {position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 10px;} .smtfac-wrap .smtfac-txt .item:hover .thumbnail img { transform: translateX(0) scale(1.1); transition: all 0.3s ease-out;} .smtfac-wrap .smtfac-txt .item .thumbnail img { width: 100%; height: auto; transform: translateX(0) scale(1); transition: all 0.3s ease-out;} @media screen and (max-width: 1200px) { .smtfac-wrap .smtfac-blk {width: 29%;} } @media screen and (max-width: 1024px) { .smtfac-wrap .smtfac-blk {width: 28%;} .smtfac-wrap .list-wrap .smtfac .title { font-size: 28px;} .smtfac-wrap .list-wrap .lists .item .box .contents { padding-top: 0;} .smtfac-wrap .list-wrap .lists .item .thumbnail { height: 200px;} } @media screen and (max-width: 900px) { .smtfac-wrap .smtfac-blk {width: 45%;} } @media screen and (max-width: 800px) { .smtfac-wrap .list-wrap .lists.type-row .box { min-height: unset;} .smtfac-wrap .list-wrap .lists.smtfac .item .box .thumbnail {width: 100%; height: 250px;} .smtfac-wrap .list-wrap .lists.smtfac .item .box .contents {width: 100%; padding-top: 30px ; padding-left: 0;} .smtfac-wrap .list-wrap .lists.smtfac .thumbnail { max-width: unset !important; min-height: unset !important; width: 100%;} .smtfac-wrap .list-wrap .lists.smtfac .thumbnail img {max-height: unset; height: 100%; width: auto;} } @media screen and (max-width: 640px) { .smtfac-wrap .list-wrap .lists { flex-wrap: wrap;} .smtfac-wrap .list-wrap .lists .item .thumbnail { height: 250px;} .smtfac-wrap .list-wrap .lists .item .thumbnail img { height: unset;; max-height:unset;} .smtfac-wrap .list-wrap .lists.smtfac .item .thumbnail img { height: 100%;; width: unset;} .smtfac-wrap .img_box .img {height: 250px;} } @media screen and (max-width: 520px) { .smtfac-wrap .smtfac-blk { width: 100%;display: flex; flex-direction: column; align-items: center;} } /************************* MES *************************/ .mesfac-wrap.mesfac-bg01 { background-color: #040d19; } .mesfac-wrap.mesfac-bg02 { background-color: #eee; } .mesfac-wrap.mesfac-bg01 .title-h3 {color:#fff;} .mesfac-wrap .title-wrap .title-msg { padding-top: 30px;text-align: left; line-height: 160%; font-size: 36px; font-weight: 700;} .mesfac-wrap .title-wrap p { text-align: left; line-height: 160%; padding-top: 20px; font-size: 18px; } .mesfac-wrap .title-wrap p.dec { color:#666; } .mesfac-wrap .title-wrap .title-msg .logo { color:#d70c18;} .mesfac-wrap .mesfac-cont ul { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 26px 24px;} .mesfac-wrap .mesfac-cont ul li { position: relative; width: calc(25% - 18px); box-sizing: border-box; border: 1px solid #dadada;text-align: center; padding: 90px 15px 40px 15px; display: flex; flex-direction: column; align-items: flex-start; border-radius: 15px;} .mesfac-wrap .mesfac-cont ul li .subtxt { color:#d70c18; font-size: 20px; font-weight: 600;} .mesfac-wrap .mesfac-cont ul li .sub_tit { font-size: 18px; font-weight: 400;padding-top: 30px;text-align: left; border-top: 1px solid #dedede;} .mesfac-wrap .mesfac-cont .imgbox { position: absolute; top: 21px; left: 20px; margin: 0 auto; display: flex; align-items: center; justify-content: center;} .mesfac-wrap .mesfac-cont .imgbox p { padding-top: 15px; font-size: 16px; color: #666; } .mesfac-wrap .mesfac-cont .txtbox { font-size: 20px; font-weight: 600;padding-bottom: 20px; text-align: left;} .mesfac-wrap .list-wrap .lists { gap: 60px 20px; justify-content: space-around;} .mesfac-wrap .list-wrap .lists .title { text-align: center; font-size: 24px; line-height: 140%; max-height: 68px; color:#ffb50e;} .mesfac-wrap .list-wrap .lists .content { text-align: center; font-size: 20px; line-height: 160%; max-height: unset; margin-top: 15px; color:#fff; -webkit-line-clamp: unset;} .mesfac-wrap .list-wrap .lists .content span { color:#d23f32;} .mesfac-wrap .list-wrap .lists .contents { padding: 30px 20px 0px 20px;} .mesfac-wrap .list-wrap .lists .thumbnail { padding-bottom: 50%;} .mesfac-wrap .list-wrap .lists .thumbnail img { width: 100%; } .mesfac-wrap .list-wrap .lists {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 60px 30px;} .mesfac-wrap .list-wrap .lists .item { width:30%; } .mesfac-wrap .list-wrap .lists .item .thumbnail {padding-bottom:58%} .mesfac-wrap .mesfac_img .img { padding-top: 20px;} .mesfac-wrap .mesfac_img .img img { width: 100%;} .mesfac-wrap .mesfac-btn { display:none;} .mesfac-wrap .welfare_cont { padding-top: 20px;} .mesfac-wrap .welfare_box { display: flex; margin-bottom: 45px;} .mesfac-wrap .welfare_box:last-child { margin-bottom: 0;} .mesfac-wrap .welfare_box h5 { width: 300px; font-size: 28px; line-height: 30px; font-weight: 500; letter-spacing: -1px;} .mesfac-wrap .welfare_box h5 em { font-size: 16px; line-height: 26px; color: #666; font-weight: normal;} .mesfac-wrap .welfare_box .descbox { width: calc(100% - 300px);} .mesfac-wrap .welfare_box .descbox .box { display: flex; gap: 24px; flex-wrap: wrap;} .mesfac-wrap .welfare_box .descbox .box > li { width: calc(24% - 16px); box-sizing: border-box; border: 1px solid #dadada; display: flex; padding: 20px 0 ; word-break: keep-all; border-radius: 15px; background-color: #fff;padding-left: 20px;} .mesfac-wrap .welfare_box .descbox .icobox { width: 40px; text-align: center;} .mesfac-wrap .welfare_box .descbox .icobox img {;} .mesfac-wrap .welfare_box .descbox .txtbox { padding-right: 20px; box-sizing: border-box;} .mesfac-wrap .welfare_box .descbox .txtbox p { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -1px; margin-bottom: 10px;} .mesfac-wrap .welfare_box .descbox .txtbox span { font-size: 16px; line-height: 26px; color: #666; letter-spacing: -1px;} .mesfac-wrap .welfare_box .descbox .dot li { position: relative; padding-left: 10px;} .mesfac-wrap .welfare_box .descbox .dot li::before { content: "·"; display: inline-block; position: absolute; top: 0; left: 0; color: #555; } @media screen and (max-width: 1024px) { .mesfac-wrap .welfare_box { flex-direction: column; margin-bottom: 60px;} .mesfac-wrap .welfare_box h5 {width: 100%; padding-bottom: 20px;} .mesfac-wrap .welfare_box h5 br {display:none;} .mesfac-wrap .welfare_box h5 em {padding-left:10px;} .mesfac-wrap .welfare_box .descbox {width: 100%;} .mesfac-wrap .mesfac-cont ul li {width: 48%;} } @media screen and (max-width: 900px) { .mesfac-wrap .title-wrap .title-msg {font-size: 32px;} .mesfac-wrap .mesfac_img .img { padding-bottom: 40px;} .mesfac-wrap .mesfac-btn { display:block;} } @media screen and (max-width: 800px) { .mesfac-wrap .title-wrap .title-msg {font-size: 28px;} .mesfac-wrap .list-wrap .lists { gap: 54px 20px;} .mesfac-wrap .list-wrap .lists .item { width: 48%;} .mesfac-wrap .list-wrap .lists .item .thumbnail { padding-bottom: 0;} .mesfac-wrap .welfare_box h5 { font-size: 24px;} .mesfac-wrap .welfare_box .descbox .dot li { font-size: 15px;} .mesfac-wrap .mesfac-cont ul li {width: 46%;} } @media screen and (max-width: 640px) { .mesfac-wrap .list-wrap .lists .item {width: 100%; } .mesfac-wrap .welfare_box .descbox .box { justify-content: space-between;} .mesfac-wrap .welfare_box .descbox .box > li {width: 46%; } .mesfac-wrap .list-wrap .lists .item .thumbnail { height: 250px;} .mesfac-wrap .list-wrap .lists .thumbnail img { height: unset; max-height: unset; border-radius: 10px;} .mesfac-wrap .mesfac-cont ul li {width: 100%;} .mesfac-wrap .mesfac-cont .txtbox br { display:none;} } @media screen and (max-width: 520px) { } /************************* board *************************/ .news-wrap .list-wrap .lists { display: flex; flex-wrap: wrap; margin: 0; gap: 0 35px; } .news-wrap .list-wrap .lists .item { width: 31%; padding-top: 20px;} .news-wrap .list-wrap .lists .item .thumbnail {padding-bottom:55%;} .news-wrap .list-wrap .lists .item a { height: 100%; display: block; position: relative; overflow: hidden;border-radius: 10px;} .news-wrap .list-wrap .lists .item a:before { content: ""; width: 100%; height: 0; background: #d70c18; position: absolute; left: 0; top: 0; margin-top: 30px;z-index: -1; transition: height 0.2s; border-radius: 10px; } @media screen and (max-width: 1280px) { .news-wrap .list-wrap .lists { gap: 0 30px; } .news-wrap .list-wrap .lists .item { width: 31%;} } @media screen and (max-width: 1024px) { .news-wrap .list-wrap .lists { gap: 0 20px; } } @media screen and (max-width: 900px) { .news-wrap .list-wrap .lists { gap: 0 25px; } .news-wrap .list-wrap .lists .item { width: 48%;} } @media screen and (max-width: 800px) { .news-wrap .list-wrap .lists .item { width: 47%;} .news-wrap .list-wrap .lists .item .thumbnail {padding-bottom:0;} } @media screen and (max-width: 520px) { .news-wrap .list-wrap .lists .item { width: 100%;} .news-wrap .board-list-head .total-count p { min-width: 90px;} } /************************* Reference *************************/ /************************* 문의하기 *************************/ @media screen and (max-width:800px){ }