﻿
/* content - 내용페이지 */
#mainbox { overflow: hidden; padding-top: 165px; position: relative; }
#conmainboxent::before { background: rgb(245, 247, 252); left: 0px; top: 0px; height: 166px; right: 0px; display: block; position: absolute; z-index: -1; content: ""; }
.fixed#header ~ #mainbox { padding-top: 84px; }

@media all and (max-width:1199px) {
	#mainbox { padding-top: 60px; }
	#mainbox::before { height: 60px; }
	.fixed#header + #mainbox { padding-top: 50px; }
}

.tit-s3 { font-size:1.500em; line-height:1.5em; padding-bottom:7px; margin:0; }
.tit-s4 { font-size:1.250em; line-height:1.5em; padding-bottom:5px; margin:0; }

.grayboxin { width:100%; padding:15px; border: 1px solid #d7d7d7; background:#f6f7f9; border-radius: 0px; }
.grayboxin i { width: 15px; text-align: center; margin-right: 5px; }

.busbox { width:100%; padding:15px; border: 1px solid #d7d7d7; }
.busbox ul { padding-left:23px; }
.busbox ul li { list-style:square; }

.font_k { color:#000 !important; }
.font_w { color:#fff !important; }
.font_red { color:#ff0000 !important; }
.font_mint { color:#04a5b3 !important; }
.font_blue {color: #0270d4 !important; }
.font_blue-2 {color: #3e75bb !important; }
.font_green {color: #059222 !important; }
.font_orange {color: #ff4c2e !important; }
.font_brown { color:#603c25 !important; }
.font_yel { color:#fcb040 !important; }

.fz10a { font-size:10px; }
.fz11 { font-size:0.917em !important; }
.fz11a { font-size:11px !important; }
.fz12 { font-size:1.000em !important; }
.fz12a { font-size:12px !important; }
.fz13 { font-size:1.083em !important; }
.fz13a { font-size:13px !important; }
.fz14 { font-size:1.167em; }
.fz15 { font-size:1.250em; }
.fz16 { font-size:1.333em; }
.fz17 { font-size:1.417em; }
.fz18 { font-size:1.500em; }
.fz20a { font-size:20px; }
.fz20 { font-size:1.667em; }
.fz22 { font-size:1.833em; }
.fz22a { font-size:22px; }
.fz25 { font-size:2.083em; }
.fz26 { font-size:2.167em; }
.fz30 { font-size:2.500em; }
.fz35 { font-size:2.917em; }
.fz40 { font-size:3.333em; }

.lh12 { line-height:1.000em !important; }
.lh14 { line-height:1.167em !important; }
.lh16 { line-height:1.333em !important; }
.lh18 { line-height:1.500em !important; }
.lh20 { line-height:1.667em !important; }
.lh25 { line-height:2.083em !important; }

.pd0 { padding:0 !important; }
.pd3a { padding:3px !important; }
.pd5 { padding:0.417em !important; }
.pd10 { padding:0.833em !important; }
.pd120 { padding:0.833em 1.667em !important; }
.pd20 { padding:1.667em !important; }
.pd30 { padding:2.500em !important; }
.pd40 { padding:3.333em !important; }
.pd50 { padding:4.167em !important; }

.pdt0 { padding-top:0 !important; }
.pdt1 { padding-top:1px !important; }
.pdt2 { padding-top:0.167em !important; }
.pdt5 { padding-top:0.417em !important; }
.pdt7 { padding-top:7px !important; }
.pdt10a { padding-top:10px !important; }
.pdt10 { padding-top:0.833em !important; }
.pdt15 { padding-top:1.250em !important; }
.pdt20 { padding-top:1.667em !important; }
.pdt30 { padding-top:2.500em !important; }
.pdt40 { padding-top:3.333em !important; }
.pdt50 { padding-top:4.167em !important; }
.pdt200 { padding-top:200px !important; }

.pdr0 { padding-right:0 !important; }
.pdr1 { padding-right:1px !important; }
.pdr5 { padding-right:0.417em !important; }
.pdr9a { padding-right:9px !important; }
.pdr10a { padding-right:10px !important; }
.pdr10 { padding-right:0.833em !important; }
.pdr15a { padding-right:15px !important; }
.pdr15 { padding-right:1.250em !important; }
.pdr20 { padding-right:1.667em !important; }
.pdr30 { padding-right:2.500em !important; }
.pdr40 { padding-right:3.333em !important; }
.pdr50 { padding-right:4.167em !important; }

.pdb5 { padding-bottom:5px !important; }

.pdl0 { padding-left:0 !important; }
.pdl1 { padding-left:1px !important; }
.pdl2 { padding-left:2px !important; }
.pdl5 { padding-left:0.417em !important; }
.pdl7a { padding-left:7px !important; }
.pdl9a { padding-left:9px !important; }
.pdl10a { padding-left:10px !important; }
.pdl10 { padding-left:0.833em !important; }
.pdl15a { padding-left:15px !important; }
.pdl15 { padding-left:1.250em !important; }
.pdl17a { padding-left:17px !important; }
.pdl20 { padding-left:1.667em !important; }
.pdl20a { padding-left:20px !important; }
.pdl22a { padding-left:22px !important; }
.pdl30 { padding-left:2.500em !important; }
.pdl33a { padding-left:33px !important; }
.pdl40 { padding-left:3.333em !important; }
.pdl40a { padding-left:40px !important; }
.pdl50 { padding-left:4.167em !important; }

.mgpd0 {  margin:0 !important; padding:0 !important; }

.mglr0 { margin-left:0 !important; margin-right:0 !important; }
.mca { margin:0 auto; }
.ma5 { margin:5px !important; }
.mh1 { margin-top:-5px !important; }
.mm1 { margin-top:-10px !important; }
.mm2 { margin-top:-20px !important; }
.mm3 { margin-top:-30px !important; }
.mm5 { margin-top:-50px !important; }
.m0 {margin-top:0px !important;}
.m1 {margin-top:0.833em !important;}
.m2 {margin-top:1.667em !important;}
.m3 {margin-top:2.500em !important;}
.m4 {margin-top:3.333em !important;}
.m5 {margin-top:4.167em !important;}

.mml40 {margin-left:-40px !important;}
.ml15 {margin-left:15px !important;}
.mr15 {margin-right:15px !important;}

.mb1 {margin-bottom:1px !important;}
.mb5 {margin-bottom:0.417em !important;}
.mb10 {margin-bottom:0.833em !important;}

.va-m { vertical-align: middle !important; }
.ta-r { text-align: right !important; }
.ta-l { text-align: left !important; }
.ta-c { text-align: center !important; }
.ta-e  { text-align:justify !important; }

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500, .tbold { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }


/* 3차 서브 메뉴 */
@media screen and (max-width:767px) {
	.thirdbox { margin-top:0px !important; }
}
@media screen and (min-width:768px) {
	.thirdbox { padding-top:40px !important; }
}
.third-btn { background: rgb(255, 255, 255); border: 1px solid rgba(221, 221, 221, 1); height: 50px; text-align: center; color: rgb(51, 51, 51); line-height: 45px; font-size: 16px; font-weight: 500; display: block; z-index: 1; }
.third-btn:hover { background: rgb(157, 144, 119); border: 1px solid rgb(157, 144, 119); color: rgb(255, 255, 255); } 
.third-btn-on { background: rgb(194, 181, 155); border: 1px solid rgb(194, 181, 155); height: 50px; text-align: center; color: rgb(255, 255, 255); line-height: 45px; font-size: 16px; font-weight: 500; display: block; z-index: 1; }
.third-btn-on:hover { background: rgb(157, 144, 119); border: 1px solid rgb(157, 144, 119); color: rgb(255, 255, 255); } 


/* BOARD */


/* RSS */
.si-colored-kakaostory, .si-kakaostory:hover { background-color: #ffca08 !important; }
.si-colored-band, .si-band:hover { background-color: #09a51e !important; }
.si-colored-naver, .si-naver:hover { background-color: #1ec545 !important; }
.si-colored-insta, .si-insta:hover { background-color: #e02f66 !important; }
.si-colored-youtb, .si-youtb:hover { background-color: #ff0000 !important; }

.fa-kakaostory:before { content: url("../images/contents/kakaostory_icon.png"); }
.fa-band:before { content: url("../images/contents/band_icon.png"); }
.fa-naver:before { content: url("../images/contents/naver_icon.png"); }
.fa-insta:before { content: url("../images/contents/insta_icon.png"); }
.fa-blog:before { content: url("../images/contents/blog_icon.png"); }
.fa-youtb:before { content: url("../images/contents/youtb_icon.png"); }


/* submenu - 현재위치형 */
.pcmenunone { border-top: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.4); height:55px; }

@media screen and (max-width:767px) {
	.pcmenunone, .quick_wrap { display:none; }
}

.quick_wrap { height: 54px !important; position: relative; z-index: 40; }
.quick_wrap .container { padding: 0px; }

.snb_link { float: left; padding:0; margin:0; }
.snb_link > li.sub_link_on { background: url("../images/common/n_bar_on.png") no-repeat right 20px center rgb(28, 102, 177); }
.snb_link > li.sub_link_on > a { color: rgb(255, 255, 255); }

.snb_link > li.home { background: none; text-align: center; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.snb_link > li.home .icon_home { background: url("../images/common/home_new_w.png") no-repeat center; padding: 0px; display: block; min-width: 55px; }
.snb_link > li.home .icon_home:hover { background: url("../images/common/home_new_o.png") no-repeat center rgba(0, 0, 0, 0.5); }
.snb_link > li { background: url("../images/common/n_bar_on2_mint.png") no-repeat right 20px center rgba(255, 255, 255, 0); height: 54px; float: left; position: relative; }

.snb_link > li > a { height: 54px; color: rgb(255, 255, 255); line-height: 54px; padding-right: 55px; padding-left: 30px; border-right: 1px solid rgba(255, 255, 255, 0.2); display: block; min-width: 220px; }
.snb_link > li.on > a { color: rgb(255, 255, 255); }
.snb_link > li.on { background: url("../images/common/n_bar_on.png") no-repeat right 20px center rgba(0, 0, 0, 0.5); }
.snb_link > li.home > a::after { display: none; }
.snb_link > li.on.home { background: none; }
.snb_link > li.on > a::after { transform: rotate(180deg); }

.snb_link div { height: 100%; padding-left: 30px; font-size: 0.93em; vertical-align: middle; display: table-cell; cursor: pointer; min-width: 150px; }
.snb_link li .L2_Items, .snb_link li .L3_Items { left: -999em; top: 54px; display: none; position: absolute; z-index: 40; padding:0; margin:0; }
.snb_link li.on .L2_Items, .snb_link li.on .L3_Items { background: rgb(255, 255, 255); left: -1px; width: 100%; border-bottom: 0px solid #ddd; display: block; }
.snb_link li.de_2items .L2_Items, .snb_link li.de_3items .L3_Items { width: 100.5%; padding:0; margin:0; }
.snb_link li.de_2items.on .L2_Items, .snb_link li.de_3items.on .L3_Items { left: -1px; }
.snb_link li .L2_Items li, .snb_link li .L3_Items li { margin: 0px auto; width: 100%; height: 40px; line-height: 40px; float: inherit; display: inline-block; position: relative; padding:0; border-bottom: 1px solid #ddd; }
.snb_link li .L2_Items li:last-child, .snb_link li .L3_Items li:last-child { border-bottom: 1px solid #ddd; }
.snb_link li .L2_Items li a, .snb_link li .L3_Items li a { width: 100%; color: rgb(119, 119, 119); padding-left: 30px; display: block; border-right: 1px solid #ddd; border-left: 1px solid #ddd; }
.snb_link li .L2_Items li a:hover, .snb_link li .L3_Items li a:hover { color: rgb(255, 255, 255); background: rgb(62, 117, 187); }
.snb_link li .L2_Items li a:focus, .snb_link li .L3_Items li a:focus { color: rgb(255, 255, 255); }
.snb_link li.de_2items.only, .snb_link li.de_3items.only { background: rgb(255, 255, 255); }
.snb_link > li.de_3items > a.de_menu2 { width: 170px; padding-right: 0px; }


/* SNS */
#st-view .viewbox { position:relative; }
.shareArea { position:relative; width:100%; height:30px; padding:0; margin-bottom:5px; z-index:9; }
.shareArea ul { margin:0; padding:0; float:right; }
.shareArea ul li { margin:0; padding:0; }
.btn-print { padding:6px 6px 6px 10px; }

.si-colored-kakaostory, .si-kakaostory:hover { background-color: #ffca08 !important; }
.si-colored-band, .si-band:hover { background-color: #09a51e !important; }
.si-colored-naver, .si-naver:hover { background-color: #1ec545 !important; }
.si-colored-insta, .si-insta:hover { background-color: #e02f66 !important; }
.si-colored-youtb, .si-youtb:hover { background-color: #ff0000 !important; }
  
.fa-kakaostory:before { content: url(../images/contents/kakaostory_icon.png); }
.fa-band:before { content: url(../images/contents/band_icon.png); }
.fa-naver:before { content: url(../images/contents/naver_icon.png); }
.fa-insta:before { content: url(../images/contents/insta_icon.png); }
.fa-blog:before { content: url(../images/contents/blog_icon.png); }
.fa-youtb:before { content: url(../images/contents/youtb_icon.png); }

.attach { border-top:#d5d5d5 dotted 1px;word-break:break-all;word-break:break-word; padding-top:5px; margin-top:30px; }

.dropdown-menu {
	border-radius: 6px !important;
}

/* float:left등으로 띄우면 높이를 잃게되는데, 높이 인식하게 하기 */
.clearfix:after { content: ""; display: block; clear: both; }
.pagesub-title {color:#333; font-size:24px; font-weight:500; padding:30px 0 10px; border-bottom:2px solid #444; }

@media (max-width: 767px) {
	.mo-v-none { display:none; }
	.dropdown-menu { padding:9px 0 9px 9px !important; right: 0 !important; float: right !important; width: 87px !important; }
}
  
@media (min-width: 768px) {
	.pc-v-none { display:none; }
	.dropdown-menu { padding:10px 0 10px 10px !important; left: 0 !important; float: left !important; width: 126px !important; }
}

@media (max-width: 991px) {
	.mobile-drag { text-align:right; margin-top:-10px; }
}
  
@media (min-width: 992px) {
	.pc-drag { position:absolute; overflow:hidden;	width:1px; height:1px; top:auto; text-indent:-9999%; font-size:0; line-height:0; }
}


/** 교육/참여 리스트 **/
.expbox .searchbox .input-group { margin-top:1px;}

@media (min-width: 768px) {
	#st-list .headertop .subject h2, #st-expview .headertop .subject h2 { padding:15px 0 17px; font-size:20px; }
	#st-list .view-detail li, #st-expview .view-detail li { font-size: 14px; }
}

@media (max-width: 767px) {
	#st-list .headertop .subject h2, #st-expview .headertop .subject h2 { padding:12px 0 10px; font-size:15px; }
	#st-list .view-detail li, #st-expview .view-detail li { font-size: 13px; }
}

.gwnubx-1 { border-top-left-radius: 0px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; background:#a90057; padding:10px 15px 12px; }
.gwnubx-2 { border-top-left-radius: 0px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; background:#f39100; padding:10px 15px 12px; }
.gwnubx-3 { border-top-left-radius: 0px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; background:#25aae2; padding:10px 15px 12px; }
.gwnubx-4 { border-top-left-radius: 0px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; background:#c2b59b; padding:10px 15px 12px; }
.gwnubx-5 { border-top-left-radius: 0px !important; border-top-right-radius: 20px !important; border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; background:#303643; padding:10px 15px 12px; }
.gwnubx-1 h3, .gwnubx-2 h3, .gwnubx-3 h3, .gwnubx-4 h3, .gwnubx-5 h3 { color:#fff; font-size:18px; font-weight: 500; }
.gwnutbx { border-radius: 20px !important; border:1px solid #d8d8d8; padding:15px; margin:5px 0 30px; }
.gwnuul { padding-left:21px; }

.tibx-1 { border-radius: 50px !important; background:#377d3c; color:#fff; padding:3px 10px; font-size:14px; }
.tibx-2 { border-radius: 50px !important; background:#924396; color:#fff; padding:3px 10px; font-size:14px; }
.tibx-3 { border-radius: 50px !important; background:#e86457; color:#fff; padding:3px 10px; font-size:14px; }
.tibx-4 { border-radius: 50px !important; background:#60aadd; color:#fff; padding:3px 10px; font-size:14px; }
.tibx-5 { border-radius: 50px !important; background:#495672; color:#fff; padding:3px 10px; font-size:14px; }

.edu-list .slide { position: relative; display: block; margin: 0px; border:1px solid #f5f5f5 !important; border-radius: 20px !important; transition:0.3s !important; overflow: hidden !important; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.03) !important; }
.edu-list .slide .ibx-1 { position: relative; width: 100%; display: block; font-weight: 500; background:#377d3c; text-align: center; color: #fff; padding:10px 0; } /* 유치부  */
.edu-list .slide .ibx-2 { position: relative; width: 100%; display: block; font-weight: 500; background:#924396; text-align: center; color: #fff; padding:10px 0; } /* 초등 저학년 */
.edu-list .slide .ibx-3 { position: relative; width: 100%; display: block; font-weight: 500; background:#e86457; text-align: center; color: #fff; padding:10px 0; } /* 초등 고학년 */
.edu-list .slide .ibx-4 { position: relative; width: 100%; display: block; font-weight: 500; background:#60aadd; text-align: center; color: #fff; padding:10px 0; } /* 청소년 */
.edu-list .slide .ibx-5 { position: relative; width: 100%; display: block; font-weight: 500; background:#495672; text-align: center; color: #fff; padding:10px 0; } /* 기타 */

.edu-list .slide .pro-info { background: rgb(255, 255, 255); padding: 15px 15px; border-top:1px solid #f9f9f9; position: relative; }
.edu-list .slide .pro-info dl { margin-bottom: 8px; font-size: 16px; display: flex; }
.edu-list .slide .pro-info dl:last-of-type { margin-bottom: 0px; }
.edu-list .slide .pro-info dt { flex:0 0 auto; width: 65px; font-weight: 300; font-size: 14px; color: rgb(102, 102, 102); }
.edu-list .slide .pro-info dd { width: calc(100% - 65px); font-size: 14px; color: rgb(102, 102, 102); }

.edu-list .slide .items-btn { background: rgb(12, 117, 222); height: 55px; text-align: center; color: rgb(255, 255, 255); line-height: 50px; font-size: 16px; font-weight: 500; display: block; z-index: 1; }
.edu-list .slide .items-btn:hover { background: rgb(49, 80, 167); } 
.edu-list .slide .items-btn.closed { background: rgb(153, 153, 153); }
.edu-list .slide .items-btn.wait { background: rgb(255, 255, 255); border-color: rgb(10, 158, 76); color: rgb(10, 158, 76); }

.edu-list .slide p { background: rgb(255, 255, 255); padding: 15px 15px; position: relative; }
.edu-list .slide p strong { color: rgb(42, 42, 42); line-height: 1.2; font-size: 16px; font-weight: 500; margin-top: 0px; display: block;  }

.edu-list .slide:hover { text-decoration: none; box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.15); transform: translateY(10px); }
.edu-list .slide:hover .ibx::after { opacity: 0; }
.edu-list .slide:hover p { text-decoration: none; }

@media all and (max-width:1199px) {
	.edu-list { padding-bottom: 30px; margin-top: 48px; }
	#edu-list::before { height: 443px; }
	.edu-list h2 { font-size: 28px; }
	.edu-list h2 span { padding: 0px 20px; }
	.edu-list h2::before { left: 20px; right: 20px; }
	.edu-list .slick { margin-top: 0px; margin-right: -140px; }
	.edu-list .slick .slick-list { margin: 0px -10px; padding: 35px 0px 30px; }
	.edu-list .slide { margin: 0px 10px; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.03); }
	.arrow.edu-list { display: none; }
	.edu-list .slide .pro-info { padding: 15px 10px; }
	.edu-list .slide p { padding: 18px 10px; }
	.edu-list .slide p strong { font-size: 20px; margin-top: 11px; }
	.edu-list .slide.ing p::after { transform-origin: 100% 0%; top: 15px; right: 15px; transform: scale(0.85); }
	.edu-list .slide:hover { box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15); transform: translateY(0px); }
	.edu-list .slide.slick-current .ibx::after { opacity: 0; }
}

@media all and (max-width:991px) {
	#edu-list::before { height: 380px; }
	.edu-list h2 { font-size: 24px; }
	.edu-list h2 span { padding: 0px 15px; }
	.edu-list .slick { margin-right: -90px; }
	.edu-list .slide .pro-info { padding: 15px 10px; }
	.edu-list .slide p { padding: 15px 10px; }
	.edu-list .slide p strong { font-size: 16px; margin-top: 10px; }
	.edu-list .slide.ing p::after { top: 15px; right: 15px; transform: scale(0.8); }
}

@media all and (max-width:767px) {
	#edu-list::before { height: 446px; }
	.edu-list h2 { font-size: 22px; }
	.edu-list .slick { margin-right: -220px; }
	.edu-list .slick .slick-list { margin: 0px -8px; padding: 30px 0px 25px; }
	.edu-list .slide .pro-info { padding: 13px 10px; }
	.edu-list .slide { margin: 0px 8px; }
	.edu-list .slide p { padding: 13px 10px 13px 15px; }
	.edu-list .slide p strong { margin-top: 9px; }
	.edu-list .slide.ing p::after { top: 10px; right: 10px; transform: scale(0.7); }
}


h3.dreamtitle { 
	background-image: url('../images/contents/0102_logo_3_48.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 48px 40px;
	padding:7px 0 0 60px;
	height:40px;
}
h3.dreamtitle-1 { 
	background-image: url('../images/contents/0102_logo_2_48.png');
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 48px 40px;
	padding:7px 0 0 60px;
	height:40px;
}

@media all and (max-width:767px) {
	h3.dreamtitle, h3.dreamtitle-1 { padding:7px 0 0 60px; font-size:20px; }
}

.bi-btn-area { width:100%; text-align:center; }
.dreip { color:#555; font-size:16px; text-align:justify; }

.protitbox { width:100%; text-align:center; padding:10px 0 40px; }

.list-unstyled {
	padding-left: 0;
	list-style: none;
}

.list-disc, .list-circle {
	padding-left: 25px !important;
}
  
.list-disc {
	list-style-type: disc !important;
}

.list-circle {
	list-style-type: circle !important;
}