@charset "utf-8"; /* **************************************** * * Contents Common * **************************************** */ /* Title */ .h3_tit_type {margin:100px 0 50px 0;} .h3_tit_type h3 {position:relative; font-size:28px; line-height:32px; color:#101010; display: inline-block; padding-right:120px; font-weight:500;} .h3_tit_type h3:after {content:'';position:absolute; width:60px; height:1px; background-color:#101010; right:0; top:50%;} .h4_tit_type {margin:100px auto 50px; text-align:center;} .h4_tit_type h4 {font-size:34px; font-weight:600; letter-spacing:-1.5px; color:#102d69} .h4_tit_type p {font-size:17px; color:#666; margin-top:20px; letter-spacing:-0.8px; line-height:1.6; } .txt_p {display:block;} .txt_m {display:none;} .h5_tit_type {text-align:center; font-size:40px; letter-spacing:-0.5px; color: #222; margin-top:80px; margin-bottom:50px; font-weight:400;} .h5_tit_type span {position:relative; padding-bottom: 8px;/* display:inline-block; */} .h5_tit_type span:before {content:""; width: 100%; height: 2px; background-color: #222; position:absolute; bottom:0; left:0; display:block;} .h5_tit_type span.en {font-family: 'play', sans-serif; font-size:22px;} .cont_tit_wrap {margin:80px auto 0} .cont_tit_wrap .tit {font-size:36px;font-weight:600;letter-spacing:-0.01em;text-align:center; } .tit_c {color:#014a99;} .tit_m, .tit_cm {display:none;} .cont_tit_wrap .tit.en {font-family: 'play', sans-serif; font-size:48px;} .cont_tit_wrap .txt {font-size:18px;color:#4d4d4d;text-align:center;font-weight:300;word-break:keep-all;letter-spacing:-0.01em;line-height:1.8;margin-top:20px} .tit2 {width:50%; height:80px; text-align:center; line-height:80px; font-size:25px; font-weight:500; background-color:#102d69; color:white; margin:0 auto; margin-top:300px;} @media all and (max-width:1024px){ .tit2 {font-size:20px; margin-top:430px;} } @media all and (max-width:800px){ .h3_tit_type {margin:50px 0 30px 0;} .h3_tit_type h3 {font-size:24px;padding-right:80px;} .h3_tit_type h3:after {content:'';position:absolute; width:50px;} .h4_tit_type {margin:50px auto 50px;} .h4_tit_type h4 {font-size:28px; font-weight:600; letter-spacing:-1.5px; color:#102d69} .h4_tit_type p {font-size:17px; color:#666; margin-top:20px; letter-spacing:-0.8px; line-height:1.6; } .h5_tit_type {font-size:18px; margin-top:40px;} .h5_tit_type span.en {font-size:20px;} .cont_tit_wrap {margin:30px auto 0} .cont_tit_wrap .tit {font-size:30px;line-height:1.4;} .cont_tit_wrap .tit.en {font-size:30px;} .cont_tit_wrap .txt {font-size:16px;line-height:1.6;} .tit2 {font-size:18px; margin-top:380px;} } @media all and (max-width:430px){ .h3_tit_type {margin:30px 0 20px 0;} .h3_tit_type h3 {font-size:20px;padding-right:80px;} .h3_tit_type h3:after {content:'';position:absolute; width:50px;} .h4_tit_type h4 {font-size:25px; font-weight:600; letter-spacing:-1.5px; color:#102d69} .h4_tit_type p {font-size:15px; color:#666; margin-top:20px; letter-spacing:-0.8px; line-height:1.6;} .txt_p {display:none;} .txt_m {display:block; font-size:15px; color:#666; margin-top:20px; letter-spacing:-0.8px; line-height:1.6;} .h5_tit_type {font-size:16px; margin-top:30px;} .h5_tit_type span.en {font-size:18px;} .cont_tit_wrap {margin:30px auto 0} .cont_tit_wrap .tit {font-size:22px; display:none;} .cont_tit_wrap .tit.en {font-size:24px;} .cont_tit_wrap .txt {font-size:15px;margin-top:10px; display:none;} .tit_m, .tit_cm{font-weight:bold; display:block; font-size:30px; margin:0 auto; text-align:center;} .tit_cm{color:#014a99;} .tit2 {font-size:16px; margin-top:380px;} } /* Tab */ .tab_wrap {width:100%; max-width:1400px; margin:80px auto 0px; text-align:center;} .tab_wrap .tab_list {margin:0 15px;} .tab_wrap .tab_list a {display:inline-block; width:50%; height:60px; line-height:58px; box-sizing:border-box; border:1px solid #d9d9d9; text-align:center; font-size:18px; color:#222; } .tab_wrap .tab_list a.on {color:#fff; border:1px solid #005d9d; font-weight:500; background-color:#005d9d} .tab_wrap .tab_list2 {margin:0 15px;display: grid;grid-template-columns: repeat(5,1fr);} .tab_wrap .tab_list2 a {display:inline-block;height:60px;line-height:58px;box-sizing:border-box;border:1px solid #d9d9d9;text-align:center;font-size:18px;color:#222;} .tab_wrap .tab_list2 a.on {color:#fff; border:1px solid #005d9d; font-weight:500; background-color:#005d9d} .tab_wrap .tab_list2 a:nth-child(2) {border-left:none; border-right:none;} .tab_wrap .tab_list2 a:nth-child(3) {border-right:none;} .tab_wrap .tab_list2 a:nth-child(4) {border-right:none;} .tab_wrap .tab_list3 {margin:0 15px;} .tab_wrap .tab_list3 a {display:inline-block; width:25%; height:60px; line-height:58px; box-sizing:border-box; border:1px solid #d9d9d9; text-align:center; font-size:18px; color:#222; } .tab_wrap .tab_list3 a.on {color:#fff; border:1px solid #005d9d; font-weight:500; background-color:#005d9d} .tab_wrap .tab_list3 a:nth-child(3) {border-left:none; border-right:none;} @media all and (max-width:800px){ .tab_wrap {margin:40px auto 0px;} } @media all and (max-width:600px) { .tab_wrap .tab_list a { display: inline-block; width: 100%; height: 40px; line-height: 38px; font-size: 14px; } .tab_wrap .tab_list2 a { display: inline-block; width: 100%; height: 40px; line-height: 38px; font-size: 14px; border-left: none; } .tab_wrap .tab_list2 a:first-child { border-left: 1px solid #d9d9d9; } .tab_wrap .tab_list2 a:nth-child(2) { border-right: 1px solid #d9d9d9; } .tab_wrap .tab_list2 a:nth-child(3) { border-right: 1px solid #d9d9d9; border-left: none; } .tab_wrap .tab_list3 a { display: inline-block; width: 100%; height: 40px; line-height: 38px; font-size: 14px; } .tab_wrap .tab_list3 a:nth-child(4) { border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; border-top: none; border-bottom: none; } .tab_wrap .tab_list2 a:last-child { border-left: 1px solid #d9d9d9; } } .v-row {display:table;height:100%;} .v-cell {display:table-cell;vertical-align:middle;} .v-cell.va-t {vertical-align:top;} /* **************************************** * * Board Common * **************************************** */ input[type="text"], input[type="password"]{border:1px solid #d2d2d2;text-indent:5px;background:#fff;color:#323232} input[type="text"]:focus, textarea:focus, select:focus{outline:2px solid #77abe7} textarea{resize:none;border:1px solid #d2d2d2} input[type=text].date_box{box-sizing:border-box;height:40px;padding-right:28px;background:#fff url(/portal/images/common/call_blit.png?t_=201908161800) 97% center no-repeat;color:#323232} select { vertical-align: middle; background: #fff; border: 1px solid #d2d2d2; -webkit-appearance: none; -webkit-border-radius: 0px; -moz-appearance: none; appearance: none; background: url("../images/common/btn_arr_select.png") no-repeat 100% 50%; } span.star {display:inline-block; margin:0 5px; color:#f23c43; } /* form ::: button */ .btn_group {position:relative;width:100%;margin:50px auto 0px;text-align:center} .btn_group:before, .btn_group:after {clear:both;display:block;content:'';} .btn {display:inline-block;width:100%;max-width:200px; height:60px; line-height:59px; font-family: 'play', sans-serif; font-size:14px; letter-spacing:1.2px;text-align:center;vertical-align:middle; touch-action:manipulation;cursor:pointer;border:1px solid transparent;} .btn.btn-confirm {font-family: 'Noto Sans KR', sans-serif; border:1px solid #00aeef; background:#00aeef; color:#fff; font-weight:400;} .btn.btn-confirm:hover {border:1px solid #0bbbef; color:#0bbbef} .btn.btn-cancel {border:1px solid #e0e0e0;color:#555;background-color:#fff;box-shadow:0 0 1px rgba(20,0,77,.08);transition:all 0.2s ease;-webkit-transition:all 0.2s ease;} .btn.btn-cancel:hover {box-shadow:0 0 10px rgba(0,0,0,.1);} .board_inquiry { display: flex; justify-content: space-between; padding-top: 20px; } .board_inquiry a { display: inline-block; background: #00aeef; border: 1px solid #00aeef; padding: 20px 30px; color: #fff; } .board_inquiry a:hover{color: #00aeef; background: #fff;} .board_inquiry_in{display: flex; gap: 20px;} .board_inquiry a.online { color: #00aeef; background: #fff; } @media screen and (max-width:1100px){ .btn_group {margin:30px auto 0px;} .btn {max-width:150px; height:50px; line-height:49px;} } @media screen and (max-width:800px){ .btn_group {margin:30px auto 0px;} .board_inquiry { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; text-align: center; } .board_inquiry a { display: inline-block; background: #00aeef; border: 1px solid #00aeef; padding: 10px 20px; color: #fff; min-width: 180px; text-align: center} .board_inquiry a:hover{color: #00aeef; background: #fff;} .board_inquiry_in{display: flex; flex-direction: column; gap: 10px; } } @media screen and (max-width:600px){ .btn {height:40px; line-height:39px;} } /* Pagination */ .pagination {position:relative;width:100%;margin:50px auto 0px;text-align:center;} .pagination a {font-size:15px;font-weight:400;color:#8b8b8b;padding:10px 15px;background-color:#f6f6f8;border:1px solid #e8e8e8;text-decoration:none;transition:background-color .3s} .pagination a.on {background-color:#00aeef;color:white} .pagination a:hover:not(.on) {background-color:#ddd;} @media screen and (max-width:800px){ .pagination a {font-size:13px;padding:7px 12px;} } /* 공통 :: SEARCH BOX */ .board-search-box{text-align:right; background-color: } .board-search-box select { width: 20%; max-width: 150px; height: 40px; border: 1px solid #ccc; background-color: #fff; padding-left: 10px; } .board-search-box .search-word{width:30%; max-width:200px; height:40px; border:1px solid #ccc; border-right:0; padding:0; text-indent:10px; color:#868686; font-size:13px; vertical-align:middle;} .board-search-box .search-word:focus{color:#333;} .board-search-box .bbs-search-btn{margin:0px; border:0; min-width:40px; padding:0 5px; height:40px; margin-left:-4px; background:#333; color:#fff; cursor:pointer; vertical-align:top; font-size:14px;} .board-search-box .bbs-search-btn i{line-height:40px;} /* 공통 :: TOTAL NUMBER 및 카테고리 검색 */ .total-list-con{float:left; line-height:34px; margin-bottom:20px; color:#333; font-size:14px; letter-spacing:-0.25px;} .total-list-con b{color:#00aeef} .top-search-box{float:right; margin-bottom:20px;} .top-search-box select{width:200px; height:34px; border:1px solid #ccc; vertical-align:top; } .total-list-con + .board-search-box{float:right; padding:0; text-align:right; border:0; width:500px; background-color:transparent;} .total-list-con + .board-search-box .search-word{width:50%; max-width:none} /* 공통 :: NO LIST */ .bbs-no-list{padding:100px 0; text-align:center; color:#777; font-size:15px; border-top:1px solid #333; border-bottom:1px solid #ddd; } .bbs-list-tbl + .bbs-no-list{margin-top:-1px;} @media all and (max-width:800px) { /* 공통 :: 버튼 */ .cm-btn-controls button,.cm-btn-controls a{width:110px; height:36px; font-size:14px;} .cm-btn-controls a{line-height:36px;} /* 공통 :: NO LIST */ .bbs-no-list{padding:60px 0; font-size:14px; font-weight:500;} /* 공통 :: TOTAL NUMBER 및 카테고리 검색 */ .top-search-box select{width:150px} .total-list-con{width:70px; } .total-list-con + .board-search-box{width:calc(100% - 70px)} } @media all and (max-width:480px) { /* 공통 :: 버튼 */ .cm-btn-controls button,.cm-btn-controls a{width:80px; height:32px; font-size:13px;} .cm-btn-controls a{line-height:32px;} /* 공통 :: SEARCH BOX */ .board-search-box{padding:15px;} .board-search-box select{width:30%;} .board-search-box .search-word{width:50%; text-indent:4px; font-size:13px;} } /* **************************************** * * Table Type * **************************************** */ .table01 {width:100%;table-layout:fixed;border-collapse:collapse;border-top:1px solid #d5d5d5;} .table01 th {padding:16px 10px;background:#005d9d;color:#fff;font-size:17px;font-weight:400;border-bottom:1px solid #1379bf;border-right:1px solid #d5d5d5;vertical-align:middle;} .table01 td {padding:16px 10px 16px 50px;text-align:left;color:#666;font-size:17px;border-bottom:1px solid #d5d5db;vertical-align:middle;} @media(max-width:900px) { table > th, table > td {font-size:14px;} .mobile_table .table01 colgroup{display:none} .mobile_table .table01 tbody{display:block;width:100%} .mobile_table .table01 tbody tr{display:block;width:100%;} .mobile_table .table01 tbody tr:first-child{margin-top:0} .mobile_table .table01 tbody tr th{display:none} .mobile_table .table01 tbody tr td{display:block;position:relative;width:100%;padding-left:180px;font-size:15px; border-width:0 1px 1px;overflow:hidden} .mobile_table .table01 tbody tr td:before{content:attr(data-title);position:absolute;top:0;left:0;display:inline-block;width:150px;height:100%;padding:16px 0 0 10px; border-bottom:1px solid #1379bf;background-color:#005d9d;color:#fff;font-weight:400;vertical-align:middle;} .mobile_table .table01 tbody tr td br{display:none} .mobile_table .table01 tbody tr.span_list{margin-top:0} .mobile_table .table01 tbody tr.span_list td:first-child{border-top-width:0} .mobile_table .table01 tbody tr td.pay_check label span{display:inline} .mobile_table .table01 tbody th.noview, .mobile_table .table01 tbody td.noview {display:none} } @media (max-width:430px){ table th, table td {font-size:14px;} .mobile_table .table01 tbody tr td{padding-left:150px; font-size:14px;} .mobile_table .table01 tbody tr td:before{width:130px;} } .table02 {border-top:2px solid #00aeef; width:100%;} .table02 th,.table02 td {padding:16.5px 10px 16.5px 25px; letter-spacing:-0.5px; font-size:16px; border-bottom:1px solid #dcdcdc; line-height:2} .table02 th {width:100px;color:#222; text-align:left; font-weight:400; background-color:#f5f5f5; vertical-align:top; } .table02 td {color:#888; font-weight:400;} .table02_tit{padding: 40px 0 20px 0; color: #00aeef; font-weight: 600;} @media (max-width:600px){ .table02 th,.table02 td {font-size:14px;line-height:2} } @media (max-width:430px){ .table02 th,.table02 td {padding:13px 10px 13px 15px; letter-spacing:-0.5px; font-size:13px; border-bottom:1px solid #dcdcdc; line-height:2} } /* **************************************** * * 그룹소개 :: ceo인사말 * **************************************** */ .greeting_wrap {position:relative; margin:100px auto 130px;} .greeting_wrap .img_area {float:left; width:43%;} .greeting_wrap .txt_area {float:right; width:52.5%;} .greeting_wrap .txt_area .txt1 {font-size:26px; line-height:1.4; color:#00aeef; margin-bottom:30px; letter-spacing: -0.5px; font-weight:400} .greeting_wrap .txt_area .txt1 span {font-size:30px; color:#00aeef; margin-bottom:23px; display:block; } .greeting_wrap .txt_area .txt2 {font-size:18px;line-height:1.8;color:#000;font-weight:300; letter-spacing: -0.3px; word-break: break-all;} .greeting_wrap .txt_area .by {padding-top:50px; font-size:17px; color:#000; font-weight:400;} .greeting_wrap .txt_area .by .sign {display: inline-block; margin-left:20px;} @media all and (max-width: 1200px) { .greeting_wrap .txt_area .txt1 br {display: none;} .greeting_wrap .txt_area .txt2 {font-size:17px;} } @media all and (max-width:900px){ .greeting_wrap {margin:40px auto 50px;} .greeting_wrap .img_area {padding:0; float:none; width:auto; margin-bottom:20px;} .greeting_wrap .txt_area {float:none; width:auto;} .greeting_wrap .txt_area .txt1 {font-size:22px; line-height:1.6; margin-bottom: 20px;} .greeting_wrap .txt_area .txt2 {font-size:14px;} .greeting_wrap .txt_area .by {padding-top:30px; font-size:16px;} .greeting_wrap .txt_area .by .sign {margin-left:15px; } .greeting_wrap .txt_area .by .sign img {width: 80px;} .greeting_wrap .txt_area .by .sign.en img {width: 180px;} } /* **************************************** * * 그룹소개 :: 그룹개요 * **************************************** */ .overview_wrap {position:relative; margin:0px auto 130px;} .overview_area {margin-top:50px;} .organ_wrap {margin:0px 0;padding:10px 0 100px 0; background-color:#f9f9f9} .organ {margin-top:50px;text-align:center} .place_wrap {position:relative;} .place_wrap .list_area {overflow:hidden;display: grid;grid-template-columns: repeat(3,1fr);gap: 10px;} .place_wrap .list_area li{position:relative;padding:40px;float:left;border:1px solid #ddd;box-sizing:border-box;} .place_wrap .list_area li .txt1 {font-weight:400; font-size:24px; color:#000;} .place_wrap .list_area li .txt2 {margin-top:10px;font-size:17px;color:#101010;line-height:1.6;font-weight:300;} .place_wrap .list_area li .phone {margin-top:25px; height:80px;} .place_wrap .list_area li .phone > p{font-family: 'play', sans-serif; font-size:17px; margin-bottom:5px; padding:0px 0px 2px 29px; overflow:hidden; background:url("../images/group/phone_icon.png") no-repeat 0 6px;} .place_wrap .list_area li .phone > p.fax{background:url("../images/group/fax_icon.png") no-repeat 0 6px; background-size:22px;} .place_wrap .list_area li .phone span:nth-child(1){color:#222; float:left;} .place_wrap .list_area li .phone span:nth-child(2){font-family: 'play', sans-serif; color:#555; float:right;} .place_wrap .list_area li > a{display:block; position:absolute; bottom:50px; left:40px; width:104px; height:34px; line-height:33px; text-align:center; font-family:'ntsR'; font-size:16px; color:#fff; background:#102d69;} .place_wrap .list_area li .img {padding-top:20px;} .place_wrap .list_area li .img img {width:100%;} .place_wrap .list_areas {margin-top: 2%;/* overflow:hidden; */display: grid;grid-template-columns: repeat(3,1fr);gap: 2%;} .place_wrap .list_areas li{position:relative;padding:33px 50px;float:left;border:1px solid #ddd;box-sizing:border-box;display: flex;flex-direction: column;justify-content: space-between;} .place_wrap .list_areas li .txt1 {font-weight:600; font-size:28px; color:#000; text-align:center;} .place_wrap .list_areas li .txt2 {margin-top:27px; font-size:17px; color:#101010; line-height:1.6; height:80px; font-weight:300; text-align:center;} .place_wrap .list_areas li .txt3 a{display: block;width:200px;height:50px;border:1px solid #ddd;text-align:center;line-height:45px;margin:0 auto;} .place_wrap .list_areas li .txt3 a:hover{color:white;border:0;background-color:#00448d;} .place_wrap .list_areas li .img {padding-top:20px;} .place_wrap .list_areas li .img img {width:100%;} @media screen and (max-width: 1200px){ .place_wrap .list_area li .txt2{margin-top:20px; font-size:16px; line-height:1.2} .place_wrap .list_areas li .txt2{margin-top:20px; font-size:16px; line-height:1.2} } @media screen and (max-width: 1024px){ .place_wrap .list_area { grid-template-columns: repeat(1, 1fr); gap: 10px; } .place_wrap .list_area li { width: 100%; height: auto; padding: 15px; } .place_wrap .list_area li .txt1 { font-size: 20px; line-height: 30px; height: auto; } .place_wrap .list_area li .txt2 { line-height: 1.6} .place_wrap .list_areas { grid-template-columns: repeat(1, 1fr); gap: 10px; } .place_wrap .list_areas li:nth-child(2n){float:none;} .place_wrap .list_areas li:nth-child(3n){margin:0 0 20px 0;} .place_wrap .list_areas li .txt1{font-size:20px; line-height:30px; height:auto;} .place_wrap .list_areas li .txt2{line-height:1.6} } @media screen and (max-width: 800px){ .overview_wrap {margin:0px auto 50px;} .organ_wrap {margin:0px 0;padding:10px 0 50px 0;} .place_wrap .list_areas li .txt1{font-size:18px;} .place_wrap .list_areas li .txt1{font-size:18px;} } @media screen and (max-width: 430px){ .place_wrap .list_areas li .txt1{font-size:18px;} .place_wrap .list_areas li .txt2{font-size:14px; } .place_wrap .list_areas li .txt1{font-size:18px;} .place_wrap .list_areas li .txt2{font-size:14px; } } /* **************************************** * * 그룹소개 :: CI * **************************************** */ .ci_wrap {position:relative; margin:0px auto 130px;} .ci_wrap .logomark {border: 1px solid #ddd;} .ci_wrap .logomark .L{width:50%; float:left; text-align:center;padding-top:40px;} .ci_wrap .logomark .R{width:50%; display:inline-block; padding:80px 70px 80px 0;} .ci_wrap .sigmature{border: 1px solid #ddd; margin-bottom:40px;} .ci_wrap .sigmature .L{width:55%; float:left; text-align:center; padding:50px 0;} .ci_wrap .sigmature .R{width:45%; display:inline-block; padding-left:70px; padding:50px 0;} .ci_wrap .color {color:#fff; font-size:20px; font-weight:400; line-height:120px; font-family: 'play', sans-serif;} .ci_wrap .color span {padding:3px} .ci_wrap .color .c1{background-color:#082e54; width:35%; float:left; text-align:right;padding-right:20px} .ci_wrap .color .c2{background-color:#ec008c; width:20%; display:inline-block; margin-left:1%; text-align:center;} .ci_wrap .color .c3{background-color:#414099; width:20%; display:inline-block; margin-left:1%; text-align:center;} .ci_wrap .color .c4{background-color:#00aeef; width:20%; display:inline-block; margin-left:1%; text-align:center;} @media screen and (max-width: 900px){ .ci_wrap {position:relative; margin:0px auto 50px;} .ci_wrap .logomark {height:auto; font-size:15px;} .ci_wrap .logomark .L, .ci_wrap .logomark .R {float:none; width:100%;} .ci_wrap .logomark .L {padding:20px; border-bottom:solid 1px #ddd;} .ci_wrap .logomark .R {padding:20px;} .ci_wrap .sigmature {border: 1px solid #ddd; margin-bottom:40px; padding:50px 0;} .ci_wrap .sigmature .L {width:100%; float:none; display:block; text-align:center; padding:0px 0; } .ci_wrap .sigmature .R {width:100%; float:none; display:block; text-align:center; padding:0px 0;} .ci_wrap .color {font-size:15px; line-height:80px;} .ci_wrap .color .c1 {width:100%; float:none; display:block; margin-bottom:10px} .ci_wrap .color .c2 {width:32%; display:inline-block; margin-left:0%; text-align:center;} .ci_wrap .color .c3 {width:32%; display:inline-block; margin-left:1.3%; text-align:center;} .ci_wrap .color .c4 {width:32%; display:inline-block; margin-left:1.4%; text-align:center;} } @media screen and (max-width: 530px){ .ci_wrap .color {line-height:60px} .ci_wrap .color .c1 {width:100%; float:none; display:block; margin-bottom:10px; text-align:center; padding-right:0px} .ci_wrap .color .c2 {width:100%; float:none; display:block; margin-bottom:10px; text-align:center;} .ci_wrap .color .c3 {width:100%; float:none; display:block; margin-left:0%; margin-bottom:10px; text-align:center;} .ci_wrap .color .c4 {width:100%; float:none; display:block; margin-left:0%; margin-bottom:10px; text-align:center;} } /* **************************************** * * 그룹소개 :: 그룹연혁 * **************************************** */ .history_wrap {position:relative; margin:50px auto 130px;} /*tab*/ .history_tab {position:relative;width: 100%; max-width:1400px;margin:0 auto;} .history_tab::before {content:' ';display: block;position: absolute;left: 0;top:70px;width:100%; height:1px; background: #d4d4d4;} .history_tab > .his_tabBtn {text-align: center; margin-bottom:0px;} .history_tab > .his_tabBtn > li {display:inline-block;text-align: center; width:16%;} .history_tab > .his_tabBtn > li span {font-size:19px;} .history_tab > .his_tabBtn > li span br {display:none;} .history_tab > .his_tabBtn > li a {display: block;padding: 0 0 39px;position:relative;bottom: -20px;color:#999;} .history_tab > .his_tabBtn > li a:hover {color:#000; font-weight:600;} .history_tab > .his_tabBtn > li a:before { -webkit-transition: background 0.6s, -webkit-transform 0.6s; transition: background 0.6s, -webkit-transform 0.6s; transition: background 0.6s, transform 0.6s; transition: background 0.6s, transform 0.6s, -webkit-transform 0.6s; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; position: absolute; z-index: 9; content: ""; width: 5px; height: 5px; border-radius: 50%; background: #fff; bottom: 18px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .history_tab > .his_tabBtn > li.active a { color: #000; font-weight: 600; } .history_tab > .his_tabBtn > li.active a:after { display: block; width: 19px; height: 19px; margin-top: -4px; margin-left: -10px; position: absolute; top: 50%; left: 50%; border: 1px solid #ec008c; border-radius: 50%; -webkit-transition: border 0.5s; transition: border 0.5s; content: ''; display: block; } .history_tab > .his_tabBtn > li.active_nav a:before{background:#ec008c;} .history_tab > .his_tabBtn > li.active a:after {margin-top:5px; } .history_tab > .his_tabBtn > li:not(.active) a:hover:before{ -webkit-transform: translateX(-50%) scale(2); -ms-transform: translateX(-50%) scale(2); transform: translateX(-50%) scale(2)} /*list*/ .history_left {position: relative;} .history::after {content:' '; display:table; clear:both;} .history_left::before {content:' ';display: block;position: absolute;right: -1px;top: 0;width:1px; height:100%;background: #d4d4d4;} .history_left {float:left;width: 50%;text-align: right;padding-top:100px;padding-right:70px;} .history_left .img_history img {width: 100%; max-width:500px; display: inline-block;} .history_left .img_history:nth-child(2) {padding-top:50px;} .history_left p.txt1 {padding:30px 0 10px;font-size:22px;font-weight: 400;color: #222;line-height:1.5} .history_left p.txt2 {font-size:16px;color: #707070;line-height:1.4} .history_right {float:right;width: 50%;} .history_right ul {position: relative;padding-top:100px;} .history_right ul::before {content:' ';display: block;position: absolute;left: 0;top: 0;width:1px; height:100%;background: #d4d4d4;} /*.history_right ul::after {content:' ';display: block;position: absolute;left: -5px;top: 0;width:10px;height:10px;background: #d8d8d8;border-radius:50%;}*/ .history_right li {position: relative;margin-top:50px; padding-left:60px;} .history_right li:first-child {margin-top: 0;} .history_right li::before {content:' ';display: block;position: absolute;left: 0;top:35px;width:70px; height:1px;background: #d4d4d4;} .history_right li::after {content:' ';display: block;position: absolute;left:-10px;top:25px;width:20px;height:20px;background: #fff;border:6px solid #6d6d6d;border-radius:50%;} .history_right h3 {position: relative;margin-bottom:20px;padding-left:30px;font-size:40px;color:#014a99;font-family: 'play', sans-serif;} /*.history_right h3::before {content:' ';display: block;position: absolute;left:-10px;top:30px;width:10px;height:10px;background: #fff;border:2px solid #6d6d6d;border-radius:50%;} */ .history_right dl {margin:0 0 20px 45px;display:block;overflow:hidden} .history_right dt {position: relative;float:left;width:90px;font-size:20px;color: #014a99;font-weight:700;vertical-align: top;font-family: 'play', sans-serif; text-align:right;padding-right:15px} .history_right dt:after {width:1px;height: 16px;background:#014a99;opacity:0.3;position:absolute;right:0;top: 11px;content:'';display:block;} .history_right dd {font-size:16px;color: #707070;vertical-align: top;padding-left:105px;} @media screen and (max-width: 1100px){ .history_left p.txt1 br, .history_left p.txt2 br {display:none;} } @media screen and (max-width: 900px){ .history_wrap {position:relative; margin:0px auto 130px;} .history_tab::before {top:65px;} .history_tab > .his_tabBtn > li span {font-size:15px;} .history_left {float:none;width:100%;text-align:left;padding-top:50px;padding-right:0px;} .history_left::before {content:' ';display: none;} .history_left .img_history {text-align:center} .history_left p.txt1 {padding:30px 0 10px;font-size:18px;line-height:1.5} .history_left p.txt2 {font-size:16px;color: #707070;} .history_right {float:none;display:block;width:100%;} .history_right ul {padding-top:40px;} .history_right ul::before {left: 0;top: 60px;background:#eaeaea;} .history_right li {margin-top:20px; padding-left:0px;} .history_right li::before {left: 0;top:25px;width:0px; height:1px;background: #d4d4d4;} .history_right li::after {left:-10px;top:15px;width:20px;height:20px;background: #fff;border:6px solid #6d6d6d;border-radius:50%;} .history_tab > .his_tabBtn > li.active a:after {margin-top:3px; } .history_right h3 {margin-bottom:10px;padding-left:25px;font-size:30px;} .history_right dl {margin:0 0 20px 0px;display:block;overflow:hidden} .history_right dt {font-size:18px;} .history_right dt:after {height: 14px;top: 9px;} .history_right dd {font-size:15px;color: #707070;vertical-align: top;padding-left:105px;} } @media screen and (max-width: 580px){ .history_tab > .his_tabBtn > li {display:inline-block;text-align: center; width:18%;} .history_tab > .his_tabBtn > li span {font-size:14px;} } @media screen and (max-width: 460px){ .history_tab::before {top:85px;} .history_tab > .his_tabBtn > li {display:inline-block;text-align:center;line-height:1.5} .history_tab > .his_tabBtn > li span {font-size:14px;} .history_tab > .his_tabBtn > li span em {display:none;} .history_tab > .his_tabBtn > li span br {display:block;} .history_tab > .his_tabBtn > li.active a:after {margin-top:13px; } .history_left p.txt1 {font-size:17px;} .history_left p.txt2 {font-size:15px;} .history_right h3 {margin-bottom:10px;padding-left:25px;font-size:24px;} .history_right dl {margin:0 0 20px 0px;display:block;overflow:hidden} .history_right dt {font-size:16px;} .history_right dt:after {top: 7px;} .history_right dd {font-size:14px;} } /* **************************************** * * 그룹소개 :: 기술인증 * **************************************** */ .award_wrap {position:relative; margin:50px auto 130px;} .award_wrap ul{margin-top:40px;} .award_wrap ul:after{content:""; display:block; clear:both;} .award_wrap ul li{position:relative; float:left; width:20%; padding:10px 10px;} .award_wrap ul li:first-child:after{display:none;} .award_wrap ul li .img {display:block; text-align:center; border:1px solid #d4d4d4; background-size: cover !important;} .award_wrap ul li .img img {width:100%;} .award_wrap ul li .txt {display:block;} .award_wrap ul li .txt p {text-align:center; color:#454545; font-size:16px; font-weight:300; line-height:1.4; padding-top:20px} @media all and (max-width:800px){ .award_wrap {position:relative; margin:20px auto 50px;} .award_wrap ul li .txt p {font-size:14px; padding-top:10px} } @media all and (max-width:600px){ .award_wrap ul{margin-top:10px;} .award_wrap ul li .txt p {font-size:14px;} } @media all and (max-width:430px){ .award_wrap ul li{padding:5px 5px;} .award_wrap ul li .txt p {font-size:13px;} } /* **************************************** * * 그룹소개 :: 경영이념 * **************************************** */ .philosophy_wrap {position:relative; margin:0px auto 130px;} .onlyW {display:none !important;} /*SUBPAGE LAYOUT*/ .sectionWrap {position: relative; overflow:hidden; margin-top:80px; background:url("../images/group/bg_philosophy01.jpg") no-repeat 0 6px; background-size: cover;} .sectionWrap.bg_blue {background:#06061f;} .sectionWrap.bg_black .sec_tit {color:#fff;} .sectionWrap.wide {max-width:100% !important;} @media screen and (min-width:900px) { .onlyM {display:none !important;} .onlyW {display:block !important;} } /* isp consulting */ .isp_consulting.sec_con1 {padding:150px 0 200px;text-align:center; } .solutionCnt {position:relative;text-align:left;} .solutionCnt img {width:50%;} .solutionCnt .solutionCntWrap {position:absolute;left:0%;top:0%;width:100%;height:100%; } .solutionCnt .solution1 {height:35.4%;} .solutionCnt .solution2 {height:29.5%;} .solutionCnt .solution3 {height:35.3%;} .solutionCnt dl {position:relative;} .solutionCnt dl:after {content:"";display:block;clear:both;} .solutionCnt dl dt {width:33%;position:absolute;left:4%;top:50%;transform:translateY(-50%);font-size:18px;line-height:1.4;font-weight:600;color:#fff;text-align:center;} .solutionCnt dl dd {width:48%;position:absolute;left:52%;top:50%;transform:translateY(-50%);font-size:14px;line-height:1.4;color:#fff;font-weight:400} @media screen and (min-width:900px) { .solutionCnt {width:914px;max-width:1400px;margin:40px auto;} .solutionCnt img {margin:0 auto;width:auto;} .solutionCnt .solutionCntWrap {position:absolute;left:0;top:50%;width:100%;height:100%;transform:translateY(-50%);} .solutionCnt .solutionCntWrap:after {content:"";display:block;clear:both;} .solutionCnt .solutionCntWrap dl {float:left;width:34%;height:100%;} .solutionCnt .solutionCntWrap dl:nth-child(2) {width:32%;} .solutionCnt dl dt {padding:0 15%;width:100%;position:absolute;left:0;font-size:24px;line-height:1.4;box-sizing:border-box;} .solutionCnt dl dd {width:100%;left:0;top:-90px;bottom:auto;transform: none;text-align:center;font-size:16px;line-height:26px;} .solutionCnt dl:nth-child(1) dd {top:auto;bottom:-120px;} .solutionCnt dl:nth-child(3) dd {top:auto;bottom:-90px;} } @media screen and (max-width:800px) { .philosophy_wrap {margin:0px auto 50px;} .isp_consulting.sec_con1 {padding:15% 6.5% 15%;} } @media screen and (max-width:600px) { .solutionCnt dl dt {font-size:17px;} } @media screen and (max-width:430px) { .solutionCnt dl dt {font-size:15px;} } /* -------- 비전 :: 핵심가치 -------- */ .value-container {} .value-container .value-con-list {margin-top:58px;} .value-container .value-con-list .item {border-top: 1px solid #ddd; } .value-container .value-con-list .item05 {border-bottom: 1px solid #ddd;} .value-container .value-con-list .item .value-con-inner {height:170px; padding:0 30px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .value-container .value-con-list .item .icon-con {width: 130px;} .value-container .value-con-list .item .tit-con {width: 180px; text-align:center;} .value-container .value-con-list .item .tit-con .tit { position: relative; font-size: 24px; letter-spacing: -0.25px; color: #444; } .value-container .value-con-list .item .tit-con .tit:before { content: ""; width: 28px; height: 2px; background: #005d9d; position: absolute; left: 40px; top: -12px; } .value-container .value-con-list .item .tit-con .tit b{font-weight:600; } .value-container .value-con-list .item .txt-con {width: calc(100% - 295px); padding: 0 23px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;} .value-container .value-con-list .item .txt-con .txt {font-size:17px; line-height:30px; letter-spacing:-0.25px; color: #444; padding-left:20px; position:relative; } /*.value-container .value-con-list .item .txt-con .txt:before {content:""; display:block; width:4px; height:4px; background-color: #222; position:absolute; left:0; top: 12px; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}*/ /* -------- 비전 :: 핵심가치 -------- */ @media all and (max-width:800px){ .value-container {margin-bottom: 60px;} .value-container .value-con-list {margin-top:29px;} .value-container .value-con-list .item .icon-con {text-align:center; width: 91px; } .value-container .value-con-list .item .icon-con img {width:100%; max-width:100%;} .value-container .value-con-list .item .tit-con {padding: 10px 0; width:115.5px; } .value-container .value-con-list .item .tit-con .tit {font-size:17px; } .value-container .value-con-list .item .txt-con {padding: 0; width:calc(100% - 280.5px);} .value-container .value-con-list .item .txt-con .txt {font-size: 13px; line-height:24px; } /*.value-container .value-con-list .item .txt-con .txt:before {top:9px;}*/ } @media all and (max-width:600px){ .value-container .value-con-list .item .value-con-inner, .value-container .value-con-list .item .icon-con, .value-container .value-con-list .item .tit-con,.value-container .value-con-list .item .txt-con {width:100%; display:block; } .value-container .value-con-list .item .value-con-inner {height:auto; padding: 30px 15px; } .value-container .value-con-list .item .icon-con img {width:auto; max-width:91px;} .value-container .value-con-list .item .txt-con .txt br {display:none;} .value-container .value-con-list .item .tit-con .tit:before {display:none;} } /* **************************************** * * 그룹소개 :: 오시는길 * **************************************** .location_wrap {position:relative; margin:0px auto 80px; padding:0 50px} .locList {padding-top:50px; flex-wrap:wrap; display: flex;-webkit-display:flex;justify-content:space-between;-webkit-justify-content:space-between;} .locList .loc-item {width: 100%;width: calc(100% - 0);-webkit-width: calc(100% - 0);} .locList .loc-item.half {width: 50%;width: calc(50% - 13px);-webkit-width: calc(50% - 13px);} .locList .loc-item > strong {display: block;font-size: 20px;font-weight: 500;line-height: 1.45;color: #000;} .locList .loc-item .mapArea {position: relative;margin-top: 30px;width: 100%;height: 500px;background-color: #eee;} .locList .loc-item .mapArea iframe {position: absolute;left: 0;top: 0;width: 100%;height: 100%;} .locList .loc-item .txt_box {margin-top: 20px;} .locList .loc-item .txt_box p {display: table;width: 100%;} .locList .loc-item .txt_box p * {display: table-cell;font-size: 16px;font-weight: 300;line-height: 2.13;color: #000;} .locList .loc-item .txt_box p strong {white-space:nowrap;width: 5%;padding-right: 5px;font-weight:500;} @media screen and (max-width: 900px){ .locList .loc-item.half {width: 100%;width: calc(100% - 0);-webkit-width: calc(100% - 0);} } @media all and (max-width:800px){ locWrap {margin-top: 40px;} .locList {padding-top: 40px;} .locList {margin-bottom: -40px;} .locList .loc-item {padding-bottom: 40px;} .locList .loc-item > strong {font-size:16px;} .locList .loc-item .mapArea {margin-top: 20px;height: 300px;} .locList .loc-item .txt_box p * {font-size:14px;line-height:2;} .inq_bot .tip {font-size: 14px;line-height: 22px;margin-top: 20px;} .videoWrap .vidCover:after {width: 80px;height: 80px;} }*/ /* **************************************** * * 그룹소개 :: 오시는길 * **************************************** */ .location_wrap {position:relative; margin:0px auto 80px;} .location_wrap strong {display: block;font-size:25px;font-weight:400;height:50px;color: #000;} .location_area {margin-top:50px; overflow:hidden; flex-wrap:wrap;display: flex;-webkit-display:flex;justify-content:space-between;-webkit-justify-content:space-between;} .location_area .map_img {width:40%;} .location_area .ovInfo {width:57%; box-sizing:border-box;} .location_area .ovInfo > table {border-top: 1px solid #000; width:100%;} .location_area .ovInfo > table tr {border-bottom: 1px solid #e2e2e2;text-align: left;} .location_area .ovInfo > table tr > * {padding: 16px 10px;font-size: 17px;font-weight:400;line-height:1.5;color: #000;box-sizing:border-box;letter-spacing: -0.3px;} .location_area .ovInfo > table th {width:20%;padding-left:30px;} .location_area .ovInfo > table td {text-align: left; font-weight:300;color: #333;letter-spacing: -0.3px;} .location_area .ovInfo > table td em {color: #999;} .location_wrap .mapArea {position: relative;width: 100%; margin:20px auto 0; height:500px;} .location_wrap .mapArea iframe {position: absolute;left: 0;top: 0;width: 100%;height: 100%;} @media screen and (max-width: 900px){ .location_wrap {margin:0px auto 50px;} .location_wrap strong {font-size:22px;height:40px;} .location_area {margin-top:0px; } .location_area .map_img {width:100%;padding-bottom:50px;text-align:center} .location_area .ovInfo {width: 100%;padding-right: 0;margin-top: 0;} .location_area .ovInfo table th {width: 200px;} .location_area .ovInfo table tr > * {font-size:14px;} .location_area .ovInfo table th {width: 110px;padding-left: 10px;padding-right: 0;} } @media screen and (max-width: 430px){ .location_wrap strong {font-size:18px;height:30px;} .location_wrap .mapArea {height: 300px;} } /* **************************************** * * 비지니스 :: ICT * **************************************** */ .business_info_wrap {padding:70px 0; background:#000; background-attachment:fixed !important;} .business_info_wrap dl{text-align:center; color:#fff;} .business_info_wrap dl dt{position:relative; font-size:40px; letter-spacing:-0.5px; font-weight:700; padding-bottom:50px;} .business_info_wrap dl dt .kr{font-size:38px; font-weight:500;} .business_info_wrap dl dt:before{position:absolute; bottom:25px; left:50%; width:60px; height:2px; background-color:#fff; content:""; margin-left:-30px;} .business_info_wrap dl dd{font-size:18px; line-height:1.625} .business_info_wrap dl dd p{padding-top:15px} .business_info_wrap dl dd p:first-child{padding-top:0;} @media screen and (max-width: 680px){ .business_info_wrap {padding:50px 0;} .business_info_wrap dl dt{font-size:30px; letter-spacing:-0.5px; font-weight:700; padding-bottom:50px;} .business_info_wrap dl dt .kr{font-size:38px; font-weight:500;} .business_info_wrap dl dt:before{height:1px;} .business_info_wrap dl dd{font-size:16px;} } @media screen and (max-width: 430px){ .business_info_wrap {padding:50px 0;} .business_info_wrap dl dt{font-size:22px;} .business_info_wrap dl dt .kr{font-size:38px; font-weight:500;} .business_info_wrap dl dd{font-size:16px;} } /*section 01*/ .ict_business_section1 {position:relative;margin-top:25px;} .ict_business_section1 dl {display:inline-block; width:33%; text-align:center; padding: 30px 1%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; overflow:hidden; vertical-align:top} /*.ict_business_section1 li:nth-child(2) {border-right: 1px solid #ddd; border-left: 1px solid #ddd;} .ict_business_section1 li:nth-child(5) {border-right: 1px solid #ddd; border-left: 1px solid #ddd;}*/ .ict_business_section1 .tit-box {letter-spacing:-0.5px; color: #222; } .ict_business_section1 .tit-box .num {font-size:18px; font-style:italic; font-weight:600; text-decoration: underline; font-family: 'play', sans-serif;} .ict_business_section1 .tit-box .tit01 {font-size:22px; font-weight:600; margin-top: 20px;} .ict_business_section1 .tit-box .tit02 {font-size:15px; color: #aaa; margin-top:5px; font-family: 'play', sans-serif;} .ict_business_section1 .txt-box {max-width:350px; margin:20px auto 0;} .ict_business_section1 .txt-box .txt {font-size:17px; line-height:1.8; letter-spacing:-0.5px; color: #777; word-break:keep-all;} @media screen and (max-width: 900px){ .ict_business_section1 .tit-box .num {font-size:16px;} .ict_business_section1 .tit-box .tit01 {font-size:20px; margin-top:20px;} .ict_business_section1 .txt-box {max-width:350px; margin:20px auto 0;} .ict_business_section1 .txt-box .txt {font-size:15px; line-height:1.6;} } @media screen and (max-width: 680px){ .ict_business_section1 dl {width:14.7%; padding:20px 1%;} .ict_business_section1 .tit-box .num {font-size:16px;} .ict_business_section1 .tit-box .tit01 {font-size:20px; margin-top:20px;} .ict_business_section1 .tit-box .tit02 {font-size:16px;} .ict_business_section1 .txt-box {max-width:350px; margin:20px auto 0;} .ict_business_section1 .txt-box .txt {font-size:15px; line-height:1.6;} } @media screen and (max-width: 430px){ .ict_business_section1 dl {padding:10px 1.5%;} .ict_business_section1 dl:first-child {margin-left:10px;} .ict_business_section1 .tit-box .num {font-size:14px;} .ict_business_section1 .tit-box .tit01 {font-size:9px; margin-top:10px;} .ict_business_section1 .tit-box .tit02 {font-size:13px;} .ict_business_section1 .txt-box {max-width:350px; margin:10px auto 0;} .ict_business_section1 .txt-box .txt {font-size:14px; line-height:1.6;} } /*section 02*/ .ict_business_section2 {position:relative;margin-top:100px;background:#eff3f8;} .effect_wrap {padding: 20px 0 300px 0; position: relative;text-align:center;} .effect_wrap .circle-wrap {display: table; margin: 50px auto;background: #ebf0f9; padding: 16px;border-radius: 50%;border: 40px solid #f7f9fc;} .effect_wrap .circle-wrap h3{ color: #102d69; font-size:22px; line-height: 1.4; background: #fff;width: 220px;height: 220px;border-radius: 50%;padding: 50px 0;border: 33px solid #dee6f6;margin: 0;letter-spacing: -0.5px;} .effect_wrap .txt-box{position:absolute;top:43%;} .effect_wrap .txt-box:after{content:'';height:1px;background:#84c5d8;position:absolute;top:20px;} .effect_wrap .txt-box.left{ right:50%;margin-right:300px;} .effect_wrap .txt-box.right{left:50%;margin-left:300px;} .effect_wrap .txt-box.center{left: 50%; -o-transform: translateX(-50%);-ms-transform: translateX(-50%); -moz-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%); margin: 253px 0 0;} .effect_wrap .txt-box.left:after{left:100%; margin-left:47px;} .effect_wrap .txt-box.right:after{right:100%;margin-right:47px;} .effect_wrap .txt-box.center:after{width:1px; height:35px;top:-85px;left:50%;} .effect_wrap .txt-box.box01, .effect_wrap .txt-box.box02{margin-top:-235px;} .effect_wrap .txt-box.box03, .effect_wrap .txt-box.box04{margin-top:-25px;} .effect_wrap .txt-box.box01:after, .effect_wrap .txt-box.box02:after{width:110px;} .effect_wrap .txt-box.box03:after, .effect_wrap .txt-box.box04:after{width:38px;} .effect_wrap .txt-box dt {width: 290px; margin: 0 auto 20px;position:relative; display:block;font-size: 20px; font-weight: 600;height: 42px;line-height: 42px; border-radius: 40px;} .effect_wrap .txt-box.box01 dt , .effect_wrap .txt-box.box02 dt {color: #fff;background: #102d69;} .effect_wrap .txt-box.box03 dt , .effect_wrap .txt-box.box04 dt { color: #fff;background: #102d69;} .effect_wrap .txt-box.box05 dt { color: #fff; background: #102d69;} .effect_wrap .txt-box dt:before{content:'';width:5px; height:5px;position:absolute;top:50%;margin-top:-3px;border-radius:50%;background:#84c5d8} /*.effect_wrap .txt-box dt:after{content:'';width:17px; height:17px;position:absolute;top:50%;margin-top:-10px;border-radius:50%;border:1px solid #102d69;}*/ .effect_wrap .txt-box.left dt:before{left:100%;margin-left:35px;} .effect_wrap .txt-box.left dt:after{left:100%;margin-left:29px;} .effect_wrap .txt-box.right dt:before{right:100%;margin-right:35px;} .effect_wrap .txt-box.right dt:after{right:100%;margin-right:29px;} .effect_wrap .txt-box.center dt:before{margin:-4px 0 0 -3px;top:-40px; left:50%;} .effect_wrap .txt-box.center dt:after{margin:-10px 0 0 -9px;top:-40px; left:50%;} .effect_wrap .txt-box dd{font-size: 16px;color: #4b4b4b;line-height:1.6;} .effect_wrap .txt-box .img{position:absolute;top:-26px;} .effect_wrap .txt-box img{width: 90px;vertical-align:top;} .effect_wrap .txt-box.box01 .img{right:-246px;} .effect_wrap .txt-box.box02 .img{left:-246px;} .effect_wrap .txt-box.box03 .img{right:-173px;} .effect_wrap .txt-box.box04 .img{left:-173px;} .effect_wrap .txt-box.box05 .img{top:-175px; left:50%;margin-left:-45px;} .button {width:50%; margin:20px auto; position:relative; display:block; color: #fff;background: #0e2c55; text-align:center; font-size: 20px; font-weight: 600;height: 100px;line-height: 100px;} .button:hover {background: #00a0e9;} .tn {margin: 50px 0 100px 0;} .tn .organ {margin:15px 0 10px 0;} @media screen and (max-width: 900px){ .ict_business_section2 {margin-top:50px;} .effect_wrap {padding:30px 0 50px;} .effect_wrap .circle-wrap {margin: 30px auto; padding: 9px; border: 28px solid #f7f9fc;} .effect_wrap .circle-wrap h3{font-size:19px; width: 175px;height: 175px;border-radius: 50%;padding:46px 0;border: 21px solid #dee6f6;} .effect_wrap .txt-box{position:relative;;padding-top:85px;margin:0 0 25px !important} .effect_wrap .txt-box dt{ width: 380px; margin:20px auto 20px;} .effect_wrap .txt-box dt a { height: 42px; line-height: 42px; font-size: 20px;} .effect_wrap .txt-box dd{font-size:16px;} .effect_wrap .txt-box.center{-o-transform:none;-ms-transform:none;-moz-transform:none;-webkit-transform:none;transform:none;} .effect_wrap .txt-box.left{right:0;} .effect_wrap .txt-box.right, .effect_wrap .txt-box.center{left:0; } .effect_wrap .txt-box dt:before, .effect_wrap .txt-box dt:after, .effect_wrap .txt-box:after{display:none; } .effect_wrap .txt-box .img{left:50% !important;top:0 !important; right:auto !important; margin-left:-45px;vertical-align:top; width:80px;} } @media screen and (max-width: 430px){ .ict_business_section2 {margin-top:50px;} .effect_wrap {padding:30px 0 50px;} .effect_wrap .circle-wrap {margin: 30px auto; padding: 9px; border: 28px solid #f7f9fc;} .effect_wrap .circle-wrap h3{font-size:19px; width: 175px;height: 175px;border-radius: 50%;padding:46px 0;border: 21px solid #dee6f6;} .effect_wrap .txt-box{position:relative;;padding-top:85px;margin:0 0 25px !important} .effect_wrap .txt-box dt{ width:100%; margin:20px auto 20px;font-size: 17px;} .effect_wrap .txt-box dt a { height: 42px; line-height: 42px; } .effect_wrap .txt-box dd{font-size:15px;} .button {height:70px; line-height:70px; width:80%} } /* **************************************** * * 비지니스 :: ICT2 * **************************************** */ /*section 01*/ .system_wrap01 {position:relative;} .system_wrap01 .system01_cont {margin-top:100px; text-align:center} .system_wrap01 .system01_cont img {margin:0 auto;} .system_wrap01 .system01_cont > ul {max-width:1160px;margin:0 auto;margin-top:20px;} .system_wrap01 .system01_cont > ul:after {content:"";display:block;clear:both;} .system_wrap01 .system01_cont > ul > li {padding:0 3%;float:left;width:25%;color:#222;box-sizing:border-box; text-align:center} @media all and (max-width:900px) { .system_wrap01 .system01_cont {margin-top:50px; text-align:center} .system_wrap01 .system01_cont > ul {max-width:800px;margin:0 auto;margin-top:20px;} .system_wrap01 .system01_cont > ul > li {padding:0 3%;float:left;width:50%;} } @media all and (max-width:430px) { .system_wrap01 .system01_cont > ul > li {font-size:14px;} } /*section 02*/ .system_wrap02 {position:relative;margin:100px auto 0; background:#f5f5f5; padding:100px 0 70px 0} .system_wrap02 .system02_cont {display:flex; flex-wrap:wrap;} .system_wrap02 .system02_cont .bg_img {width:52%; background:url("../images/business/block_sec08_01.png") left top 50px no-repeat; background-size:85% auto; } .system_wrap02 .system02_cont .txt-box {width:48%; margin-left:auto; padding-bottom:60px; word-wrap:break-word; word-break:keep-all;} .system_wrap02 .system02_cont .txt-box .title {font-size:34px; font-weight:600; letter-spacing:-1.5px; text-align:center; color:#102d69;text-align:left;} .system_wrap02 .system02_cont .txt-box .txt {font-size:17px; color:#666; margin-top:20px; letter-spacing:-0.8px; line-height:1.6;} .system_wrap02 .system02_cont .txt-box .top-txt {margin-top:40px;} .system_wrap02 .system02_cont .txt-box .top-txt ul {margin-bottom:20px;} .system_wrap02 .system02_cont .txt-box .top-txt ul li.txt1 {font-size:20px; color:#333; font-weight:500;} .system_wrap02 .system02_cont .txt-box .top-txt ul li.txt2 {font-size:16px; color:#666;} .system_wrap02 .system02_cont .txt-box .bottom-txt .tit {font-size:24px; font-weight:500; color:#0bbbef; margin-top:50px; letter-spacing:-1.5px;} .system_wrap02 .system02_cont .txt-box .bottom-txt .box {font-family: 'play', sans-serif;display:inline-block; width:34px; height:34px; line-height:30px; box-sizing:border-box; color:#0bbbef; border:2px solid #0bbbef; border-radius:6px; text-align:center; font-size:18px; font-weight:500;} .system_wrap02 .system02_cont .txt-box .bottom-txt ul {padding-top:20px} .system_wrap02 .system02_cont .txt-box .bottom-txt ul li {padding:5px 0} .system_wrap02 .system02_cont .txt-box .bottom-txt ul li p {display:inline-block; padding-left:5px;} @media all and (max-width:900px) { .system_wrap02 {margin:70px auto; background:#f5f5f5; padding:50px 0 30px 0} .system_wrap02 .system02_cont .bg_img {width:80%; height:600px; background-position:center bottom 50%; margin:0 auto;} .system_wrap02 .system02_cont .txt-box {width:100%; max-width:500px;margin:-15% auto 0;padding-bottom:40px; text-align:center;} .system_wrap02 .system02_cont .txt-box .title {text-align:center; } .system_wrap02 .system02_cont .txt-box .top-txt {margin-top:20px;} .system_wrap02 .system02_cont .txt-box .bottom-txt ul {padding-top:20px} .system_wrap02 .system02_cont .txt-box .bottom-txt ul li p {position:relative;} .system_wrap02 .system02_cont .txt-box .bottom-txt ul li p::before{content:' ';display: block;position: absolute;left:-12px;top:9px;width:10px;height:10px;background: #fff;border:3px solid #0bbbef;border-radius:50%;} .system_wrap02 .system02_cont .txt-box .bottom-txt .box {display:none} } @media all and (max-width:480px) { .system_wrap02 {margin:70px auto; background:#f5f5f5; padding:50px 0 30px 0} .system_wrap02 .system02_cont .bg_img {width:100%; height:400px; background-position:center bottom 80%; margin:0 auto;} .system_wrap02 .system02_cont .txt-box {width:100%; max-width:500px; padding-bottom:0px; margin:0 auto} .system_wrap02 .system02_cont .txt-box {width:100%; margin-top:-15%; padding-bottom:40px; text-align:center;} .system_wrap02 .system02_cont .txt-box .title {font-size:22px } .system_wrap02 .system02_cont .txt-box .txt {font-size:15px; margin-top:10px; line-height:1.4;} .system_wrap02 .system02_cont .txt-box .top-txt {margin-top:20px;} .system_wrap02 .system02_cont .txt-box .top-txt ul {margin-bottom:20px;} .system_wrap02 .system02_cont .txt-box .top-txt ul li.txt1 {font-size:17px;} .system_wrap02 .system02_cont .txt-box .top-txt ul li.txt2 {font-size:15px;} .system_wrap02 .system02_cont .txt-box .bottom-txt .tit {font-size:18px;margin-top:30px;} .system_wrap02 .system02_cont .txt-box .bottom-txt ul {padding-top:20px} .system_wrap02 .system02_cont .txt-box .bottom-txt ul li {padding:5px 0;line-height:1.4} .system_wrap02 .system02_cont .txt-box .bottom-txt ul li p {font-size:15px;} } /*section 03*/ .system_wrap03 {position:relative;text-align:center;} .system_wrap03 ul {max-width:680px;margin:0 auto;} .system_wrap03 ul:after {content:"";display:block;clear:both;} .system_wrap03 li {position:relative;margin-left:80px;padding:0 3%;float:left;width:300px;height:300px;padding:0 3%;border:1px solid #102d69;border-radius:100%;box-sizing:border-box;} .system_wrap03 li:first-child {margin-left:0;} .system_wrap03 li:nth-child(2n), .system_wrap03 li:nth-child(2n) span {color:#fff;background:#102d69;} .system_wrap03 li:before {content:"";position:absolute;left:-20%;top:50%;transform:translateY(-50%);width:37px;height:37px;background:url('../images/common/area_icon.png') no-repeat center center / cover;} .system_wrap03 li:first-child:before {display:none;} .system_wrap03 li span {font-size:24px;font-weight:600;color:#222; padding-top:10px} .system_wrap03 li p {padding-top:10px} .system_wrap03 .system03_cont .txtbox {width:90%; padding:4% 42px;background:#f1fafc; margin:20px auto;} .system_wrap03 .system03_cont .tit {position:relative;font-weight:600;color:#222;margin:20px auto;font-size:30px;} .system_wrap03 .system03_cont .txt {font-size:17px; margin-top:20px; letter-spacing:-0.8px; line-height:1.6; font-weight:300} .system_wrap03 .system03_cont .txt2 {color:#2874c5; font-size:15px; margin-top:20px; letter-spacing:-0.8px; line-height:1.6; font-weight:300} @media all and (max-width:720px) { .system_wrap03 ul {width:250px;margin:0 auto;} .system_wrap03 li {position:relative;margin-left:0px;margin-top:70px;padding:0 3%;float:none;width:250px;height:250px;padding:0 5%;} .system_wrap03 li:first-child {margin-top:0;} .system_wrap03 li:before {left:45%;top:-35px;transform:translateY(-50%);} } @media all and (max-width:430px) { .system_wrap03 ul {width:200px;margin:0 auto;} .system_wrap03 li {position:relative;margin-left:0px;margin-top:70px;padding:0 3%;float:none;width:200px;height:200px;padding:0 5%;} .system_wrap03 li span {font-size:19px;} .system_wrap03 li p {font-size:14px; line-height:1.4} .system_wrap03 li:before {left:42%;top:-35px;transform:translateY(-50%);} .system_wrap03 .system03_cont .txt2 {font-size:10px;} .system_wrap03 .system03_cont .txtbox {width:95%; padding:10% 20px;} .system_wrap03 .system03_cont .tit {font-size:27px;} } /*section 04 - 06 공통*/ .system_wrap04 > .h3_tit_type h3:after, .system_wrap05 > .h3_tit_type h3:after, .system_wrap06 > .h3_tit_type h3:after{display:none;} @media all and (max-width: 900px) { .system_wrap04 > .h3_tit_type, .system_wrap05 > .h3_tit_type, .system_wrap06 > .h3_tit_type {margin:80px 0 30px 0; text-align:center} .system_wrap04 > .h3_tit_type h3, .system_wrap05 > .h3_tit_type h3, .system_wrap06 > .h3_tit_type h3 {font-size:24px;padding-right:0px;} } @media all and (max-width: 430px) { .system_wrap04 > .h3_tit_type, .system_wrap05 > .h3_tit_type, .system_wrap06 > .h3_tit_type {margin:50px 0 20px 0; text-align:center} .system_wrap04 > .h3_tit_type h3, .system_wrap05 > .h3_tit_type h3, .system_wrap06 > .h3_tit_type h3 {font-size:20px;padding-right:0px;} } /*section 04*/ .system_wrap04 {position:relative;} .system_wrap04 .system04_cont {margin-top:50px;background:none;text-align:center} .system_wrap04 .system04_cont:after {content:"";display:block;clear:both;} .system_wrap04 .system04_cont .txt-box {padding:4% 42px 0;margin-right:1%;float:left;width:32.6%;min-height:280px;background:#f1fafc;} .system_wrap04 .system04_cont .txt-box:last-child {margin-right:0;} .system_wrap04 .system04_cont .tit {position:relative;font-weight:600;color:#222;padding-bottom:20px;font-size:26px;} .system_wrap04 .system04_cont .tit:after {content:"";position:absolute;left:50%;bottom:0px;transform:translateX(-50%);width:35px;height:1px;background:#0140d3;} .system_wrap04 .system04_cont .txt {font-size:17px; margin-top:20px; letter-spacing:-0.8px; line-height:1.6; font-weight:300} @media all and (max-width: 900px) { .system_wrap04 .system04_cont {margin-top:20px;} .system_wrap04 .system04_cont .txt-box {padding:4% 30px;margin-right:0%;margin-top:1%;float:none;width:100%;min-height:100px;background:#f1fafc;} .system_wrap04 .system04_cont .tit {padding-bottom:24px;font-size:22px;line-height:1.8;} } @media all and (max-width: 430px) { .system_wrap04 .system04_cont .tit {padding-bottom:24px;font-size:18px;line-height:18px;} .system_wrap04 .system04_cont .txt {font-size:14px;} } /*section 05*/ .system_wrap05 {position:relative;} .system_wrap05 .system05_cont { border-spacing:13px; overflow:hidden} .system_wrap05 .system05_cont dl{width:48%;height:auto;padding:0;border:1px solid #102d69;background-color:#fff;box-sizing:border-box;vertical-align:top;float:left;margin:0 1%} .system_wrap05 .system05_cont dt{height:96px;line-height:1.3em;margin-bottom:0;padding:10px 30px;color:#fff;background-color:#102d69;box-sizing:border-box;font-size:22px; font-weight:500} .system_wrap05 .system05_cont dt:before{content:"";display:inline-block;height:100%;vertical-align:middle;} .system_wrap05 .system05_cont dt span{display:inline-block;vertical-align:middle;} .system_wrap05 .system05_cont dd{min-height:169px;padding:25px 25px;color:#666;box-sizing:border-box;} .system_wrap05 .system05_cont:before, .system_wrap05 .system05_cont dl:after{display:none;} .system_wrap05 .system05_cont .text-list {clear:both;} .system_wrap05 .system05_cont .text-list > li {position:relative;line-height:1.75;padding-left:0.75em;font-size:17px;} .system_wrap05 .system05_cont .text-list > li:before {content:"-";position:absolute;left:0;top:0;} .system_wrap05 .system05_cont .text-list > li + li {margin-top:0.5em;} @media all and (max-width: 900px) { .system_wrap05 .system05_cont dl {width:100%;margin:0 0} .system_wrap05 .system05_cont dt{height:50px;padding:5px 30px;font-size:20px;text-align:center} .system_wrap05 .system05_cont dd{min-height:150px;padding:24px 30px;font-size:16px;color:#888;box-sizing:border-box;} .system_wrap05 .system05_cont .text-list > li {padding-left:0;line-height:1.6;text-align:center} .system_wrap05 .system05_cont .text-list > li:before {content:"";position:absolute;left:0;top:0;} } @media all and (max-width: 430px) { .system_wrap05 .system05_cont dt{height:50px;padding:5px 30px;font-size:17px;text-align:center} .system_wrap05 .system05_cont .text-list > li {font-size:15px;line-height:1.4;} } /*section 06*/ .system_wrap06 {position:relative;margin:0 auto 130px;} .system_wrap06 .system06_cont {position:relative;background:url('../images/common/qm_bp_bar.gif');background-size:4px;text-align:center;background-repeat:repeat-x;background-position:0 83px;} .system_wrap06 .system06_cont:after {content:"";position:absolute;right:-1px;top:76px;width:12px;height:18px;background:url('../images/common/bp_bar_arr_w.png') no-repeat center bottom / cover;} .system_wrap06 .system06_cont dl {margin-right:5%;width:20%;display:inline-block;vertical-align:top;} .system_wrap06 .system06_cont dl:last-child {margin-right:0;} .system_wrap06 .system06_cont dt {display:inline-block;padding:75px 34px 0;} .system_wrap06 .system06_cont dt {padding-top:70px;position:relative;font-weight:600;color:#222;font-size:22px} .system_wrap06 .system06_cont dl.icon01 dt {background:#fff url('../images/common/bp_icon1.png') no-repeat center top / 60px;} .system_wrap06 .system06_cont dl.icon02 dt {background:#fff url('../images/common/bp_icon2.png') no-repeat center top / 56px;} .system_wrap06 .system06_cont dl.icon03 dt {background:#fff url('../images/common/bp_icon3.png') no-repeat center top / 54px;} .system_wrap06 .system06_cont dl.icon04 dt {background:#fff url('../images/common/bp_icon4.png') no-repeat center top / 54px;} .system_wrap06 .system06_cont dd {padding-top:20px;font-size:16px;text-align:center; line-height:1.6} @media all and (max-width: 900px) { .system_wrap06 .system06_cont dd {padding-top:20px;font-size:14px;text-align:center; line-height:1.6} } @media all and (max-width: 680px) { .system_wrap06 {position:relative;margin:0 auto 50px;} .system_wrap06 .system06_cont {padding:35px 0 50px;background-repeat:repeat-y;background-position:center;} .system_wrap06 .system06_cont:after {left:50%;bottom:-1px;transform:translateX(-50%);width:21px;height:14px;background:url('../images/common/bp_bar_arr.png') no-repeat center bottom / cover;} .system_wrap06 .system06_cont dl {margin-right:0;width:100%;display:block;vertical-align:top;margin-bottom:70px;padding:15px 0 13px;background:#fff;} .system_wrap06 .system06_cont dl:last-child {margin-bottom:0;} .system_wrap06 .system06_cont dd {font-size:15px} } /* **************************************** * * 비지니스 :: Display * **************************************** */ .display_business_section {margin-top:80px} .display_business_section .areaTop {text-align:center;} .display_business_section .areaCnt {background:#f9f9f9;} .display_business_section .areaCnt li .businessInfo {padding:40px 25px;} .businessInfo .tit {font-weight:400;color:#222;text-transform:uppercase;} .businessInfo .tit span {font-weight:600; display:block;} .businessInfo ul li {color:#999;} .businessImg.businessImg_txt {padding-top:0;} .businessImg {overflow:hidden;width:100%;padding-top:78.65%;background-repeat:no-repeat;background-size:cover;background-position:center center;} .businessImg img {width:100%;} .businessTxt {padding:0 8%;} .display_business_section .areaToggle {} .areaToggle .item {} .areaToggle .item button {font-weight:600;color:#222;} @media all and (max-width: 1279px) { .businessInfo .tit {font-size:24px;line-height:1.6;} .businessInfo .sub {margin-top:14px;font-size:16px;line-height:1.6;} .businessInfo ul {margin-top:16px;} .businessInfo ul li {font-size:13px;line-height:22px;} .businessImg.businessImg_txt {padding:33% 0;} .display_business_section .areaToggle {padding:0 15px;} .areaToggle .item {border-top:1px solid #e5e5e5;} .areaToggle .item:last-child {border-bottom:1px solid #e5e5e5;} .areaToggle .item button {display:block;position:relative;width:100%;height:62px;padding:0 10px;font-size:18px;line-height:62px;text-align:left;box-sizing:border-box;} .areaToggle .item button:after {content:'';display:block;position:absolute;right:14px;top:50%;padding:4px;border:solid #e6e6e6;border-width:0 2px 2px 0;-webkit-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);} .areaToggle .item.open {border-color:#222;border-bottom:1px solid #222;} .areaToggle .item.open button:after {border-color:#222;-webkit-transform:translateY(-50%) rotate(-135deg);transform:translateY(-50%) rotate(-135deg);} .areaToggle .item .sub {display:none;padding:0 10px 45px;} .areaToggle .item .sub li {margin-top:8px;font-size:12px;line-height:30px;} .display_business_section .areaTop > p {margin-top:10px;} } @media all and (max-width: 430px) { .businessInfo .tit {font-size:22px;line-height:1.4;} .businessInfo .sub {margin-top:14px;font-size:14px;} .businessInfo .sub_btn {color:#00448d;} } @media all and (max-width:767px) { .display_business_section .areaTop {padding:75px 6.5% 60px;} } @media all and (min-width:768px) and (max-width:1279px) { .display_business_section .areaTop {padding:75px 8% 60px;} } @media all and (min-width: 1280px) { .display_business_section .areaTop {max-width:1400px;margin:0 auto;padding:157px 13% 125px;} .display_business_section .areaTop > p {margin-top:20px;font-size:16px;line-height:30px;} .display_business_section .areaCnt > li {position:relative;} .display_business_section .areaCnt > li:after {content:"";display:block;clear:both;} .display_business_section .areaCnt > li > div {width:50%;} .display_business_section .areaCnt > li .businessInfo {padding:0;position:absolute;left:0%;top:0;width:50%;height:100%;padding:0 8%;} .display_business_section .areaCnt > li:nth-child(2n) .businessInfo {left:50%;} .businessInfo .tit {font-size:32px;line-height:1.4} .businessInfo .sub {margin-top:24px;font-size:17px;line-height:30px;} .businessInfo .sub_btn {color:#00448d;} .businessInfo ul {margin-top:42px;} .businessInfo ul li {font-size:16px;line-height:30px;} .businessImg {padding-top:34.7%;margin-left:50%;} .businessImg.businessImg_txt {padding:11.35% 0;} .display_business_section .areaCnt > li:nth-child(2n) .businessImg {margin-left:0%;} .display_business_section .areaToggle {max-width:1520px;padding:24px 60px 180px;margin:0 auto;} .display_business_section .areaToggle:after {content:'';display:block;clear:both;} .areaToggle .item {float:left;width:19%;margin-right:8%;white-space:nowrap;} .areaToggle .item:last-child {margin-right:0;} .areaToggle .item button {font-size:26px;line-height:30px;cursor:default;} .areaToggle .item .sub {display:block !important;margin-top:27px;} .areaToggle .item .sub li {margin-top:16px;line-height:58px;border-bottom:1px solid #000;} .areaToggle .item .sub li a:hover {color:#0140d3;} .areaToggle .item .sub li:first-child {margin-top:0;} .areaToggle .item .sub li:last-child {border-bottom:0;} } /* **************************************** * * Reference :: 갤러리 리스트 * **************************************** */ .board_wrap {position:relative; max-width:1400px; margin:80px auto 130px;} .gallery_list_wrap {position:relative; overflow:hidden; margin-top:30px;} .gallery_list_wrap ul{margin: 0 -1%;} .gallery_list_wrap li{float:left; width:31.3333333%; margin:0 1% 2%;} .gallery_list_wrap li a{display:block; position:relative; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;border:1px solid #eee;} .gallery_list_wrap li a .gallery-thum-box{position: relative; overflow: hidden; background-color: #e3e3e3; height: 250px;} /* padding-top 으로 이미지의 비율 조정 */ .gallery_list_wrap li a .gallery-thum {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display:block; overflow:hidden;} .gallery_list_wrap li a .gallery-thum-over {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display:block; overflow:hidden; opacity: 0;} .gallery_list_wrap li a:hover .gallery-thum-over{opacity: 1; transition: 1s;} .gallery_list_wrap li a:hover .gallery-thum{opacity: 0; transition: 1s;} .gallery_list_wrap li a .gallery-thum-box img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s; object-fit: cover;} .gallery_list_wrap li a .gallery-info-box{padding: 25px 5px; word-break: keep-all; text-align:center} .gallery_list_wrap li a .gallery-info-box .gal-category{display:block; color:#ed1c24; font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .gallery_list_wrap li a .gallery-info-box .gal-title{font-size:20px; color:#222; font-weight: 500; letter-spacing:-0.75px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .gal-title_cate{ color: #00a0e9;} .gallery_list_wrap li a .gallery-info-box .gal-day{display: block; color:#aaa; font-size:13px; font-weight:400; } /* .gallery_list_wrap li a:hover .gallery-thum img { -webkit-transform: scale(1.1) rotate(0.02deg); -moz-transform: scale(1.1) rotate(0.02deg); -ms-transform: scale(1.1) rotate(0.02deg); -o-transform: scale(1.1) rotate(0.02deg); transform: scale(1.1) rotate(0.02deg); } */ .gallery_list_wrap li a:hover {position:relative;border:1px solid #00aeef;} @media all and (max-width:1024px){ .gallery_list_wrap li a .gallery-info-box{padding:15px 5px;} .gallery_list_wrap li a .gallery-info-box .gal-title{font-size:17px; margin:10px 0;} } @media all and (max-width:800px){ .board_wrap {margin:30px auto 80px;} .gallery_list_wrap{margin-top:2%} .gallery_list_wrap li{width:48%} .gallery_list_wrap li a .gallery-info-box .gal-category{font-size:10px;} .gallery_list_wrap li a .gallery-info-box .gal-title{font-size:15px;} .gallery_list_wrap li a .gallery-info-box .gal-day{font-size:10px;} } @media all and (max-width:600px){ .board_cont {padding:20px 20px;font-size:14px;} .gallery_list_wrap li a .gallery-info-box{padding:10px 5px;} .gallery_list_wrap li a .gallery-info-box .gal-category{font-size:10px;} .gallery_list_wrap li a .gallery-info-box .gal-title{font-size:13px;} .gallery_list_wrap li a .gallery-info-box .gal-day{font-size:10px;} } /* **************************************** * * 공지사항 :: 리스트 * **************************************** */ .notice_list_wrap {position:relative; overflow:hidden; margin-top:30px; margin-bottom:30px; border-top:1px solid #e3e3e3;} .notice_list_wrap:after{clear:both; display:block; content:"";} .notice_list_wrap li {border-bottom: 1px solid #e3e3e3;transition: background 0.5s ease-in-out;-webkit-transition: background 0.5s ease-in-out;padding:20px 0} .notice_list_wrap li:hover {background-color: #f2f2f2;} .notice_list_wrap a {position: relative;display:flex; -webkit-display: flex;align-items:center;-webkit-align-items:center;box-sizing:border-box;} .notice_list_wrap a > span {display: block;} .notice_list_wrap a .thum {width: 30%;padding-left:30px} .notice_list_wrap a .thum .thum_inner {display: block;padding-top: 50%;background-color: #e3e3e3;-webkit-background-size: cover;background-size: cover;background-position: center center;background-repeat: no-repeat;} .notice_list_wrap a .thum img {width:100%;max-height:220px;} .notice_list_wrap a .thum .thum_inner img {display: none;} .view_file_download_wrap{display: flex; justify-content: space-between;} .view_file_download{text-align: center; margin-right: 50px;} .view_file_download_first{width: 90%;} .library_list_wrap a {display: inline-block;} .notice_list_wrap .txt_box {position: relative;width: 68%;display: flex;flex-direction:column;justify-content:center;-webkit-display: flex;-webkit-flex-direction:column;-webkit-justify-content:center; padding-left:50px;box-sizing:border-box;} .notice_list_wrap .txt_box .date {font-family:'play';display: block; color:#aaa; font-size:15px; font-weight:400;} .notice_list_wrap .txt_box .tit {margin-top: 7px;font-size: 20px;font-weight:500;line-height: 1.45;color: #101010;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .notice_list_wrap .txt_box p {margin-top: 13px;line-height: 22px;height: 22px;font-weight:300;font-size: 16px;color: #222;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;} .notice_list_wrap .txt_box .btn_view {font-family:'play'; color:#00aeef; font-size:14px; font-weight:700; line-height: 40px;margin-top: 10px; } .notice_icon{color: #00aeef; font-size: 18px; } @media all and (max-width:800px){ .notice_list_wrap li { padding: 15px 0} .notice_list_wrap a .thum { width: 30%; padding-left: 0px} .notice_list_wrap a .thum .thum_inner { display: block; padding-top: 70%; } .notice_list_wrap .txt_box .date { font-size: 14px; } .notice_list_wrap .txt_box .tit { font-size: 18px; } .notice_list_wrap .txt_box p { margin-top: 10px; } .notice_list_wrap .txt_box .btn_view { margin-top: 10px; } .s_sec_05_03_box_in .thum_inner { padding: 30px 0 30px 0; display: block; -webkit-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; } .s_sec_05_03_box_txt { padding-left: 30px; } .s_sec_05_03_box_txt { padding-left: 0; } .s_sec_05_03_box_wrap_in { display: grid; grid-template-columns:calc(50% - 10px) calc(50% - 10px); grid-column-gap: 20px; grid-template-rows: 1fr ; } .view_file_download{margin:0 auto;} .library_list_wrap .txt_box{padding-left: 0;} .view_file_download a{width: 100%;} .library_list_wrap .txt_box {width: 100%;} .notice_list_wrap .txt_box .btn_view {margin-top:0px;} .view_file_download_wrap {display: flex; flex-direction:column; gap: 10px;} } @media all and (max-width:600px){ .notice_list_wrap a .thum {width:30%;padding-left:0px} .library_list_wrap .txt_box {padding-left:0px;} .notice_list_wrap .txt_box {padding-left:20px;} .notice_list_wrap .txt_box .date {font-size:14px;} .notice_list_wrap .txt_box .tit {font-size:16px;} .notice_list_wrap .txt_box p {margin-top:0px;} .notice_list_wrap .txt_box .btn_view {margin-top:0px;} .view_file_download_wrap {display: flex; flex-direction:column; gap: 10px;} } /* **************************************** * * 갤러리,공지사항 :: 상세페이지 * **************************************** */ .board_view_wrap {position:relative;max-width:1200px;margin:0 auto} .board_cont {padding:30px 30px;min-height:150px;line-height:1.7;font-size:17px;border-bottom: 1px solid #e4e4e4;font-weight:300;color: #222;text-align:center;} .gallery_view_title {position:relative;border-bottom: 1px solid #e4e4e4;padding:0px 0 40px 0;text-align:center} .gallery_view_title h3 {font-weight:500;font-size:28px;line-height:2.2} .gallery_view_title span.en_tit {font-family:'play';display: block; color:#999;font-size:18px} /* 갤러리 슬라이드 이미지 */ .gallery{position:relative;} .gallery-thumbs .swiper-slide img {width: 100%;height: 100%;} .swiper-container {width: 100%; height: 300px; margin-left: auto; margin-right: auto;} .swiper-slide {background-size: cover; background-position: center;} .gallery-top { height: 100%; max-height: 675px; width: 100%; margin-bottom: 10px !IMPORTANT;} .gallery-top > .swiper-wrapper > .swiper-slide img {min-height: 675px} .gallery-thumbs {height: 20%; height: 65px; box-sizing: border-box; padding: 10px 0; margin-bottom: 50px !important;} .gallery-thumbs .swiper-slide { height: 100%; opacity: 1;} .gallery-thumbs .swiper-slide-thumb-active { opacity: 1;border: 2px solid #00aeef;} /* 공지사항 */ .notice_view_title .noti {background:#00aeef;color:#fff;padding:10px 21px;font-size:15px; margin-right:20px} .notice_view_title{position:relative;border-top: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;padding:40px 30px;text-align:center} .notice_view_title h3 {font-weight:400;font-size:28px;line-height:2.4} .notice_view_title span.noti_date{font-family:'play';display: block; color:#aaa;font-size:18px} .board_bottom_btn{position:relative;text-align:center;margin-top:30px} .board_bottom_btn img{vertical-align:middle} .board_bottom_btn > div span{display:inline-block;border:1px solid #000;width:70px;height:70px;line-height:65px} .board_bottom_btn > div p{display:inline-block;font-weight:400 !important;color:#222 !important} .arr_left p{margin-left:10px} .arr_right p{margin-right:9px} .arr_thumb_img{ border: none!important;} .arr_thumb_img img{width: 100%; height: 100%;} .arr_list a{display:inline-block;border:1px solid #00aeef;padding:20px 30px} .board_bottom_btn .arr_left{position:absolute;left:0;top:0;} .board_bottom_btn .arr_right{position:absolute;right:0;top:0;} /* opacity:0.4;filter:alpha(opacity=40);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" */ @media screen and (max-width:800px){ .gallery_view_title {padding:10px 0 20px 0;} .gallery_view_title h3 {font-size:22px;line-height:2} .gallery_view_title span.en_tit {font-size:14px} .gallery-top {max-height: 450px; } .gallery-top > .swiper-wrapper > .swiper-slide img {min-height: 450px} .gallery-thumbs { height: 45px; margin-bottom: 30px !important;} .notice_view_title .noti{position:absolute;top:-1px;background:#00aeef;color:#fff;padding:10px 21px;font-size:15px} .notice_view_title{overflow:hidden;padding:20px 0} .notice_view_title h3{font-size:22px;padding:0 20px;} .notice_view_title span.noti_date{font-size:15px;padding-top:5px;} .board_cont {padding:20px 20px;font-size:16px;} .board_bottom_btn > div span {width:63px;height:63px;line-height:61px;font-size:1em} .arr_list a{padding:10px} } @media screen and (max-width:600px){ .gallery-top {max-height: 338px; } .gallery-top > .swiper-wrapper > .swiper-slide img {min-height: 338px} .gallery-thumbs { height: 40px; margin-bottom: 30px !important;} .notice_view_title h3{font-size:18px;line-height:1.6} .board_cont {padding:20px 20px;font-size:15px;} .board_bottom_btn > div p{display:none} .board_bottom_btn > div span {width:43px;height:43px;line-height:37px} } @media screen and (max-width:430px){ .gallery-top {max-height: 242px; } .gallery-top > .swiper-wrapper > .swiper-slide img {min-height: 242px} .gallery-thumbs { height: 30px; padding: 5px 0; margin-bottom: 20px !important;} } /* **************************************** * * 고객지원 :: 채용정보 * **************************************** */ .talent_wrap {position:relative; margin:0px auto 130px;} .talent_wrap .conBox01 ul {} .talent_wrap .conBox01 ul li {float:left;width:25%;text-align:center;padding:20px 5px;} .talent_wrap .conBox01 ul li dl {margin-top:10px;} .talent_wrap .conBox01 ul li dl dt {font-size:24px;color:#102d69;font-weight:700;padding-top:10px} .talent_wrap .conBox01 ul li dl dd {font-size:18px;color:#666;margin-top:5px;font-weight:300;} .talent_wrap .txtBox {padding:20px 30px;background:#f8f8f8;margin-bottom:} .talent_wrap table {width:100%;} .talent_wrap table td {} .talent_wrap table dl {float:left;padding:10px 0;line-height:1.6} .talent_wrap table dt {font-size:17px;color:#333;font-weight:700;float:left;width:145px;} .talent_wrap table dd {padding-left:150px;font-size:17px;color:#666;font-weight:300;} .talent_wrap .conBox02 table dl {width:50%;} .talent_wrap .conBox03 table dl {width:100%;} .talent_wrap .conBox03 table tr:first-child dl {width:100%;} .talent_wrap .conBox04 ul {margin:-5px;background:#000;} .talent_wrap .conBox04 ul li {float:left;width:25%;padding:5px;text-align:center;} .talent_wrap .conBox04 ul li .inner {background:#f8f8f8;height:150px;} .talent_wrap .conBox04 ul li .inner p {font-size:16px;color:#666;} .talent_wrap .conBox04 ul li .inner p.step {color:#102d69;font-weight:700;} .talent_wrap .conBox04 ul li .inner p strong {font-size:25px;color:#333;font-weight:700;} .talent_wrap .table {display:table;width:100%;height:100%;table-layout:fixed;} .talent_wrap .tableCell {display:table-cell;vertical-align:middle;} @media all and (max-width:1400px){ .talent_wrap .conBox01 ul li dl dd br {content:"";} } @media screen and (max-width:1024px){ .talent_wrap .conBox01 ul li {width:50%;} .talent_wrap .conBox04 ul li {width:50%;} } @media screen and (max-width:800px) { .talent_wrap {margin:0px auto 50px;} .talent_wrap table dl {width:100%;float:none;} .talent_wrap .conBox02 table dl {width:100%;} } @media screen and (max-width:600px) { .talent_wrap .conBox01 ul li dl dt {font-size:18px;} .talent_wrap .conBox01 ul li dl dd {font-size:14px;} .talent_wrap .txtBox {padding:10px 20px;} .talent_wrap table dt {width:110px;font-size:14px;} .talent_wrap table dd {padding-left:120px;font-size:14px;word-break:break-all;} .talent_wrap .conBox04 ul li .inner p strong {font-size:18px;} .talent_wrap .conBox04 ul li .inner p {font-size:14px;} } /* **************************************** * * 고객지원 :: 온라인문의 * **************************************** */ .request_wrap {position:relative; margin:80px auto 130px;} .request_wrap .conBox {background:#f8f8f8;padding:25px;overflow:hidden;} .request_wrap .conBox * {line-height:42px;} .request_wrap .conBox input[type="text"], .request_wrap .conBox select {height:42px;line-height:42px;color:#666;padding:0 10px;width:100%;} .request_wrap .conBox ul {margin-bottom:-5px;} .request_wrap .conBox ul li {float:left;width:50%;padding-right:70px;margin-bottom:10px;} .request_wrap .conBox ul li dl dt {float:left;width:100px;font-size:15px;color:#333;} .request_wrap .conBox ul li dl dd {padding-left:100px;font-size:15px;color:#666;} .request_wrap .conBox ul li dl dd > label {margin-right:21px;} .request_wrap .conBox .emailForm .flex {width:75%;float:left;margin:0 -15px;} .request_wrap .conBox .emailForm .flex span {display:block;float:left;width:50%;padding:0 15px;position:relative;} .request_wrap .conBox .emailForm .flex span:first-child:after {content:"@";position:absolute;top:0;right:-8px;} .request_wrap .conBox .emailForm > span {display:block;float:right;width:30%;} .request_wrap hr {height:1px;border:none;} .request_wrap textarea {height:200px;resize:none;overflow-y:scroll;} @media screen and (max-width:1024px){ .request_wrap .conBox ul li:nth-child(6) {width:100%;} .request_wrap .conBox ul li {padding-right:20px;} .request_wrap .conBox .emailForm .flex {display:flex;justify-content:space-between;margin:0;} .request_wrap .conBox .emailForm .flex span {margin:0;width:46%;padding:0;} .request_wrap .conBox .emailForm .flex span:first-child:after {right:-13%;} .request_wrap .conBox .emailForm > span {width:24%;} .request_wrap .conBox02 ul li {width:100%;} } @media screen and (max-width:800px){ .request_wrap {position:relative; margin:40px auto 50px;} .agreeBox {padding:20px;} .request_wrap .conBox * {line-height:30px;} .request_wrap .conBox {padding:15px;} .request_wrap .conBox ul {margin-top:-10px;} .request_wrap .conBox ul li {width:100%;padding-right:0;margin-top:10px;} .request_wrap .conBox ul li dl dt {width:70px;font-size:15px;float:none;width:auto;line-height:1;margin-bottom:5px;} .request_wrap .conBox ul li dl dd {padding-left:0;font-size:13px;} .request_wrap .conBox input[type="text"], .request_wrap .conBox select {height:30px;line-height:30px;} .request_wrap .conBox .emailForm .flex {width:100%;float:none;} .request_wrap .conBox .emailForm > span {float:none;margin-top:5px;width:46%;} .request_wrap .conBox01 ul li dl dd > label {display:block;float:left;width:33.33%;margin-right:0;} } .placeholder_wrap {width:100%; height:100%; box-sizing:border-box; position:relative; display:inline-block;} .placeholder_wrap .placeholder {color:#777;font-size:14px;font-weight:300;position:absolute;top:10px;left:20px;background-image: none !important;} .placeholder_wrap .placeholder.required {padding-right:10px;} .placeholder_wrap .placeholder.required:before {content:'*'; position:absolute; top:1px; right:0;} .placeholder_wrap input[type='text'], .placeholder_wrap textarea {width:100%; height:100%; padding-right:50px; padding-left:20px; border:0; box-sizing:border-box;} .placeholder_wrap textarea {height:100%; padding-top:20px; padding-right:20px; padding-bottom:20px;} /* 온라인 문의 */ .inquiry_content {margin-top:40px} .inquiry_content ul:after {clear:both; content:''; display:block;} .inquiry_content .inquiry_info {margin-top:-10px; margin-left:-10px;} .inquiry_content .inquiry_info > li {width:100%; height:60px; padding-top:10px; padding-left:10px; box-sizing:border-box; float:left;} .inquiry_content .inquiry_info > li.textarea {width:100%; height:210px;} .inquiry_content .inquiry_info > li > * {border:1px solid #dfdfdf;} .inquiry_file {margin-top:30px;} .inquiry_file > li + li {margin-top:10px;} .inquiry_content .policy_wrap {margin-top:60px;} .inquiry_content .policy_wrap > div {max-height:250px; padding:20px; border:1px solid #dfdfdf; overflow:auto; color:#777; font-size:15px;} .policy_wrap .agree {margin-top:20px; color:#999; font-size:13px; font-weight:300; line-height:1.3;} .fileBox {position:relative;} .fileBox:after {clear:both; content:''; display:block;} .fileBox > * {float:left;} .fileBox .uploadBtn {display:none;} .fileBox .fileName {width:calc(100% - 264px); height:50px; padding:0 20px; border:1px solid #dfdfdf; box-sizing:border-box;} .fileBox .btn_file {width:150px; height:50px; margin-left:10px; font-size:14px; line-height:48px; border:1px solid #646464; box-sizing:border-box; text-align:center; cursor:pointer;} .fileBox .btn_add {margin-left:4px;} .fileBox .btn_add span {width:100px; height:50px; padding-left:10px; font-size:14px; line-height:48px; border-color:#646464; position:relative;} .fileBox .btn_add span:before, .fileBox .btn_add span:after {width:13px; height:1px; background-color:#000; content:''; position:absolute; top:50%; left:20px; display:inline-block;} .fileBox .btn_add span:after {transform:rotate(90deg);} .fileBox .file_layer {width:calc(100% - 264px); position:absolute; top:0; bottom:0; left:0; display:inline-block;} .fileBox .btn_del {margin-top:-14px; position:absolute; top:50%; right:20px;} .fileBox .btn_del span {padding-left:20px; position:relative;} .fileBox .btn_del span:before, .fileBox .btn_del span:after {width:13px; height:1px; background-color:#000; content:''; position:absolute; top:50%; left:0; display:inline-block;} .fileBox .btn_del span:before {transform:rotate(45deg);} .fileBox .btn_del span:after {transform:rotate(-45deg);} @media screen and (max-width:800px){ .inquiry_content .inquiry_info > li {width:100%; height:52px;} .fileBox .fileName {width:calc(100% - 184px); height:42px;} .fileBox .btn_file {width:100px; height:42px; line-height:40px;} .fileBox .btn_add span {width:70px; height:42px; line-height:40px;} .fileBox .btn_add span:before, .fileBox .btn_add span:after {width:10px; left:12px;} .fileBox .file_layer {width:calc(100% - 174px);} .inquiry_content .policy_wrap {margin-top:40px;} } @media all and (max-width:600px){ .fileBox .fileName {width:calc(100% - 159px);} .fileBox .btn_file {width:80px; margin-left:5px;} .fileBox .file_layer {width:calc(100% - 149px);} .inquiry_content .policy_wrap > div {font-size:14px;} } .n_gall_all_wrap {display: block; width: 100%; overflow: hidden;position: relative;top: 0px;left: 0px;padding-top: 30px;} .n_gall_wrap {margin-left: -20px;position: relative;top: 0px;left: 0px;} .n_gall_wrap:after {content: "";display: block;height: 0;clear: both;visibility: hidden;} .n_gall_box_wrap {float: left; width: 33.33%;padding-left: 20px;padding-bottom: 20px;} .n_gall_box_a {width: 100%; position: relative;top: 0px;left: 0px; padding-bottom: 100%;height: 0px;display: block;overflow: hidden;border-radius: 10px;line-height: 1.4} .n_gall_box_inner {position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;} .n_gall_box_in {position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;} .n_gall_box_img_wrap {position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 1} .n_gall_box_txt_wrap {position: absolute;left: 0px;right: 0px;bottom: 0px;z-index: 2; padding: 30px;} .n_gall_box_img { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1; background-image: url(../images/noimage4.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-transition: all 1s ease; transition: all 1s ease; } .n_gall_box_img_bg { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; background-color: #000; opacity: 0.4; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; display: none; } .n_gall_box_cate {padding-bottom: 10px;} .n_gall_box_cate span {display: inline-block; font-size: 13px; color: #00aeef; background-color: #fff; border-radius: 100px; padding: 3px 10px;font-weight: 500;} .n_gall_box_tit {font-size: 18px; color: #fff; font-weight: 500;} .n_gall_box_a:hover .n_gall_box_img_bg {opacity: 0} .n_gall_box_a:hover .n_gall_box_img {transform: scale(1.1);} .n_gall_box_a:hover .n_gall_box_cate span {color: #fff; background-color: #00aeef;} @media screen and (max-width:1040px){ .n_gall_box_wrap {width: 50%;} } @media screen and (max-width:580px){ .n_gall_wrap {margin-left: -10px;} .n_gall_box_wrap {padding-left: 10px;padding-bottom: 10px;} .n_gall_box_txt_wrap {padding: 10px 15px 15px;} .n_gall_box_tit {font-size: 16px;} }