/* ================================================================================================= 메인 :: 공통 ================================================================================================= */ h3.tit { display:block; line-height:100%; font-size:2.533em; color:#0d0e11; margin-bottom:.756em; padding:0; text-align:center; font-family:'SBAggroL'; font-weight:300; letter-spacing:-.075em } h3.tit strong { display:inline-block; font-family:'SBAggroM'; font-weight:500 } h3.tit img { display:inline-block; vertical-align:middle } /* 버튼 */ .btn_play { display:none; } .control, .slick-arrow { font-size:1.467em; color:#5d6065; } .control { width:auto; margin-left:1.5em } /************************************************************************ 비주얼 ************************************************************************/ .visual_wrap { position:relative; padding-top:140px; } .main_visual { position:relative; top:0; left:0; z-index:11; } .main_visual_item { display:table; height:580px !important; } .main_visual .bg { overflow:hidden; position:absolute; width:100%; height:100%; top:0; left:0; } .main_visual_content_inner { display:table-cell; position:absolute; width:80%; left:50%; top:50%;transform:translate(-50%,-60%); z-index:3; margin:0 auto; text-align:left; vertical-align:middle } .main_visual .inner { margin:-9.5em auto 0; padding:0 } .main_visual_content_inner p { text-align:center } .main_visual_content_inner p > span, .main_visual_content_inner p > a { display:block; opacity:0; color:#fff; } .main_visual_content_inner p br { display:block } .main_visual_content_inner .tit1 span { font-family:'SBAggroL'; font-size:1.600em; margin-bottom:.625em; letter-spacing:-0.075em; color:#f75d14; line-height:1 } .main_visual_content_inner .tit2 span { font-size:3.600em; font-family:'SBAggroL'; line-height:1; letter-spacing:-0.1em; color:#fff; } .main_visual_content_inner .tit2 span strong { font-size:1em; font-family:'SBAggroM'; font-weight:500 } .main_visual_content_inner .tit3 span { font-size:1.4em; font-weight:200; color:rgba(255,255,255,1); line-height:1.5; letter-spacing:-.075em; margin-top:.4em} .main_visual_content_inner .link { margin-top:1em } .main_visual_content_inner .link a { display:inline-block; border:1px solid rgba(243,101,35,.5); font-size:1.133em; padding:.75em 2em; font-weight:300; border-radius:2em; letter-spacing:-.075em; transition:background ease 0.2s; } .main_visual_content_inner .link a span { font-size:10px; display:inline-block; vertical-align:middle; font-weight:100; transition:color ease 0.2s; color:rgba(243,101,35,1); margin-top:-3px; margin-left:10px } .main_visual_content_inner .link a:hover span { color:#fff } .main_visual_content_inner .link a:hover { background:rgba(243,101,35,1); } .main_visual .swiper-control { position:absolute; width:auot; left:50%; transform:translateX(-50%); z-index:100; bottom:30%; } .main_visual .swiper_play_state { position:relative; display:inline-block; z-index:1000; margin:0; width:20px; height:20px; text-align:cente; padding-top:3px;r} .main_visual .swiper_play_state .swiper-play-icon { display:inline-block; font-size:23px; color:#fff; line-height:20px; margin-left:2px} .main_visual .swiper_play_state .swiper-stop-icon { display:inline-block; font-size:23px; color:#fff;line-height:20px; } .swiper_play_state_btn { display:none; position:absolute; } .swiper_play_state.play .swiper_state_pause, .swiper_play_state.pause .swiper_state_play { display:inline-block; border:none; background:none; width:20px; height:20px; } .main_visual .swiper-pagination { position:relative; display:inline-block } .main_visual .swiper-pagination span { display:inline-block; width:15px; height:15px; margin:0 2px; background:#dad8d6; border-radius:1em; overflow:hidden; opacity:1 } .main_visual .swiper-pagination>.swiper-pagination-bullet-active { width:25px!important; background:#f75d14; } .main_visual .swiper-scrollbar { display:none; } /* ================================================================================================= 바로가기 ================================================================================================= */ .quickArea { margin-top:-8.5em; position:relative; z-index:20} .quickArea ul li {float:left;width: 7.4%;text-align:center;border-radius:1.5em;background:#fff;padding:0;border:1px solid #dee3e6;box-shadow:2px 4px 0px rgba(0,0,0,.02);overflow:hidden} .quickArea ul li+li { margin-left:1%; } .quickArea .icon { display:block; margin-bottom:.3em; margin-top:2em; } .quickArea .txt {display:block;font-size: 14px;letter-spacing:-.085em;color:#121212;margin-bottom:1em;font-weight:500} .quickArea .link { display:block; position:relative; line-height:2.667em; font-size:1em; font-weight:300; letter-spacing:-.075em; color:#373a3f; background:#fafbfb; transition:all 0.1s } .quickArea .link:before { position:absolute; left:50%; width:50%; height:100%; background:#f3f5f7; top:0; content:''; transition:all 0.1s} .quickArea .link span { display:inline-block; margin-left:4px; font-size:.667em; vertical-align:middle; margin-top:-2px } .quickArea .link font, .quickArea .link span { position:relative; z-index:2; } .quickArea ul li a:hover .link, .quickArea ul li a:focus .link { background:#f36523; color:#fff } .quickArea ul li a:hover .link:before, .quickArea ul li a:focus .link:before { background:#e9672a; } /* ================================================================================================= 교육강좌 ================================================================================================= */ .educationArea { margin:8em auto 0 auto; max-width:1500px; } .educationArea .wrap_idx { padding:0; position:relative } .educationArea .wrap_idx .link_area { position:absolute; right:6.333em; top:0; } .educationArea .wrap_idx .link_area li { float:left; font-size:1.167em; letter-spacing:-.1em; } .educationArea .wrap_idx .link_area li a { display:block; color:#373a3f; font-weight:200; } .educationArea .wrap_idx .link_area li span { display:inline-block; margin-left:7px; margin-top:1px; vertical-align:text-bottom } .educationArea .wrap_idx .link_area li+li { margin-left:1.5em } .educationArea .tab_idx { position:relative; width:100%; padding:0; max-width:1350px; margin:0 auto; } .educationArea .tab_idx:before { position:absolute; width:100%; height:1px; background:#e8ebed; left:0; bottom:0; content:''; } .educationArea .tab_idx li { float:left; display:inline-block; margin:0 0 0 2em; padding:0; } .educationArea .tab_idx li a { color:#373a3f; position:relative; font-size:1.533em; font-weight:900; display:block; padding-bottom:5px; border-bottom:3px solid transparent; letter-spacing:-.075em } .educationArea .tab_idx li:hover a, .educationArea .tab_idx li.on a { color:#f75d14; border-bottom:3px solid #f75d14; } .con_idx { margin:2em auto 0 auto; padding:0 4.4em; width:100%; position:relative;} .con_idx .detail { width:100%; margin:0 auto; padding:0; position:relative; } .education_slide { width:100%; vertical-align:bottom; zoom:1; margin:0 auto; } .education_slide .slick-list { padding-bottom:1.5em } .education_slide:after { content:""; clear:both; display:block } .education_slide .item { float:left; display:block; position:relative; margin:0 0.15%; padding:0; z-index:0; border-radius:1.5em; background:#fff; border:1px solid #f9b291; } .education_slide .item .con { padding:2.333em 2em; margin:0; width:100%; } .education_slide .item .title { display:block; position:relative; font-size:1.6em; font-weight:500; color:#000; letter-spacing:-0.075em; padding:0; white-space:nowrap; margin-top:.5em; line-height:1.3; text-overflow:ellipsis; overflow:hidden; margin-bottom:.2em } .education_slide .item .text { display:block; position:relative; font-size:1.133em; font-weight:300; color:#373a3f; letter-spacing:-0.075em; padding:0; white-space:nowrap; line-height:1.3; text-overflow:ellipsis; overflow:hidden; margin-bottom:.2em; font-family:'Spoqa Han Sans' ; } .education_slide .item ul { display:block; margin-top:1em; } .education_slide .item ul li { display:block; position:relative; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:rgba(0,0,0,1); font-size:1.133em; padding-left:3em; font-weight:300; font-family:'Spoqa Han Sans' ; letter-spacing:-.06em} .education_slide .item ul li span { position:absolute; left:0; top:0; color:rgba(0,0,0,.5); } .education_slide .item ul li + li { margin-top:0.3em; } .education_slide .item .link { position:absolute; right:1em; bottom:-1.5em; width:3.067em; height:3.067em; border-radius:100%; background:#f36523; color:#fff; text-align:center; line-height:3.067em } .education_slide .item .category { display:inline-block; font-size:1.067em; letter-spacing:-.1em; margin-right:.5em } .education_slide .item .possible { display:inline-block; font-size:1.067em; letter-spacing:-.05em; color:#f36523 } /* 교육카테고리 */ .bg_orange { background:rgba(247,93,20,.1); color:rgba(247,93,20,1); border-radius:1em; padding:3px 15px; } .bg_blue { background:rgba(30,102,208,.1); color:rgba(30,102,208,1); border-radius:1em; padding:3px 15px;} .bg_green { background:rgba(0,150,64,.1); color:rgba(0,150,64,1); border-radius:1em; padding:3px 15px;} .bg_yellow { background:rgba(255,228,0,.1); color:#d6b400; border-radius:1em; padding:3px 15px;} .bg_gray { background:rgba(0,0,0,.1); color:rgba(0,0,0,1); border-radius:1em; padding:3px 15px;} /* 예약불가시 */ .education_slide .item.soldout { background:#f9fafb; border-color:#f9fafb } .education_slide .item.soldout .link { background:#e3e9f0; color:#373a3f; } .education_slide .item.soldout .possible { color:#292929; } /* 좌우버튼 */ .education_slide .slick-arrow { position:absolute; top:50%; font-size:0; text-indent:-9999em; margin-top:-32px; } .education_slide .slick-arrow:before { width:32px; height:32px; border-width:2px 2px 0 0; border-color:#888888; opacity:0.6; border-style:solid; position:absolute; display:inline-block; content:""; transition:all 0.3s; } .education_slide .slick-arrow.slick-prev { left:-60px; } .education_slide .slick-arrow.slick-next { right:-25px; } .education_slide .slick-arrow.slick-prev:before { transform:rotate(-135deg) ; } .education_slide .slick-arrow.slick-next:before { transform:rotate(45deg) ; } .education_slide .slick-dots { display:table; width:auto; margin:0 auto; padding:0; visibility:hidden; height:0; display: none !important;} /* ================================================================================================= 공공시설 ================================================================================================= */ .facilityArea { width:100%; position:relative; background:url(/images/itgrt/main/bg_facility.png) top center no-repeat; margin-top:8em; padding-top:6.667em } .facilityArea:before { position:absolute; width:100%; height:400px; left:0; top:0; z-index:-1; background:#f3f8fd; content:''; } .facilityArea .con_inner { max-width:1380px; } .facilityArea .facility_list { position:relative; } .facilityArea .facility_list .link_area { position:absolute; right:3%; top:0; } .facilityArea .facility_list .link_area li { float:left; font-size:1.167em; letter-spacing:-.1em; } .facilityArea .facility_list .link_area li a { display:block; color:#373a3f; font-weight:200; } .facilityArea .facility_list .link_area li span { display:inline-block; margin-left:7px; margin-top:1px; vertical-align:text-bottom } .facilityArea .facility_list .link_area li+li { margin-left:1.5em } #facility {} #facility .item { width:92%; display:block; position:relative; margin:0 auto; padding:0; z-index:0; } #facility .item .img_box { display:block; position:relative; width:100%; border-radius:1.5em; height:0; padding-top:78.77%; background-size:cover !important} #facility .item .img_box:before { position:absolute; right:-5px; bottom:-5px; width:98%; height:98%; background:url(/images/itgrt/main/bg_item.png) no-repeat; border-radius:1.5em; overflow:hidden; content:''; z-index:-1 } #facility .item .con { padding:1.5em; margin:0; width:100%; } #facility .item .title { display:block; position:relative; font-size:1.467em; font-weight:500; color:#000; letter-spacing:-0.075em; padding:0; white-space:nowrap; line-height:1.3; text-overflow:ellipsis; overflow:hidden; margin-bottom:.2em } #facility .item .text { display:block; position:relative; font-size:1.133em; font-weight:300; color:#373a3f; letter-spacing:-0.075em; padding:0; white-space:nowrap; line-height:1.3; text-overflow:ellipsis; overflow:hidden; margin-bottom:.2em; font-family:'Spoqa Han Sans' ; } #facility .item ul { display:block; margin-top:1em; } #facility .item ul li { display:block; position:relative; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; color:rgba(0,0,0,1); font-size:1.133em; padding-left:3.5em; font-weight:300; font-family:'Spoqa Han Sans' ; letter-spacing:-.075em} #facility .item ul li:last-child { min-height:3.3em } #facility .item ul li span { position:absolute; left:0; top:0; color:rgba(0,0,0,.5); } #facility .item ul li + li { margin-top:0.3em; } #facility .item ul li p { display:block; padding:2px 0; } #facility .item ul li i { display:inline-block; margin-right:5px; width:1.6em; height:1.5em; font-style:inherit; border-radius:100%; font-size:.867em; text-align:center; letter-spacing:0} #facility .item ul li .weekday i { border:1px solid #aec8ee; color:#266cd2; } #facility .item ul li .weekend i { border:1px solid #fabea3; color:#f57c44; } #facility .item .link { width:100%; height:3em; border-radius:1.5em; background:#1e66d0; color:#fff; text-align:center; line-height:3em; margin-top:1em } #facility .item .link span { display:inline-block; margin-left:5px; font-size:.767em; vertical-align:middle; margin-top:-1px } #facility .item .category { display:inline-block; font-size:1.067em; letter-spacing:-.1em; margin-right:.5em } #facility .item .possible { display:inline-block; font-size:1.067em; letter-spacing:-.05em; color:#f36523 } #facility .slick-track {margin-left: 0;} /* 예약불가시 */ #facility .item.soldout .link { background:#e3e9f0; color:#373a3f; } /* 좌우버튼 */ .facilityArea .facility_list .btn_box { display:block; position:relative; margin-bottom:2em; width:96%; margin-left:auto; margin-right:auto; max-width:1350px } .facilityArea .slick-prev { position:absolute; left:1.5em; top:-2.64em } .facilityArea .slick-next { position:absolute; left:4em; top:-2.64em } /* 바로가기 배너 */ .facilityArea .icon { width:100%; max-width:1350px; border-top:1px solid #e8ebed; margin-top:4em; padding-top:2.5em } .facilityArea .icon li { float:left; width:25%; position:relative; padding-left:7em } .facilityArea .icon li a { display:block; } .facilityArea .icon li .img { position:absolute; width:6em; height:6em; border-radius:100%; overflow:hidden; left:0; top:50%; transform:translateY(-50%); } .facilityArea .icon li .tit { display:block; letter-spacing:-.075em} .facilityArea .icon li .tit strong { display:block; font-family:'Luxury Gothic'; font-weight:bold; color:#373a3f; line-height:1; margin-bottom:.7em; font-size:1.533em; } .facilityArea .icon li .tit span { display:block; font-size:1.1em; line-height:1.2; color:rgba(55,58,63,.8) } .facilityArea .icon li .link { position:absolute; left:4.8em; bottom:-.5em; width:2.9em; height:2.9em; border-radius:100%; background:#1e66d0; color:#fff; text-align:center; display:none; line-height:2.9em; font-size:.867em } .facilityArea .icon li:hover .link { display:block; } /* ================================================================================================= 공유마당 ================================================================================================= */ .boardArea { width:100%; background:#f7f8fa; padding:6em 0; margin-top:8em; position:relative } .boardArea h3.tit { font-size:1.8em; font-weight:bold; text-align:left } .boardArea .left { float:left; width:64%; margin:0; padding:0; position:relative } .boardArea .left .icon-arr { display:inline-block; margin-left:.75em; background:#f36523; font-size:.665em } .boardArea .left .board_list { display:block; padding:0; width:100%; margin-top:2.5em } .boardArea .left .board_list li { float:left; margin:0; padding:0 1em 0 0; width:33.333%; position:relative; letter-spacing:-0.075em; min-height:10.5em } .boardArea .left .board_list li+li { border-left:1px solid #e5e9ec; padding-left:1em } .boardArea .left .board_list li .title { padding:0; font-size:1.4em; font-weight:400; color:#000000; position:relative; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } .boardArea .left .board_list li .text { font-size:1.133em; font-family:'Spoqa Han Sans' ; font-weight:300; color:rgba(13,14,17,.85); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; margin-top:.8em; overflow:hidden; max-height:3em } .boardArea .left .board_list li .day { position:absolute; left:0; bottom:0; font-size:1.067em; color:rgba(13,14,17,0.75); font-family:'Spoqa Han Sans' ; font-weight:300 } .boardArea .left .board_list li+li .day { left:1em } /* 알림존 */ .boardArea .right { float:right; position:relative; width:32.9%; margin:0; padding:0; } .boardArea .right h3.tit { padding-left:.5em } .boardArea .right #popList { } .boardArea .right #popList li { width:100%; margin:0 .5px; padding:0; border-radius:1.5em; overflow:hidden; } .boardArea .right .btn_box { position:absolute; top:0; right:3em } .boardArea .right .slick-prev { position:absolute; right:3.7em; top:-2.2em } .boardArea .right .slick-next { position:absolute; right:.5em; top:-2.2em } /* 유관기관 */ .boardArea .banner { position:absolute; left:0; bottom:1em; width:64%; padding-left:8em } .boardArea .banner h3.tit { width:4em; position:absolute; left:0; top:50%; transform:translateY(-50%); } .boardArea .banner .bn_box { width:100%; position:relative } .boardArea .banner .btn_box { float:left; width:10%; } .boardArea .banner #bnList { float:right; width:88%; } .boardArea .banner #bnList li { } .boardArea .banner #bnList li a { display:block; width:96%; border:1px solid #f6dbcf; border-radius:.5em; overflow:hidden } .boardArea .banner .control { margin-left:1.2em; margin-top:.65em } .boardArea .banner .slick-prev { position:absolute; left:-12%; top:1.2em } .boardArea .banner .slick-next { position:absolute; left:-5%; top:1.2em } .boardArea .banner .slick-arrow { font-size:1em } @media all and (max-width:1568px){ /* 교육강좌 */ .educationArea .tab_idx { width:92%; } .educationArea .tab_idx:before { width:98%; left:1%; } .education_slide .slick-arrow.slick-prev { left:-40px; } .education_slide .slick-arrow.slick-next { right:-6px; } } @media all and (max-width:1468px){ /* 교육강좌 */ .educationArea .tab_idx li a { font-size:1.433em; } .educationArea .wrap_idx .link_area li { font-size:1.13em } .education_slide .item .title { font-size:1.5em } .education_slide .item ul li { padding-left:2.7em } /* 시설장비 */ .facilityArea .facility_list .link_area li { font-size:1.13em } /* 공유마당 */ .boardArea .left .board_list li .title { font-size:1.35em } .boardArea .left .board_list li .text { font-size:1.1em } } @media all and (max-width:1368px){ /* 타이틀 */ h3.tit { font-size:2.433em; } /* 비주얼 */ .main_visual_item { height:0 !important; padding-top:42.606%; } .main_visual_content_inner { transform: translate(-50%,-55%); } /* 바로가기 */ .quickArea .txt { font-size:1.2em } /* 교육강좌 */ .con_idx { padding:0 3.8em } .education_slide .item .con { padding:2em 1.5em } .education_slide .slick-arrow:before { width:26px; height:26px; } .education_slide .slick-arrow { margin-top:-26px; } .education_slide .slick-arrow.slick-prev { left:-30px; } .education_slide .slick-arrow.slick-next { right:-4px; } /* 시설장비 */ .facilityArea .icon li .tit strong { font-size:1.433em } .facilityArea .icon li .tit span { font-size:1.03em; letter-spacing:-.08em } .facilityArea .slick-next { left:3.6em } /* 공유마당 */ .boardArea .banner .control { margin-top:0.5em; margin-left:1.05em; } .boardArea .banner .slick-next, .boardArea .banner .slick-prev { top:1em } .boardArea .banner h3.tit { transform:translateY(-40%) } } @media all and (max-width:1268px){ /* 비주얼 */ .main_visual .inner { margin-top:0; } .main_visual .swiper-control { bottom:8%; } /* 바로가기 */ .quickArea { margin-top:2.5em } .quickArea .txt { font-size:1.133em } /* 교육강좌 */ .educationArea { margin-top:6em } /* 시설장비 */ .facilityArea { margin-top:6em; padding-top:5.667em } .facilityArea .facility_list .btn_box { margin-bottom:1.5em } .facilityArea .slick-prev, .facilityArea .slick-next { top:-2.34em } .facilityArea .slick-next { left:3.65em } .facilityArea .icon li { padding-left:0; } .facilityArea .icon li .img { position:inherit; left:inherit; top:inherit; transform:translateY(0); display:block; margin:0 auto 1.5em auto} .facilityArea .icon li .tit { text-align:center; } .facilityArea .icon li .link { bottom:inherit; top:4.2em; left:50%; margin-left:1em } /* 공유마당 */ .boardArea { margin-top:6em; padding:5em 0 } .boardArea .left .board_list li { min-height:15em } .boardArea .left .board_list li .title { -webkit-line-clamp:3; font-size:1.25em; max-height:4em } .boardArea .left .board_list li .text { -webkit-line-clamp:4; font-size:1.05em; max-height:5.5em} .boardArea .banner { position: inherit; left:inherit; bottom:inherit; width:100%; padding-top:2em; clear:both} .boardArea .banner h3.tit { margin-bottom:0; transform: inherit; margin-top: 0.1em; line-height:1} .boardArea .banner #bnList li a { background:#fff; text-align:center; } .boardArea .banner #bnList li a img { margin:0 auto; } .boardArea .banner .control { margin-left:0; text-align:center; margin-top:0; position:absolute; left:0; width:10%; top:50%; transform: translateY(-50%); } .boardArea .banner .slick-next, .boardArea .banner .slick-prev { top:50%; transform: translateY(-50%); } } @media all and (max-width:1168px){ /* 바로가기 */ .quickArea ul li { margin-left:1%} .quickArea ul li:nth-child(4) { margin-right:1%;} .quickArea ul li:nth-child(5) { margin-left:1%} .quickArea ul li:nth-child(3n+1) { margin-left:0} /* 바로가기 .quickArea ul li:nth-of-type(4) { margin-right:0;}*/ /* 비주얼 */ .main_visual_item { padding-top:47.905%; } .main_visual_content_inner .tit2 span { font-size:3.5em } .main_visual_content_inner .tit3 span { font-size:1.367em } /* 바로가기 */ .quickArea ul li { width:calc(100%/3 - 10px); margin-top:.5em;} .quickArea ul li:nth-child(5) { margin-left:0} } @media all and (max-width:1068px){ /* 바로가기 */ .quickArea ul li { margin-left:1%} .quickArea ul li:nth-child(4) { margin-right:0;} .quickArea ul li:nth-child(5) { margin-left:1%} .quickArea ul li:nth-child(3n+1) { margin-left:0} /* 타이틀 */ h3.tit { font-size:2.333em; } /* 교육강좌 */ .con_idx { width:92%; padding:0; } .education_slide .slick-arrow { display:none !important; } .education_slide .slick-dots { display:table !important; visibility:inherit; height:auto; margin:.5em auto } .education_slide .slick-dots li { display:inline-block; margin:0 2px; } .education_slide .slick-dots li button { font-size:0; text-indent:-9999em; width:15px; height:15px; background:rgba(0,0,0,0.2); border-radius:100%; } .education_slide .slick-dots li.slick-active button { background:#f36523; } /* 공유마당 */ .boardArea .left .board_list li { width:50%; min-height:13em; padding-right:2em } .boardArea .left .board_list li+li { padding-left:2em; padding-right:0 } .boardArea .left .board_list li+li .day { left:2em } .boardArea .left .board_list li:nth-child(3) { display:none; } .boardArea .left .board_list li .title { -webkit-line-clamp:2; max-height:3em } } @media all and (max-width:968px){ /* 바로가기 */ .quickArea ul li { margin-left:1%} .quickArea ul li:nth-child(4) { margin-right:0;} .quickArea ul li:nth-child(5) { margin-left:1%} .quickArea ul li:nth-child(3n+1) { margin-left:0} /* 비주얼 */ .main_visual_item { padding-top:52.905%; } .main_visual_content_inner .tit2 span { font-size:3.4em } .main_visual_content_inner .tit3 span { font-size:1.267em } /* 교육강좌 */ .educationArea .tab_idx { text-align:center } .educationArea .tab_idx li { float:inherit; margin:0 1em; } .educationArea .wrap_idx .link_area { position:inherit; right:inherit; top:inherit; display:table; margin:2em auto 0 auto } .education_slide .item .title { font-size:1.4em } .education_slide .item .text { font-size:1.1em } .education_slide .item ul li { font-size:1.1em; } /* 시설장비 */ .facilityArea .facility_list .btn_box { text-align:center; margin-left:0; width:100% } .facilityArea .facility_list .control { margin-left:0; } .facilityArea .slick-prev { left:50%; margin-left:-2em } .facilityArea .slick-next { left:50%; margin-left:.9em } .facilityArea .facility_list .link_area { position:inherit; right:inherit; top:inherit; display:table; margin:2em auto 0 auto } .facilityArea .icon li { width:49%; border:1px solid #e8ebed; padding:2em 2em 2em 10em; border-radius:1.5em } .facilityArea .icon li:nth-child(even) { float:right; } .facilityArea .icon li:nth-child(3), .facilityArea .icon li:nth-child(4) { margin-top:1em } .facilityArea .icon li .img { position:absolute; left:2em; top:50%; transform:translateY(-50%); margin:0; } .facilityArea .icon li .tit { text-align:inherit; } .facilityArea .icon li .link { bottom:1.5em; top:inherit; left:6.8em; margin-left:0; } #facility .item .link span { margin-top:-3px; } /* 공유마당 */ .boardArea h3.tit { font-size:1.7em } .boardArea .left { width:54%; } .boardArea .right { width:42.9%; } .boardArea .right .btn_box { top:-.2em } .boardArea .left .board_list { margin-top:1.5em } .boardArea .left .board_list li .title { -webkit-line-clamp:3; max-height:4em } .boardArea .left .board_list li { min-height:15.2em } } @media all and (max-width:868px){ /* 비주얼 */ .main_visual_item { padding-top:57.905%; } .main_visual_content_inner .tit2 span { font-size:3.3em } .main_visual_content_inner .tit3 span { font-size:1.167em } /* 시설장비 */ .facilityArea .icon li { padding:1.5em 1.5em 1.5em 8.5em } .facilityArea .icon li .img { left:1.5em } .facilityArea .icon li .link { width:2.7em; height:2.7em; line-height:2.7em; font-size:.767em } .facilityArea .icon li .tit strong { font-size:1.333em } .facilityArea .icon li .tit span { font-size:1em } /* 공유마당 */ .boardArea .left { width:46.9%; } .boardArea .right { width:50%; } .boardArea .left .board_list li { width:100%; margin-bottom:1em; min-height:7em } .boardArea .left .board_list li+li { padding:1em 2em 0 0; border-left:none; border-top:1px solid #e5e9ec; margin-bottom:0; min-height:8em } .boardArea .left .board_list li+li .day { left:0; } .boardArea .left .board_list li .title { -webkit-line-clamp:1; max-height:2em } .boardArea .left .board_list li .text { -webkit-line-clamp:2; margin-top:.5em; max-height:3em } } @media all and (max-width:768px){ /* 비주얼 */ .main_visual_item { padding-top:62.905%; } .main_visual_content_inner .tit1 span { font-size:1.5em } .main_visual_content_inner .tit2 span { font-size:3.2em } .main_visual_content_inner .tit3 span { font-size:1.12em } /* 시설장비 */ .facilityArea .icon li { padding:1.5em 4.5em; } .facilityArea .icon li .img { position:inherit; left:inherit; top:inherit; transform:translateY(0); display:block; margin:0 auto 1.5em auto} .facilityArea .icon li .tit { text-align:center; } .facilityArea .icon li .link { bottom:inherit; top:7.2em; left:50%; margin-left:1em } .facilityArea .icon li .tit span br { display:none; } } @media all and (max-width:668px){ /* 비주얼 */ .main_visual_item { padding-top:65.905%; } .main_visual_content_inner .tit1 span { font-size:1.4em } .main_visual_content_inner .tit2 span { font-size:2.8em } .main_visual_content_inner .link a { font-size:1.1em } .main_visual_content_inner .link a span { margin-top:-4px; } /* 바로가기 */ /*.quickArea ul li { width:calc(100%/3 - 10px); }*/ .quickArea ul li:nth-child(4) { margin-right:0;} .quickArea ul li:nth-child(5) { margin-left:1%} .quickArea ul li:nth-child(3n+1) { margin-left:0} /* 시설장비 */ .facilityArea .icon li { padding:1.5em 3em; } /* 공유마당 */ .boardArea .left { float:inherit; width:100%; display:table; padding-bottom:3em } .boardArea .right { float:inherit; width:100%; position:relative; clear:both } .boardArea .right h3.tit { padding-left:0; } .boardArea .right #popList li { border-radius:0; } .boardArea .right #popList li a { width:98%; border-radius: 1.5em; display:block; overflow:hidden} .boardArea .banner h3.tit { position:inherit; left:inherit; top:inherit; margin-bottom:0.756em; } .boardArea .banner { padding-left:0; } .boardArea .banner .btn_box { float:inherit; width:auto; position:absolute; right:4em; top:-2.266em; } .boardArea .banner #bnList { float:inherit; width:100%; } .boardArea .banner .slick-next, .boardArea .banner .slick-prev { top:-2.95em; transform:initial } .boardArea .banner .slick-next { right:1em; left:inherit } .boardArea .banner .slick-prev { right:5em; left:inherit } } @media all and (max-width:568px){ /* 타이틀 */ h3.tit { font-size:2.233em; } /* 비주얼 */ .main_visual_item { padding-top:70.905%; } .main_visual_content_inner { width:90%; } .main_visual_content_inner .tit1 span { font-size:1.3em } .main_visual_content_inner .tit2 span { font-size:2.6em } .main_visual_content_inner .link a { font-size:1.05em } .main_visual_content_inner .tit3 span br { display:none; } /* 바로가기 */ .quickArea ul li {width: calc(100%/3 - 10px);} .quickArea ul li:nth-child(4) {/* margin-right:0; */} .quickArea .icon { margin-top:1.5em } .quickArea ul li:nth-child(3n+1) {margin-left:1%;} /*.quickArea ul li:nth-child(2n+1) { margin-left:0}*/ /* 교육강좌 */ .educationArea .tab_idx li { margin:0 .5em } .educationArea .tab_idx li a { font-size:1.3em } /* 시설장비 */ #facility .item .title { font-size:1.367em } #facility .item ul li { font-size:1.1em } .facilityArea .icon li { padding:1.5em 1em; } } @media all and (max-width:468px){ /* 비주얼 */ .visual_wrap { padding-top:110px; } .main_visual_item { padding-top:75.905%; } .main_visual_content_inner .tit1 span { font-size:1.2em } .main_visual_content_inner .tit2 font { display:none; } .main_visual_content_inner .tit2 span { font-size:2.4em } .main_visual_content_inner .tit3 span { font-size:1em } .main_visual_content_inner .link a { font-size:1em } /* 바로가기 */ .quickArea .txt { font-size:1.1em } .quickArea .link { font-size:.95em } /* 교육강좌 */ .educationArea .wrap_idx .link_area { text-align:center; } .educationArea .wrap_idx .link_area li { float:inherit; font-size:1.1em } .educationArea .wrap_idx .link_area li a { border:1px solid #373a3f; border-radius:2em; padding:.5em 1.5em; display:inline-block;} .educationArea .wrap_idx .link_area li+li { display:none } /* 시설장비 */ .facilityArea .facility_list .link_area li { float:inherit; font-size:1.1em } .facilityArea .facility_list .link_area li a { border:1px solid #373a3f; border-radius:2em; padding:.5em 1.5em; display:inline-block;} .facilityArea .facility_list .link_area li+li { display:none } .facilityArea .icon li { float:inherit !important; width:100%; padding:1.5em 1.5em 1.5em 9em; } .facilityArea .icon li+li { margin-top:1em; } .facilityArea .icon li .img { position:absolute; left:1.5em; top:50%; transform:translateY(-50%); margin:0; } .facilityArea .icon li .tit { text-align:inherit; } .facilityArea .icon li .tit strong { font-size:1.233em } .facilityArea .icon li .tit span br { display:block; } .facilityArea .icon li .link { bottom:1.5em; top:inherit; left:6.8em; margin-left:0; } } @media all and (max-width:368px){ /* 바로가기 */ .quickArea ul li { width:calc(100%/2 - 10px); } .quickArea ul li:nth-child(4) { margin-right:0;} /* 타이틀 */ h3.tit { font-size:2.1em; } /* 비주얼 */ .main_visual_item { padding-top:88.905%; } .main_visual_content_inner .tit1 span { font-size:1.1em } .main_visual_content_inner .tit2 font { display:none; } .main_visual_content_inner .tit2 span { font-size:2.2em } .main_visual_content_inner .tit3 span { font-size:.95em; line-height:1.4 } .main_visual_content_inner .link a { font-size:.95em } .main_visual .swiper-control { min-width:80%; text-align:center; bottom:5% } /* 교육강좌 */ .educationArea .tab_idx li { margin:0 .4em } .educationArea .tab_idx li a { font-size:1.25em } .education_slide .item .title { font-size:1.35em } .education_slide .slick-arrow { display:block !important; } .education_slide .slick-dots { display:none !important; } .education_slide .slick-arrow:before { width:12px; height:12px; margin-top:-6px } .education_slide .slick-arrow.slick-prev { left:-10px; z-index:2; background:#fff; border-radius:100%; width:32px; height:32px; box-shadow:0 0 2px rgba(0,0,0,0.2) } .education_slide .slick-arrow.slick-prev:before { margin-left:-3px; } .education_slide .slick-arrow.slick-next { right:-10px; z-index:2; background:#fff; border-radius:100%; width:32px; height:32px; box-shadow:0 0 2px rgba(0,0,0,0.2)} .education_slide .slick-arrow.slick-next:before { margin-left:-8px; } .facilityArea .icon li .img { width:5em; height:5em; left:1.5em } .facilityArea .icon li { padding:1.5em 1.5em 1.5em 7.5em; } .facilityArea .icon li .tit span br { display:none; } }