/* PC */ section.main { position: relative; width: 100%; } .main_title_wr { text-align: center; height: 50px; font-size: 22px; letter-spacing: -1px; color: #2d2d2d; background: url('/img/index/main_title_bar.jpg') no-repeat bottom center } @media ( max-width : 700px) { .main_title_wr { height: auto; background: none; } } /* 201904 new */ #main_cont { width: 100%; } #main_contmid { width: 100%; } #main_contlow { width: 100%; } /* 190201 수정 s */ /* 메인비주얼 */ .visual_txt { position: absolute; padding-top: 5.5%; left: 50%; margin-left: -9%; width: 18%; z-index: 99; } /* 190131 수정*/ .visual_txt img { width: 100%; } .visual { position: relative; width: 100%; height: auto; } /*메인슬라이드 s*/ #slides { position: relative; } #slides, #slides .slidesjs-control, #slides .slidesjs-container, #slides .slidesjs-slide { width: 100%; height: auto; z-index: 0; } #slides .slidesjs-navigation { margin-top: 0px; } #slides a.slidesjs-next, #slides a.slidesjs-previous { display: block; width: 5%; height: 17%; text-indent: -9999px; z-index: 100; } #slides a.slidesjs-next { background-image: url('/img/index/btns-next.png'); background-repeat: no-repeat; background-size: cover; position: absolute; top: 40%; right: 4%; } #slides a:hover.slidesjs-next { } #slides a.slidesjs-previous { background-image: url('/img/index/btns-prev.png'); background-repeat: no-repeat; background-size: cover; position: absolute; top: 40%; left: 4%; } #slides a:hover.slidesjs-previous { } #slides a.slidesjs-play { position: absolute; bottom: 4.3%; left: 47.5%; margin-left: 3.5%; width: 20px; height: 0; padding-top: 15px; background-image: url(/img/index/pagination.png); background-repeat: no-repeat; background-position: 0 -56px; z-index: 1000000; text-indent: -9999px; overflow: hidden; } #slides a:hover.slidesjs-play { width: 20px; height: 0; padding-top: 15px; background-position: 0 -56px; } #slides a.slidesjs-stop { position: absolute; bottom: 4.3%; left: 47.5%; margin-left: 3.5%; width: 20px; height: 0; padding-top: 15px; background-image: url(/img/index/pagination.png); background-repeat: no-repeat; background-position: 0 -40px; z-index: 1000000; text-indent: -9999px; overflow: hidden; } #slides a:hover.slidesjs-stop { width: 20px; height: 0; padding-top: 15px; background-position: 0 -40px; } #slides .slidesjs-pagination { position: absolute; bottom: 9.5%; left: 51%; margin-left: -3%; float: right; list-style: none; border: 0px solid red; z-index: 10000; } #slides .slidesjs-pagination li { float: left; margin: 0 2px; } #slides .slidesjs-pagination li a { display: block; width: 13px; height: 0px; padding-top: 13px; margin: 0 1px; background-color: #fff; /* background-image: url('/img/index/pagination.png'); background-position: 0 10px; */ float: left; overflow: hidden; z-index: 100; border-radius: 100px; } #slides .slidesjs-pagination li a.active, #slides .slidesjs-pagination li a:hover.active { background-position: 0 0 border-radius:100px; background-color: #72dfff; } #slides .slidesjs-pagination li a:hover { background-position: 0 0 } #slides .navbar { overflow: hidden } @media ( max-width : 1300px) { #slides .slidesjs-pagination { left: 50%; } } @media ( max-width : 950px) { #slides .slidesjs-pagination { left: 48%; } } @media ( max-width : 600px) { #slides .slidesjs-pagination { left: 45%; bottom: 12% } #slides .slidesjs-pagination li a { display: block; width: 7px; height: 0px; padding-top: 7px; margin: 0 1px; background-color: #fff; /* background-image: url('/img/index/pagination.png'); background-position: 0 10px; */ float: left; overflow: hidden; z-index: 100; border-radius: 100px; } #slides a.slidesjs-play { position: absolute; bottom: 1.3%; left: 47.5%; background-position: left -25px; background-size: 26px; padding-top:0; padding-bottom: 8px; } #slides a.slidesjs-stop { position: absolute; bottom: 1.3%; left: 47.5%; background-position: left -17px; background-size: 26px; padding-top:0; padding-bottom: 8px; } } /*메인슬라이드 e*/ /* 190201 수정 e */ /* 메인 공지글 */ .main_board_pc { position: relative; width: 100%; background: #f9f9f9; padding: 15px 0; } .main_board { position: relative; width: 1300px; margin: 0px auto; } .main_board_box { position: relative; transition: 0.3s; display: inline-block; background: #fff; border: 1px solid #ddd; width: 23.9%; margin: 0 0.4%; padding: 25px 20px; } .main_board_box .board_title { display: inline-block; font-weight: 500; font-size: 18px; color: #000; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px solid #000 } .main_board_box .board_more { position: absolute; top: 30px; right: 15px; } .main_board_box .board_more a { border: 1px solid #ddd; border-radius: 100px; padding: 5px 10px; font-size: 13px; color: #888888; font-weight: 500 } .main_board_box .board_more a:hover { border: 1px solid #979797; border-radius: 100px; padding: 5px 10px; font-size: 13px; color: #404040; font-weight: 500 } .main_board_box .board_list { font-size: 14px; } .main_board_box .board_list ul li { position: relative; padding: 2px; } .main_board_box .board_list ul li .lt_list { display: inline-block; width: 76%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .main_board_box .board_list ul li .lt_date { position: absolute; text-align: right; top: 3px; right: 0px; font-size: 13px; color: #8d8d8d; } .main_board_mobile { display: none; } @media ( max-width : 1300px) { .main_board { position: relative; width: 100%; margin: 0px auto; } .main_board_box .board_list ul li .lt_list { width: 69%; } } @media ( max-width : 960px) { .main_board_pc { padding: 10px 0 10px 1%; } .main_board { position: relative; width: 100%; margin: 0px auto; } .main_board_box { width: 48%; margin: 0.5%; } } @media ( max-width : 480px) { .main_board_pc { display: none; } .main_board_mobile { display: block; border: 1px solid #ddd; padding: 10px; margin: 10px; } .main_board_box { width: 100%; border: 0; margin: 0px; padding: 0px } .main_board_box .board_more { position: absolute; top: -45px; right: 0px; } .main_board_box .board_list ul li { position: relative; padding: 0px; } /*메인 탭*/ .tab_main { list-style: none; overflow: hidden; } .tab_main li { display: inline-block; font-weight: 500; margin-right: 10px; font-size: 18px; color: #949494; padding-bottom: 5px; border-bottom: 2px solid #949494; cursor: pointer; transition: 0.3s; } .tab_main li:first-child { background: none; } .tab_main li.current span.count { color: #000; color: #000; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px solid #000; } .tab_main li span.count { color: #000; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px solid #000; } .tab_maincontent { display: none; } .tab_maincontent.current { display: block; } ul.tab_main li.current { color: #000; margin-bottom: 20px; padding-bottom: 5px; border-bottom: 2px solid #000; } ul.tab_main li:hover { color: #000; border-bottom: 2px solid #000; } } /* 메인 소식 */ .main_cont1 { position: relative; width: 100%; background: #eff1f4; padding: 0px 0; } @media screen and (max-width:480px) { .main_cont1 { width: 100%; background: #eff1f4; padding: 0px 0; } } .main_notice { position: relative; width: 100%; background: #eff1f4; padding: 0px 0; } .main_notice_img { width: 75%; margin: 30px auto; } .main_gal_wr { position: relative; width: 100%; background: #f9f9f9; padding: 0px 0; } .main_top_wr { position: relative; width: 1300px; height: 750px; margin: 0 auto; transition: 0.3s; } @media ( max-width : 1300px) { .main_top_wr { position: relative; width: 100%; height: 0; padding-bottom: 58%; margin: 0 auto; } } @media ( max-width : 960px) { .main_top_wr { position: relative; width: 100%; height: 0; padding-bottom: 120%; margin: 0 auto; } } @media ( max-width : 700px) { .main_gal_wr { position: relative; width: 100%; background: #f9f9f9; padding: 10px 0; } .main_top_wr { position: relative; width: 100%; height: auto; padding-bottom: 50%; margin: 0 auto; } .main_notice { position: relative; width: 100%; background: #e0e0e0; padding: 20px 0; } .main_notice .main_title_wr { font-size: 18px; } .main_notice_img { width: 75%; margin: 10px auto; margin-bottom: 40px } } /* KCDF 갤러리 안내 */ .main_gal_left { position: absolute; left: 0; top: 0px; width: 718px; } .main_gal_menu { position: relative; margin: 20px 0 0px; width: 718px; height: 350px; border: 1px solid #e1e1e1; background: url('/img/index/main_gallery_bg_pc.jpg') no-repeat; } .main_gal_menu ul { position: absolute; bottom: 0; left: 0; width: 428px; } .main_gal_menu ul li { float: left; width: 214px; height: 145px; border: 1px solid rgba(255, 255, 255, 0.5) } @media ( max-width : 1300px) { .main_gal_left { position: absolute; left: 0; top: 0px; width: 60%; padding: 0 10px } .main_gal_menu { position: relative; margin: 20px 0 10px; width: 100%; height: 0; padding-bottom: 48%; border: 1px solid #e1e1e1; background: url('/img/index/main_gallery_bg_pc.jpg') no-repeat; background-size: 100% } .main_gal_menu ul { position: absolute; bottom: 0px; left: 0; width: 54% } .main_gal_menu ul li { float: left; margin: -1px; width: 49%; height: 0; padding-bottom: 33.4%; border: 1px solid rgba(255, 255, 255, 0.5) } .main_gal_menu ul li img { width: 100%; } } @media ( max-width : 960px) { .main_gal_left { position: absolute; left: 0; top: 0px; width: 100%; padding: 0 10px } .main_gal_menu { position: relative; margin: 20px 0 10px; width: 100%; height: 0; padding-bottom: 38%; border: 1px solid #e1e1e1; background: url('/img/index/main_gallery_bg_tab.jpg') no-repeat; background-size: 100% } .main_gal_menu ul { position: absolute; bottom: 0px; left: 0; width: 50% } .main_gal_menu ul li { float: left; margin: -1px; width: 50%; height: 0; padding-bottom: 33.4%; border: 1px solid rgba(255, 255, 255, 0.5) } .main_gal_menu ul li img { width: 100%; } } @media ( max-width : 700px) { .main_gal_left { position: relative; left: auto; top: auto; width: 100%; padding: 10px } .main_gal_menu { position: relative; margin: 20px 0 10px; width: 100%; height: 0; padding-bottom: 57%; border: 1px solid #e1e1e1; background: url('/img/index/main_gallery_bg_mobile.jpg') no-repeat; background-size: 100% } .main_gal_menu ul { position: absolute; bottom: 0px; left: 0; width: 77% } .main_gal_menu ul li { float: left; margin: -1px; width: 50%; height: 0; padding-bottom: 33.4%; border: 1px solid rgba(255, 255, 255, 0.5) } .main_gal_menu ul li img { width: 100%; } .main_gal_left .main_title_wr { font-size: 18px; } } /* KCDF 갤러리 전시 */ .main_gal_right { position: absolute; right: 0; top: 0px; width: 582px; } .main_gal_img { width: 53%; margin: 20px auto } @media ( max-width : 1300px) { .main_gal_right { position: absolute; right: 0; top: 0px; width: 40%; padding: 0 10px } } @media ( max-width : 960px) { .main_gal_right { position: absolute; right: 0; top: 39%; width: 47.5%; padding: 0 10px } .main_gal_right .main_title_wr { font-size: 18px; margin-top: 20px; } } @media ( max-width : 700px) { .main_gal_right { position: relative; right: auto; top: auto; width: 100%; padding: 0 10px; margin-bottom: 50px } .main_gal_right .main_title_wr { font-size: 18px; margin: 0px; } } /* 모바일 하단메뉴 */ @media ( max-width : 700px) { .mobile_bottom { position: relative; } } /* KCDF 블로그 */ .main_blog { position: absolute; left: 0; top: 434px; width: 32.5%; height: 325px; padding: 20px 15px 15px; border: 1px solid #e1e1e1; background: #fff } .main_blog_list { padding-top: 20px; } .main_blog_list li { position: relative; float: left; width: 48%; margin: 1%; height: 0; padding-top: 51%; } .blog_thum_bg { position: absolute; bottom: 0; background: rgba(0, 0, 0, 0.4); padding: 10px; color: #fff; font-size: 13px; line-height: 15px } @media ( max-width : 1300px) { .main_blog { position: absolute; left: 0; top: 62%; width: 32.5%; height: 0; padding-bottom: 20.5%; margin: 0 10px } .main_blog_list { padding-top: 10px; } .main_blog .main_title_wr { font-size: 18px } .main_blog_list li { padding-top: 44%; } } @media ( max-width : 960px) { .main_blog { position: absolute; left: 0; top: 40%; width: 47.5%; height: 0; padding-bottom: 36%; margin: 0 10px } .main_blog .main_title_wr { font-size: 18px } .main_blog_list li { padding-top: 60%; } } @media ( max-width : 700px) { .main_blog { position: absolute; left: 0; top: 72%; width: 47.5%; height: 0; padding: 0; margin: 0 10px; border: 0; } .main_blog .main_title_wr { display: none } .main_blog_list { width: 100%; padding-top: 0px; } .main_blog_list li { position: relative; float: left; width: 100%; margin: 0; height: 0; padding-top: 104%; } .main_blog_list li:last-child { display: none } } /*190207 수정s*/ /* 우수문화상품지정제 */ .main_kribbon { position: absolute; left: 33.7%; top: 434px; width: 32.5%; height: 325px; padding: 15px; border: 1px solid #e1e1e1; background: #fff } .kribbon_thumnail { border: 0px solid red; position: absolute; width: 31%; height: 0; padding-bottom: 46%; left: 3.5%; bottom: 25%; } .kribbon_left { float: left } .kribbon_left .btn { position: absolute; left: 15px; bottom: 30px; width: 130px; height: 40px; } .kribbon_left .btn a { display: block; width: 130px; height: 40px; line-height: 40px; padding: 0 10px; color: #fff; background: url('/img/index/k_ribbon_icon.png') no-repeat #09afba center right 20px; } .kribbon_left .btn a:hover { background: url('/img/index/k_ribbon_icon.png') no-repeat #048e97 center right 20px; } .kribbon_right { float: right; width: 60%; border-radius: 20px; background: #f3f3f3; padding: 20px; word-break: keep-all } .kribbon_right .title { height: 35px; margin-bottom: 10px; font-weight: 700; font-size: 17px; color: #282828; background: url('/img/index/k_ribbon_bar.jpg') no-repeat left bottom; } .kribbon_right .text { font-weight: 400; font-size: 13px; color: #727272; line-height: 18px } @media ( max-width : 1300px) { .main_kribbon { position: absolute; left: 33.7%; top: 62%; width: 31%; height: 0; padding-bottom: 21%; margin: 0 10px; } .kribbon_thumnail { position: absolute; width: 31%; height: 0; padding-bottom: 45%; left: 50%; margin-left: -15%; bottom: 31%; } .kribbon_left .btn { position: absolute; left: 50%; bottom: 30px; margin-left: -65px; width: 130px; height: 40px; } .kribbon_right { display: none } } @media ( max-width : 960px) { .main_kribbon { position: absolute; left: 0; top: 74.5%; width: 47.5%; height: 0; padding-bottom: 30%; margin: 0 10px; } .kribbon_thumnail { position: absolute; width: 31%; height: 0; padding-bottom: 44%; left: 50%; margin-left: -15%; bottom: 28%; } } @media ( max-width : 700px) { .main_kribbon { position: absolute; left: auto; right: 0; top: 10%; width: 49.7%; height: 0; padding-bottom: 20%; margin: 25% 10px 0; background: url('/img/index/k_ribbon_img_m2.jpg') no-repeat #fff; background-size: 100% } .kribbon_thumnail { position: absolute; width: 33%; height: 0; padding-bottom: 45%; left: 4%; margin-left: auto; bottom: 5%; } .kribbon_left .btn { display: none } .kribbon_left .btn a { display: block; width: 100px; height: 25px; line-height: 25px; background: url('/img/index/k_ribbon_icon.png') no-repeat #09afba center right 5px; } .kribbon_left .btn a:hover { background: url('/img/index/k_ribbon_icon.png') no-repeat #048e97 center right 5px; } } /*190207 수정e*/ /*190219 수정s*/ /* 정기구독 */ .main_magazine { position: absolute; right: 0; top: 434px; width: 32.5%; height: 325px; background: url('/img/index/main_magazine_bg2.jpg') no-repeat; background-size: cover } .magazine_thumnail { border: 0px solid red; position: absolute; width: 44%; height: 0; padding-bottom: 57.5%; right: 26.5px; bottom: 58px; } .main_magazine .btn { padding: 30px } .main_magazine .text01 { font-size: 14px; font-weight: 500; color: #414141; margin: 1.5% 0 0 3%; } .main_magazine .text02 { font-size: 14px; font-weight: 500; color: #fff; margin: 8% 0 0 4.5%; } @media ( max-width : 1300px) { .main_magazine { position: absolute; right: 0; top: 62%; width: 32.5%; height: 0; padding-bottom: 22.5%; margin: 0 10px; background: url('/img/index/main_magazine_bg_tab.jpg') no-repeat #666666; background-size: 100% } .magazine_thumnail { position: absolute; width: 38.5%; height: 0; padding-bottom: 50%; right: 8.5%; bottom: 20%; } .main_magazine .btn { width: 37%; padding: 5% } .main_magazine .btn img { width: 100% } .main_magazine .text01 { display: none } .main_magazine .text02 { display: none } } @media ( max-width : 960px) { .main_magazine { position: absolute; right: 0; top: 74.5%; width: 47.5%; height: 0; padding-bottom: 32%; margin: 0 10px; background: url('/img/index/main_magazine_bg_tab.jpg') no-repeat #666666; background-size: 100% } .magazine_thumnail { position: absolute; width: 38%; height: 0; padding-bottom: 49.5%; right: 8.5%; bottom: 18%; } } @media ( max-width : 700px) { .main_magazine { position: absolute; right: 0; top: 0; width: 49.7%; height: 0; padding-bottom: 25%; margin: 0 10px; background: url('/img/index/main_magazine_bg_m2.jpg') no-repeat #666666; background-size: 100% } .magazine_thumnail { position: absolute; width: 31.5%; height: 0; padding-bottom: 41%; right: 6%; bottom: 8%; } .main_magazine .btn { display: none } } /*190219 수정e*/ /*하단배너 190207 수정*/ #link_wrap { position: relative; width: 100%; height: 80px; border-top: 1px solid #e5e5e5; overflow: hidden } #link_wrap .link_wrap_1300 { position: relative; width: 1280px; margin: 0 auto; } .banner_img { margin: 23px auto } @media ( max-width : 1300px) { #link_wrap .link_wrap_1300 { position: relative; width: 90%; margin: 0 auto; } } @media ( max-width : 700px) { #link_wrap { position: relative; width: 100%; height: 70px; border-top: 1px solid #e5e5e5; overflow: hidden } }