@charset "utf-8"; #container {width:100%;} /* visual */ .visual {position:relative; width:100%; overflow:hidden;} .visBtn {position:absolute; width:100%; bottom:20px; z-index:105; text-align:center;} /*.visBtn > div {display:inline-block; width:auto; height:33px; padding:0 20px; background:rgba(0,0,0,0.5); border-radius:33px 33px;}*/ .visBtn > div > * {font-size:0; line-height:0; display:inline-block;} .visBtn #vis_page {padding-top:4px; overflow:hidden;} .visBtn #vis_page a {display:inline-block; width:25px; height:25px; text-indent:-9999px; background:url('../img/main/vis_pager.png') no-repeat 0 0;} .visBtn #vis_page a.cycle-pager-active {background-image:url('../img/main/vis_pager_active.png');} .visCtl {position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-600px; z-index:101;} .visCtl a {display:block; width:50px; height:50px; text-indent:-9999px;} .visCtl a.vis_prev {float:left; background:rgba(0,0,0,0.5) url('../img/main/vis_prev.png') no-repeat center center;} .visCtl a.vis_next {float:right; background:rgba(0,0,0,0.5) url('../img/main/vis_next.png') no-repeat center center;} .visImg li {width:100%; font-size:0; line-height:0; overflow:hidden;} .visImg li:not(:first-child) {display:none;} @media all and (min-width:1280px){ .visImg img {width:100%;} } @media all and (max-width:1279px){ .visCtl {margin-top:-20px; margin-left:-47%;} .visCtl a {width:40px; height:40px;} } @media (min-width:1024px) and (max-width:1279px){ .visImg img {width:150%; margin-left:-25%;} } @media all and (max-width:1023px){ .visBtn {bottom:18px;} .visImg img {width:200%; margin-left:-50%;} } #contents {margin:0 auto; text-align:left;} .tit1 {font-weight:bold; font-size:19px;} .tit2 {text-align:center;} .tit2 a {display:inline-block; padding-right:40px; background:url('../img/main/bt_more.png') no-repeat right 3px;} @media all and (min-width:1280px){ #contents {width:1200px;} } @media (min-width:1024px) and (max-width:1279px){ #contents {width:94%;} } @media all and (max-width:1023px){ .inner {width:100%; padding:0 3%;} } .mainCont1 > div {position:relative; float:left;} .mainCont2 > div {position:relative; float:left;} .mainCont3 > div {position:relative; float:left;} .mainCont4 > div {position:relative; float:left;} /* Quick Menu .quickWrap {clear:both; width:100%; padding-top:15px; padding-bottom:17px; border-bottom:1px solid #d4d4d4; overflow:hidden;} .quick .tit {float:left;} .quick ul {} .quick li {float:left; width:70px; height:78px; z-index:10; overflow:hidden; margin-right:50px;} .quick li:first-child {margin-left:41px;} .quick li:last-child {margin-right:42px;} @media (min-width:769px) and (max-width:1023px){ .mainCont1 {width:100%; padding:0 3%;} } @media all and (max-width:768px){ .mainCont1 > div {float:none; width:100%; padding-right:3%; padding-left:3%;} .quick .tit {float:none;} .quick li:first-child {margin-left:0px;} .quick li {width:70px; height:78px;margin-right:1.5%;} }*/ /* Quick Menu */ .quickWrap {clear:both; width:100%; padding-top:15px; padding-bottom:17px; border-bottom:1px solid #d4d4d4; overflow:hidden;} .quick .tit {float:left;} .quick ul {} .quick li {float:left; width:70px; height:78px; z-index:10; overflow:hidden; margin-right:100px;} .quick li:first-child {margin-left:41px;} .quick li:last-child {margin-right:42px;} @media (min-width:769px) and (max-width:1023px){ .mainCont1 {width:100%; padding:0 3%;} } @media all and (max-width:768px){ .mainCont1 > div {float:none; width:100%; padding-right:3%; padding-left:3%;} .quick .tit {float:none;} .quick li:first-child {margin-left:0px;} .quick li {width:70px; height:78px;margin-right:12.5%;} } /* Main Banner */ .mainbnWrap {clear:both; padding-top:30px; padding-bottom:30px; border-bottom:1px solid #d4d4d4; overflow:hidden;} .mainbn {float:left;} .mainbn ul {} .mainbn li {float:left; width:285px; height:308px; z-index:10; overflow:hidden; margin-right:20px;} .mainbn li:last-child {margin-right:0px;} @media (min-width:769px) and (max-width:1023px){ .mainCont2 {width:100%; padding:0 3%;} } @media all and (max-width:768px){ .mainCont2 > div {float:none; width:100%; padding-right:3%; padding-left:3%;} .mainbn {float:none; width:100%; padding-bottom:40px;} .mainbn li {float:none; margin:auto; margin-bottom:10px;} .mainbn li:last-child {margin:auto;} } /* News */ .newsWrap { width:31.4%; padding-top:30px; height:104px; padding-bottom:50px; margin-right:30px; } .news .tit {float:left;font-weight:bold; font-size:19px; width:25%;} .news .cont {float:right; width:75%; padding-right:40px; border-right:1px solid #d4d4d4;} .news .cont ul {} .news .cont ul li {height:25px; overflow:hidden;} .news .cont ul li a {display:inline-block; font-size:12px; line-height:14px; max-width:70%; padding-left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:url(../img/main/bull01.png) no-repeat 0 50%} .news .cont ul li img {margin-right:3px; vertical-align:-3px;} .news .cont ul li span {float:right; display:inline-block; padding-top:2px; font-size:12px; color:#888; letter-spacing:0.0;} /* 언론보도 */ .pressWrap {width:31.4%; padding-top:30px; height:104px; padding-bottom:50px;} .press .tit {float:left;font-weight:bold; font-size:19px; width:25%;} .press .cont {float:right;width:75%; padding-right:40px;} .press .cont ul {} .press .cont ul li {height:25px; overflow:hidden;} .press .cont ul li a {display:inline-block; font-size:12px; line-height:14px; max-width:70%;padding-left:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;background:url(../img/main/bull01.png) no-repeat 0 50%} .press .cont ul li img {margin-right:3px; vertical-align:-3px;} .press .cont ul li span {float:right; display:inline-block; padding-top:2px; font-size:12px; color:#888; letter-spacing:0.0;} /* Help */ .helpWrap {width:33.3%; padding-top:30px; padding-bottom:50px; overflow:hidden; margin-right:0px;} .help img {float:right;width:365px;} @media (min-width:769px) and (max-width:1023px){ .mainCont3 {width:50%; padding:0 3%;} } @media all and (max-width:768px){ .mainCont3 > div {float:none; width:100%; padding-right:3%; padding-left:3%;} .newsWrap {margin-bottom:20px;} .news .cont {border-right:0px solid #d4d4d4;} .help img {float:none;width:100%;padding:0 1%;} } /* 공지사항 width:389px; */ .notice {width:34.4%; padding-top:30px; padding-right:30px;} .notice h3 {text-align:center;} .notice ul {margin-top:27px;} .notice ul li {height:30px; overflow:hidden;} .notice ul li a {display:inline-block; max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .notice ul li img {margin-right:3px; vertical-align:-3px;} .notice ul li span {float:right; display:inline-block; padding-top:2px; font-size:12px; color:#888; letter-spacing:0.0;} .notice .more {position:absolute; top:30px; right:30px; width:22px; height:22px; background:url('../img/main/bt_more.png') no-repeat 0 0; text-indent:-9999px;} /* 알림창 width:422px; */ .popup {width:31.2%; padding:26px 2.5%; border-left:1px solid #ddd; border-right:1px solid #ddd;} .popup h3 {padding-bottom:13px; text-align:center;} .popup .popBtn {position:absolute; top:30px; right:30px;} .popup .popBtn a {display:inline-block;} .popup .popImg li,.popImg li img {width:100%;} .popup .popImg li:not(:first-child) {display:none;} @media all and (min-width:1024px){ .popup {height:252px;} } @media all and (max-width:1023px){ .mainCont4 > div {width:50%;} .popup {padding-right:0; border-right:0;} .popup .popBtn {right:0;} } @media (min-width:769px) and (max-width:1023px){ .mainCont4 {width:100%; padding:0 3%;} } @media all and (max-width:768px){ .mainCont4 > div {float:none; width:100%; padding-right:3%; padding-left:3%;} .notice .more {right:3%;} .popup {border-top:1px solid #ddd;} .popup .popBtn {right:3%;} } /* 관광책자 width:389px; */ .guide {float:left; width:34.4%; padding-top:30px;} .guide ul {padding-left:7%;} .guide li {display:table; padding-left:107px;} .guide li.guide1 {background:url('../img/main/guide_ico1.png') no-repeat 0 0;} .guide li.guide2 {margin-top:14px; background:url('../img/main/guide_ico2.png') no-repeat 0 0;} .guide li a {display:table-cell; width:100%; height:89px; padding-right:42px; background:url('../img/main/guide_more.png') no-repeat right center; vertical-align:middle;} .guide li a dl dd {margin-top:9px; line-height:20px; color:#676767; height:40px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} @media all and (max-width:1023px){ .guide {clear:both; float:none; width:100%; padding-bottom:30px; border-top:1px solid #ddd;} .guide ul {overflow:hidden; padding-left:0;} .guide li {float:left; width:48%; height:89px;} .guide li.guide2 {margin-top:0; margin-left:4%;} .guide li a dl {padding-top:0;} } @media all and (max-width:768px){ .guide li {float:none; width:100%;} .guide li.guide2 {margin-top:14px; margin-left:0;} } /* 군위 보물지도 */ .mapWrap {clear:both; padding-bottom:35px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; overflow:hidden;} .mapWrap h3 {margin-top:35px;} .mapWrap .st {margin-top:14px; font-size:17px; color:#555; text-align:center;} .map {margin-top:20px; border:1px solid #ddd; border-right:0; overflow:hidden;} .map li {float:left; width:16.666%; height:398px; border-right:1px solid #ddd; z-index:10; overflow:hidden;} .map li a {position:relative; display:block; width:100%; height:100%; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; } .map li a:hover { -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; } .map li a > * {position:absolute; width:100%;} .map li a > p {width:100%; z-index:98;} .map li a > p img {width:100%; min-height:214px;} .map li a > div {height:199px; padding-top:47px; text-align:center; z-index:100;} .map li.odd a > p {top:0;} .map li.odd a > div {bottom:0; background:url('../img/main/map_bg_bot.png') no-repeat center 0;} .map li.odd a:hover > div {background:url('../img/main/map_bg_bot_over.png') no-repeat center 0;} .map li.even a > p {bottom:0;} .map li.even a > div {top:0; background:url('../img/main/map_bg_top.png') no-repeat center 0;} .map li.even a:hover > div {background:url('../img/main/map_bg_top_over.png') no-repeat center 0;} .map li a > div .cate {display:inline-block; margin:0 auto; padding:5px 10px 0; height:27px; font-size:13px; color:#c2780e; border:1px solid #df8a10; border-radius:23px 23px;} .map li a > div .subj {margin-top:9px; font-size:21px; color:#333;} .map li a > div .cont {margin-top:16px; padding:0 20px; font-weight:normal; font-size:13px; color:#666; line-height:18px;} .map li a:hover > div .cate {color:#fff; border-color:#fff;} .map li a:hover > div .subj {color:#fff;} .map li a:hover > div .cont {color:#fff;} .map li.odd a:after {background:rgba(0,0,0,.5) url('../img/main/map_over.png') no-repeat 50% 20%;} .map li.even a:after {background:rgba(0,0,0,.5) url('../img/main/map_over.png') no-repeat 50% 80%;} .map li a:after {content:''; display:block; position:absolute; right:0; left:0; height:100%; -webkit-opacity:0; -moz-opacity:0; -ms-opacity:0; -o-opacity:0; opacity:0; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease; z-index:99; } .map li a:hover:after { -webkit-opacity:1; -moz-opacity:1; -ms-opacity:1; -o-opacity:1; opacity:1; } @media all and (max-width:1023px){ .map li {width:33.333%;} .map li.map4,.map li.map5,.map li.map6 {border-top:1px solid #ddd;} } @media all and (max-width:768px){ .map li {width:50%;} } .samWrap,.quizWrap {float:left; width:50%; padding-top:35px;} .st {margin-top:12px; padding-bottom:30px; font-size:15px; color:#555; text-align:center;} @media all and (max-width:768px){ .mapWrap .st {margin-top:0; padding-bottom:0; font-size:0; line-height:0;} .st {margin-top:19px; padding-bottom:0; font-size:0; line-height:0;} } /* 삼국유사 width:174px; margin-left:21px; */ .samWrap {padding-bottom:50px; border-right:1px solid #ddd;} .sam {overflow:hidden; text-align:center;} .sam li {float:left; width:31%; margin-left:3.5%;} .sam li:first-child {margin-left:0;} .sam a {display:block; width:100%;} .sam a p img {width:100%; border-radius:15px 15px;} .sam a dl dt {margin-top:20px; font:bold 18px 'Nanum Myeongjo', serif; color:#333;} .sam a dl dd {margin-top:3px; font-size:13px; color:#777; line-height:20px;} .sam a dl dd span.con {height:40px; line-height:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .sam a dl dd span.btn {display:block; width:90px; height:25px; margin:18px auto 0; padding-top:4px; font-size:13px; color:#000; line-height:1; border:1px solid #ddd; background:#f5f5f5; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } .sam a dl dd span.btn:hover {color:#fff; background:#82a90d; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } @media all and (max-width:768px){ .sam li {float:none; width:100%; margin-top:15px; margin-left:0; overflow:hidden;} .sam li:first-child {margin-top:0;} .sam p {float:left; width:30%;} .sam dl {float:left; width:66%; margin-left:4%; text-align:left;} .sam dt {margin-top:0;} .sam dd {} .sam dd span.btn {margin-left:0 !important; margin-right:0; text-align:center;} } @media all and (max-width:480px){ .sam a dl dt {margin-top:0;} .sam a dl dd span.btn {margin-top:13px;} } /* 삼국유사 퀴즈대회 height:488px; */ .quizWrap {} /*.quizWrap .lnk {float:left; width:55%; overflow:hidden;}*/ .quizWrap .lnk {width:80%; margin:0 auto 25px; overflow:hidden;} .quizWrap .lnk li {float:left; width:25%;/*width:33.333%;*/ text-align:center;} .quizWrap .lnk li a {display:block; width:80px; text-align:center;} .quizWrap .lnk li a span {display:inline-block; width:80px; height:80px; margin-bottom:10px; border:1px solid #ddd; border-radius:50% 50%; -webkit-transition-duration: .3s; -moz-transition-duration: .3s; -o-transition-duration: .3s; transition-duration: .3s; } .quizWrap .lnk li.lnk1 a span {background:#f5f5f5 url('../img/main/quiz_ico1.png') no-repeat 24px center;} .quizWrap .lnk li.lnk2 a span {background:#f5f5f5 url('../img/main/quiz_ico2.png') no-repeat center center;} .quizWrap .lnk li.lnk3 a span {background:#f5f5f5 url('../img/main/quiz_ico3.png') no-repeat center center;} .quizWrap .lnk li.lnk4 a span {background:#f5f5f5 url('../img/main/quiz_ico4.png') no-repeat center center;} .quizWrap .sch {float:right; width:45%; /*width:257px;*/ margin-bottom:25px; border:1px solid #ddd; text-align:center;} .quizWrap .sch dt {height:40px; line-height:40px; font-size:15px; border-bottom:1px solid #ddd; background:#f5f5f5;} .quizWrap .sch dt span {padding-left:28px; background:url('../img/main/i_clock.png') no-repeat 0 center;} .quizWrap .sch dd {height:63px; padding-top:23px; font-size:16px; background:url('../img/main/quiz_corner.png') no-repeat right bottom;} .quizWrap .sch dd span {padding-right:2px; font-size:15px; color:#5d5d5d; letter-spacing:0;} .quizWrap .gallery {position:relative; clear:both; padding-top:26px; border-top:1px solid #efefef;} .quizWrap .gallery h3 {height:34px; font-size:17px; color:#333;} .quizWrap .gallery ul {overflow:hidden;} .quizWrap .gallery li {float:left; width:22.75%; margin-left:3%;} .quizWrap .gallery li:first-child {margin-left:0;} .quizWrap .gallery li a {display:block;} .quizWrap .gallery li a p {border:1px solid #ddd; font-size:0; line-height:0;} .quizWrap .gallery li a p img {width:100%;} .quizWrap .gallery li a span {display:block; margin-top:10px; font-size:13px; text-align:center; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .quizWrap .gallery .more {position:absolute; top:24px; right:0; display:block; padding:5px 7px; font-size:12px; color:#555; border:1px solid #ddd; background:#fff;} @media all and (min-width:1024px){ .samWrap {padding-right:29px;} .quizWrap {padding-left:29px;} } @media all and (max-width:1023px){ .samWrap {float:none; width:100%; border-right:0; border-bottom:1px solid #ddd;} .quizWrap {float:none; width:100%; padding-bottom:40px;} .quizWrap .lnk {/*width:48.5%;*/ width:80%;} .quizWrap .lnk li {/*width:33.3%;*/width:25%; margin-right:0;} .quizWrap .lnk li a {margin:0 auto;} .quizWrap .sch {width:48.5%;} } @media all and (max-width:768px){ .quizWrap .gallery li {width:31%; margin-left:3.5%;} .quizWrap .gallery li.thumb4 {display:none;} } @media all and (max-width:480px){ .quizWrap .lnk {float:none; width:100%;} .quizWrap .sch {float:none; width:100%; margin-top:25px;} .quizWrap .gallery li {width:48.5%; margin-left:3%;} .quizWrap .gallery li.thumb3 {display:none;} }