385 lines
16 KiB
CSS
385 lines
16 KiB
CSS
/* 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;}
|
|
}
|
|
|
|
/* 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:9.3%;
|
|
left:49%;
|
|
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:9.3%;
|
|
left:49%;
|
|
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:#9aa60f;
|
|
}
|
|
|
|
#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:10%}
|
|
#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;
|
|
}
|
|
}
|
|
/*메인슬라이드 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_notice {position:relative; width:100%; background:#e0e0e0; padding:40px 0;}
|
|
.main_notice_img {width:75%; margin:30px auto;}
|
|
|
|
.main_gal_wr {position:relative; width:100%; background:#f9f9f9; padding:40px 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}
|
|
}
|
|
|