/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media only screen and (min-width:1110px){ /* 메인 비주얼 */ header.mainVisual_mobile {display:none} /* 메인 레이아웃 */ #indexContent {width:1100px; margin:58px auto 0;} #indexContent h3 {display:block; margin-bottom:10px; font-size:30px; font-weight:bold; font-family:'NanumSquare', 'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .row01 {margin-bottom:65px;} #indexContent .row01 .icon_major {display:flex;} #indexContent .row01 .icon_major li {margin-right:25px} #indexContent .row01 .icon_major li:last-child {margin-right:0;} #indexContent .row02 {overflow:hidden; margin-bottom:50px;} #indexContent .row02 .leftarea {float:left; width:470px;} /* 공지사항*/ #indexContent .row02 .leftarea .latest_notice {position:relative; margin-bottom:35px} #indexContent .latest_notice .lat {position:relative; background:#fff} #indexContent .latest_notice .lat .lat_title {display:block; padding-bottom:10px; border-bottom:3px solid #666} #indexContent .latest_notice .lat ul {} #indexContent .latest_notice .lat li {overflow:hidden; position:relative;line-height:33px; letter-spacing:-0.05em; font-family:'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .latest_notice .lat li a {color:#606060; font-size:16px;} #indexContent .latest_notice .lat li a:hover {color:inherit;} #indexContent .latest_notice .lat li .new_icon {display:inline-block;line-height:33px;font-size:0.8em;color:red;text-align:center;margin-left:5px;vertical-align:top;} #indexContent .latest_notice .lt_info {float:right;} #indexContent .latest_notice .lt_info .lt_date {color:#888} #indexContent .latest_notice .lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_notice .lat .empty_li:before {background:none;padding:0} #indexContent .latest_notice .lat .lt_more {position:absolute;top:6px;right:0;display:block;width:20px;} /* 교육신청*/ #indexContent .latest_edu .edu_lat {position:relative; background:#fff} #indexContent .latest_edu .edu_lat .edu_lat_title {display:block; padding-bottom:10px;} #indexContent .latest_edu .edu_lat ul {} #indexContent .latest_edu .edu_lat li {overflow:hidden; position:relative; margin-bottom:10px; letter-spacing:-0.05em;} #indexContent .latest_edu .edu_lat li dl {overflow:hidden; border:1px solid #cccccc; font-family:'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .latest_edu .edu_lat li dl dt {float:left; width:100px; padding:21px 0 20px; color:#fff; text-align:center; font-size:20px; background:#ccffff} #indexContent .latest_edu .edu_lat li dl dt.edu_close {background:#828282} #indexContent .latest_edu .edu_lat li dl dt.edu_now_aply {background:#bd8cbf} #indexContent .latest_edu .edu_lat li dl dt.edu_ready {background:#82ca9c} #indexContent .latest_edu .edu_lat li dl dd {float:left; padding:12px 0 0 18px; margin-bottom:0;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject {display:block; margin-bottom:2px; color:#3d3d3d; font-size:17px;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject a {color:inherit; text-decoration:none;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info {display:flex; justify-content:space-between; margin-bottom:0; color:#3d3d3d; font-size:14px;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div {display:inline-block;margin-right:20px} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div:last-child {margin-right:0px} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info strong {color:#448ccb} #indexContent .latest_edu .edu_lat .edu_empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_edu .edu_lat .edu_empty_li:before {background:none;padding:0} #indexContent .latest_edu .edu_lat .edu_lt_more {position:absolute;top:6px;right:0;display:block;width:20px;} /* 교육달력 */ #indexContent #eduCalendar {} #indexContent #eduCalendar dl {} #indexContent #eduCalendar dl dt {position:absolute; right:0; top:0; width:100px; display:flex; justify-content:space-between; font-size:20px; line-height:36px; font-family:'Nanum Gothic';} #indexContent #eduCalendar dl dt a {color:#9f9f9f; font-weight:bold;} #indexContent #eduCalendar dl dd {} #indexContent #eduCalendar table {width:100%; border-collapse:collapse; font-size:15px; font-family:'Nanum Gothic';} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {width:14.28%; padding:0; line-height:45px; text-align:center;} #indexContent #eduCalendar table th {background:#555555; color:#fff} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {border:1px solid #d7d7d7;} #indexContent #eduCalendar table td.eduToday {background:#ffffcc} #indexContent #eduCalendar table td a {display:block; color:#fff; background:url(/images/index/calendar_on.png) no-repeat center center} #indexContent #eduCalendar table tr td:nth-child(1) {color:red !important} #indexContent #eduCalendar table tr td:nth-child(7) {color:blue !important} /* 센터소식 좌우롤링 */ #latest_gallery {position:relative; width:580px;margin-bottom:35px;} /* 이미지 180+ 좌우여백 20 */ #latest_gallery .pic_lt {overflow:hidden; width:580px; height:277px; margin:0 auto; background:#fff;} /* 좌우간격포함한 이미지 크기 200 x보여질개수 2 */ #latest_gallery .pic_lt ul {width:2000px; height:325px; margin-left:-10px;} /* width 좌우간격 포함한 이미지 크기 x 전체개수 / margin-left 좌우간격 포함한 이미지 크기 ★★★★★★★★★★★★★★★★★ margin-left:-310px*/ #latest_gallery .pic_lt ul li {float:left; width:280px; margin:0 10px;} #latest_gallery .pic_lt .card-group {letter-spacing:-0.05em; font-family:''Nanum Gothic', 맑은 고딕', dotum; border:1px solid #c2c2c2} #latest_gallery .pic_lt .card-group p {padding:0; margin:0;} #latest_gallery .pic_lt .card_thumbnail {} #latest_gallery .pic_lt .card_thumbnail img {width:278px;} #latest_gallery .pic_lt .card_content {height:100px; padding:13px 12px 0;} #latest_gallery .pic_lt .card_subject {display:inline-block; margin-bottom:10px; color:#3d3d3d; font-size:16px;} #latest_gallery .pic_lt .card_text {color:#666666; font-size:14px; word-break:all} #latest_gallery .pic_lt .card_datetime {display:block;height:20px; color: #888; font-size:11px} #latest_gallery .card_more {position:absolute;top:0;right:0;display:block; width:70px; text-align:right;} #latest_gallery .card_more a {display:inline-block;} #latest_gallery .card_more .latest_btn_prev {margin-right:5px} #latest_gallery .latest_gallery_btn_more {display:none !important;} /* 유튜브 썸네일 */ #indexContent .row02 .rightarea {overflow:hidden; float:right; width:580px} #indexContent .row02 .rightarea .youtube_sns {float:left; width:282px;} #indexContent .row02 .rightarea .youtube_sns h3 {margin-bottom:15px;} #indexContent .row02 .rightarea .youtube_sns ul {overflow:hidden} #indexContent .row02 .rightarea .youtube_sns ul li {float:left} #indexContent .row02 .rightarea .youtube_sns ul li:nth-child(odd) {margin-right:15px;} #indexContent .row02 .rightarea .youtube_sns ul li a {display:block;} #indexContent .row02 .rightarea .youtube_sns dl dt {margin-bottom:5px;} #indexContent .row02 .rightarea .youtube_sns dl dd {text-align:center; color:#666666; font-size:13px; word-break:all; line-height:120%; letter-spacing:-0.05em;} #indexContent .row02 .rightarea .youtube_sns dd strong {display:block; color:#3e3e3e;} /* 공식 SNS */ #indexContent .row02 .rightarea .icon_sns {float:right;width:260px;} #indexContent .row02 .rightarea .icon_sns ul {overflow:hidden;} #indexContent .row02 .rightarea .icon_sns ul li {float:left; width:45%; padding:9px 0; text-align:center; border-radius:10px; background:#f5f5f5} #indexContent .row02 .rightarea .icon_sns ul li:nth-child(1), #indexContent .rightarea .icon_sns ul li:nth-child(2) {margin-bottom:13px} #indexContent .row02 .rightarea .icon_sns ul li:nth-child(odd) {margin-right:5%;} /* 관련기관 좌우롤링 */ #indexContent .row03_mobile {display:none;} #indexContent .relativeLink {clear:both; margin:0 auto; width:1110px; height:55px;} #relativeRolling {clear:both; position:relative; } /* 이미지 183 + 좌우여백 30 */ #relativeRolling div {overflow:hidden; width:1065px; height:55px; margin:0 auto;} /* 좌우간격포함한 이미지 크기 213 x보여질개수 5 */ #relativeRolling ul {width:2130px; height:55px; margin-left:-213px;} /* width 좌우간격 포함한 이미지 크기x전체개수 / margin-left 좌우간격 포함한 이미지 크기*/ #relativeRolling li {float:left; margin:0 15px;} #relativeRolling > .btn_prev {position:absolute; top:15px; left:0} #relativeRolling > .btn_next {position:absolute; top:15px; right:0} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media only screen and (min-width:769px) and (max-width:1109px){ /* 메인 비주얼 */ header.mainVisual_pc {display:none} /* 메인 index 레이아웃 */ #indexContent {width:96%; margin:6% auto 0;} #indexContent h3 {display:block; margin-bottom:10px; font-size:30px; font-weight:bold; font-family:'NanumSquare', 'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .row01 {margin-bottom:6%;} #indexContent .row01 .icon_major {display:flex;} #indexContent .row01 .icon_major li {margin-right:2%} #indexContent .row01 .icon_major li:last-child {margin-right:0;} #indexContent .row01 .icon_major li img {width:100%;} #indexContent .row02 {margin-bottom:6%;} #indexContent .row02 .leftarea {width:100%; margin-bottom:6%;} /* 공지사항 */ #indexContent .row02 .leftarea .latest_notice {position:relative; margin-bottom:6%} #indexContent .latest_notice .lat {position:relative; background:#fff} #indexContent .latest_notice .lat .lat_title {display:block; padding-bottom:10px; border-bottom:3px solid #666} #indexContent .latest_notice .lat ul {} #indexContent .latest_notice .lat li {overflow:hidden; position:relative;line-height:33px; letter-spacing:-0.05em; font-family:'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .latest_notice .lat li a {color:#606060; font-size:16px;} #indexContent .latest_notice .lat li a:hover {color:inherit;} #indexContent .latest_notice .lat li .new_icon {display:inline-block;line-height:33px;font-size:0.8em;color:red;text-align:center;margin-left:5px;vertical-align:top;} #indexContent .latest_notice .lt_info {float:right;} #indexContent .latest_notice .lt_info .lt_date {color:#888} #indexContent .latest_notice .lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_notice .lat .empty_li:before {background:none;padding:0} #indexContent .latest_notice .lat .lt_more {position:absolute;top:6px;right:0;height:21px;font-size:0; line-height:0;} /* 교육신청*/ #indexContent .row02 .leftarea .latest_edu {margin-bottom:6%} #indexContent .latest_edu .edu_lat {position:relative; background:#fff} #indexContent .latest_edu .edu_lat ul {} #indexContent .latest_edu .edu_lat li {overflow:hidden; position:relative; margin-bottom:10px; letter-spacing:-0.05em;} #indexContent .latest_edu .edu_lat li dl {overflow:hidden; border:1px solid #cccccc; font-family:'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .latest_edu .edu_lat li dl dt {float:left; width:100px; padding:23px 0; color:#fff; text-align:center; font-size:20px; background:#ccffff} #indexContent .latest_edu .edu_lat li dl dt.edu_close {background:#828282} #indexContent .latest_edu .edu_lat li dl dt.edu_now_aply {background:#bd8cbf} #indexContent .latest_edu .edu_lat li dl dt.edu_ready {background:#82ca9c} #indexContent .latest_edu .edu_lat li dl dd {float:left; padding:12px 0 0 18px; margin-bottom:0;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject {display:block; margin-bottom:8px; color:#3d3d3d; font-size:17px;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject a {color:inherit; text-decoration:none;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info {margin-bottom:0; color:#3d3d3d; font-size:14px;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info strong {color:#448ccb} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div {display:inline-block;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div {display:inline-block;margin-right:20px} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div:last-child {margin-right:0px} #indexContent .latest_edu .edu_lat .edu_empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_edu .edu_lat .edu_empty_li:before {background:none;padding:0} #indexContent .latest_edu .edu_lat .edu_lt_more {position:absolute;top:6px;right:0;height:21px;font-size:0; line-height:0;} /* 교육달력 */ #indexContent #eduCalendar {} #indexContent #eduCalendar dl {} #indexContent #eduCalendar dl dt {position:absolute; right:0; top:0; width:100px; display:flex; justify-content:space-between; font-size:20px; line-height:36px; font-family:'Nanum Gothic';} #indexContent #eduCalendar dl dt a {color:#9f9f9f; font-weight:bold;} #indexContent #eduCalendar dl dd {} #indexContent #eduCalendar table {width:100%; border-collapse:collapse; font-size:15px; font-family:'Nanum Gothic';} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {width:14.28%; padding:0; line-height:45px; text-align:center;} #indexContent #eduCalendar table th {background:#555555; color:#fff} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {border:1px solid #d7d7d7;} #indexContent #eduCalendar table td.eduToday {background:#ffffcc} #indexContent #eduCalendar table td a {display:block; color:#fff; background:url(/images/index/calendar_on.png) no-repeat center center} /* 센터소식 */ #latest_gallery {position:relative; margin-bottom:6%; width:100%;} #latest_gallery .pic_lt {overflow:hidden; width:100%; margin:0 auto; background:#fff;} #latest_gallery .pic_lt ul {width:100%;} #latest_gallery .pic_lt ul li {display:none; float:left; width:32%;} #latest_gallery .pic_lt ul li:nth-child(1), #latest_gallery .pic_lt ul li:nth-child(2) {margin-right:2%;} #latest_gallery .pic_lt ul li:nth-child(1), #latest_gallery .pic_lt ul li:nth-child(2), #latest_gallery .pic_lt ul li:nth-child(3) {display:block} #latest_gallery .pic_lt .card-group {letter-spacing:-0.05em; font-family:''Nanum Gothic', 맑은 고딕', dotum; border:1px solid #c2c2c2} #latest_gallery .pic_lt .card-group p {padding:0; margin:0;} #latest_gallery .pic_lt .card_thumbnail {width:100%;text-align:center;} #latest_gallery .pic_lt .card_thumbnail img {width:100% !important;} #latest_gallery .pic_lt .card_content {padding:13px 12px 0;} #latest_gallery .pic_lt .card_subject {overflow:hidden; display:inline-block; height:20px; margin-bottom:10px; color:#3d3d3d; font-size:16px;} #latest_gallery .pic_lt .card_text {overflow:hidden; margin-bottom:10px !important; height:47px; color:#666666; font-size:14px; word-break:all} #latest_gallery .pic_lt .card_datetime {display:block; padding-bottom:10px !important; color:#888; font-size:12px} #latest_gallery .card_more .latest_btn_prev, #latest_gallery .card_more .latest_btn_next {display:none} #latest_gallery .card_more .latest_gallery_btn_more {position:absolute;top:6px;right:0;height:21px;font-size:0; line-height:0;} /* 유튜브 썸네일 */ #indexContent .row02 .rightarea {overflow:hidden;} #indexContent .row02 .rightarea .youtube_sns {float:left; width:50%;} #indexContent .row02 .rightarea .youtube_sns h3 {margin-bottom:15px;} #indexContent .row02 .rightarea .youtube_sns ul {overflow:hidden} #indexContent .row02 .rightarea .youtube_sns ul li {float:left} #indexContent .row02 .rightarea .youtube_sns ul li:nth-child(odd) {margin-right:10%;} #indexContent .row02 .rightarea .youtube_sns ul li a {display:block;} #indexContent .row02 .rightarea .youtube_sns dl dt {margin-bottom:5px;} #indexContent .row02 .rightarea .youtube_sns dl dd {text-align:center; color:#666666; font-size:13px; word-break:all; line-height:120%; letter-spacing:-0.05em;} #indexContent .row02 .rightarea .youtube_sns dd strong {display:block; color:#3e3e3e;} /* 공식 SNS */ #indexContent .row02 .rightarea .icon_sns {float:right;width:50%;} #indexContent .row02 .rightarea .icon_sns ul {overflow:hidden;} #indexContent .row02 .rightarea .icon_sns ul li {float:left; width:45%; padding:9px 0; text-align:center; border-radius:10px; background:#f5f5f5} #indexContent .row02 .rightarea .icon_sns ul li:nth-child(1), #indexContent .rightarea .icon_sns ul li:nth-child(2) {margin-bottom:13px} #indexContent .row02 .rightarea .icon_sns ul li:nth-child(odd) {margin-right:5%;} /* 관련기관 */ #indexContent .row03 {display:none;} #indexContent .row03_mobile ul {overflow:hidden; width:100%;;} #indexContent .row03_mobile li {float:left; width:23%; margin:0 10px 10px 0;} #indexContent .row03_mobile li img {width:100%} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media only screen and (min-width:421px) and (max-width:768px){ /* 메인 index 레이아웃 */ header.mainVisual_pc {display:none} #indexContent {width:96%; margin:6% auto 0;} #indexContent h3 {display:block; margin-bottom:10px; font-size:25px; font-weight:bold; font-family:'NanumSquare', 'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .row01 {margin-bottom:10%;} #indexContent .row01 .icon_major {overflow:hidden; width:100%;} #indexContent .row01 .icon_major li {float:left; width:50%; margin-bottom:5%; text-align:center;} #indexContent .row01 .icon_major li img {width:90%;} #indexContent .row02 {margin-bottom:10%;} #indexContent .row02 .leftarea {width:100%; margin-bottom:10%;} /* 공지사항 */ #indexContent .row02 .leftarea .latest_notice {position:relative; margin-bottom:10%} #indexContent .latest_notice .lat {position:relative; background:#fff} #indexContent .latest_notice .lat .lat_title {display:block; padding-bottom:10px; border-bottom:3px solid #666} #indexContent .latest_notice .lat ul {} #indexContent .latest_notice .lat li {overflow:hidden; position:relative; padding-left:15px; line-height:33px; letter-spacing:-0.05em; font-family:'Nanum Gothic', '맑은 고딕', dotum; background:url(/images/sub/common/h5.gif) no-repeat left 12px;} #indexContent .latest_notice .lat li a {color:#606060; font-size:16px;} #indexContent .latest_notice .lat li a:hover {color:inherit;} #indexContent .latest_notice .lat li .new_icon {display:inline-block;line-height:33px;font-size:0.8em;color:red;text-align:center;margin-left:5px;vertical-align:top;} #indexContent .latest_notice .lt_info {display:none;} #indexContent .latest_notice .lt_info .lt_date {color:#888} #indexContent .latest_notice .lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_notice .lat .empty_li:before {background:none;padding:0} #indexContent .latest_notice .lat .lt_more {position:absolute;top:6px;right:0;height:21px;font-size:0; line-height:0;} /* 교육신청*/ #indexContent .row02 .leftarea .latest_edu {margin-bottom:12%} #indexContent .latest_edu .edu_lat {position:relative; background:#fff} #indexContent .latest_edu .edu_lat ul {} #indexContent .latest_edu .edu_lat li {overflow:hidden; position:relative; margin-bottom:10px; letter-spacing:-0.05em;} #indexContent .latest_edu .edu_lat li dl {overflow:hidden; border:1px solid #cccccc; font-family:'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .latest_edu .edu_lat li dl dt {float:left;padding:23px 10px; color:#fff; text-align:center; font-size:16px; background:#ccffff} #indexContent .latest_edu .edu_lat li dl dt.edu_close {background:#828282} #indexContent .latest_edu .edu_lat li dl dt.edu_now_aply {background:#bd8cbf} #indexContent .latest_edu .edu_lat li dl dt.edu_ready {background:#82ca9c} #indexContent .latest_edu .edu_lat li dl dd {float:left; padding:10px 0 0 10px; margin-bottom:0;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject {display:block; margin-bottom:8px; color:#3d3d3d; font-size:17px;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject a {color:inherit; text-decoration:none;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info {margin-bottom:0; color:#3d3d3d; font-size:14px;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info strong {color:#448ccb} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div {display:inline-block;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div {display:inline-block;margin-right:20px} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div:last-child {margin-right:0px} #indexContent .latest_edu .edu_lat .edu_empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_edu .edu_lat .edu_empty_li:before {background:none;padding:0} #indexContent .latest_edu .edu_lat .edu_lt_more {position:absolute;top:6px;right:0;height:21px;font-size:0; line-height:0;} /* 교육달력 */ #indexContent #eduCalendar {} #indexContent #eduCalendar dl {} #indexContent #eduCalendar dl dt {position:absolute; right:0; top:0; width:100px; display:flex; justify-content:space-between; font-size:20px; line-height:36px; font-family:'Nanum Gothic';} #indexContent #eduCalendar dl dt a {color:#9f9f9f; font-weight:bold;} #indexContent #eduCalendar dl dd {} #indexContent #eduCalendar table {width:100%; border-collapse:collapse; font-size:15px; font-family:'Nanum Gothic';} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {width:14.28%; padding:0; line-height:45px; text-align:center;} #indexContent #eduCalendar table th {background:#555555; color:#fff} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {border:1px solid #d7d7d7;} #indexContent #eduCalendar table td.eduToday {background:#ffffcc} #indexContent #eduCalendar table td a {display:block; color:#fff; background:url(/images/index/calendar_on.png) no-repeat center center} /* 센터소식 */ #latest_gallery {position:relative; margin-bottom:10%; width:100%;} #latest_gallery .pic_lt {overflow:hidden; width:100%; margin:0 auto; background:#fff;} #latest_gallery .pic_lt ul {width:100%;} #latest_gallery .pic_lt ul li {display:none; float:left; width:48%;} #latest_gallery .pic_lt ul li:nth-child(1) {margin-right:2%;} #latest_gallery .pic_lt ul li:nth-child(1), #latest_gallery .pic_lt ul li:nth-child(2) {display:block} #latest_gallery .pic_lt .card-group {letter-spacing:-0.05em; font-family:''Nanum Gothic', 맑은 고딕', dotum; border:1px solid #c2c2c2} #latest_gallery .pic_lt .card-group p {padding:0; margin:0;} #latest_gallery .pic_lt .card_thumbnail {width:100%;text-align:center;} #latest_gallery .pic_lt .card_thumbnail img {width:100% !important;} #latest_gallery .pic_lt .card_content {padding:13px 12px 0;} #latest_gallery .pic_lt .card_subject {overflow:hidden; display:inline-block; height:20px; margin-bottom:10px; color:#3d3d3d; font-size:16px;} #latest_gallery .pic_lt .card_text {overflow:hidden; margin-bottom:10px !important; height:45px; color:#666666; font-size:14px; word-break:all} #latest_gallery .pic_lt .card_datetime {display:block; padding-bottom:10px !important; color:#888; font-size:12px} #latest_gallery .card_more .latest_btn_prev, #latest_gallery .card_more .latest_btn_next {display:none} #latest_gallery .card_more .latest_gallery_btn_more {position:absolute;top:6px;right:0;height:21px;font-size:0; line-height:0;} /* 유튜브 썸네일 */ #indexContent .row02 .rightarea {} #indexContent .row02 .rightarea .youtube_sns {width:100%; margin-bottom:10%} #indexContent .row02 .rightarea .youtube_sns h3 {margin-bottom:15px;} #indexContent .row02 .rightarea .youtube_sns ul {overflow:hidden} #indexContent .row02 .rightarea .youtube_sns ul li {float:left; width:50%; margin-bottom:2%; text-align:center} #indexContent .row02 .rightarea .youtube_sns ul li a {display:block;} #indexContent .row02 .rightarea .youtube_sns dl dt {margin-bottom:5px;} #indexContent .row02 .rightarea .youtube_sns dl dd {text-align:center; color:#666666; font-size:13px; word-break:all; line-height:120%; letter-spacing:-0.05em;} #indexContent .row02 .rightarea .youtube_sns dd strong {display:block; color:#3e3e3e;} /* 공식 SNS */ #indexContent .row02 .rightarea .icon_sns {width:100%;} #indexContent .row02 .rightarea .icon_sns ul {overflow:hidden;} #indexContent .row02 .rightarea .icon_sns ul li {float:left; width:25%; padding:9px 0; text-align:center; background:#f5f5f5} /* 관련기관 */ #indexContent .row03 {display:none;} #indexContent .row03_mobile ul {display:flex; flex-wrap:wrap; justify-content:space-between; overflow:hidden; width:100%;} #indexContent .row03_mobile li {width:48%; margin:0 0 10px 0;} /* #indexContent .row03_mobile li {float:left; width:47%; margin:0 10px 10px 0;} */ #indexContent .row03_mobile li img {width:100%} } /* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */ @media only screen and (min-width:280px) and (max-width:420px){ /* 메인 index 레이아웃 */ header.mainVisual_pc {display:none} #indexContent {width:96%; margin:6% auto 0;} #indexContent h3 {display:block; margin-bottom:10px; font-size:20px; font-weight:bold; font-family:'NanumSquare', 'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .row01 {margin-bottom:12%;} #indexContent .row01 .icon_major {overflow:hidden; width:100%;} #indexContent .row01 .icon_major li {float:left; width:50%; margin-bottom:5%; text-align:center;} #indexContent .row01 .icon_major li img {width:90%;} #indexContent .row02 {margin-bottom:12%;} #indexContent .row02 .leftarea {width:100%; margin-bottom:12%;} /* 공지사항 */ #indexContent .row02 .leftarea .latest_notice {position:relative; margin-bottom:12%} #indexContent .latest_notice .lat {position:relative; background:#fff} #indexContent .latest_notice .lat .lat_title {display:block; padding-bottom:10px; border-bottom:3px solid #666} #indexContent .latest_notice .lat ul {} #indexContent .latest_notice .lat li {overflow:hidden; position:relative; margin-bottom:10px; padding-left:15px; letter-spacing:-0.05em; font-family:'Nanum Gothic', '맑은 고딕', dotum; background:url(/images/sub/common/h5.gif) no-repeat left 6px;} #indexContent .latest_notice .lat li a {color:#606060; font-size:16px;} #indexContent .latest_notice .lat li a:hover {color:inherit;} #indexContent .latest_notice .lat li .new_icon {display:inline-block;line-height:33px;font-size:0.8em;color:red;text-align:center;margin-left:5px;vertical-align:top;} #indexContent .latest_notice .lt_info {display:none;} #indexContent .latest_notice .lt_info .lt_date {color:#888} #indexContent .latest_notice .lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_notice .lat .empty_li:before {background:none;padding:0} #indexContent .latest_notice .lat .lt_more {position:absolute;top:0;right:0;height:21px;font-size:0; line-height:0;} /* 교육신청*/ #indexContent .row02 .leftarea .latest_edu {margin-bottom:12%} #indexContent .latest_edu .edu_lat {position:relative; background:#fff} #indexContent .latest_edu .edu_lat ul {} #indexContent .latest_edu .edu_lat li {overflow:hidden; position:relative; margin-bottom:10px; letter-spacing:-0.05em;} #indexContent .latest_edu .edu_lat li dl {overflow:hidden; border:1px solid #cccccc; font-family:'Nanum Gothic', '맑은 고딕', dotum;} #indexContent .latest_edu .edu_lat li dl dt {padding:10px; color:#fff; text-align:center; font-size:16px; background:#ccffff} #indexContent .latest_edu .edu_lat li dl dt.edu_close {background:#828282} #indexContent .latest_edu .edu_lat li dl dt.edu_now_aply {background:#bd8cbf} #indexContent .latest_edu .edu_lat li dl dt.edu_ready {background:#82ca9c} #indexContent .latest_edu .edu_lat li dl dd {float:left; padding:10px 0 0 10px; margin-bottom:0;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject {display:block; margin-bottom:8px; color:#3d3d3d; font-size:17px;} #indexContent .latest_edu .edu_lat li dl dd .edu_subject a {color:inherit; text-decoration:none;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info {margin-bottom:0; color:#3d3d3d; font-size:14px;} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info strong {color:#448ccb} #indexContent .latest_edu .edu_lat li dl dd .edu_lt_info div {margin-bottom:5px} #indexContent .latest_edu .edu_lat .edu_empty_li {line-height:145px;color:#666;text-align:center;padding:0} #indexContent .latest_edu .edu_lat .edu_empty_li:before {background:none;padding:0} #indexContent .latest_edu .edu_lat .edu_lt_more {position:absolute;top:0;right:0;height:21px;font-size:0; line-height:0;} /* 교육달력 */ #indexContent #eduCalendar {} #indexContent #eduCalendar dl {} #indexContent #eduCalendar dl dt {position:absolute; right:0; top:0; width:100px; display:flex; justify-content:space-between; font-size:20px; line-height:36px; font-family:'Nanum Gothic';} #indexContent #eduCalendar dl dt a {color:#9f9f9f; font-weight:bold;} #indexContent #eduCalendar dl dd {} #indexContent #eduCalendar table {width:100%; border-collapse:collapse; font-size:15px; font-family:'Nanum Gothic';} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {width:14.28%; padding:0; line-height:45px; text-align:center;} #indexContent #eduCalendar table th {background:#555555; color:#fff} #indexContent #eduCalendar table th, #indexContent #eduCalendar table td {border:1px solid #d7d7d7;} #indexContent #eduCalendar table td.eduToday {background:#ffffcc} #indexContent #eduCalendar table td a {display:block; color:#fff; background:url(/images/index/calendar_on.png) no-repeat center center} /* 센터소식 */ #latest_gallery {position:relative; margin-bottom:12%; width:100%;} #latest_gallery .pic_lt {overflow:hidden; width:100%; margin:0 auto; background:#fff;} #latest_gallery .pic_lt ul {width:100%;} #latest_gallery .pic_lt ul li {display:none; float:left; width:100%;} #latest_gallery .pic_lt ul li:nth-child(1) {margin-bottom:5%;} #latest_gallery .pic_lt ul li:nth-child(1), #latest_gallery .pic_lt ul li:nth-child(2) {display:block} #latest_gallery .pic_lt .card-group {letter-spacing:-0.05em; font-family:''Nanum Gothic', 맑은 고딕', dotum; border:1px solid #c2c2c2} #latest_gallery .pic_lt .card-group p {padding:0; margin:0;} #latest_gallery .pic_lt .card_thumbnail {width:100%;text-align:center;} #latest_gallery .pic_lt .card_thumbnail img {width:100% !important;} #latest_gallery .pic_lt .card_content {padding:13px 12px 0;} #latest_gallery .pic_lt .card_subject {overflow:hidden; display:inline-block; height:20px; margin-bottom:10px; color:#3d3d3d; font-size:16px;} #latest_gallery .pic_lt .card_text {overflow:hidden; margin-bottom:10px !important; height:45px; color:#666666; font-size:14px; word-break:all} #latest_gallery .pic_lt .card_datetime {display:block; padding-bottom:10px !important; color:#888; font-size:12px} #latest_gallery .card_more .latest_btn_prev, #latest_gallery .card_more .latest_btn_next {display:none} #latest_gallery .card_more .latest_gallery_btn_more {position:absolute;top:0;right:0;height:21px;font-size:0; line-height:0;} /* 유튜브 썸네일 */ #indexContent .row02 .rightarea {} #indexContent .row02 .rightarea .youtube_sns {width:100%; margin-bottom:10%} #indexContent .row02 .rightarea .youtube_sns h3 {margin-bottom:15px;} #indexContent .row02 .rightarea .youtube_sns h3 img {width:35%} #indexContent .row02 .rightarea .youtube_sns ul {overflow:hidden} #indexContent .row02 .rightarea .youtube_sns ul li {float:left; width:50%; margin-bottom:2%; text-align:center} #indexContent .row02 .rightarea .youtube_sns ul li a {display:block;} #indexContent .row02 .rightarea .youtube_sns dl dt {margin-bottom:5px;} #indexContent .row02 .rightarea .youtube_sns dl dd {text-align:center; color:#666666; font-size:13px; word-break:all; line-height:120%; letter-spacing:-0.05em;} #indexContent .row02 .rightarea .youtube_sns dd strong {display:block; color:#3e3e3e;} /* 공식 SNS */ #indexContent .row02 .rightarea .icon_sns {width:100%;} #indexContent .row02 .rightarea .icon_sns ul {overflow:hidden;} #indexContent .row02 .rightarea .icon_sns ul li {float:left; width:25%; padding:9px 0; text-align:center; background:#f5f5f5} #indexContent .row02 .rightarea .icon_sns ul li img {width:90%;} /* 관련기관 */ #indexContent .row03 {display:none;} #indexContent .row03_mobile ul {display:flex; flex-wrap:wrap; justify-content:space-between; overflow:hidden; width:100%;} #indexContent .row03_mobile li {width:48%; margin:0 0 10px 0;} /* #indexContent .row03_mobile li {float:left; width:47%; margin:0 5px 5px 0;} */ #indexContent .row03_mobile li img {width:100%} }