@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap'); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); /* 초기화 */ html {overflow-y:scroll} body {margin:0;padding:0;font-size:0.75em;font-family:'Play','Pretendard','Outfit','Malgun Gothic', dotum, sans-serif;background:#fff} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Play','Pretendard','Outfit','Malgun Gothic', dotum, sans-serif} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} ul, dl,dt,dd, ol {margin:0; padding:0; list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle;font-size:1em} input, button {margin:0;padding:0;font-family:'Play','Pretendard','Outfit','Malgun Gothic', dotum, sans-serif;font-size:1em} input[type="submit"] {cursor:pointer} button {cursor:pointer} textarea, select {font-family:'Play','Pretendard','Outfit','Malgun Gothic', dotum, sans-serif;font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {color:#000;text-decoration:none} *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } input[type=text],input[type=password], textarea { -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none; } input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { -webkit-box-shadow:0 0 5px #9ed4ff; -moz-box-shadow:0 0 5px #9ed4ff; box-shadow:0 0 5px #9ed4ff; border:1px solid #558ab7 !important; } .placeholdersjs {color:#aaa !important} /* 레이아웃 크기 지정 */ /* 공통 - display none/block */ .is-hidden { display: none !important; } .is-visible { display: block !important; } /* 공통 - 뷰포트 (pc / mobile) 별 display none/block */ .pc-only { display: none; } @media (min-width: 769px) { .pc-only { display: block !important; }} .mobile-only { display: block; } @media (min-width: 769px) { .mobile-only { display: none !important; }} /* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops img {max-width:100%} .hd_pops_con {} .hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button {padding:10px;border:0;color:#fff} .hd_pops_footer .hd_pops_reject {background:#000;text-align:left} .hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0} /* 상단 레이아웃 */ /* 중간 레이아웃 */ #wrapper {} #container_wr:after {display:block;visibility:hidden;clear:both;content:""} #container_wr {margin:0 auto;zoom:1} #aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px} #container {position:relative; width:100%;} .lt_wr {width:32%} .lt_wr:nth-child(3n+1) {clear:both} .latest_wr {margin-bottom:20px} .latest_wr:after {display:block;visibility:hidden;clear:both;content:""} .latest_top_wr {margin:0 -10px 20px} .latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""} /* 하단 레이아웃 */ #ft {background: #292623; margin: 0 auto; text-align: center; padding:40px 10px 30px 10px; font-size: 15px; color: #aaa; line-height: 27px;} #ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #ft_wr {max-width:1240px;margin:0;padding:40px 0;position:relative;display:inline-block;text-align:left} #ft_wr:after {display:block;visibility:hidden;clear:both;content:""} #ft_wr .ft_cnt {width:25%;float:left;padding:0 20px} .ft_txt{} .ft_txt .ft_txt_01 {} .ft_txt .ft_txt_02 {border-bottom: 1px solid #aaa; padding: 0 0 20px 0;} #ft_link {text-align:left} #ft_link a {display:block;color:#fff;line-height:2em;font-weight:bold} #ft_company h2 {font-size:1.2em;margin-bottom:20px} #ft_company {font-weight:normal;color:#e3e3e3;line-height:2em} #ft_catch {margin:20px 0 10px} #ft_copy {text-align:center;margin:0 auto;padding:20px 0;color:#5b5b5b;font-size:0.92em;border-top:1px solid #383838} #top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)} #top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff} /* 게시물 선택복사 선택이동 */ #copymove {} #copymove .win_desc {text-align:center;display:block} #copymove .tbl_wrap {margin:20px} #copymove .win_btn {padding:0 20px 20px} .copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px} .copymove_currentbg {background:#f4f4f4} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* ie6 이미지 너비 지정 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} #captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px} #captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px} #captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* 캡챠 자동등록(입력)방지 기본 - mobile */ #captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px} #captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block} #captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px} #captcha.m_captcha #captcha_reload span {display:none} #captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px} #captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} #captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none} /* ckeditor 단축키 */ .cke_sc {margin:0 0 5px;text-align:right} .btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer} .cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center} .cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1} .cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} .cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9} .cke_sc_def dt {width:20%;font-weight:bold} .cke_sc_def dd {width:30%} /* ckeditor 태그 기본값 */ #bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con li {display:list-item} /* 버튼 */ a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em; -webkit-transition:background-color 0.3s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out} a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm {text-align:right} /* 서식단계 진행 */ .btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px} .btn_submit:hover {background:#2375eb} .btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff} a.btn_close {text-align:center;line-height:50px} a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} .btn_cancel:hover {background:#aaa} a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ a.btn_frmline {} button.btn_frmline {font-size:1em} /* 게시판용 버튼 */ a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent} .btn_b01:hover, .btn_b01:hover {color:#000} a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle} a.btn_b02:hover, .btn_b02:hover {background:#0025eb} a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle} a.btn_b03:hover, .btn_b03:hover {background:#ebedf6} a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle} a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9} a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ .btn_admin:hover, a.btn_admin:hover {color:#ff3746} /* 기본테이블 */ .tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} .tbl_head01 {margin:0 0 10px} .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px} .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8} .tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all} .tbl_head01 tbody tr:hover td {background:#fafafa} .tbl_head01 a:hover {text-decoration:underline} .tbl_head02 {margin:0 0 10px} .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head02 thead a {color:#383838} .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff} .tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all} .tbl_head02 a {} /* 폼 테이블 */ .tbl_frm01 {margin:0 0 20px} .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left} .tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} .wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); } .tbl_frm01 textarea {padding:2px 2px 3px} .frm_input {height:40px} .full_input {width:100%} .half_input {width:49.5%} .twopart_input {width:385px;margin-right:10px} .tbl_frm01 textarea, .write_div textarea {width:100%;height:100px} .tbl_frm01 a {text-decoration:none} .tbl_frm01 .frm_file {display:block;margin-bottom:5px} .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em} .frm_info.add_info { margin-top: 10px !important; padding: 8px 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; line-height: 1.6; } .btn_info_toggle { display: block; margin: 5px 0 0 21px; font-size: 12px; color: #3f51b5; background: none; border: none; cursor: pointer; text-decoration: underline; } /*기본 리스트*/ .list_01 ul {border-top:1px solid #ececec} .list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative} .list_01 li:nth-child(odd) {background:#f6f6f6} .list_01 li:after {display:block;visibility:hidden;clear:both;content:""} .list_01 li:hover {background:#f9f9f9} .list_01 li.empty_li {text-align:center;padding:20px 0;color:#666} /*폼 리스트*/ .form_01 h2 {font-size:1.167em} .form_01 li {margin-bottom:10px} .form_01 ul:after, .form_01 li:after {display:block;visibility:hidden;clear:both;content:""} .form_01 .left_input {float:left} .form_01 .margin_input {margin-right:1%} .form_01 textarea {height:100px;width:100%} .form_01 .frm_label {display:inline-block;width:130px} /* 자료 없는 목록 */ .empty_table {padding:50px 0 !important;text-align:center} .empty_list {padding:20px 0 !important;color:#666;text-align:center} /* 필수입력 */ .required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important} /* 테이블 항목별 정의 */ .td_board {width:80px;text-align:center} .td_category {width:80px;text-align:center} .td_chk {width:30px;text-align:center} .td_date {width:60px;text-align:center} .td_datetime {width:110px;text-align:center} .td_group {width:80px;text-align:center} .td_mb_id {width:100px;text-align:center} .td_mng {width:80px;text-align:center} .td_name {width:100px;text-align:left} .td_nick {width:100px;text-align:center} .td_num {width:50px;text-align:center} .td_numbig {width:80px;text-align:center} .td_stat {width:60px;text-align:center} .txt_active {color:#5d910b} .txt_done {color:#e8180c} .txt_expired {color:#ccc} .txt_rdy {color:#8abc2a} /* 새창 기본 스타일 */ .new_win {position:relative} .new_win .tbl_wrap {margin:0 20px} .new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1); -moz-box-shadow:0 1px 10px rgba(0,0,0,.1); box-shadow:0 1px 10px rgba(0,0,0,.1)} .new_win #win_title .sv {font-size:0.75em;line-height:1.2em} .new_win .win_ul {margin-bottom:15px;padding:0 20px} .new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px} .new_win .win_ul li:first-child {margin-left:0} .new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3} .new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5} .new_win .win_ul .selected a {color:#fff;font-weight:bold} .new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px} .new_win .win_desc i {font-size:1.2em;vertical-align:baseline} .new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px} .new_win .frm_info {font-size:0.92em;color:#919191} .new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px} .new_win .new_win_con {margin:20px 0;padding:20px} .new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""} .new_win .new_win_con2 {margin:20px 0} .new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_btn {text-align:center} .new_win .cert_btn {margin-bottom:30px;text-align:center} .new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer} .new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em} /* 검색결과 색상 */ .sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 사이드뷰 */ .sv_wrap {position:relative;font-weight:normal} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333; -webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)} .sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent} .sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb} .sv_wrap .sv a:hover {background:#000;color:#fff} .sv_member {color:#333; width: 100px;} .sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 페이징 */ .pg_wrap {clear:both;float:left;display:inline-block} .pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} .pg {text-align:center} .pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee} .pg a:focus, .pg a:hover {text-decoration:none} .pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px} .pg_page:hover {background-color:#fafafa} .pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa} .pg_current {display:inline-block;background:#1e3a8a;border:1px solid #1e3a8a;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px} /* cheditor 이슈 */ .cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } /* Mobile화면으로 */ #device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center} /* header */ #header{position:fixed;left:0;top:0;width:100%;z-index:1000;transition:all 0.4s;} #header:after{ display:block;content:""; width:100%;height:80px; background:#f2f2f2; position:absolute;left:0;top:100%; transform-origin:top;transform:scaleY(0); box-shadow:0 1px 0 #eee inset; transition:all 0.4s;} #header.on:after{transform:scaleY(1);} .head{position:relative;display:flex;justify-content:center;} .head h1{position:absolute;left:4%;top:32px;z-index:9999;} .head h1 a{ display:block; width:245px;height:50px; background:url(/images/common/logo1.png) no-repeat center; background-size:contain; text-indent:-9999px; transition:all 0.4s; } .head .pcNav{} .head .pcNav>ul{display:flex;} .head .pcNav>ul>li{margin:0 1.9vw;} .head .pcNav>ul>li>a{ font-size:20px;color:#fff;font-weight:500;line-height:110px; text-transform:uppercase; transition:all 0.4s; } .head .pcNav>ul>li>ul{ display:none; overflow:hidden; position:absolute;z-index:10; left:50%;top:85%; width:1280px; transform:translateX(-50%); text-align:center; } .head .pcNav>ul>li>ul>li{ display:inline-block; position:relative; margin:0;line-height:120px; } .head .pcNav>ul>li>ul>li>a{ display:block; padding:0 40px;font-weight: 500; box-sizing:border-box; font-size:18px;color:#000; transition:all 0.24s; position: relative;z-index:10; } .head .gnb{ position:absolute;right:4%;top:33px; display:flex;align-items:center; } .head .gnb .contact{ display: block; padding: 0 15px; height: 46px; line-height: 46px; border:1px solid rgba(255,255,255,0.7); border-radius: 50px; font-size:13px;color:#fff;text-align:center; margin-right: 25px; transition:all 0.4s; } .head .gnb .language{margin-right:25px;} .head .gnb .language>a{ box-sizing:border-box; display:block; width:46px;height:46px; border:1px solid rgba(255,255,255,0.7);border-radius:50%; font-size:13px;color:#fff;text-align:center;line-height:44px; transition:all 0.4s; } .head .gnb .btnMenu{ position:relative;z-index:5000; width:34px; cursor:pointer; } .head .gnb .btnMenu>div{ width:100%;height:3px; margin-bottom:8px; background:#fff; transition:all 0.24s; } .head .gnb .btnMenu>div:nth-child(3){width:70%;margin-bottom:0;} .head .gnb .btnMenu.openmenu>div{background:#000;} .head .gnb .btnMenu.openmenu>div:nth-child(1){transform:translateY(5px) rotate(45deg);} .head .gnb .btnMenu.openmenu>div:nth-child(3){opacity:0;} .head .gnb .btnMenu.openmenu>div:nth-child(2){transform: translateY(-5px) rotate(-45deg);} #header.on{background:#fff;} #header.on h1 a{ background:url(/images/common/logo2.png) no-repeat center; background-size:contain; } #header.on .head .pcNav>ul>li>a{color:#000;} #header.on .head .gnb .contact{border:1px solid rgba(0,0,0,0.7);color:#000;} #header.on .head .gnb .language>a{border:1px solid rgba(0,0,0,0.7);color:#000;} #header.on .head .gnb .btnMenu>div{background:#000;} #header.scroll{background:#fff !important;} #header.scroll h1 a{ background:url(/images/common/logo2.png) no-repeat center; background-size:contain; } #header.scroll .head .pcNav>ul>li>a{color:#000;} #header.scroll .head .gnb .contact{border:1px solid rgba(0,0,0,0.7);color:#000;} #header.scroll .head .gnb .language>a{border:1px solid rgba(0,0,0,0.7);color:#000;} #header.scroll .head .gnb .btnMenu>div{background:#000;} #header.all h1 a{ background:url(/images/common/logo2.png) no-repeat center; background-size:contain; } #header.scroll .language .lang-btn {color:#000;} @media(max-width:1399px){ .head .pcNav{display:none;} } @media(max-width:813px){ .head h1 a{width:105px;height:35px;} .head .gnb{top:26px;} .head .gnb .contact{margin-right: 15px;} .head .gnb .language{margin-right:15px;} } /* 헤더 기본 고정 속성 및 z-index 보장 */ #header { position: fixed; left: 0; top: 0; width: 100%; z-index: 10000; transition: all 0.4s; } #header.on { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } /* 모바일 화면 (812px / 768px 이하) 대응 */ @media (max-width: 812px) { #header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } #header .head { height: 60px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; } #header .head h1 { position: relative; top: auto; left: auto; z-index: 10001; } #header .head h1 a { width: 110px; height: 35px; background: url(/images/common/logo2.png) no-repeat center / contain !important; } #header .head .gnb { position: relative; top: auto; right: auto; z-index: 10001; display: flex; align-items: center; gap: 10px; } #header .head .gnb .language { margin-right: 0; position: relative; z-index: 10002; } #header .head .gnb .language .lang-btn { color: #333 !important; border-color: #ccc !important; padding: 4px 8px; font-size: 12px; } #header .head .gnb .btnMenu > div { background: #000 !important; } #wrapper { padding-top: 60px; } } /*allmenu*/ .allmenuBg { display: block; width: 46px; height: 46px; background: #efefef; border-radius: 50%; position: absolute; left: calc(97% - 23px); top: 46px; z-index: 1000; transform: translate(-50%, -50%) scale(0); transition: all 0.8s ease-in-out; } .allmenuBg.open{ transform: translate(-50%, -50%) scale(100); } .allmenu{ position:fixed;right:0;top:0;z-index:2000; width:100%;height:100vh; background:url(/images/common/all_bg.jpg) no-repeat center bottom; background-size:cover; transform: scaleX(0); } .allmenu.open{ transform: scaleX(1); transition: all 0s 0s; } .allmenu .allmenuwrap{ max-width:100%; width:100%;height:100%; padding:120px 3.125vw 30px; margin:0 auto; box-sizing:border-box; position:relative; display:flex; align-items:center; } .allmenu .allmenuwrap>ul{height:100%;display:flex;flex-wrap:wrap;width:100%;gap:60px 0;} .allmenu .allmenuwrap>ul>li{ position:relative; box-sizing:border-box; width:25%; padding:0; opacity: 0; transform: translateY(40px); transition: all 0.9s 0.1s; text-align: center; } .allmenu.open .allmenuwrap>ul>li{ opacity: 1; transform: translate(0); } .allmenu .allmenuwrap>ul>li>a{ display: block; position:relative; width:100%; font-size:30px;color:#000;font-weight: 600;text-align: center; transition:all 0.2s ease; } .allmenu .allmenuwrap>ul>li>a:after{ display:block;content:""; width:8px;height:8px; background:#0981f1; border-radius:50%; position:absolute;left:50%;top:100%; transform:translateX(-50%); } .allmenu .allmenuwrap>ul>li>a.on{color:#0981f1;} .allmenu .allmenuwrap>ul>li>ul{display:block; margin-top: 20px;} .allmenu .allmenuwrap>ul>li>ul>li{margin-bottom:6px;text-align: center;} .allmenu .allmenuwrap>ul>li>ul>li>a{font-size:18px;color:#000;font-weight:500;text-align: center;font-family: "Noto Sans KR";} .allmenu .allmenuwrap>ul>li>ul>li:hover>a{color:#0981f1;font-weight: 500;} .allmenu .allmenuwrap>ul>li>ul>li>ul{padding:5px 0 10px 0; display: none;} .allmenu .allmenuwrap>ul>li>ul>li>ul>li{position:relative;} .allmenu .allmenuwrap>ul>li>ul>li>ul>li>a{font-size:16px;color:#555;} @media(max-width:1399px){ .allmenu .allmenuwrap>ul{display:block;text-align:left;} .allmenu .allmenuwrap>ul:after{ display:block;content:""; width:1px;height:100%; background:#ccc; position:absolute;left:50%;top:0; } .allmenu .allmenuwrap>ul>li{position:relative;width:50%;z-index:20;} .allmenu .allmenuwrap>ul>li:after{ display:block;content:""; width:8px;height:8px; background:#0981f1; border-radius:50%; position:absolute;left:100%;top:50%; margin:-4px 0 0 -4px; opacity:0; transition:all 0.4s; } .allmenu .allmenuwrap>ul>li.act:after{opacity:1;} .allmenu .allmenuwrap>ul>li>a{font-size:5vw;text-align:left;} .allmenu .allmenuwrap>ul>li>a:after{display:none;} .allmenu .allmenuwrap>ul>li>ul{ display:none; position:absolute;left:100%;top:0; width:100%; box-sizing:border-box; padding:0 10%; } .allmenu .allmenuwrap>ul>li:first-child>ul{display:block;} .allmenu .allmenuwrap>ul>li>ul>li{position:relative;margin-bottom:3px;text-align:left;} .allmenu .allmenuwrap>ul>li>ul>li.onoff2>a:after{ display:inline-block;content:""; vertical-align:top; width:6px;height:6px; margin:8px 0 0 10px; border-right:3px solid #444;border-bottom:3px solid #444; transform:rotate(45deg); transition:all 0.4s; display: none; } .allmenu .allmenuwrap>ul>li>ul>li.onoff2.act>a:after{transform:rotate(225deg) translate(-4px, -4px);} .allmenu .allmenuwrap>ul>li>ul>li.onoff2:hover>a:after{border-right:3px solid #0981f1;border-bottom:3px solid #0981f1;} .allmenu .allmenuwrap>ul>li>ul>li>a{position:relative;} .allmenu .allmenuwrap>ul>li>ul>li>ul{display:none;} } @media(max-width:800px){ } .m_br{display:none} .p_br{display:block} .400m_br{display:none} .white {color:#fff} .blue {color:#121e91 !important;} .red {color:#ca0000} .f_Outfit {font-family: "Outfit", sans-serif;} .sub1720 {max-width:1780px; margin:0 auto; width:100%;padding: 0 20px;} .section2 {background: url(/images/main/sec02_bg.jpg) no-repeat center; background-size: cover; height: auto; padding: 136px 0;} .section2_left {width: 30%;} .tap_box {width: 100%;} .tap_box ul {width: 54%; background: #fff; padding: 5px 5px; border-radius: 30px;min-width: 275px; max-width: 275px;} .tap_box ul li {font-size: 24px; font-weight: 400; display: inline-block;padding: 0 22px;color:#666666;} .tap_box ul a:nth-child(1) li{background: #121e91; color: #fff; border-radius: 20px; padding: 5px 20px;} .tap_box ul a:nth-child(2) li{} .tap_box ul a:nth-child(3) li{} .section2_flex {display:flex;flex-wrap: wrap;} .section2_txt_box {width:100%;} .section2_txt_box h2 {font-size: 30px; color: #000; font-weight: 700;padding: 40px 0 30px 0;} .section2_txt_box h3 {font-size: 55px; color: #000; font-weight: 700; line-height:65px;} .section2_txt_box h2 .dot {display: inline-block; vertical-align: top; width: 8px; height: 8px; margin: 27px 0 0 8px; background: #121e91 ; border-radius: 50%;} .section2_right {width: 70%;} .section2_right_box {display: flex; flex-wrap: wrap; justify-content: space-between;} .section2_right_box li {width: 49%;background: #fff; border: 1px solid #121e91; border-radius: 20px;} .section2_right_box li:nth-child(1){padding: 100px 20px 100px 70px; background: #121e91;} .section2_right_box li:nth-child(2){padding: 70px 20px 88px 70px;} .section2_right_box li:nth-child(3){padding: 70px 20px 88px 70px; margin: 20px 0 0 0;} .section2_right_box li:nth-child(4){padding: 70px 20px 88px 70px; margin: 20px 0 0 0;} .section2_right_txt_01 {font-size: 40px; font-weight: 600; color: #fff; border-radius: 20px;} .section2_right_txt_01 span {padding: 0 0 0 110px;} .section2_right_txt_02 {display: flex; line-height: 22px;padding: 0 0 20px 0;} .section2_right_txt_03 {display: flex;} .section2_right_txt_04 {display: flex; line-height: 22px;padding: 0 0 20px 0;} .section2_right_txt_05 {display: flex;} .section2_right_txt_06 {display: flex; line-height: 22px;padding: 0 0 20px 0;flex-wrap: wrap;} .section2_right_txt_07 {display: flex;} .sec02_txt_01 {font-size: 25px; font-weight: 600;} .sec02_txt_02 {font-size: 20px; color: #666; font-weight: 400; padding: 0 0 0 10px;} .sec02_txt_03 {font-size: 40px; font-weight: 700;} .sec02_txt_04 {font-size: 20px; font-weight: 400; color: #666; padding: 12px 0 12px 10px} .sec02_txt_05 {font-size: 25px; font-weight: 600;} .sec02_txt_06 {font-size: 20px; color: #666; font-weight: 400; padding: 0 0 0 10px;} .sec02_txt_07 {font-size: 40px; font-weight: 700;} .sec02_txt_08 {font-size: 20px; font-weight: 400; color: #666; padding: 12px 0 12px 10px} .sec02_txt_09 {font-size: 25px; font-weight: 600;} .sec02_txt_10 {font-size: 20px; color: #666; font-weight: 400; padding: 0 0 0 10px;} .sec02_txt_11 {font-size: 40px; font-weight: 700;} .sec02_txt_12 {font-size: 20px; font-weight: 400; color: #666; padding: 12px 0 12px 10px;} .section3 {padding: 180px 0 140px 0;} .section3_flex {display:flex;flex-wrap: wrap;} .section3_left {width: 25%; padding: 0 0 0 0px;} .section3_txt_box {} .section3_txt_box h2 {font-size: 30px; color: #000; font-weight: 700;padding: 40px 0 30px 0;} .section3_txt_box h3 {font-size: 55px; color: #000; font-weight: 700; line-height:65px;} .section3_txt_box h2 .dot {display: inline-block; vertical-align: top; width: 8px; height: 8px; margin: 27px 0 0 8px; background: #121e91 ; border-radius: 50%;} .section3_button {max-width: 100px;display: flex; justify-content: space-between; width: 33%; padding: 50px 0 0 0;} .left_button {width: 40px; height: 40px; border: 1px solid #666; border-radius: 50px;} .left_button img {padding: 14px 12px;} .light_button {width: 40px; height: 40px; border: 2px solid #000; border-radius: 50px;} .light_button img {padding: 14px 12px;} .section3_right {width: 75%;} .section3_right_box {display: flex;justify-content: space-between;} .section3_right_box li {box-shadow: 2px 5px 10px 4px #dadada;width: 46%;} .img_up {} .img_up img {width: 100%;} .txt_up {padding: 0px 20px 55px 55px;} .txt_up_01 {font-size: 33px; font-weight: 700; padding: 40px 0 20px 0px;} .txt_up_02 {font-size: 26px; color: #666;} .section4 {background:url('/images/main/sec04_bg.jpg')no-repeat center; background-size: cover;padding: 180px 0 250px;height: auto;text-align:center; } .section4_title_box {} .section4_title_01 {font-size: 30px; font-weight: 600;padding: 0 0 15px 0;} .section4_title_02 {font-size: 55px; font-weight: 600;} .section4_text_box {display: flex; flex-wrap: wrap; justify-content: center;padding: 80px 0 0 0;} .sec04_text_box_01 {padding: 25px 0 0 0px;width: 22%;position: relative;} .line_01 { height: 150px;width: 1px; background: #fff;} .sec04_text_01 {font-size:24px; font-weight:400;color:#fff;} .sec04_text_02 {font-size:55px; font-weight:700;color:#fff;} .sec04_text_02 span {font-size:30px; font-weight:400;color:#fff;} .sec04_text_box_02 {padding: 25px 0 0 0px;width: 22%;position: relative;} .sec04_text_box_03 {padding: 25px 0 0 0px;width: 22%;position: relative;} .sec04_text_box_04 {padding: 25px 0 0 0px;width: 22%;position: relative;} .section5 {padding:100px 0 100px;} .section5_flex {display: flex; flex-wrap: wrap;} .section5_left {width: 50%;} .section5_left img {width:100%} .section5_right {width: 50%;padding: 0 0 0 100px;} .section5_txt_box {} .section5_txt_box h2 {font-size: 30px; color: #000; font-weight: 700;padding: 40px 0 30px 0;} .section5_txt_box h3 {font-size: 50px; color: #000; font-weight: 700; line-height:65px;} .section5_txt_box h2 .dot {display: inline-block; vertical-align: top; width: 8px; height: 8px; margin: 27px 0 0 8px; background: #121e91 ; border-radius: 50%;} .st {position: relative; font-size: 18px; font-weight: 400; padding: 90px 0 0 0;} .st:after {content: ""; position: absolute; left: 65px; bottom: 0px; width: 61px; height: 8px; transform-origin: left top; background: url(/images/main/right_arrow.png) right top no-repeat; transition: all .3s ease-in-out;} .section5_icon_box {display: flex; flex-wrap: wrap; padding: 130px 0 0 0; justify-content: space-between; align-items: center;} .sec_05_icon_01 {text-align: center;width:16%} .sec_05_icon_01 li {} .sec_05_icon_01 li:nth-child(1) {} .sec_05_icon_01 li:nth-child(1) img {width:100%;max-width: 100px;} .sec_05_icon_01 li:nth-child(2) {font-size: 33px; font-weight: 600;padding:25px 0 30px} .sec_05_icon_01 li:nth-child(3) {} .line_02 { height: 250px;width: 1px; background: #dfdfdf;} .sec_05_icon_02 {text-align: center;width: 16%;} .sec_05_icon_02 li {} .sec_05_icon_02 li:nth-child(1) {} .sec_05_icon_02 li:nth-child(1) img {width:100%;max-width: 100px;} .sec_05_icon_02 li:nth-child(2) {font-size: 33px; font-weight: 600;padding:25px 0 30px} .sec_05_icon_02 li:nth-child(3) {} .sec_05_icon_03 {text-align: center;width: 16%;} .sec_05_icon_03 li {} .sec_05_icon_03 li:nth-child(1) {} .sec_05_icon_03 li:nth-child(1) img {width:100%;max-width: 100px;} .sec_05_icon_03 li:nth-child(2) {font-size: 33px; font-weight: 600;padding:25px 0 30px} .sec_05_icon_03 li:nth-child(3) {} .clear{clear:both;} .pc_dp{display:none} @media(max-width:800px){ .m_dp{display:none} .pc_dp{display:block} .m_br{display:block} .p_br{display:none} .section5_icon_box {padding: 80px 0 0 0;} } @media(max-width:400px){ .400m_br{display:block} } @media(max-width:1100px){ .section2 {padding: 90px 0;} .section2_txt_box h3 {font-size: 45px;line-height: 55px;} .section2_left {width:100%;} .section2_right {width:100%;padding: 60px 0 0 0;} .section2_right_box li {width:100%;} .section2_right_box li:nth-child(1) {margin: 0 0px 20px 0;max-height:250px;padding: 70px 20px 70px 20px;} .section2_right_box li:nth-child(2) {padding: 70px 20px 88px 20px;} .section2_right_box li:nth-child(3) {padding: 70px 20px 88px 20px;} .section2_right_box li:nth-child(4) {padding: 70px 20px 88px 20px;} .sec02_txt_10 { font-size: 20px; color: #666; font-weight: 400; padding: 8px 0 0 0px;} .section2_right_txt_01 { font-size: 30px;} .section2_right_txt_01 span { padding: 0 0 0 40px;} .section3_right_box {} .section3 {padding: 50px 0 90px 0;} .section3_flex {display:flex;flex-wrap: wrap;} .section3_left {width: 100%;} .section3_txt_box {} .section3_right {width: 100%; padding: 50px 0 0 0;} .txt_up { padding: 0px 20px 55px 25px;} .section3_right_box li {width: 100%;} .section3_right_box li:nth-child(2) {display: none;} .section4 {padding: 130px 0 150px;} .section4_title_02 {font-size:36px} .section4_text_box {justify-content: space-between;} .sec04_text_box_01 {width: 100%;margin: 0 0 40px 0;} .sec04_text_box_02 {width: 100%;margin: 0 0 40px 0;} .sec04_text_box_03 {width: 100%;margin: 0 0 40px 0;} .sec04_text_box_04 {width: 100%;} .sec04_text_02 {font-size: 35px;} .section5_left {width: 100%;} .section5_right {width: 100%;padding: 0 0 0 0px;} .section5_txt_box h3 {font-size:35px;line-height: 45px;} .sec_05_icon_01{width: 100%;} .sec_05_icon_02{width: 100%;margin:50px 0} .sec_05_icon_03{width: 100%;} .line_02 {display:none;} .sec_05_icon_01 li:nth-child(2) {font-size: 24px; } .sec_05_icon_02 li:nth-child(2) {font-size: 24px; } .sec_05_icon_03 li:nth-child(2) {font-size: 24px; } } /* @media(max-width:800px){ .section1 .conwrap .con ul {} .section1 .conwrap .con ul li { width: 100%; margin-bottom: 65px;} .section1 .conwrap .con ul li:nth-child(2), .section1 .conwrap .con ul li:nth-child(4){transform: translateY(0vh);} }*/ /* #sub_page { position: relative; z-index: -1; } */ .content-visual { position: relative; height: 450px; color:#fff; } .m-compulsion-br { display: none; } .visual-img { position:absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .visual-img::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 101%; height: 101%; z-index: -1; animation: bg_eff 2s ease; } @keyframes bg_eff { 0% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes visual_txt_eff { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } .sub-10 .visual-img::after { background: url('/images/sub/depth_01.jpg')no-repeat center; background-size: cover; } .sub-20 .visual-img::after { background: url('/images/sub/depth_02.jpg')no-repeat center; background-size: cover; } .sub-30 .visual-img::after { background: url('/images/sub/depth_03.jpg')no-repeat center; background-size: cover; } .sub-40 .visual-img::after { background: url('/images/sub/depth_04.jpg')no-repeat center; background-size: cover; } .sub-50 .visual-img::after { background: url('/images/sub/depth_05.jpg')no-repeat center; background-size: cover; } .content-visual h2 { font-size: 55px; font-weight: 900; text-shadow: 0 0 10px #00000041; margin-bottom:20px; margin-top:200px; text-align: center; } /*.content-visual .visual-text { display: flex; justify-content: center; align-items: center; height:450px; animation: visual_txt_eff 2s ease; } .content-visual .locationUl { background: #0000005e; border-radius: 50px; font-weight: 400; } .content-visual .locationUl > li { position: relative; height: 60px; color:#fff; font-size:16px} .content-visual .locationUl > li strong {font-size:21px; font-weight:400} .content-visual .locationUl > li+li { width: 150px; display: flex; justify-content: space-between; align-items: center; margin-right: 20px; } .content-visual .locationUl > li+li::after { content: ''; width: 12px; height: 6px; background: url(http://www.ildongcare.com/theme/ildongcare/img/common/ico-arr-bottom_outline.svg)no-repeat center; } .content-visual .locationUl > li:last-child { margin-left: 40px } .content-visual .locationUl .home,.content-visual .ildong-gnb-box .link-home { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #fff; border-radius: 50%; margin-right: 20px; } .content-visual .locationUl .home i {font-size:22px} .content-visual .locationUl .menuMore { display: none; position: absolute; top: 100%; left: -10px; width: calc(100% + 22px); } .content-visual .locationUl ul { background: #0000005e; width: 100%; border-radius: 20px; margin-top: 10px; padding: 10px 0; } .content-visual .locationUl ul a { display: block; padding: 10px; color:#fff } */ .w_190 {width:190px !important;} .bg_sky{background: #ecf4ff;} .content-visual .ildong-gnb-box { position: fixed; top: -180px; left: 0; width: 100%; height: 73px; background: var(--point); z-index: 100; } .content-visual .ildong-gnb-box > div { max-width: 1600px; margin: 0 auto; } .ildong_cont_nav .content-visual .ildong-gnb-box { top: 0; } .content-visual .ildong-gnb-box .depth { position: relative; width: 200px; font-weight: bold; display: block; } .content-visual .ildong-gnb-box .depth > span::after { content: ''; width: 12px; height: 6px; background: url(http://www.ildongcare.com/theme/ildongcare/img/common/ico-arr-bottom_outline.svg) no-repeat center; } .content-visual .ildong-gnb-box .depth .menuMore { position: absolute; top: 100%; left: -20px; width: 100%; background: #0000007e; display: none;border-radius: 0 0 10px 10px; width: calc(100% + 12px); } .content-visual .ildong-gnb-box .depth > span { line-height: 73px; height: 73px; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); display: flex; align-items: center; justify-content: space-between; padding-right: 20px; } .content-visual .ildong-gnb-box .depth a { display: block; padding: 15px 20px; } .m-img-box { display: none; justify-content: center; } .content-visual .ildong-gnb-box .link-home { display: none; } .flex-wrap { display: flex; } .flex-center { display: flex; justify-content: center; } .flex-end { display: flex; justify-content: end; } .flex-center-mid { display: flex; justify-content: center; align-items: center; } .flex-between { display: flex; justify-content: space-between; } .flex-mid { display: flex; align-items: center; } .flex-bottom { display: flex; align-items: flex-end; } .flex-column { display: flex; flex-direction: column; } .flex1 { flex: 1; } .absolute_top_left_center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* PC 기본 스타일 유지 */ .lnb { position: relative; max-width: 1300px; margin: 0 auto; top: -75px; z-index: 10; } .lnb ul { position: relative; text-align: right; } .lnb li { position: relative; display: inline-block; } .lnb ul.one li { width: 100%; } .lnb ul.two li { width: 50%; } .lnb ul.three li { width: 33.3333333333333%; } .lnb ul.four li { padding: 0 20px; } .lnb ul.five li { width: 20%; } .lnb li a { color: #fff; display: flex; font-size: 22px; letter-spacing: -0.4pt; padding: 8px 0; line-height: 135%; box-sizing: border-box; transition: all 0.3s; justify-content: center; flex-direction: column; align-items: center; } .lnb li:last-child a { border-right: 0; } .lnb li a:hover { color: #fff; text-decoration: none; transition: all 0.3s; } .left_linktop { display: block; color: #fff !important; font-weight: 600 !important; text-decoration: none; } .lnb ul.blue .left_linktop { border-bottom: 2px solid #fff; } .lnb ul.blue_01 .left_linktop { background: #121e91; } /* 모바일 전용 대응 (상단 흰색 바 백그라운드 추가) */ @media (max-width: 768px) { .lnb { width: 100%; max-width: 100%; top: 0; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 12px 10px; box-sizing: border-box; } .lnb ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; gap: 4px 10px; } .lnb li { display: block; width: auto !important; padding: 0 !important; } .lnb li a { color: #333 !important; font-size: 14px; padding: 6px 10px; border-radius: 4px; background: #f8f9fa; } .left_linktop { color: #333 !important; font-weight: 600 !important; } .lnb ul.blue .left_linktop { color: #0056b3 !important; border-bottom: 2px solid #0056b3; background: #eef2f7; } .lnb ul.blue_01 .left_linktop { background: #0056b3 !important; color: #fff !important; } } @media (max-width: 812px) { .w_190 {width: 150px !important;} .content-visual .locationUl .home, .content-visual .ildong-gnb-box .link-home { width: 50px; height: 50px; } .content-visual .locationUl > li+li { margin-right: 0px; } .content-visual .locationUl > li:nth-child(2){margin-right: 20px;} .content-visual .locationUl > li:last-child { margin-left: 0; } .content-visual .locationUl .home { margin-right: 15px; } .content-visual .ildong-gnb-box > div { padding:0 20px; } .ctt_vision .se-01 p { width: 225px; } .location {position: absolute;bottom: 0px;left: 0;width: 100%;z-index: 100;background: #00000049;} .inner {padding: 0 20px;width :100%} .content-visual .locationUl {background: none;} .content-visual .locationUl > li + li {width: 37%;} .content-visual .locationUl > li:nth-child(2) {width: 30%;} .content-visual .locationUl > li:nth-child(3) {width: 42%;} } .pb10 {padding-bottom:10px} .pb20 {padding-bottom:20px} .pb30 {padding-bottom:30px} .pb40 {padding-bottom:40px} .pb50 {padding-bottom:50px} .pb60 {padding-bottom:60px} .pb70 {padding-bottom:70px} .pb80 {padding-bottom:80px} .pb90 {padding-bottom:90px} .pt10 {padding-top:10px} .pt20 {padding-top:20px} .pt30 {padding-top:30px} .pt40 {padding-top:40px} .pt50 {padding-top:50px} .pt60 {padding-top:60px} .pt70 {padding-top:70px} .pt80 {padding-top:80px} .pt90 {padding-top:90px} .sub_tit40 {font-size:50px} .sub_stit30 {font-size:30px; font-weight:500} .sub_stit24 {font-size:24px; font-weight:300; color:#666} .sub_text18 {font-size:18px; font-weight:200; line-height:28px} .text_ct {text-align:center;} .ceo_sign {font-size:22px} .color_gray {color:#666} .color_white {color:#fff} .sub_w1300 {width:100%; max-width:1440px; margin:0 auto; padding:180px 20px} .bbs_w1300 {width:100%; max-width:1440px; margin:0 auto; padding: 60px 20px;} .box_w1300 {width:100%; max-width:1440px; margin:0 auto; padding:0px 20px} .w_w1300 {width:100%; max-width:1440px; margin:0 auto; padding:0px 20px} @media (max-width: 812px) { .sub_w1300 {width:100%; max-width:95%; margin:0 auto; padding:0px 0px} } .ct_02_box {display: flex; flex-wrap: wrap; justify-content: space-between;} .ct_02_box_01 {padding: 80px 0 0 0;width: 27.33%;} .ct_02_box_01 ul {text-align:center;} .ct_02_box_01 ul li {} .ct_02_box_01 ul li:nth-child(1) {} .ct_02_box_01 ul li:nth-child(1) img {width:100%; border-radius: 10px;max-width: 400px;} .ct_02_box_01 ul li:nth-child(2) {padding: 40px 0 0 0;} .ct_02_box_01 ul li:nth-child(3) {font-size: 30px; font-weight: 500; padding: 20px 0 10px 0;} .ct_02_box_01 ul li:nth-child(4) {font-size: 20px;} @media (max-width: 812px) { .ct_02_box {} .ct_02_box_01 {padding: 50px 0 30px 0;width: 100%;} .ct_02_box_01 ul {} .content0101_section01 p {font-size: 24px;line-height: 34px;} } .historyCont{padding-top:80px;} .historyCont .historyRow{position:relative;} .historyCont .historyRow h4{position:absolute; left:50%; top:-56px; width:110px; height:110px; background-color:#db1d27; text-align: center; line-height:110px; color:#fff; font-size:2.0rem; border-radius: 50%; -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0); transform:translate(-50%, 0); z-index:2;} .historyCont .historyRow:first-child .historyItem:before{content:""; display:block; width:-webkit-calc(100% - 50%); width:-ms-calc(100% - 50%); width:calc(100% - 50%); position:absolute; left:0; top:0; background-color:#fff; height:1px; } .historyCont .historyRow .historyItem:after{content:""; display:block; width:1px; height:100%; background-color:#dfdfdf; position:absolute; left:50%; top:0;} .historyCont .historyRow .historyItem .listsArea{padding-bottom:70px;display: table; table-layout: fixed; width:100%; min-height:250px;} .historyCont .historyRow .historyItem .listsArea ol{display: table-cell; vertical-align:top;} .historyCont .historyRow .historyItem .listsArea ol li{position:relative; font-size:18px; color:#454545; margin-top:18px;} .historyCont .historyRow .historyItem .listsArea ol li:first-child{margin-bottom:4rem;margin-top:0;} .historyCont .historyRow .historyItem .listsArea ol li:first-child p {line-height:3rem;font-size:3rem;font-weight:600;color:#172a87;} .historyCont .historyRow .historyItem .listsArea ol li:first-child:after {background:url('/images/sub/ct_02_logo.png') no-repeat;width:20px;height:20px;border:0; top:13px} .historyCont .historyRow .historyItem .listsArea ol li:after{content:""; display:block; width:7px; height:7px; box-sizing:border-box; background-color:#b7b7b7; border-radius: 50%; position:absolute; top:5px; z-index: 2} .historyCont .historyRow .historyItem .historyImg{position:absolute; top:99px; -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%); transform:translate(0, -50%);} .historyCont .historyRow:nth-child(odd) .historyItem .historyImg span:before {content:"";background:url('/image/sub/h_line.png') no-repeat;width:104px;height:1px;position:absolute;right:-10rem;top:43px;} .historyCont .historyRow:nth-child(even) .historyItem .historyImg span:before {content:"";background:url('/image/sub/h_line.png') no-repeat;width:104px;height:1px;position:absolute;left:-10rem;top:43px;} .historyCont .historyRow:nth-child(odd){padding-left:100px;} .historyCont .historyRow:nth-child(even){padding-right:100px;} .historyCont .historyRow:nth-child(odd) .historyItem .historyImg{left:120px;} .historyCont .historyRow:nth-child(even) .historyItem .historyImg{right:120px;} .historyCont .historyRow:nth-child(odd) .historyItem .listsArea ol{padding-left:-webkit-calc(50% - 50px); padding-left:-ms-calc(50% - 50px); padding-left:calc(50% - 50px); padding-right:50px;} .historyCont .historyRow:nth-child(odd) .historyItem .listsArea ol li{padding-left:45px;} .historyCont .historyRow:nth-child(odd) .historyItem .listsArea ol li:first-child:after{left:-11px;} .historyCont .historyRow:nth-child(odd) .historyItem .listsArea ol li:after{left:-3px;} .historyCont .historyRow:nth-child(even) .historyItem .listsArea ol{padding-right:-webkit-calc(50% - 50px); padding-right:-ms-calc(50% - 50px); padding-right:calc(50% - 50px); text-align: right; padding-left:50px;} .historyCont .historyRow:nth-child(even) .historyItem .listsArea ol li{padding-right:45px;} .historyCont .historyRow:nth-child(even) .historyItem .listsArea ol li:first-child:after{right:-9px;} .historyCont .historyRow:nth-child(even) .historyItem .listsArea ol li:after{right:-4px;} .historyCont .historyRow:nth-child(odd):last-child .historyItem:before{content:""; display:block; width:-webkit-calc(100% - 50%); width:-ms-calc(100% - 50%); width:calc(100% - 50%); position:absolute; left:0; bottom:0; background-color:#fff; height:1px; } .historyCont .historyRow:nth-child(even):last-child .historyItem:before{content:""; display:block; width:-webkit-calc(100% - 50%); width:-ms-calc(100% - 50%); width:calc(100% - 50%); position:absolute; right:0; bottom:0; background-color:#fff; height:1px; } @media screen and (max-width: 768px) { .historyCont{padding-top:0;} .historyCont .historyRow {padding: 0 0 0 0!important;} .historyCont .historyRow h4{left:0; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); width:60px; height:60px; line-height:60px;} .historyCont .historyRow .historyItem{border:none; padding:20px 0 40px 0;} .historyCont .historyRow .historyItem:after{display:none} .historyCont .historyRow .historyItem .historyImg{position: static; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); padding-left:0; padding-bottom:20px;} .historyCont .historyRow .historyItem .historyImg img{width:auto;} .historyCont .historyRow .historyItem .listsArea {display:block; min-height: auto;padding-bottom:0} .historyCont .historyRow .historyItem .listsArea ol{display:block; padding:0 !important; text-align: left !important} .historyCont .historyRow .historyItem .listsArea ol li{padding-left:27px !important; padding-right:0 !important;} .historyCont .historyRow .historyItem .listsArea ol li:after{top:3px; left:3px !important; right: auto !important; } .historyCont .historyRow:nth-child(even) .historyItem .historyImg span:before, .historyCont .historyRow:nth-child(odd) .historyItem .historyImg span:before {display:none} .historyCont .historyRow .historyItem .listsArea ol li:first-child {margin-bottom:30px} .historyCont .historyRow .historyItem .listsArea ol li{font-size:24px; } .map_txt>div, .map_txt>p {float:none} .map_txt>div>p>span>img {margin:0;margin-right:2rem;} .map_txt>div>p>span {display:block;overflow:hidden;margin-bottom:2rem} .map_txt2>ul>li {margin-right:0;width:100%;margin-bottom:1rem;} .map_txt2>ul>li>span {width:55%;display:block} } /***** 오시는 길 *****/ .map-iframe-wrapper {position: relative; margin: 0px auto 3rem;} .location-info-wrap {padding-top: 4rem;} .location-info-wrap_01 {padding-top: 120px;} .map-iframe-wrapper .map-iframe-con {padding-top: 35.715%; position: relative; height: 0;} .map-iframe-wrapper .map-iframe-con iframe {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 1rem; border: 1px solid #e3e3e3;} .location-info-con {display: flex;} .location-info-con .tit-box {position: relative; width: 25%;} .location-info-con .tit-box h4 {font-size: 40px; line-height: 1.2em; font-weight: 700; letter-spacing: -0.055em; color: #000;} .location-info-con .tit-box p {font-size:20px; line-height: 1.55em; font-weight: 600; letter-spacing: -0.025em; color: var(--main-color);} .location-info-con .info-box {position: relative; width: 75%; margin-left: 3.5rem;} .location-info-con .info-box .info-inner {display: flex;flex-wrap: wrap;} .location-info-con .info-box dl {display: flex; margin-top: 1.5rem;} .location-info-con .info-box > dl:first-child {margin-top: 0;} .location-info-con .info-box dl.maRight {margin-right: 7.5rem;} .location-info-con .info-box dt {position: relative; padding: 0 2.5rem; font-size:20px; line-height: 1.5em; font-weight: 700; color: #000; letter-spacing: -0.055em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-width: 11rem;} .location-info-con .info-box dt.big-font {font-size:20px;} .location-info-con .info-box dt i {position: absolute; top: 0; left: 0; font-size:20px; line-height: 1.5em; color: var(--main-color);} .location-info-con .info-box dt.big-font i {font-size:20px; left: 1px;} .location-info-con .info-box dd {font-size:20px; line-height: 1.5em; font-weight: 500; color: rgba(0, 0, 0, 0.7); letter-spacing: -0.055em;} .location-info-con .info-box dd.big-font {font-size:20px; font-weight: 700; color: #000;} .location-acodian-list-box {padding-top: 5rem;} .location-acodian-list-box .acodian-item{overflow:hidden; margin-bottom:10px; border:2px solid transparent; border-radius:8px; background-color:#fff; transition:all 0.3s; background-color: #f5f5f5;} .location-acodian-list-box .acodian-item .flex-box {display: flex; align-items: center;flex-wrap: wrap;} .location-acodian-list-box .acodian-item .flex-box .inner {display: flex;} .location-acodian-list-box .acodian-item .flex-box .inner_01 {width: 70%;} .location-acodian-list-box .acodian-item .flex-box .inner_02 {width: 60%; padding: 10px 0 0 240px;} .location-acodian-list-box .acodian-item .flex-box .inner_03 {width: 40%; padding: 10px 0 0 0;} .sub_pd30 {padding:0 30px !important;} .location-acodian-list-box .acodian-item .flex-box .inner > span {position: relative; font-size:20px; font-weight: 700; letter-spacing: -0.055em; line-height: 1.5em; color: #000; padding: 0 2.3rem;} /*.location-acodian-list-box .acodian-item .flex-box .inner > span::before {position: absolute; content: "\eb59"; left: 0; color: #898989; font-size:20px;} */ .location-acodian-list-box .acodian-item .flex-box .inner > p {font-size:20px; font-weight: 500; letter-spacing: -0.055em; line-height: 1.5em; color: rgba(0, 0, 0, 0.7);} .location-acodian-list-box .acodian-item dt{padding:20px 30px;} .location-acodian-list-box .acodian-item dd{padding:0 5rem;} .location-acodian-list-box .acodian-item dt{position:relative; cursor:pointer; } .location-acodian-list-box .acodian-item dt .faq-title{display:block; color:#333; font-size:16px; font-weight:500; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top;} .location-acodian-list-box .acodian-item dt .arrow{position:absolute; top:50%; right:4rem; transform: translateY(-50%);} .location-acodian-list-box .acodian-item dt i{color:#333; font-size:24px; transition: all 0.3s;} .location-acodian-list-box .acodian-item dd{display:none; position:relative; background:#fff; } .location-acodian-list-box .acodian-item dd .answer-txt-con{line-height:1.875; font-size:16px; color:#333; letter-spacing:-0.75px;} .location-acodian-list-box .acodian-item dt .question-icon, .location-acodian-list-box .acodian-item dd .answer-icon{position:absolute; top:16px; left:20px; width:30px; height:30px; line-height:30px; text-align:center; color:#333; font-size:18px; font-weight:600; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;} .location-acodian-list-box .map-iframe-wrapper .map-iframe-con {padding-top: 27rem;} /* FAQ2 :: 카테고리 */ .location-acodian-list-box .item-title{display:inline-block; font-size: 26px; font-weight: 700; letter-spacing: -0.055em; line-height: 1.6em; color: #000; min-width: 14.8rem; padding-right: 6rem;} /* FAQ2 :: Open */ .location-acodian-list-box .acodian-item.open{border-color: var(--main-color); background-color:#fff; } .location-acodian-list-box .acodian-item.open dt{background-color:#fff; } .location-acodian-list-box .acodian-item.open dt .item-title{white-space:normal; text-overflow:unset;} .location-acodian-list-box .acodian-item.open dt i{color:var(--main-color);} .location-acodian-list-box .acodian-item.open dt .arrow i{margin-top:-2px; transform:rotate(-180deg);} .location-acodian-list-box .open-con {width: calc(100% - 10.8rem); margin-left: auto;} /***** 오시는 길 *****/ @media all and (max-width: 800px) { .map-iframe-wrapper { margin-bottom: 3.5rem; } .location-info-wrap { padding-top: 0; } .location-info-con { flex-direction: column; } .location-info-con .tit-box { width: 100%; margin-bottom: 2rem; } .location-info-con .tit-box h4 { font-size: 40px;} .location-info-con .info-box { margin-left: 0; width: 100%; } .location-acodian-list-box { margin-top: 7rem; } .location-acodian-list-box .acodian-item .flex-box { flex-direction: column; align-items: flex-start; } .location-acodian-list-box .acodian-item .flex-box .inner { width: 90%; } .location-acodian-list-box .item-title { min-width: auto; padding-right: 0; padding-bottom: 1.5rem; } .location-acodian-list-box .acodian-item dt {padding: 30px 15px !important; } .location-acodian-list-box .acodian-item dt .arrow {right: 2.3rem; } .location-acodian-list-box .open-con {width: 100%; margin-left: 0; } .location-acodian-list-box .acodian-item dd { padding: 0 3rem; } .location-info-con .info-box dt { padding-right: 0; } .map-iframe-wrapper .map-iframe-con {padding-top: 65.715%;} .location-acodian-list-box .acodian-item .flex-box .inner > span {padding: 0 0 0px 0px;} .location-acodian-list-box .acodian-item .flex-box .inner > p {width: 100%;margin: 10px 0 10px 0;} .location-acodian-list-box .acodian-item dt i {width: 11%;} .location-acodian-list-box .acodian-item .flex-box .inner_01 {display: block;} .location-acodian-list-box .acodian-item .flex-box .inner_02 {display: block;} .location-acodian-list-box .acodian-item .flex-box .inner_03 {display: block;} .fa-arrow-circle-o-down::before {} .sub_pd30 {padding: 0 !important;} } @media all and (max-width: 480px) { .location-info-con .info-box .info-inner { flex-direction: column; } .location-info-con .info-box dl.maRight { margin-right: 3.5rem; } } .bg_dsky{background: #d6e7ff !important;} .rl_text_01 {font-size:18px; padding: 0px 0 0 0;text-align: right;} .ct0205_box{display: flex; justify-content: space-between; flex-wrap: wrap;} .ct0205_box img {width: 33%;} .map_tabs {position: relative; text-align: center; margin-top:70px} ul.tabs {display: flex; justify-content: center; flex-wrap: wrap;} ul.tabs li { height: 50px; font-size:22px; line-height: 50px; border-left: none;position: relative;margin:0 50px; width:auto; } ul.tabs li a {text-decoration: none;color: #000;display: block;padding: 0;outline: none;text-align:center;} ul.tabs li a:hover {color:#121e91;} ul.tabs li.active a{ color:#121e91; border-bottom:2px solid #121e91; height:50px;font-weight: 700;} .tab_content {padding-top:75px;} .pd_80{padding: 0 20px 80px !important;} .tab_content h2 {text-align:center; font-size:35px; color:#444; font-weight:400; letter-spacing:-1px; margin-bottom:20px} .tab_content_p {line-height: 28px; text-align:center; font-size:18px; color:#666; font-weight:300; letter-spacing:-1px; margin-bottom:60px} .content03_tbox0101 { margin:0 auto; padding:0 20px 70px;} .content03_tbox0101_img {} .content03_tbox0101_img img {width: 100%;} .ct_0301_img_box {display: flex; justify-content: space-between;flex-wrap: wrap;} .ct_0301_img_box_01 {width: 26%;} .ct_0301_img_box_01 li {padding: 10px 0 10px 0;} .ct_0301_img_box_01 li:nth-child(1) {display: flex;} .ct_0301_img_box_01 li .ct_0301_img_up_01 {width: 21%; text-align: center; font-size: 18px; font-weight: 600; padding: 0px 0 0 0;} .ct_0301_img_box_01 li .ct_0301_img_up_01 img {width: 100%; margin: 0 0 7px 0; max-width: 62px;} .ct_0301_img_box_01 li .ct_0301_img_up_01 span {} .ct_0301_img_up_02 {padding: 70px 0 0 0;width: 80%;} .ct_0301_txt_up_01:nth-child(1) {display: flex;} .ct_0301_txt_up_01 p:nth-child(1) {} .ct_0301_txt_up_01 p:nth-child(2) {margin: 0 0 0 -10px;} .ct_0301_txt_up_01 p {font-size: 22px; width: 52%; background: #384aff; color: #fff; text-align: center; border-radius: 50px; padding: 15px 0; opacity: 0.8;} .ct_0301_txt_up_02 {font-size: 18px; text-align: center;} .ct_0301_img_up_02 img {width:100%} .ct_0301_img_box_02 {width: 40%;} .ct_0301_img_box_02 li {padding: 10px 0 10px 0;} .ct_0301_img_box_02 li:nth-child(1) {display: flex;} .ct_0301_img_box_02 li .ct_0301_img_up_03 {width: 21%; text-align: center; font-size: 18px; font-weight: 600; padding: 0px 0 0 0;} .ct_0301_img_box_02 li .ct_0301_img_up_03 img {width: 100%; margin: 11px 0 8px 0; max-width: 62px;} .ct_0301_img_box_02 li .ct_0301_img_up_03 span {} .ct_0301_img_up_04 {padding: 67px 0 0 0;} .ct_0301_txt_up_03:nth-child(1) {display: flex;} .ct_0301_txt_up_03 p:nth-child(1) {} .ct_0301_txt_up_03 p:nth-child(2) {margin: 0 0 0 -10px;z-index: 1;} .ct_0301_txt_up_03 p:nth-child(3) {margin: 0 0 0 -10px;} .ct_0301_txt_up_03 p {z-index: 10;font-size: 22px; width: 52%; background: #172cf4; color: #fff; text-align: center; border-radius: 50px; padding: 15px 0; opacity: 0.8;} .ct_0301_txt_up_04 {font-size: 18px; text-align: center;} .ct_0301_img_up_04 img {width:100%} .ct_0301_img_box_03 {width: 14%;} .ct_0301_img_box_03 li {padding: 24px 0 0px 0;} .ct_0301_img_box_03 li:nth-child(1) {display: flex;} .ct_0301_img_box_03 li .ct_0301_img_up_05 {width: 39%; text-align: center; font-size: 18px; font-weight: 600; padding: 0px 0 0 0;} .ct_0301_img_box_03 li .ct_0301_img_up_05 img {width: 100%; margin: 0 0 7px 0; max-width: 62px;} .ct_0301_img_box_03 li .ct_0301_img_up_05 span {} .ct_0301_img_up_06 {padding: 54px 0 0 10px;} .ct_0301_txt_up_05:nth-child(1) {} .ct_0301_txt_up_05 p:nth-child(1) {} .ct_0301_txt_up_05 p:nth-child(2) {} .ct_0301_txt_up_05 p {font-size: 22px; width: 100%; background: #313eb9; color: #fff; text-align: center; border-radius: 50px; padding: 15px 0; } .ct_0301_txt_up_05 {font-size: 18px; text-align: center;} .ct_0301_img_up_05 img {width:100%} .ct_0301_txt_up_06 {margin: 20px 0 0 0;} .ct_0301_txt_up_06 p {font-size: 22px; width: 100%; background: #121e91; color: #fff; text-align: center; border-radius: 50px; padding: 15px 0; } .ct_0301_img_up_06 img {width:100%} @media all and (max-width: 1000px) { .content03_tbox0101 {padding: 0 0px 70px;} .ct_0301_img_box {} .ct_0301_img_box_01{width:100%;margin: 0 0 40px 0;background: #ecf4ff; padding: 40px 20px;} .ct_0301_img_box_02{width:100%;margin: 0 0 40px 0;} .ct_0301_img_box_03{width:100%} .ct_0301_img_box_01 li:nth-child(1) {justify-content: center;} .ct_0301_img_box_01 li .ct_0301_img_up_01 {display: flex; flex-wrap: wrap;justify-content: center;} .ct_0301_img_up_02 {display: none;} .ct_0301_img_box_01 li .ct_0301_img_up_01 img {width:100%} .ct_0301_img_box_01 li .ct_0301_img_up_01 span {width:100%} .ct_0301_txt_up_02 {font-size:24px} .ct_0301_txt_up_01 p {font-size: 22px !important; line-height:20px !important;} .ct_0301_img_box_02 {background: #ecf4ff; padding: 40px 20px;} .ct_0301_img_box_02 li:nth-child(1) {justify-content: center;flex-wrap: wrap;} .ct_0301_img_box_02 li .ct_0301_img_up_03 span { width: 100%; display: block;} .ct_0301_img_box_03 li .ct_0301_img_up_01 {display: flex; flex-wrap: wrap;justify-content: center;} .ct_0301_img_up_04 {display: none;} .ct_0301_img_box_03 li .ct_0301_img_up_01 img {width:100%} .ct_0301_img_box_03 li .ct_0301_img_up_01 span {width:100%} .ct_0301_txt_up_04 {font-size:24px} .ct_0301_img_box_02 li .ct_0301_img_up_03 {} .ct_0301_txt_up_03 p {font-size: 22px !important; line-height:20px !important;} .ct_0301_img_box_03 {background: #ecf4ff; padding: 40px 20px;} .ct_0301_img_box_03 li:nth-child(1) {justify-content: center;flex-wrap: wrap;} .ct_0301_img_box_03 li:nth-child(2) {display: flex; justify-content: space-between;} .ct_0301_img_box_03 li .ct_0301_img_up_01 {display: flex; flex-wrap: wrap;justify-content: center;} .ct_0301_img_up_06 {display: none;} .ct_0301_img_box_03 li .ct_0301_img_up_01 img {width:100%} .ct_0301_img_box_03 li .ct_0301_img_up_01 span {width:100%} .ct_0301_txt_up_06 {font-size:24px} .ct_0301_img_box_03 li .ct_0301_img_up_05 {width: 21%;} .ct_0301_img_box_03 li .ct_0301_img_up_05 span {width:100%; display: block;} .ct_0301_txt_up_05 {width: 50%;} .ct_0301_txt_up_06 {width: 50%;margin: 0 0 0 20px;} .ct_0301_txt_up_05 p {width: 100%; font-size: 22px !important; line-height:20px !important;} .ct_0301_txt_up_06 p {width: 100%; font-size: 22px !important; line-height:20px !important;} } .content03_tbox0102 {width:100%; height:auto; background:#fafafa; padding:0px 0 100px} .content03_tbox0102 ul {margin:0 auto; margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap;} .content03_tbox0102 ul li {width: 31%;height:215px; background:#fff; margin:0 15px 0 0; text-align:center; padding-top:20px} .content03_tbox0102 ul li em {font-style:normal; font-size:24px; line-height:30px; margin-top:20px; display: block;} .content03_tbox0102 ul li em span {color:#121e91;font-weight: 600;} .content03_tbox0103 { margin:0 auto; padding:80px 0 100px 0} .content03_table {font-size:18px; text-align:center; border-top:3px solid #121e91; border-bottom:2px solid #121e91} .content03_table th {background:#ecf4ff; font-weight:400; line-height:60px; border-bottom:1px solid #ddd} .content03_table td {padding:20px 10px} .content03_tbox0201 { margin:0 auto; padding:0 20px 70px;} .content03_tbox0201_table {overflow-x:scroll} .content03_table02 {font-size:18px; text-align:center; border-top:3px solid #121e91; border-bottom:2px solid #121e91; background:#fff} .content03_table02 th {background:#ecf4ff; font-weight:400; line-height:40px;} .content03_table02 tr th:nth-child(1) {background:#d6e7ff} .content03_table02 td {padding:20px 0; border-left:1px solid #ddd; border-top:1px solid #ddd} .content03_tbox0202 {width:100%; background:#fafafa; padding:0px 0 } .content03_table03 {font-size:18px; text-align:center; border-top:3px solid #121e91; border-bottom:2px solid #121e91; background:#fff} .content03_table03 th {padding: 15px 10px;padding: 0 10px;border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;background:#ecf4ff; font-weight:400; line-height:60px; } .content03_table03 td {padding: 20px 10px; border-left:1px solid #ddd; border-top:1px solid #ddd} .br_no {border-right: none !important;} .bl_no {border-left: none !important;} .bt_no {border-top: none !important;} .bb_no {border-bottom: none !important;} .content03_tbox0203 {padding: 0 0 100px 0;} .content03_tbox0203 img {width:100%} .content03_tbox0301_img_box {margin: 0 195px; text-align:center;border: 1px solid #dfdfdf;} .content03_tbox0301_img_box img {max-width: 640px;width: 100%;padding: 40px 0;} .content03_tbox0301_txt {background: #121e91; color: #fff; font-size: 24px; font-weight: 500; padding: 15px 0;} .content0302_tbox0101 { margin:0 auto; padding: 0 20px 60px;} .content0302_tbox0102 {width:100%; background:#fafafa; padding:0px 0 0} .content0302_tbox0102 .sp_box01 {position:relative; width:49%; padding:40px; background:#fff; margin:20px 0; float:left} .content0302_tbox0102 .sp_box01 ul li {font-size:16px; color:#666; font-weight:300; padding:0 0 5px 0 } .content0302_tbox0102 .sp_box01 ul li:nth-child(1) {font-size:24px; padding:0 0 20px 0; color:#000; font-weight:500} .content0302_tbox0102 .sp_box01 ul li:nth-child(2) {font-size:19px; padding:0 0 10px 0; color:#121e91; font-weight:400} .content0302_tbox0102 .sp_box02 {position:relative; width:49%;padding: 40px 0 145px 60px; background:#fff; margin:20px 0; float:left} .content0302_tbox0102 .sp_box02 ul li {font-size:16px; color:#666; font-weight:300; padding:0 0 5px 0 } .content0302_tbox0102 .sp_box02 ul li:nth-child(1) {font-size:19px; padding:55px 0 10px 0; color:#121e91; font-weight:400} .content0302_tbox0102 .sp_box03 { background:#fff; padding:40px; clear:both} .content0302_tbox0102 .sp_box03 ul li {font-size:16px; color:#666; font-weight:300; padding:0 0 2px 0 } .content0302_tbox0102 .sp_box03 ul li:nth-child(1) {font-size:24px; padding:0 0 20px 0; color:#000; font-weight:500} .content0302_tbox0102 .sp_box03 ul li:nth-child(2) {font-size:19px; padding:0 0 10px 0; color:#121e91; font-weight:400} .content0302_tbox0102 .sp_box03 ul li:nth-child(6) {font-size:19px; padding:25px 0 10px 0; color:#121e91; font-weight:400} .content0302_tbox0102 .sp_box03 ul li:nth-child(7) img {width:100%} .content0302_tbox0201 { margin:0 auto; padding: 0 20px 60px;} .content0302_tbox0202 {width:100%; background:#fafafa; padding:0px 0; text-align:center} .content0302_tbox0202_img {} .content0302_tbox0202_img img {width: 100%;} .sub_stitle {line-height: 45px;text-align:center; font-size:35px; color:#444; font-weight:bold; letter-spacing:-1px;} .sub_text_type01 {line-height: 28px; text-align:center; font-size:18px; color:#666; font-weight:300; letter-spacing:-1px; margin-bottom:60px} #content0303_section01 {max-width:1300px; margin:0 auto;padding: 120px 20px 0;} #content0303_section01 h2 {text-align:center; font-size:40px; color:#333; font-weight:500; letter-spacing:-1px; margin-bottom:20px} #content0303_section01 h2::after {display: block;content: "";width: 1px;height: 70px;background: #999;margin: 50px auto;} #content0303_section02 {width:100%; background:#fafafa; text-align:center; padding: 10px 0 0px 0;} #content0303_section03 {max-width:1300px;margin:0 auto; padding: 30px 0 0px 0;} #content0303_section02 img {width:100%} #content0303_section03 img {width:100%} #content0303_section04 {width:100%; background:#fafafa; text-align:center;padding: 10px 60px 80px} .content0303_section04_table {padding: 60px 10px 0;overflow-x: scroll;} .mb10 {margin-bottom:10px} .mb20 {margin-bottom:20px} .mb30 {margin-bottom:30px} .mb40 {margin-bottom:40px} .mb50 {margin-bottom:50px} .mb60 {margin-bottom:60px} .mb70 {margin-bottom:70px} .mb80 {margin-bottom:80px} .mb90 {margin-bottom:90px} .mb100 {margin-bottom:100px} .ct_0303_03_box {display: flex; justify-content: center; flex-wrap: wrap;} .ct_0303_03_box ul {margin-right: calc(30 / 1300 * 100%); margin-bottom: 28px; width: calc(380 / 1300 * 100%);height: 270px; background: #ecf4ff; padding: 50px 30px 80px 40px;} .ct_0303_03_box ul:nth-child(3) {margin-right:0 } .ct_0303_03_box ul:nth-child(5) {margin-right: 0; } .ct_0303_03_box ul li {} .ct_0303_03_box .text_up_01 {font-size: 26px; font-weight: 700;} .ct_0303_03_box .text_up_01 span {} .ct_0303_03_box .img_up_01 {} .ct_0303_03_box .text_up_02 {font-size: 18px;line-height: 28px;} .ct_0303_03_box ul li:nth-child(1) {display: flex; justify-content: space-between;padding: 0 0 30px 0;} .ct_0303_03_box ul li:nth-child(2) {} .content0302_tbox0102 .sp_box03 ul li:nth-child(7) {display: flex; flex-wrap: wrap; justify-content: space-between;} .content0302_tbox0102 .sp_box03 ul li .txt_box_01 {position: relative; text-align: center; width: calc(180 / 1280 * 100%);border: 1px solid #121e91; padding: 30px 10px; border-radius: 5px;} .content0302_tbox0102 .sp_box03 ul li .txt_box_01:after {top: 50%; left: 117%;content:'';position:absolute;background: url('/images/sub/content0302_aroow.png');width: 31px; height: 9px;} .content0302_tbox0102 .sp_box03 ul li .txt_box_01:last-child:after {display:none} .content0302_tbox0102 .sp_box03 ul li .txt_box_01 .txt_box_01_txt_01 {font-size: 18px; font-weight: 600; color: #121e91; padding: 0 0 10px 0; line-height: 28px;} .content0302_tbox0102 .sp_box03 ul li .txt_box_01 .txt_box_01_txt_02 {font-size: 18px; font-weight: 400; line-height: 28px;} .content0302_tbox0102 .sp_box03 ul li:nth-child(7) div:nth-child(5) {margin-right: 0;} .content0302_tbox0202_txt {} .content0302_tbox0202_txt ul li {display: flex; flex-wrap: wrap; justify-content: space-between;} .content0302_tbox0202_txt ul li .txt_box_01 {position: relative; text-align: center; width: calc(180 / 1280 * 100%);border: 1px solid #121e91; padding: 50px 10px; border-radius: 5px;background: #fff;} .content0302_tbox0202_txt ul li .txt_box_01:after {top: 50%; left: 117%;content:'';position:absolute;background: url('/images/sub/content0302_aroow.png');width: 31px; height: 9px;} .content0302_tbox0202_txt ul li .txt_box_01:last-child:after {display:none} .content0302_tbox0202_txt ul li .txt_box_01 .txt_box_01_txt_01 {font-size: 18px; font-weight: 600; color: #121e91; padding: 0 0 10px 0; line-height: 28px;} .content0302_tbox0202_txt ul li .txt_box_01 .txt_box_01_txt_02 {font-size: 18px; font-weight: 400; line-height: 28px;} .content0302_tbox0202_txt ul li:nth-child(7) div:nth-child(5) {margin-right: 0;} @media all and (max-width: 1100px) { .content03_table {font-size: 24px;} .content03_tbox0101_img {text-align:center;} .content03_tbox0101_img img {max-width: 640px;} .tab_content p {font-size:24px;line-height: 34px;} .content03_tbox0301_img_box {margin: 0 ;} .content0302_tbox0102 {padding:50px 0 0} .content0302_tbox0102 .sp_box01 {padding: 40px 20px;} .content0302_tbox0102 .sp_box02 {padding: 40px 20px;} .content0302_tbox0102 .sp_box03 {padding: 40px 20px;} .content0302_tbox0102 .sp_box01 {float:none;width: 100%; padding: 30px;} .content0302_tbox0102 .sp_box02 {float:none;width: 100%;padding: 0px 30px 40px;} .content0302_tbox0102 .sp_box01 ul li {font-size: 24px;} .content0302_tbox0102 .sp_box01 ul li:nth-child(1) {font-size: 30px;} .content0302_tbox0102 .sp_box01 ul li:nth-child(2) {font-size: 27px;} .content0302_tbox0102 .sp_box02 ul li:nth-child(1) {font-size: 30px;} .content0302_tbox0102 .sp_box02 ul li:nth-child(2) {font-size: 27px;} .content0302_tbox0102 .sp_box03 ul li {font-size: 24px;} .content0302_tbox0102 .sp_box03 ul li:nth-child(1) {font-size: 30px;} .content0302_tbox0102 .sp_box03 ul li:nth-child(2) {font-size: 27px;} .content0302_tbox0102 .sp_box03 ul li:nth-child(6) {font-size: 27px;} #content0303_section02 {padding: 0px 0 0px 0;} #content0303_section03 {padding: 0px 0 0px 0;} #content0303_section04 {padding: 0px 0px 0px;} .sub_text_type01 {font-size: 24px;} .ct_0303_03_box {} .ct_0303_03_box ul {margin-bottom: 10px;margin-right: calc(20 / 1300 * 100%); width:48%; height: auto; padding: 50px 20px 40px 20px;} .ct_0303_03_box ul:nth-child(3) {margin-right: calc(20 / 1300 * 100%);} .ct_0303_03_box ul:nth-child(4) {} .content0302_tbox0102 .sp_box03 ul li:nth-child(7) {} .content0302_tbox0102 .sp_box03 ul li .txt_box_01 {width: 100%; margin-bottom: 50px;} .content0302_tbox0102 .sp_box03 ul li .txt_box_01::after {top: 109%; left: 47%; transform: rotate(90deg);} .content0302_tbox0102 .sp_box03 ul li .txt_box_01 .txt_box_01_txt_01 {font-size: 24px;} .content0302_tbox0102 .sp_box03 ul li .txt_box_01 .txt_box_01_txt_02 {font-size: 24px;} .content0302_tbox0202_txt ul li .txt_box_01 {width: 100%; margin-bottom: 50px;} .content0302_tbox0202_txt ul li .txt_box_01::after {top: 109%; left: 47%; transform: rotate(90deg);} .content0302_tbox0202_txt ul li .txt_box_01 .txt_box_01_txt_01 {font-size: 24px;} .content0302_tbox0202_txt ul li .txt_box_01 .txt_box_01_txt_02 {font-size: 24px;} } @media all and (max-width: 1000px) { ul.tabs {padding: 0 25px;} ul.tabs li {max-width: 200px; margin: 0 30px 0;} ul.tabs li:nth-child(1) {} ul.tabs li:nth-child(2) {} ul.tabs li:nth-child(3) {} .content03_tbox0102 {padding: 0 0px 80px;} .content03_tbox0102 ul li {width: 100%; margin: 0 0 20px 0;} } @media all and (max-width: 813px) { .content03_tbox0201 {padding:0 0px 70px;} .ct0205_box img {width: 100%;padding: 0 0 10px 0;} .content03_table02 {font-size: 24px;} .content03_table03 {width:700px} .content03_tbox0103 {0px 0 100px 0} .content0302_tbox0101 {padding: 0 0px 60px;} .content0302_tbox0201 {padding: 0 0px 80px;} ul.tabs {} ul.tabs li:nth-child(1) {margin:0 30px 0 0;} ul.tabs li:nth-child(2) {margin:0 30px 0 0;} ul.tabs li:nth-child(3) {margin:0 0px 0 0;} .ct_0303_03_box ul {margin-bottom: 10px;margin-right: calc(20 / 1300 * 100%); width:100%; height: auto; padding: 50px 20px 40px 20px;} .ct_0303_03_box .text_up_02 {font-size:24px} .content03_table03 {font-size: 24px;} } @media all and (max-width: 500px) { ul.tabs { justify-content: center; flex-direction: column; align-items: center;} ul.tabs li:nth-child(1) {margin: 0px 30px;} ul.tabs li:nth-child(2) {margin: 0px 30px;} ul.tabs li:nth-child(3) {margin: 0px 30px;} } .content02_section01 p {line-height: 28px; text-align: center; font-size: 18px; color: #666; font-weight: 300; letter-spacing: -1px; margin-bottom: 60px;} .ct_0201_table { overflow-x: scroll; overflow-y: auto;} .product_box_01 {display: flex;} .pt_img_box_01 {width: 45%; display: flex; align-items: center;} .pt_img_01 {} .pt_img_01 img{ width: 100%;} .pt_0201_table .title_01 {font-size: 40px; font-weight: 500; line-height: 100px; margin-bottom: 10px; text-align: center;} .pt_0201_table { overflow-x: scroll; overflow-y: auto; width: 55%;} .content02_section01 { margin:0 auto; padding:60px 0 0px 0;} .content02_section01 h2 {font-size:50px; font-weight:500; line-height:100px; margin-bottom:50px; text-align:center} .content02_section01 h3 {font-size:40px; font-weight:500; line-height:100px; margin-bottom:10px; margin-top:100px; text-align:center} .content02_section01 p {line-height: 28px;text-align:center; font-size:18px; color:#666; font-weight:300; letter-spacing:-1px; margin-bottom:60px} .content02_section01 table {border-top:3px solid #121e91; border-bottom:2px solid #121e91; text-align:center; font-size:18px } .content02_section01 th {padding:15px 0; font-weight:500; background:#ecf4ff} .content02_section01 td {padding:10px 0; border-top:1px solid #ddd; border-left:1px solid #ddd} .content02_section01 td:nth-child(1) {border-left:0; background:#ecf4ff} /* 본문 감싸는 영역 설정 */ .view-content-wrapper { position: relative; max-height: 400px; /* 처음에 보여줄 높이 (원하는 대로 조절) */ overflow: hidden; transition: max-height 0.3s ease;} /* 더보기 버튼 스타일 */ .button_box {width: 100%; display: flex; justify-content: center;} .btn-more-view {display: block;width: 30%; margin: 20px 0 ; padding: 10px;text-align: center; background: #fff; border: 1px solid #172a87; cursor: pointer;color: #172a87;font-size: 18px; font-weight: 500;} @media all and (max-width:800px){ .btn-more-view {width:100%;font-size: 24px;} .product_box_01 {flex-wrap: wrap;} .pt_img_box_01 {width: 100%;justify-content: center;} .pt_0201_table {width: 100%;} } /* 언어 선택 드롭다운 */ .language {position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: -10px; z-index: 99;} /* 스크롤 후 */ .language .lang-btn {display: flex; align-items: center; gap: 6px; background: none; border: 1px solid #ddd; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 14px; color: #fff; transition: all 0.2s;} .language .lang-btn:hover {border-color: #999;} .language .lang-btn img {width: 20px; height: auto; display: block;} .language .lang-dropdown {display: none; position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); list-style: none; padding: 6px 0; min-width: 120px; z-index: 100;} .language:hover .lang-dropdown {display: block;} .language .lang-dropdown li a {display: flex; align-items: center; gap: 8px; padding: 8px 14px; text-decoration: none; color: #333; font-size: 13px; transition: background 0.2s;} .language .lang-dropdown li a:hover {background-color: #f5f5f5;} .language .lang-dropdown li a.active {font-weight: bold; color: #0056b3;} .language .lang-dropdown li a img {width: 18px; height: auto; display: block;} /* 언어 드롭다운 z-index */ .language {position: relative; z-index: 100;} .language .lang-dropdown {display: none; position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); list-style: none; padding: 6px 0; min-width: 120px; z-index: 101;} .language:hover .lang-dropdown {display: block;} /* 전체 메뉴가 열려도 X 버튼이 최상단에 보이도록 설정 */ .allmenu {z-index: 999 !important;} .head, .gnb, .btnMenu {position: relative; z-index: 1000 !important;} .bottom {display: flex; text-align: left; padding: 16px 0 0 0;line-height: 16px;} .bottom_img {padding: 0 20px 0 0;} .bottom_img img {width:100%} .bottom_txt {} .bottom_txt img {padding: 0 0 6px 0;} .bottom p {color: #fff; font-size: 14px;} @media (max-width: 767px) { .bottom_img {padding: 0 0px 10px 0; width: 14%;} .bottom_img img {max-width: 50px;} .bottom_txt {width: 80%; padding: 0 0 0 20px;} } .lat .swiper-button-prev, .lat .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; background: #fff; border: 1px solid #ddd; border-radius: 50%; color: #333; z-index: 10; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .lat .swiper-button-prev { left: 0; } .lat .swiper-button-next { right: 0; } .lat .swiper-button-prev::after, .lat .swiper-button-next::after { display: none; } .lat .swiper-button-prev i, .lat .swiper-button-next i { font-size: 18px; color: #333; } #content0102_section01 {width:100%;max-width:1400px; margin:0 auto; padding:60px 0 0 0;} #content0102_section01 h2 {font-size:55px; font-weight:800; line-height:100px; text-align:center} #content0102_section01 .history-contents {padding:130px 0 50px} #content0102_section01 .history-list {margin-left:700px;border-left:4px solid #f4f4f4} #content0102_section01 .history-list__list {padding-bottom:50px} #content0102_section01 .history-list__item {position:relative;padding-top:200px} #content0102_section01 .history-list__item:first-child {padding-top:160px} #content0102_section01 .history-list__item:first-child .history-list__title {top:30px} #content0102_section01 .history-list__title {position:absolute;top:40px;right:100%} #content0102_section01 .history-list--small .history-list__item:first-child .history-list__title {top:80px} #content0102_section01 .history-list--small .history-list__item {padding-top:210px} #content0102_section01 .history-list--small .history-list__title {top:80px} #content0102_section01 .history-list--small .history-list__year {font-size:80px} #content0102_section01 .history-list__year {position:relative;display:block;padding:0 50px;color:#000;font-size:70px; font-family:'Play',sans-serif; font-weight:bold} #content0102_section01 .history-list__year:before {position:absolute;top:50%;right:-8px;width:20px;height:20px;margin-top:-10px;border-radius:50%;border:6px solid #000;box-sizing:border-box;content:""} #content0102_section01 .history-list__data { letter-spacing: -0.5px; line-height: 32px;position:relative;padding:5px 0 5px 40px;color:#191919;font-size:22px} .history-list__data:before {position:absolute;top:50%;left:-7px;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#121e91;content:""} @media (max-width: 1000px) { #content0102_section01 .history-list {margin-left:0;border-left:4px solid #f4f4f4} #content0102_section01 .history-list__item {padding-top:60px;} #content0102_section01 .history-list__title {position: unset} #content0102_section01 .history-list__year {} #content0102_section01 .history-list__data {font-size:24px} #content0102_section01 .history-list__year::before {position: absolute; left: -10px; top: 50%; right: 0px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 6px solid #000; box-sizing: border-box; content: ""; } }