/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2020.07.27 | 김효진 | 최초 등록
 * 2020.07.27 | 김효진 | 요구반영. 결함개선. 고도화.
 * </pre>
 * @author 디자인팀 김효진
 * @since 2020.07.27
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */
/* 공통 */
#body {font-family:'Noto Sans','본고딕','Noto Sans KR','Noto Sans CJK KR',NotoSans,sans-serif;font-size:13px;letter-spacing:-.06em;}
@media all and (min-width:500px){
	#body {font-size:14px}
}
@media all and (min-width:768px){
	#body {font-size:15px}
}
@media all and (min-width:1000px){
	#body {font-size:16px}
}

#wrap>.container {max-width:none;}
.init img {max-width:100%}
.mainbody .h1 {font-family:"GimhaeGaya", sans-serif;font-size:1.5em;font-weight:700;letter-spacing:-.06em;line-height:1;color:#000}
[class*="mainbody"] .container {margin:auto;box-sizing:border-box;}
[class*="mainbody"] .owl-carousel {display:block;}
@media all and (min-width:500px){
	.mainbody .h1 {font-size:1.75em}
}


/* mainbody1 */
#mainbody1 {position:relative;}

/* 메인비쥬얼 */
#vpr1 {position:relative;margin:auto;width:320px;}
#vpr1 .wrap1 {width:518px;height:184px;margin-left:-99px;}
#vpr1 .menu {position:absolute;bottom:10%;z-index:2;left:0;width:100%;text-align:center;}
#vpr1 .menu * {display:inline-block;vertical-align:middle;}
#vpr1 .menu .mControl {position:relative;margin-right:1%;}
#vpr1 .menu .mControl:after {position:absolute;top:0;left:0;content:"";display:none;width:100%;height:100%;box-shadow:0 0 80px 30px rgba(0,0,0,.8);}
#vpr1 .menu .mControl button {position:relative;width:29px;height:29px;background:transparent;border:2px solid #fff;border-radius:50%;box-sizing:border-box;margin-right:4px;z-index:1}
#vpr1 .menu .mControl button:before, #vpr1 .menu .mControl button.stop:after {content:"";display:block;}
#vpr1 .menu .mControl button.prev:before {position:absolute;top:calc(50% - 6px);left:calc(50% - 4px);width:12px;height:12px;border:2px solid #fff;box-sizing:border-box;transform:rotate(45deg);border-top:0;border-right:0;}
#vpr1 .menu .mControl button.next:before {position:absolute;top:calc(50% - 6px);right:calc(50% - 4px);width:12px;height:12px;border:2px solid #fff;box-sizing:border-box;transform:rotate(-45deg);border-top:0;border-left:0;}
#vpr1 .menu .mControl button.stop:before, #vpr1 .menu .mControl button.stop:after {display:inline-block;vertical-align:middle;width:2px;height:13px;background:#fff;margin:-2px 2.5px 0}
#vpr1 .menu .mControl button.play {display:none;}
#vpr1 .menu .mControl button.play:before {width:0;border-style:solid;border-width:8px 11px;border-color:transparent transparent transparent #fff;margin-left:24px}
#vpr1 .menu .goPage {width:100px;}
#vpr1 .menu .goPage a {position:relative;display:inline-block;text-indent:-9999px;width:45%;height:18px;;margin-right:-.25em;}
#vpr1 .menu .goPage a:before {position:absolute;top:calc(50% - 2.5px);left:0;content:"";display:block;width:100%;height:5px;background-color:#fff;}
#vpr1 .menu .goPage a.on {width:55%;}
#vpr1 .menu .goPage a.on:before {width:100%;transition:all .4s ease;background:#c78c3e}
@media all and (min-width:500px){
	#vpr1 {margin:auto}
	#vpr1 .wrap1 {width:768px;height:272px;margin-left:-224px;}
	#vpr1 .menu {left:-25%;bottom:26%;text-align:left}
	#vpr1 .menu .mControl {box-shadow:0 0 100px rgba(0,0,0,.71) inset;}
	#vpr1 .menu .mControl:after {display:block;}
	#vpr1 .menu .mControl button {width:40px;height:40px}
	#vpr1 .menu .goPage {width:180px}

}
@media all and (min-width:768px){
	#vpr1 {width:500px;}
	#vpr1 .wrap1 {width:1152px;height:409px;margin-left:-326px;}
	#vpr1 .menu {left:50%;width:768px;margin-left:-384px}
}
@media all and (min-width:1000px){
	#vpr1 {width:768px;}
	#vpr1 .wrap1 {width:1536px;height:544px;margin-left:-384px;}
	#vpr1 .menu {width:1000px;margin-left:-500px}
	#vpr1 .menu .mControl {margin-right:35px}
	#vpr1 .menu .mControl button {width:58px;height:58px}
	#vpr1 .menu .goPage {width:274px}
	#vpr1 .menu .goPage a {width:120px;}
	#vpr1 .menu .goPage a.on {width:150px}
}
@media all and (min-width:1260px){
	#vpr1 {width:1200px;}
	#vpr1 .wrap1 {width:1920px;height:680px;margin-left:-360px;}
	#vpr1 .menu {width:1200px;margin-left:-600px;}
}

/* 팝업존 */
#popup1 {position:relative;background:#169690;overflow:hidden;max-width:405px;margin:20px auto;z-index:2}
#popup1 .menu {position:absolute;bottom:20px;left:0;width:100%;text-align:center;z-index:2}
#popup1 .menu span, #popup1 .menu button {display:inline-block;vertical-align:top}
#popup1 .menu a {position:relative;display:inline-block;vertical-align:top;width:20px;height:20px;text-indent:-9999px;margin-top:3px}
#popup1 .menu a:before {position:absolute;top:calc(50% - 6px);left:calc(50% - 6px);content:"";display:block;width:12px;height:12px;border-radius:50%;box-sizing:border-box;background:#fff;}
#popup1 .menu a.on:before {border:3px solid #fff;background:transparent}
#popup1 .menu button {position:relative;width:26px;height:26px;border:0;background:#fff;border-radius:50%;}
#popup1 .menu button:before, #popup1 .menu button:after {content:"";display:inline-block;vertical-align:middle;}
#popup1 .menu button.stop:before, #popup1 .menu button.stop:after {width:2px;height:8px;background:#000;margin:-2px 1.5px 0}
#popup1 .menu button.play, #popup1 .menu button.play:after {display:none}
#popup1 .menu button.play:before {width:0;border-style:solid;border-width:5px;border-color:transparent transparent transparent #000;margin-left:6px;margin-top:-2px;}
@media all and (min-width:600px){
	#popup1 {position:absolute;top:calc(50% - 107px);right:0;width:284px;height:214px;margin:0}
}
@media all and (min-width:768px){
	#popup1 {width:405px;height:305px;top:calc(50% - 152.5px);}
}

/* 전시마당 */
#exhibit1 {position:relative;background:#dec083;padding:2em 15px 0;margin:0 -15px;}
#exhibit1:before, #exhibit1:after {position:absolute;top:0;height:100%;content:"";display:block;}
#exhibit1:before {display:none;left:0;width:279px;background:linear-gradient(to left, #d19a4b, #8b520f);z-index:1;box-shadow:5px 5px 10px rgba(0,0,0,.2);}
#exhibit1:after {right:-50%;display:none;width:200%;background:#dec083;}
#exhibit1 .hgroup {position:relative;background-color:#8b520f;z-index:2;color:#fff;box-sizing:border-box;z-index:2;padding:25px 20px 20px}
#exhibit1 .hgroup .h1 {font-size:2.188em;margin-bottom:15px;color:#fff;}
#exhibit1 .hgroup .ptit1 {font-size:1.063em;line-height:1.176em;letter-spacing:-.065em;}
#exhibit1 .hgroup .ptit1 br {display:none}
#exhibit1 .hgroup .b1 {position:absolute;top:25px;right:20px;width:90px;border:1px solid #fff;box-sizing:border-box;font-size:.938em;color:#fff;padding:5px 10px}
#exhibit1 .hgroup .b1:after {position:absolute;top:7px;right:10px;content:"";display:block;width:24px;height:11px;background:url(../../img/main/main_spr.png) no-repeat -45px 0;}
#exhibit1 .datalist {overflow:hidden;}
#exhibit1 .datalist .item {float:left;width:calc(33.3333% - 20px);margin-left:30px;box-shadow:5px 5px 10px rgba(0,0,0,.2);margin-bottom:30px}
#exhibit1 .datalist .item:first-child {margin-left:0}
#exhibit1 .datalist .owl-item .item {float:none;width:auto;margin-left:0;}
#exhibit1 .datalist .item a {position:relative;display:block;width:100%;height:0;padding-bottom:116.666%;overflow:hidden;}
#exhibit1 .datalist .item .f1p1 {display:block;position:absolute;top:0;bottom:0;left:-100%;right:-100%;overflow:hidden;}
#exhibit1 .datalist .item .f1p1 img {display:block;width:auto;height:100%;max-width:100%;margin:auto;transition:all .4s ease}
#exhibit1 .datalist .item a:hover .f1p1 img {transform:scale(1.05);}
#exhibit1 .datalist .item .t1 {display:block;position:absolute;bottom:0;left:0;width:100%;text-align:center;color:#fff;font-size:1.063em;padding:14px 0 15px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;background:rgba(49,30,12,.8);}
#exhibit1 .datalist .item a:hover .t1, #exhibit1 .datalist .item a:focus .t1 {text-decoration:underline;}
#exhibit1 .menu button {position:absolute;top:50%;width:41px;height:41px;border:0;background-color:rgba(0,0,0,.2);background-image:url(../../img/main/main_spr.png);background-repeat:no-repeat;z-index:2;border-radius:50%;background-size:235px auto;}
#exhibit1 .menu button.prev {left:0;background-position:-50px 0}
#exhibit1 .menu button.next {right:0;background-position:-92px 0}
@media all and (min-width:768px){
	#exhibit1 {margin:0;padding-left:0;padding-right:0;}
	#exhibit1:after {display:block;}
	#exhibit1 .menu button {width:58px;height:58px;background-size:auto;}
	#exhibit1 .menu button.prev {background-position:-71px 0}
	#exhibit1 .menu button.next {background-position:-131px 0}
}
@media all and (min-width:1000px){
	#exhibit1 {padding-left:320px;padding-right:95px;padding-top:0;background:transparent}
	#exhibit1:before {display:block}
	#exhibit1:after {width:200%;left:0}
	#exhibit1 .hgroup {position:absolute;top:0;left:0;width:279px;height:100%;padding:60px 40px;background-image:url(../../img/main/exhibit_hgroup_bg.png);background-repeat:no-repeat;background-position:0 bottom;background-size:cover;}
	#exhibit1 .hgroup .h1 {margin-bottom:25px}
	#exhibit1 .hgroup .ptit1 br {display:block;}
	#exhibit1 .hgroup .b1 {left:40px;bottom:50px;top:auto;right:auto;width:calc(100% - 80px);padding:7px 20px;transition:all .3s ease}
	#exhibit1 .hgroup .b1:hover {background:rgba(49,30,12,.5);border-color:#311e0c;}
	#exhibit1 .hgroup .b1:after {top:10px;right:20px;width:69px;background-position:0 0;transition:right .35s ease}
	#exhibit1 .hgroup .b1:hover:after {right:15px;}
	#exhibit1 .datalist .item {margin-top:30px;margin-bottom:30px}
	#exhibit1 .menu button {right:0;background-color:transparent}
	#exhibit1 .menu button.prev {left:auto;margin-top:-61px;}
}

/* mainbody3 */
#mainbody3 {margin:25px 0 45px}
#mainbody3 .h1 {margin-bottom:15px}
/* 공지사항 */
#bbs1 {position:relative;margin-bottom:35px}
#bbs1 .datalist li {position:relative;margin:8px 0;padding-left:8px}
#bbs1 .datalist li:before {position:absolute;top:9px;left:0;content:"";display:block;width:3px;height:3px;background:#898989;border-radius:50%;}
#bbs1 .datalist li a {display:block;padding-right:80px;font-size:1em;color:#363636;}
#bbs1 .datalist li a .t1 {display:inline-block;vertical-align:top;max-width:calc(100% - 25px);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#bbs1 .datalist li a:hover .t1, #bbs1 .datalist li a:focus .t1 {text-decoration:underline;}
#bbs1 .datalist li a .new {position:relative;display:inline-block;vertical-align:middle;width:20px;height:20px;background:#705432;border-radius:50%;margin-top:-4px;margin-left:5px;text-indent:-9999px}
#bbs1 .datalist li a .new:before {position:absolute;top:0;left:0;content:"N";display:block;width:100%;height:100%;text-align:center;color:#fff;font-size:.813em;text-indent:0;font-weight:500;line-height:20px}
#bbs1 .datalist li a .date {position:absolute;top:0;right:0;color:#898989;letter-spacing:0;}
#bbs1 .b1.more {position:absolute;top:5px;right:0;height:22px;font-size:.813em;color:#424242;letter-spacing:0}
#bbs1 .b1.more:before {content:"";display:inline-block;vertical-align:middle;width:25px;height:7px;background:url(../../img/main/main_spr.png) no-repeat 0 -13px;margin-top:-2px;margin-right:6px;}


/* 교육행사 */
#event1 {position:relative;margin-bottom:20px}
#event1 .datalist .item {position:relative;float:left;width:calc(50% - 20px);margin-left:20px;background:#f4f4f4;}
#event1 .datalist .item:first-child {margin-left:0}
#event1 .datalist .owl-item .item {float:none;width:auto;margin-left:0;}
#event1 .datalist .item a {display:block;padding:35px 20px 20px;}
#event1 .datalist .item a .stat {position:absolute;top:0;left:26px;font-size:.813em;color:#fff;padding:5px 10px;background:#000;}
#event1 .datalist .item a .stat.stat1 {background:#dc373d;}
#event1 .datalist .item a .stat.stat2 {background:#636363;}
#event1 .datalist .item a .stat.stat3 {background:#ccc;color:#444;}
#event1 .datalist .item a .stat.stat4 {background:#c05300;}
#event1 .datalist .item a .t1 {font-size:1.125em;color:#111;font-weight:600;line-height:1.222em;margin-bottom:4px;height:2.444em;overflow:hidden;}
#event1 .datalist .item a:hover .t1, #event1 .datalist .item a:focus .t1 {text-decoration:underline;}
#event1 .datalist .item a li {font-size:.875em;color:#707070;padding:1px 0}
#event1 .menu {position:absolute;top:-5px;right:0;}
#event1 .menu .m {vertical-align:top;width:36px;height:36px;border:0;background:url(../../img/main/main_spr.png) no-repeat;border-radius:0}
#event1 .menu .m.prev {background-position:-191px 0}
#event1 .menu .m.stop {background-position:-227px 0}
#event1 .menu .m.play {background-position:-299px 0}
#event1 .menu .m.next {background-position:-263px 0;width:37px}
#event1 .datalist .no-data {text-align:center;padding:30px 0;background:#f4f4f4}
@media all and (min-width:768px){
	#mainbody3 {margin:40px 0 50px}
	#bbs1 {float:left;width:calc(50% - 35px);margin-bottom:40px}
	#bbs1 .datalist li a {padding-right:100px}
	#bbs1 .b1.more {top:10px}
	#event1 {float:right;width:50%;margin-bottom:0}
	#event1 .menu {top:0}
	#event1 .datalist .no-data {padding:60px 0}
}

/* 박물관 이용안내 */
#info1 {position:relative;background:#c69c6d;box-sizing:border-box;text-align:center;padding-bottom:15px}
#info1 .h1 {background:#705432;font-size:1.438em;color:#fff;text-align:center;padding:18px 0;box-sizing:border-box;margin-bottom:15px}
#info1 dl {position:relative;display:inline-block;vertical-align:top;font-size:1.125em;color:#fff;}
#info1 dt, #info1 dd {display:inline-block;vertical-align:top;}
#info1 dt {position:relative;margin-left:40px}
#info1 dl:nth-of-type(1) dt {margin-left:0}
#info1 dl:first-child {margin-left:0}
#info1 dl:nth-of-type(1) dt:before {display:none}
#info1 dt:before {position:absolute;top:calc(50% - 6px);left:-20px;content:"";display:block;width:2px;height:12px;background:#fff;transform:rotate(45deg);}
#info1 dt:after {content:":";display:inline-block;vertical-align:top;margin:0 3px}
@media all and (min-width:650px){
	#info1 {float:left;width:calc(100% - 310px);}
}
@media all and (min-width:1200px){
	#info1 {padding-left:262px;text-align:left;padding-bottom:0}
	#info1 .h1 {position:absolute;top:0;left:0;width:222px;height:100%;padding:38px 0;margin-bottom:0}
	#info1 dl {text-align:left;padding:40px 0}
	#info1 dl, #info1 dt, #info1 dd {float:left;}
}

/* 바로가기 */
#menu1 {overflow:hidden;margin-top:20px}
#menu1 li {float:left;width:50%;text-align:center;letter-spacing:-.05em;font-size:1.063em;}
#menu1 li a {display:block;color:#111;}
#menu1 li a:before {content:"";display:block;width:108px;height:71px;background:url(../../img/main/main_spr.png) no-repeat -110px -60px;margin:0 auto 8px;transition:margin .3s ease}
#menu1 li:first-child a:before {background-position:0 -60px}
#menu1 li a:hover, #menu1 li a:focus {text-decoration:underline;}
#menu1 li a:hover:before {margin-top:-2px;margin-bottom:10px}
@media all and (min-width:650px){
	#menu1 {float:right;width:280px;margin-right:10px;margin-top:0}
}

/* mainbody4 */
#mainbody4 {margin-bottom:3em}
/* 금관가야유적 */
#gallery1 {position:relative;}
#gallery1 .h1 {margin-bottom:20px;}
#gallery1 .datalist .item {float:left;width:calc(33.3333% - 10px);margin-left:15px;}
#gallery1 .datalist .item:first-child {margin-left:0;}
#gallery1 .datalist .owl-item .item {float:none;width:auto;margin-left:0}
#gallery1 .datalist .item a {position:relative;display:block;}
#gallery1 .datalist .item a .t1 {position:absolute;bottom:-48px;left:0;width:100%;height:48px;background:#a97129;color:#fff;font-size:1.063em;font-weight:400;padding:12px 25px;box-sizing:border-box;}
#gallery1 .datalist .item a .t1 span {position:relative;display:block;z-index:1}
#gallery1 .datalist .item a .t1:after {position:absolute;bottom:6px;right:0;content:"";display:block;width:99px;height:18px;background:url(../../img/main/main_spr.png) no-repeat -220px -38px;}
#gallery1 .datalist .item a:hover .t1 .tit, #gallery1 .datalist .item a:focus .t1 .tit {text-decoration:underline}
#gallery1 .datalist .item a .f2 {position:relative;display:block;width:100%;height:0;padding-bottom:58.333%;overflow:hidden;margin-bottom:48px}
#gallery1 .datalist .item a .f2 .f2p1 {position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}
#gallery1 .datalist .item a .f2 .f2p1 img {display:block;width:100%;height:100%;max-width:100%;margin:auto;transition:all .4s ease}
#gallery1 .datalist .item a:hover .f2 img, #gallery1 .datalist .item a:focus .f2 img {transform:scale(1.05);}
#gallery1 .menu {position:absolute;top:-9px;right:0;}
#gallery1 .menu .m {vertical-align:top;width:36px;height:36px;border:0;background:url(../../img/main/main_spr.png) no-repeat;border-radius:0}
#gallery1 .menu .m.prev {background-position:-191px 0}
#gallery1 .menu .m.stop {background-position:-227px 0}
#gallery1 .menu .m.play {background-position:-299px 0}
#gallery1 .menu .m.next {background-position:-263px 0;width:37px}

/* 율하유적공원 */
#cbanner1 {position:relative;background:url(../../img/main/banner1_bg.jpg) no-repeat center center;text-align:center;color:#fff;padding:30px 0;box-sizing:border-box;background-size:cover;margin-top:2em;height:216px;box-sizing:border-box;}
#cbanner1 .t1 {font-family:"GimhaeGaya", sans-serif;letter-spacing:-.03em;font-size:1.875em;line-height:1;margin-bottom:8px}
#cbanner1 .t1:before {content:"";display:block;width:42px;height:26px;background:url(../../img/main/main_spr.png) no-repeat 0 -22px;margin:0 auto 12px;}
#cbanner1 .b1 {position:absolute;top:0;left:0;width:100%;height:100%;}
#cbanner1 ul {position:absolute;left:0;bottom:0;overflow:hidden;width:100%;height:30%;}
#cbanner1 li {float:left;width:50%;height:50%;}
#cbanner1 li a {display:table;width:100%;height:100%;box-sizing:border-box;border-left:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5)}
#cbanner1 li:nth-child(odd) a {border-left:0;}
#cbanner1 li a .t2 {display:table-cell;vertical-align:middle;width:100%;height:100%;padding:0 18px;box-sizing:border-box;color:#fff;font-size:.938em;line-height:1.2em;}

@media all and (min-width:400px){
	#cbanner1 ul {border-top:1px solid rgba(255,255,255,.5)}
	#cbanner1 li {width:25%;height:100%;}
	#cbanner1 li a {border-top:0}
	#cbanner1 li:nth-child(odd) a {border-left:1px solid rgba(255,255,255,.5)}
}
@media all and (min-width:768px){
	#gallery1 .menu {top:0;}
}
@media all and (min-width:1000px){
	#mainbody4 {margin-bottom:5em}
	#mainbody4 .container {padding-right:440px}
	#cbanner1 {position:absolute;top:0;right:0;width:410px;height:100%;margin:0;padding-top:13px;}
	#cbanner1 .t1:before {margin-top:30px;}
	#cbanner1 ul {height:25%;}
}