/**
 * @File Name : main.css
 * @Description : Layout[main] | Contents[main]
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2020.08.06 | 김효진 | 최초 등록
 * </pre>
 * @author 디자인팀 김효진
 * @since 2020.08.06
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */

/* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */
/* 공통 */
#body {font-family:'나눔고딕',NanumGothic,'Nanum Gothic',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;margin:auto;}
.init img {max-width:100%}
[id*="mainbody"] {position:relative;}
[id*="mainbody"] .container {margin:auto;box-sizing:border-box;text-align:center;padding:0 15px}
[id*="mainbody"] .owl-carousel {display:block;}
[id*="mainbody"] .st1 {font-size:2em;color:#000;line-height:1;margin-top:20px;margin-bottom:10px;font-weight:600}
[id*="mainbody"] .st2 {font-size:1em;color:#000;margin-bottom:25px}
@media all and (min-width:768px){
	[id*="mainbody"] .st1 {font-size:2.25em;margin-top:30px;margin-bottom:15px}
	[id*="mainbody"] .st2 {font-size:1.125em;margin-bottom:45px}
}
@media all and (min-width:1260px){
	[id*="mainbody"] .container {padding:0}
}


/* #mainbody1 */
/* 슬라이드 제어버튼 공통 */
.m1slide .menu {position:absolute;z-index:2}
.m1slide .menu .m {vertical-align:top;border:0;background:rgba(255,255,255,.55);width:23px;height:30px}
.m1slide .menu .m:before {position:absolute;content:"";display:block;box-sizing:border-box;}
.m1slide .menu .prev {border-top-left-radius:5px;border-bottom-left-radius:5px;}
.m1slide .menu .next {border-top-right-radius:5px;border-bottom-right-radius:5px;}
.m1slide .menu .prev:before, .m1slide .menu .next:before {top:calc(50% - 6px);width:12px;height:12px;border:2px solid #252525;border-top:0;}
.m1slide .menu .prev:before {left:calc(50% - 3px);transform:rotate(45deg);border-right:0;}
.m1slide .menu .next:before {right:calc(50% - 3px);transform:rotate(-45deg);;border-left:0;}
.m1slide .menu .stop, .m1slide .menu .play {position:relative;width:30px;border-radius:5px;background:rgba(37,37,37,.55);margin-left:5px}
.m1slide .menu .stop:before, .m1slide .menu .stop:after {position:relative;content:"";display:inline-block;vertical-align:middle;width:3px;height:18px;background:#fff;margin:-2px 2.5px 0}
.m1slide .menu .play:before {position:relative;content:"";display:block;width:0;border-style:solid;border-width:7px;border-color:transparent transparent transparent #fff;margin:-1px 0 0 20px}
@media all and (min-width:768px){
	.m1slide .menu .m {width:33px;height:43px}
	.m1slide .menu .stop, .m1slide .menu .play {width:43px}
}

/* 메인비쥬얼 */
#mainbody1 .container {padding:0}
#vpr1 {position:relative;margin:auto;}
#vpr1 .menu {bottom:30%;right:15px;}
@media all and (min-width:500px){
	#vpr1 {width:500px}
	#vpr1 .wrap1 {width:768px;margin-left:-134px}
	#vpr1 .menu {top:38%;bottom:auto;left:0;right:auto;}
}
@media all and (min-width:768px){
	#vpr1 {width:768px}
	#vpr1 .wrap1 {width:1056px;margin-left:-144px}
}
@media all and (min-width:1000px){
	#vpr1 {width:1000px}
	#vpr1 .wrap1 {width:1344px;margin-left:-172px}
}
@media all and (min-width:1200px){
	#vpr1 {width:1200px}
	#vpr1 .wrap1 {width:1920px;margin-left:-360px}
}


/* 최근게시글 */
#bbs1 {position:relative;margin-top:-5%;margin-left:15px;width:calc(100% - 30px);background:#fff;z-index:2;text-align:left;padding-bottom:10px;}
#bbs1 .tab {position:absolute;top:-50px;height:64px;background:#037fc0;line-height:64px;width:25%;text-align:center;font-size:1.063em;}
#bbs1 .tab a {display:block;color:#fff;text-align:center;}
#bbs1 .tab.t2 {position:absolute;top:-50px;height:64px;background:#037fc0;line-height: 1.3;width: 25%;text-align:center;font-size: 1.063em;}
#bbs1 .tab.t2 a {display:block;color:#fff;text-align:center;padding:16px 0;}
#bbs1 .tab.on {font-size:1.25em;}
#bbs1 .tab a span {position:relative;display:inline-block;vertical-align:top;}
#bbs1 .tab a span:before {position:absolute;top:20px;left:3px;content:"";display:block;width:4px;height:0;background:transparent;border-radius:5px;transform:rotate(-45deg);transform-origin:0 0;transition:all .35s ease}
#bbs1 .tab.on a span:before {top:12px;background:#fff;height:13px;}
#bbs1 .tab a span.t2 {display:block;}
/* 위치 */
#bbs1 .tab:nth-of-type(1) {left:0}
#bbs1 .tab:nth-of-type(2) {left:25%;}
#bbs1 .tab:nth-of-type(3) {left:50%}
#bbs1 .tab:nth-of-type(4) {left:75%}
#bbs1 .cont {position:relative;display:none;margin-top:30px;height:178px;overflow:hidden;padding:20px 15px 40px}
#bbs1 .cont.on {display:block;}
#bbs1 .cont .datalist {position:relative;height:100%;box-sizing:border-box;}
#bbs1 .cont .list {position:relative;width:100%;min-height:78px;margin-top:8px;box-sizing:border-box;}
#bbs1 .cont .list a {display:block;color:#555;}
#bbs1 .cont .list a:hover strong {text-decoration:underline;}
#bbs1 .cont .list strong {font-size:1.25em;padding-top:6px;margin-bottom:8px;display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#333;}
#bbs1 .cont .list .t1 {line-height:1.5em;height:3em;overflow:hidden;}
#bbs1 .cont .list .date {display:none;position:absolute;top:0;left:0;width:85px;height:85px;background:url(../../img/main/main_spr.png) no-repeat -376px 0;text-align:center;padding:12px 0;box-sizing:border-box;letter-spacing:-.05em;background-size:auto 85px;font-size:.875em}
#bbs1 .cont .list .date em {color:#333;font-weight:800;display:block;}
#bbs1 .cont .list .date .ym {font-size:.938em}
#bbs1 .cont .list .date .day {font-size:2.25em;font-weight:600}
#bbs1 .cont .datalist .no-data {font-size:1.063em;text-align:center;padding-top:18%;margin-right:-40px}
#bbs1 .cont .menu {position:relative;z-index:2;text-align:right;}
#bbs1 .cont .menu * {display:inline-block;vertical-align:top;border:0;background:#2b2f38;}
#bbs1 .cont .menu .mControl {border-radius:5px;overflow:hidden;height:33px;}
#bbs1 .cont .menu .m {width:33px;height:33px;}
#bbs1 .cont .menu .m:before {position:absolute;content:"";display:block;width:10px;height:10px;border:2px solid #fff;box-sizing:border-box;border-top:0;}
#bbs1 .cont .menu .m.prev:before {transform:rotate(45deg);border-right:0;top:calc(50% - 5px);left:calc(50% - 4px)}
#bbs1 .cont .menu .m.next:before {transform:rotate(-45deg);border-left:0;top:calc(50% - 5px);right:calc(50% - 2px)}
#bbs1 .cont .menu .b1.more {position:relative;width:33px;height:33px;border-radius:5px}
#bbs1 .cont .menu .b1.more:before, #bbs1 .cont .menu .b1.more:after {position:absolute;top:calc(50% - 9px);left:calc(50% - 1.5px);content:"";display:block;width:3px;height:18px;background:#fff;}
#bbs1 .cont .menu .b1.more:after {transform:rotate(-90deg);}
@media all and (min-width:500px){
	#bbs1 {margin-top:-19%}
}
@media all and (min-width:600px){
	#bbs1 {height:260px;padding-bottom:0}
	#bbs1 .tab {width:100px;height:80px;line-height:80px;text-align:left;font-size:1.25em}
	#bbs1 .tab.on {width:128px;font-size:1.625em}
	#bbs1 .tab.t2 {width: 112px;height:80px;line-height:1.3;text-align:left;font-size:1.25em;}
	#bbs1 .tab.t2.on {width:128px;font-size:1.625em}
	#bbs1 .tab.t2 a{padding:16px 0;}
	#bbs1 .cont {padding-top:30px;height:210px;padding-bottom:0}
	#bbs1 .cont .datalist {padding-left:30px;padding-right:70px}
	#bbs1 .cont .list {padding-left:112px;margin-top:15px;min-height:85px}
	#bbs1 .cont .list .date {display:block;}
	#bbs1 .tab:nth-of-type(2) {left:100px}
	#bbs1 .tab:nth-of-type(1).on + .cont.on + .tab {left:116px}
	#bbs1 .tab:nth-of-type(3) {left:216px}
	#bbs1 .tab:nth-of-type(3).on {left:200px}
	#bbs1 .tab:nth-of-type(4) {left:316px}
	#bbs1 .tab:nth-of-type(4).on {left:332px}
	#bbs1 .cont .menu {position:absolute;bottom:6px;right:0;width:43px;padding-top:49px;text-align:left;}
	#bbs1 .cont .menu * {width:100%;display:block;}
	#bbs1 .cont .menu .m {width:100%}
	#bbs1 .cont .menu .mControl {height:66px}
	#bbs1 .cont .menu .m.next:before {top:calc(50% - 7px);}
	#bbs1 .cont .menu .b1.more {position:absolute;top:0;right:0;width:43px;height:43px}
}
@media all and (min-width:768px){
	#bbs1 {box-sizing:border-box}
}
@media all and (min-width:1000px){
	#bbs1 {height:355px;margin-top:-25%;padding-right:360px}
	#bbs1 .tab {width:140px}
	#bbs1 .tab.on {width:160px}
	#bbs1 .tab.t2 {width:190px;font-size:1.25em;}
	#bbs1 .tab.t2.on {width:210px}
	#bbs1 .tab.t2 a{padding:27px 0;}
	#bbs1 .tab:nth-of-type(1) {left:0}
	#bbs1 .tab:nth-of-type(2) {left:140px}
	#bbs1 .tab:nth-of-type(1).on + .cont.on + .tab {left:160px}
	#bbs1 .tab:nth-of-type(3) {left:300px}
	#bbs1 .tab:nth-of-type(3).on {left:280px}
	#bbs1 .tab:nth-of-type(4) {left:440px}
	#bbs1 .tab:nth-of-type(4).on {left:420px}
	#bbs1 .tab a span.t2 {display:inline;}
	#bbs1 .cont {height:260px}
	#bbs1 .cont .list {padding-left:140px;margin-top:25px;min-height:106px}
	#bbs1 .cont .list strong {padding-top:12px}
	#bbs1 .cont .list .date {width:106px;height:106px;background-size:auto;background-position:-470px 0;font-size:1em;padding:20px 0}
}
@media all and (min-width:1260px){
	#bbs1 {position:absolute;bottom:0;left:0;margin-left:0;padding:0}
	#bbs1 .cont {width:770px;padding-top:0;}
}

/* 팝업 */
#popup1 {position:relative;width:296px;height:352px;z-index:2;margin:auto auto 20px;}
#popup1 .menu {bottom:20px;right:20px;}
@media all and (min-width:768px){
	#popup1 {position:absolute;top:20px;right:15px;margin:0}
}
@media all and (min-width:1000px){
	#popup1 {bottom:70px;top:auto;}
}
@media all and (min-width:1260px){
	#popup1 {width:370px;height:440px;right:0}
}

/* mainbody2 */
#mainbody2 {padding-bottom:30px}
#menu1 {border-left:1px solid #c2c2c2;margin-top:5px}
#menu1:after {content:"";display:block;clear:both;}
#menu1 li {float:left;width:33.333%;}
/* #menu1 li:nth-child(n+4) {width:50%;} */
#menu1 li a {position:relative;display:block;border:1px solid #c2c2c2;border-left:0;padding:5px 0 10px}
#menu1 li:nth-child(n+4) a {border-top:0}
#menu1 li a span {position:relative;z-index:2;display:block;font-size:1.03em;color:#000}
#menu1 li a span:before {position:relative;content:"";display:block;width:43px;height:43px;border-radius:0;margin:auto;background:#fff url(../../img/main/main_spr.png) no-repeat;z-index:2;transition:all .4s ease;background-size:288px auto}
#menu1 li a:after {opacity:0;position:absolute;top:0;left:0;bottom:0;right:0;content:"";display:block;border-radius:10px;background:#fff;transform:scale(1);transition:all .3s ease}
#menu1 li a:hover .t1, #menu1 li a:focus .t1 {text-decoration:underline} 

/* 아이콘 */
#menu1 li.n1 a span:before {background-position:0 0}
#menu1 li.n2 a span:before {background-position:-44px 0}
#menu1 li.n3 a span:before {background-position:-88px 0}
#menu1 li.n4 a span:before {background-position:-132px 0}
#menu1 li.n5 a span:before {background-position:-176px 0}
#menu1 li.n6 a span:before {background-position:0 -37px}
@media all and (min-width:500px){
	#menu1 li a {padding:10px 0 20px}
	#menu1 li a span:before {width:60px;height:60px;background-size:403px auto;margin-bottom:5px}
	#menu1 li.n2 a span:before {background-position:-62px 0}
	#menu1 li.n3 a span:before {background-position:-123px 0}
	#menu1 li.n4 a span:before {background-position:-185px 0}
	#menu1 li.n5 a span:before {background-position:-246px 0}
	
}
@media all and (min-width:600px){
	#menu1 li, #menu1 li:nth-child(n+4) {width:16.66%}
	#menu1 li:nth-child(n+4) a {border-top:1px solid #c2c2c2}
}
@media all and (min-width:768px){
	#mainbody2 {padding-bottom:60px}
	#menu1 li a {padding:35px 0 40px}
	#menu1 li a span:before {width:86px;height:86px;background-size:auto;margin-bottom:10px}
	#menu1 li.n2 a span:before {background-position:-88px 0}
	#menu1 li.n3 a span:before {background-position:-176px 0}
	#menu1 li.n4 a span:before {background-position:-264px 0}
	#menu1 li.n5 a span:before {background-position:-352px 0}
	#menu1 li.n6 a span:before {background-position:0 -73px}
}
@media all and (min-width:1000px){
	#menu1 li:hover, #menu1 li:focus {position:relative;z-index:1}
	#menu1 li a:hover, #menu1 li a:focus {border-color:#0091d6;z-index:2}
	#menu1 li a:hover:after, #menu1 li a:focus:after {opacity:1;background:#0091d6;box-shadow:0 6px 16px rgba(0,0,0,.18);transform:scale(1.1);}
	#menu1 li a:hover span, #menu1 li a:focus span {color:#fff;}
	#menu1 li a:hover span:before, #menu1 li a:focus span:before {border-radius:50%;}	
}

/* mainbody3 */
#mainbody3 {padding-bottom:30px}
#expg1 {position:relative;padding-top:65px}
#expg1 .tab {position:absolute;top:0;width:calc(25% - 3px);height:53px;line-height:1.3;font-size:1.063em;color:#fff;font-weight:600;border-radius:5px;background:#2b2f38;}
#expg1 .tab.on {background:#0060c4;text-decoration:underline;border-radius:0}
#expg1 .tab a {display:block;color:#fff;padding:9px 0}
#expg1 .tab a span {display:block;}
#expg1 .cont {position:relative;}
#expg1 .wrap {position:relative;background:#f4f4f4;}
#expg1 .wrap .f2 {display:none;position:relative;width:100%;height:0;padding-bottom:71%;overflow:hidden;}
#expg1 .wrap .f2 .f2p1 {position:absolute;top:0;left:-100%;right:-100%;bottom:0;overflow:hidden;background:#eee}
#expg1 .wrap .f2 .f2p1 img {display:block;width:auto;height:100%;max-width:100%;margin:auto;transition:all .4s ease;}
#expg1 .item:hover .wrap .f2 .f2p1 img, #expg1 .item:focus .wrap .f2 .f2p1 img {transform:scale(1.05);}
#expg1 .wrap .text {padding:5% 0}
#expg1 .wrap .text .h1 {line-height:1;font-size:1.75em;color:#000;margin-bottom:3%;}
#expg1 .wrap .text .h1 .cate {font-size:.643em;color:#0060c4;display:block;margin-bottom:3%}
#expg1 .wrap .text .h1 .cate:before {content:"";display:block;width:28px;height:33px;background:url(../../img/main/main_spr.png) no-repeat -440px -20px;margin:0 auto 10px}
#expg1 .wrap .text .h1 .tit {display:block;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:auto;box-sizing:border-box;}
#expg1 .wrap .text .t1 {padding:0 10%;color:#000;margin-bottom:3%}
#expg1 .wrap .text .b1 {display:inline-block;vertical-align:top;width:80px;height:35px;line-height:35px;color:#fff;font-weight:600;margin:0 2px}
#expg1 .wrap .text .b1.apply {background-color:#0060c4}
#expg1 .wrap .text .b1.confirm {background-color:#16b2ab}
#expg1 .wrap .text .b1:hover, #expg1 .wrap .text .b1:focus {text-decoration:underline}
/* tab 위치 */
#expg1 .tab:nth-of-type(1) {left:0;}
#expg1 .tab:nth-of-type(2) {left:25%}
#expg1 .tab:nth-of-type(3) {left:50%}
#expg1 .tab:nth-of-type(4) {left:75%}
@media all and (min-width:500px){
	#expg1 .tab {line-height:53px;}
	#expg1 .tab a {padding:0;}
	#expg1 .tab a span {display:inline}
}
@media all and (min-width:768px){
	#mainbody3 {padding-bottom:70px}
	#expg1 {padding-top:90px}
	#expg1 .tab {height:81px;line-height:81px}
	#expg1 .wrap {padding-right:49.5%;}
	#expg1 .wrap .f2 {display:block;}
	#expg1 .wrap .text {position:absolute;top:0;right:0;width:50%;height:100%;padding:0}
	#expg1 .wrap .text .h1 {margin-top:9%;}
	#expg1 .wrap .text .h1 .cate {margin-bottom:6%}
	#expg1 .wrap .text .t1 {margin-bottom:7%}
	#expg1 .wrap .text .b1 {width:115px;height:50px;line-height:50px;}
}
@media all and (min-width:1260px){
	#expg1 {padding-left:210px;padding-top:0;height:407px;overflow:hidden;}
	#expg1 .tab {left:0;width:190px;}
	#expg1 .tab:nth-of-type(1) {top:0;left:0}
	#expg1 .tab:nth-of-type(2) {top:91px;left:0}
	#expg1 .tab:nth-of-type(3) {top:183px;left:0}
	#expg1 .tab:nth-of-type(4) {top:274px;left:0}
	#expg1 .tab.on {border-radius:5px}
}


/* 체험프로그램, 생생화포천 제어버튼 공통 */
.m2slide .menu {display:inline-block;vertical-align:top;padding-top:20px;margin-right:5px}
.m2slide .menu * {display:inline-block;vertical-align:top;}
.m2slide .menu a, .m2slide .menu button {border:0;background:transparent;width:18px;height:18px;box-sizing:border-box;}
.m2slide .goPage {display:none}
.m2slide .goPage a {text-indent:-9999em;background:#000;margin:0 3px;border-radius:50%;}
.m2slide .goPage a.on {border:3px solid #000;background:transparent;}
.m2slide .mControl .m {margin:0 5px}
.m2slide .mControl .prev, .m2slide .mControl .next {position:absolute;top:calc(50% - 40px);width:29px;height:45px;background:#2b2f38;border-radius:5px;z-index:2;margin:0;}
.m2slide .mControl .prev {left:0;}
.m2slide .mControl .next {right:0}
.m2slide .mControl .prev:before, .m2slide .mControl .next:before {position:absolute;top:calc(50% - 7px);content:"";display:block;width:13px;height:13px;box-sizing:border-box;border:2px solid #fff;border-top:0;}
.m2slide .mControl .prev:before, .m2slide .mControl .prev:before {left:calc(50% - 3px);transform:rotate(45deg);border-right:0;}
.m2slide .mControl .next:before, .m2slide .mControl .next:before {right:calc(50% - 3px);transform:rotate(-45deg);border-left:0;}
.m2slide .mControl .stop:before, .m2slide .mControl .stop:after {content:"";display:inline-block;vertical-align:middle;width:3px;height:18px;background:#000;margin:-4px 3px 0;}
.m2slide .mControl .play:before {content:"";display:block;width:0;border-width:7px;border-style:solid;border-color:transparent transparent transparent #000;margin-left:8px}
.m2slide .b1.more {position:relative;display:inline-block;vertical-align:top;width:18px;height:18px;margin-top:20px;transition:all .4s ease}
.m2slide .b1.more:before, .m2slide .b1.more:after {position:absolute;top:calc(50% - 9px);left:calc(50% - 1.5px);content:"";display:block;width:3px;height:18px;background:#000;}
.m2slide .b1.more:after {transform:rotate(-90deg)}
@media all and (min-width:768px){
	.m2slide .menu {padding-top:30px}
	.m2slide .goPage {display:inline-block;}
	.m2slide .mControl .prev, .m2slide .mControl .next {top:calc(50% - 57px);width:42px;height:64px;}
	.m2slide .menu a, .m2slide .menu button, .m2slide .b1.more {width:20px;height:20px;}
	.m2slide .b1.more {margin-top:30px}
}
@media all and (min-width:1260px){
	.m2slide .b1.more:hover, .m2slide .b1.more:focus {transform:rotate(90deg);}
}

/* mainbody4 */
#mainbody4 {padding-bottom:35px}
#mainbody4:before {position:absolute;top:0;left:0;content:"";display:block;width:100%;height:60%;background:#1da4dc;}
#mainbody4 .st1, #mainbody4 .st2 {color:#fff;}
#mainbody4 .st1 {margin-top:35px}
#gallery1 .datalist .item .f2 {position:relative;width:100%;height:0;padding-bottom:70%;overflow:hidden;margin-bottom:15px}
#gallery1 .datalist .item .f2 .f2p1 {position:absolute;top:0;left:-100%;right:-100%;bottom:0;overflow:hidden;background:#eee}
#gallery1 .datalist .item .f2 .f2p1 img {display:block;width:auto;height:100%;margin:auto;transition:all .4s ease}
#gallery1 .datalist .item:hover .f2 .f2p1 img, #gallery1 .datalist .item:focus .f2 .f2p1 img {transform:scale(1.05);}
#gallery1 .datalist .item .text {position:relative;padding-top:30px;text-align:left;}
#gallery1 .datalist .item .text .t1 {display:block;font-size:1.125em;color:#000;}
#gallery1 .datalist .item .text .t1:hover, #gallery1 .datalist .item .text .t1:focus {text-decoration:underline}
#gallery1 .datalist .item .text .date {position:absolute;top:0;left:0;font-size:.938em;color:#828282;padding-left:22px;}
#gallery1 .datalist .item .text .date:before {position:absolute;top:2px;left:0;content:"";display:block;width:18px;height:18px;background:url(../../img/main/main_spr.png) no-repeat -440px 0}
#gallery1 .mControl .prev, #gallery1 .mControl .next {top:50%;background:rgba(23,115,153, .3)}
#gallery1 .mControl .prev {left:0;}
#gallery1 .mControl .next {right:0}
@media all and (min-width:768px){
	#mainbody4 {padding-bottom:50px}
	#mainbody4 .st1 {margin-top:50px}
}
@media all and (min-width:1370px){
	#gallery1 .mControl .prev {left:-85px;}
	#gallery1 .mControl .next {right:-85px}	
}