/*********************
00) Contents Layout
*********************/
.subWrap .mbnkr{margin-bottom: 100px;}
@media all and (max-width:1000px){
.subWrap .mbnkr{margin-bottom: 65px;}
}
/*2분할 콘텐츠*/
.colCon{margin-bottom: 80px;}
.colCon:last-child{margin-bottom: 0;}
.colCon .leftCon{float: left; width: 34.2857%;}
.colCon .rightCon{float: right; width: 61.4286%; /* margin-right: 2.8571%; */}
.hist .colCon .leftCon{float: left; width: 24.2857%;}
.hist .colCon .rightCon{float: right; width: 71.4286%;}
.colCon .allCon {float: left; width: 100%;}
/*2분할 콘텐츠 : border top*/
.colCon.bt{padding-top: 50px; border-top: solid 2px #000;}
/*콘텐츠 default*/
.colCon .rightCon img{max-width:100%;}
.colCon .rightCon p{font-size: 18px; line-height: 1.6; margin-bottom: 50px;}
.colCon .rightCon p.guide{font-size: 16px; color: #888; margin-top: 20px;}
.colCon .allCon img{max-width:100%;}
/*Contents Title - Description*/
h2.conTtl{font-size: 40px; line-height: 1.2; letter-spacing: -2px; font-weight: 400; /* max-width:310px */}
h2.conTtl.gmkl{font-weight: normal;font-family: 'GmarketSansLight';}
h2.conTtl.gmkl b{font-family: 'GmarketSansBold';font-weight: normal;}
h2.conTtl.gmkb{font-family: 'GmarketSansBold';font-weight: normal;}
p.conSubTtl{font-size: 18px; margin-top: 15px; font-weight: 400; line-height: 1.5;}
.conDes{font-size: 18px; line-height: 1.6;text-align: justify;}
/*btns*/
a.cmnDnld{display:inline-block; padding: 0 40px; height: 50px; line-height: 50px; max-width:200px; border: solid 1px #000; font-size: 15px; margin-top: 40px; transition:.2s; font-weight: 400;}
a.cmnDnld i{display:inline-block; width: 15px; height: 16px; margin-bottom: -2px; margin-right: 8px; background: url('../img/common/icon_download.png') no-repeat center;}
a.cmnDnld:hover{background-color: #f0f0f0;}
.leftCon a.cmnDnld{margin-top: 5px;}
/*Contents List*/
ul.conList li{margin-bottom: 80px;}
ul.conList li:last-child{margin-bottom: 0;}
ul.conList.narrow li{margin-bottom: 40px;}
ul.conList.narrow li:last-child{margin-bottom: 0;}
/*중간에 들어오는 콘텐츠*/
.midCon{margin: 80px 0;}
.midCon img{max-width:100%;}
/*공공저작물 표시*/
.copyOpen{margin-top: 50px; padding: 20px; background-color: #f5f5f5; text-align: center;}
.root_daum_roughmap_landing .border2{display: block !important;}
@media all and (max-width:1980px){
.root_daum_roughmap{width: 99.9% !important;}
}
@media all and (max-width:640px){
.root_daum_roughmap .wrap_map{height: 320px !important;}
}

@media all and (max-width:1280px){
.colCon{margin-bottom: 50px;}
h2.conTtl{font-size: 32px;}
p.conSubTtl{margin-top: 10px; font-size: 16px;}
}

@media all and (max-width:815px){
.colCon{margin-bottom: 40px;}
.colCon .leftCon,
.colCon .rightCon{float: none; width: 100%;}
.colCon .rightCon{margin-top: 20px;}
.colCon.bt{padding-top: 40px;}
h2.conTtl{font-size: 22px;}
p.conSubTtl{margin-top: 8px;}
.conDes{font-size: 15px; line-height: 1.4;}
.colCon .rightCon p{font-size: 15px; margin-bottom: 20px;}
.colCon .rightCon p.guide{font-size: 15px;}
a.cmnDnld{font-size: 14px; margin-top: 20px; padding: 0 25px; height: 40px; line-height: 40px;}
ul.conList li{margin-bottom: 40px;}
.midCon{margin: 40px 0;}
}

/*********************
01) 홍보영상(썸네일리스트)
*********************/
ul.thumbList{border-top: solid 2px #000;}
ul.thumbList li{padding: 45px 0; overflow:hidden; border-bottom: solid 1px #e6e6e6;}
ul.thumbList li:last-child{border-bottom: 0; padding-bottom: 0;}
ul.thumbList li .ttlArea{float:left; width: 34.2857%;}
ul.thumbList li .ttlArea p{font-size: 40px; line-height: 1.3; letter-spacing: -2px; font-weight: 400; max-width:350px;}
ul.thumbList li .ttlArea em{display:block; font-size: 18px; margin-top: 30px; font-style:normal;}
ul.thumbList li .conArea{float:right; width: 61.4286%; margin-right: 2.8571%;}
ul.thumbList li .conArea .videoArea{background-color: #181714; padding: 40px;}
ul.thumbList li .conArea .videoArea .video{height: 0; padding-bottom: 56.25%; position: relative;}
ul.thumbList li .conArea .videoArea .video iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
@media all and (max-width:1280px){
ul.thumbList li .ttlArea p{font-size: 32px;}
}

@media all and (max-width:815px){
ul.thumbList li{padding: 20px 0;}
ul.thumbList li .ttlArea{float:none; width: 100%;}
ul.thumbList li .ttlArea p{font-size: 24px;}
ul.thumbList li .ttlArea em{font-size: 14px; margin-top: 10px;}
ul.thumbList li .conArea{float:none; width: 100%; margin-top: 20px;}
ul.thumbList li .conArea .videoArea{padding: 20px;}
}

@media all and (max-width:410px){
ul.thumbList li .ttlArea p{font-size: 20px;}
}

/*********************
02) 조직도
*********************/
.flagImg{position: relative;}
.flagImg em{display:inline-block; position: absolute; left: 0; top: 0; padding: 0 20px; line-height: 60px; line-height: 60px; color: #fff; background-color: #363636; font-style:normal; font-size: 20px; font-weight: 400;}
.flagImg img{max-width:100%;}
.flagImg.osmu{padding: 60px;background-color: #f5f5f5;text-align: center;}
@media all and (max-width:815px){
.flagImg em{font-size: 14px; padding: 0 15px; line-height: 35px; height: 35px;}
}

/*********************
03) 바로가기 버튼
*********************/
.midBtnList{margin: 50px 0;  max-width:1400px}
.midBtnList a{display:inline-block; min-width:280px; padding: 0 35px; line-height: 60px; height: 60px; border-radius:0; box-sizing:border-box; border: solid 1px #000; font-size: 20px; font-weight: 400; margin-right: 30px; transition:.2s;position: relative;}
.midBtnList a:last-child{margin-right: 0;}
.midBtnList a i.aro{display:inline-block; width: 31px; height: 15px; background:url(../img/sub/aro_r.gif) no-repeat center;position: absolute;right: 35px;top: 50%;margin-top: -8px;}
.midBtnList a:hover{background-color: #f0f0f0;}

@media all and (max-width:815px){
.midBtnList{margin: 30px 0; padding-right: 3.64%;}
.midBtnList a{font-size: 15px; padding: 0 25px; line-height: 45px; height: 45px; display:block; margin-right: 0; margin-bottom: 10px;}
.midBtnList a:last-child{margin-bottom: 0;}
.midBtnList a i.aro{right: 25px;}
}


/*********************
04) OSMU
*********************/
.osmu{margin-top: 100px;}
.osmu .ttlArea{text-align: center;}
.osmu .ttlArea h2{font-size: 60px; font-weight: 600;}
.osmu .ttlArea p{font-size: 20px; letter-spacing: 1px; margin-top: 15px;text-transform: capitalize;}
.osmu ul{margin-top: 80px;}
.osmu ul li{width: 17.1428%; float:left;margin-left: 3.571%}
.osmu ul li:first-child{margin-left: 0;}
.osmu ul li .imgArea{margin-bottom: 45px; height: 0; position: relative; padding-bottom: 100%;}
.osmu ul li img{max-width:100%; position: absolute; left: 0; /* transform:translateX(-50%); */ top: 0; width: auto; height: auto;}
.osmu ul li .txtArea{padding: 0 0 0 4%;}
.osmu ul li .txtArea p{font-size: 40px; line-height: 1.1; font-family: 'GmarketSansBold';font-weight: normal;}
.osmu ul li .txtArea p em{font-size: 24px; display:block; font-style:normal; margin-bottom: 5px;font-family: 'GmarketSansMedium';font-weight: normal;}
.osmu ul li .txtArea span.con{display:block; margin-top: 20px; font-size: 18px; line-height: 1.6; text-align: left;}
@media all and (max-width:1610px){
.osmu ul li{width: 18.5%; float:left;margin-left: 1.875%}
.osmu ul li .txtArea{padding: 0 }
.osmu ul li .txtArea p{font-size: 23px;text-align: center;}
.osmu ul li .txtArea span.con{font-size: 15px;}
}
@media all and (max-width:815px){
.osmu{margin-top: 50px;}
.osmu .ttlArea h2{font-size: 40px;}
.osmu .ttlArea p{font-size: 18px;}
.osmu ul{margin-top: 40px;}
.osmu ul li{width: 50%;margin-left: 0;margin-bottom: 30px;}

.osmu ul li .imgArea{margin-bottom: 30px;padding-bottom: 0;height: auto;}
.osmu ul li img{left: 50%; transform:translateX(-50%);position: relative;}
.osmu ul li .txtArea span.con{text-align: center;}
}
@media all and (max-width:510px){
.osmu .ttlArea h2{font-size: 32px;}
.osmu .ttlArea p{font-size: 16px; margin-top: 10px;}
.osmu ul li .imgArea{margin-bottom: 20px;}
.osmu ul li{width: 46%;padding: 0 2%;}
.osmu ul li .txtArea p{font-size: 20px;}
.osmu ul li .txtArea span.con{font-size: 14px; text-align: center; margin-top: 10px;}
}
@media all and (max-width:380px){
.osmu ul li{width: auto;padding: 0 2%;float: none;}
.osmu ul li span.x{display: none;}
}

/*********************
05) 200주년 기념행사
*********************/
.txtList dl{border-bottom: solid 1px #e6e6e6; padding: 40px 0; overflow:hidden;}
.txtList dl:first-child{padding-top: 0;}
.txtList dl:last-child{padding-bottom: 0; border-bottom: 0;}
.txtList dl dt,
.txtList dl dd{font-size: 18px; line-height: 2;}
.txtList dl dt{float:left; width: 16%; padding:0 2%; font-weight: 500;}
.txtList dl dd{float:left; width: 80%;}
.hist .txtList dl dt{width: 80px;}
.hist .txtList dl dd{width: calc(96% - 80px)}

ul.yearList li{overflow:hidden;}
ul.yearList li b{display:block; width: 80px; float: left; font-weight: 500;}
ul.yearList li span{display:block; width: calc(100% - 80px); float: left;}

@media all and (max-width:1280px){
.txtList dl{padding: 25px 0;}
.txtList dl dt, .txtList dl dd{font-size: 16px; line-height: 1.6;}
}

@media all and (max-width:815px){
.txtList dl{padding: 15px 10px; padding-left: 0;}
.txtList dl dt, .txtList dl dd{float:none; width: 100%; font-size: 15px;}
.txtList dl dt{padding: 0; margin-bottom: 5px; position: relative; padding-left: 10px;}
.txtList dl dt:before{content:''; position: absolute; left: 0; width: 5px; height: 10px; top: 7px; background-color: #000;}

ul.yearList li b{font-size: 14px; width: 50px; font-weight: 400;}
ul.yearList li span{width: calc(100% - 50px);}
}

/*********************
06) 생애
*********************/
.historyCon{display:none;}
.historyCon.on{display:block;}
.yearCate li{margin-bottom: 40px; color: #a4a4a4; cursor:pointer; transition:.2s;}
.yearCate li:last-child{margin-bottom: 0;}
.yearCate li.on, .yearCate li:hover{color: #000;}
@media all and (max-width:815px){
.yearCate{padding-bottom: 10px;}
.yearCate li{float:left; margin-left: 18px; margin-bottom: 0; font-size: 16px;}
.yearCate li:first-child{margin-left: 0;}
.yearCate li.on{position: relative; font-weight: bold;}
.yearCate li.on:before{content:''; bottom: -5px; right: -3px; left: 0; height: 3px; background-color: #000; position: absolute;}
}

/*********************
07)  신부 편지
*********************/
.letterTab{margin-bottom: 50px;}
.letterTab ul li{width: 50px; height: 50px; border-radius:15px; border: solid 1px #ccc; text-align: center; line-height: 49px; font-size: 16px; font-weight: 400; box-sizing:border-box; cursor:pointer; transition:.2s;}
.letterTab ul li.blank{font-size: 0; background-color: #f2f2f2; border: 0; cursor:default;}
.letterTab ul li:hover,
.letterTab ul li.on{background-color: #000; border-color: #000; color: #fff;}
.letterTab ul li.blank:hover{background-color: #f2f2f2;}
.letter{padding: 0 20px;background: url('../img/sub/note_bg_50.gif') repeat left top / auto 50px; line-height: 50px; font-size: 22px;}
.letterCon{display:none;}
.letterCon.on{display:block;}
@media all and (max-width:815px){
.letterCon .conSubTtl{margin-top: 10px; font-size: 14px;}
.letterTab{margin-bottom: 30px;}
.letter{background: url('../img/sub/note_bg_35.gif') repeat left top / auto 35px; line-height: 35px; font-size: 16px; padding: 0 10px;}
}

/*********************
08) 웹툰
*********************/
.webtoonVisual{margin-bottom: 40px;}
.webtoonVisual img{max-width:100%;}

/*header*/
.webtoonView .header{background-color: #191919; color: #fff; height: 70px; line-height: 70px; position: fixed; width: 92.8%; top: 0; left: 0; z-index:1; padding: 0 3.6%;}
.webtoonView .header h2{float:left; display:inline-block; font-size: 18px; font-weight: 300;}
.webtoonView .header h2 b{font-weight: bold; padding-left: 20px;}
.webtoonView .header .ctrl{float:right;}
.webtoonView .header .ctrl a{display:inline-block; font-size: 16px; text-align: center; transition:0.2s; padding: 0 20px; float:left; background-repeat:no-repeat;}
.webtoonView .header .ctrl a.prev{background-image: url('../img/common/icon_prev.png'); background-position: left 20px center; padding-left: 50px; position: relative;}
.webtoonView .header .ctrl a.prev:after{content:''; background-color: #474747; position: absolute; top: 28px; bottom: 25px; width: 1px; right: 0;}
.webtoonView .header .ctrl a.next{background-image: url('../img/common/icon_next.png'); background-position: right 20px center; padding-right: 50px;}
.webtoonView .header .ctrl a.list{margin-left: 20px; background: url('../img/common/icon_list.png') no-repeat left 20px center; padding-left: 40px;}
.webtoonView .header .ctrl a:hover{background-color: rgba(255,255,255,0.1);}

/*Contents*/
.webtoonView .viewForm .articleBody .userContents{border: 0 !important; margin: 0 !important; padding: 0; text-align: center; padding-top: 70px;}
.webtoonView .viewForm .articleBody .userContents img{max-width:100%;}

.subContent .article_photo{border-top: 0 !important; border-bottom: 0 !important;}
.subContent .article_photo li{border-bottom: 0 !important;}
.subContent .article_photo li .txt, .article_photo li em{text-align: left !important; font-weight: 500 !important;}
.subContent .article_photo li .ph{background-size:cover; background-position:center;}

@media (max-width:815px){
.webtoonVisual{margin-bottom: 0;}
/*header*/
.webtoonView .header{height: auto; line-height: 50px;}
.webtoonView .header h2{float:none; font-size: 15px;}
.webtoonView .header h2 b{padding-left: 10px;}
.webtoonView .header .ctrl{float:none; width: 100%; border-top: solid 1px rgba(255,255,255,.1);}
.webtoonView .header .ctrl a{font-size: 15px; line-height: 50px; height: 50px; background-size:8px;}
.webtoonView .header .ctrl a.prev{background-position: left center; padding-left: 30px;}
.webtoonView .header .ctrl a.prev:after{top: 19px; bottom: 17px;}
.webtoonView .header .ctrl a.next{background-position: right center; padding-right: 30px;}
.webtoonView .header .ctrl a.list{float:right; margin-left: 0; background-size:10px;}

/*Contents*/
.webtoonView .viewForm .articleBody .userContents{padding-top: 105px;}
}

@media (max-width:450px){
.webtoonView .viewForm .articleBody .userContents{padding-top: 105px !important;}
.subContent .article_photo li .txt, .article_photo li em{font-size: 14px !important;}
}

/*********************
09) 동화책
*********************/
.fairyTaleWrap{background: url('../img/fairyTale/fairytale_bg.jpg') no-repeat top left / 100%; padding: 1.4358% 1.4358% 0 1.68%; padding-bottom: 60px; max-width:1240px; margin: 0 auto;}
.fairyTale img{max-width:100%;}
/* .fairyTale:after{content:''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: url('../img/fairyTale/fairyTale_shadow.png') no-repeat center / 100%; z-index:1;} */
.fairyTale ul li{width: 50%;}
.fairyTale .swiper-button-prev,
.fairyTale .swiper-button-next{width: 50px; height: 50px; background-color: rgba(0,0,0,.5); border-radius:25px; transition:.2s;}
.fairyTale .swiper-button-prev:after,
.fairyTale .swiper-button-next:after{content:''; width: 100%; height: 100%; position: absolute; background: url('../img/fairyTale/page_aro.png') no-repeat center / 11px;}
.fairyTale .swiper-button-next{transform:rotate(180deg);}
.fairyTale .swiper-button-prev:hover,
.fairyTale .swiper-button-next:hover{background-color: #d8241e;}
.guideBox{font-size: 18px; color: #888; line-height: 60px; padding: 0 45px; border-radius:30px; background-color: #f5f5f5; text-align: center; font-weight: 400; max-width:600px; margin: 0 auto; margin-top: 20px; }

@media all and (max-width:600px){
	.fairyTaleWrap{background: url('../img/fairyTale/fairytale_bg_m.jpg') no-repeat top left / 100%; padding-bottom: 20px;}

	.guideBox{font-size: 15px; line-height: 1.3; padding: 10px; margin-top: 0; border-radius:10px;}
	.fairyTale .swiper-button-prev,
	.fairyTale .swiper-button-next{width: 35px; height: 35px; display:none;}
	.fairyTale .swiper-button-prev:after,
	.fairyTale .swiper-button-next:after{background-size:8px;}

}


/*********************
10) 일정표
*********************/

.schedule_t		{font-size: 16px; font-weight: 400;}
.schedule_t_b	{color: #217fff;}
.schedule_t_x	{color: #ff2020;}

table.schedule{border-top: solid 1px #222;}
table.schedule th,
table.schedule td{text-align: left; font-size: 16px; font-weight: 400; padding: 15px 10px; border-bottom: solid 1px #ddd; line-height: 1.6;}
table.schedule thead th{background-color: #f8f8f8; font-weight: bold; padding: 20px 10px;text-align: center;}
table.schedule td.c{text-align: center;}
table.schedule td .o{color: #217fff;}
table.schedule td .x{color: #ff2020;}
table.schedule tbody th{text-align: center;font-weight: bold;}
table.schedule tbody td{border-left: solid 1px #ddd;}

@media all and (max-width:815px){
table.schedule th,
table.schedule td{font-size: 13px; line-height: 1.4; padding: 10px;}
table.schedule th{padding: 15px 10px;}

}