/* main page*/

.mPage{width:100%; float:left; overflow:hidden; background:url(../images/mainBg.jpg) no-repeat center center; background-size:cover;}
#mainWrap{width:100%; float:left; position:relative; z-index:1; float:left;}
#mainWrap .mContWrap{width:100%; position:relative; box-sizing:border-box; padding:30px 0 20px; z-index:1; text-align:center;}
#mainWrap .mContWrap .mainLogo{width:100%; padding-bottom:20px;}
#mainWrap .mContWrap .mainLogo img{width:70%;}
#mainWrap .mContWrap .mainLine{width:100%; padding-bottom:20px;}
#mainWrap .mContWrap .mainLine span{display:inline-block; width:80px; height:1px; background:#ffffff;}
#mainWrap .mContWrap .mainCate{width:100%; float:left; padding-bottom:50px;}
#mainWrap .mContWrap .mainCate a{display:inline-block; float:left; width:90%; margin-left:5%; margin-bottom:10px; position:relative;}
#mainWrap .mContWrap .mainCate a span{display:inline-block; width:100%;}
#mainWrap .mContWrap .mainCate a span.img{position:relative; z-index:1;}
#mainWrap .mContWrap .mainCate a span.img img{width:100%;}

#mainWrap .mContWrap .mainCate a span.txt{position:absolute; z-index:2; color:#000000; width:100%; text-align:center; top:60%; left:0; font-size:2.5vw; font-weight:600;}
#mainWrap .mContWrap .mainCate a:nth-child(2n) span.txt{color:#ffffff;}





#subWrap{width:100%; float:left; padding:50px 0 100px; font-family: 'NanumSquare', sans-serif !important; font-size:16px; min-height:500px;}
.subCont{width:100%; float:left; margin-left:0%; text-align:left;}
.subBoard{width:100%; float:left; margin-left:0%; text-align:left;}
.subAgree{width:90%; float:left; padding:20px 4%; text-align:left; border:1px solid #e1e1e1;}

.sBox{width:49%; padding-bottom:40px; float:left;}
.sBox:nth-child(2n){float:right;}
.sBox:nth-child(2n+1){clear:both;}

.sBox .tit{width:100%; box-sizing:border-box; padding:0 15px 10px 0; font-size:18px; line-height:20px; color:#131313; font-weight:600;}

#popArea{position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.9); display:none; z-index:999999;}
#popWrap{width:100%; height:100%; margin:0 auto; max-width:1100px; min-width:320px;}
.popTitWrap{width:100%; height:5%; color:#131313; font-size:20px; line-height:30px; text-align:center; display:table;}
.popTit{height:100%; color:#ffffff; font-size:16px; text-align:left; display:table-cell; vertical-align:middle; padding-left:10px; position:relative;}
.popTit span{font-weight:bold;}
.pTitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.popSwiper{width:100%; height:95%; text-align:center; position:relative;}
.popSwiper img{height:95%;}

.popClose{position:absolute; height:100%; top:5%; right:2%;}
.popClose img{height:35px; width:auto;}

.popShow{width:100%; height:95%; text-align:center; position:relative; padding-top:0px;}
.popShow img{height:95%;}


/* pc버전 무시하고 다시*/

.sBox .photoWrap{width:100%; display:block;}
.sBox .photo{width:100%; box-sizing:border-box; border:1px solid #d7d7d7; display:block;}
.sBox .photo img{width:100%;}

.sBox .btnWrap{width:100%; height:60px; display:block; margin-top:6px; text-align:left;}
.sBox .btnWrap ul{width:100%; float:left;}
.sBox .btnWrap ul li.down{padding-left:3px; width:50%; float:left; box-sizing:border-box;}
.sBox .btnWrap ul li.view{padding-right:3px; width:50%; float:left; box-sizing:border-box;}

	
.sBox .btnWrap a{display:inline-block; width:100%; border:none; background:#193d9b; color:#fff; padding:10px 0; box-sizing:border-box; line-height:40px; float:left; text-align:left; font-size:18px;}
/*.sBox .btnWrap a:hover{background:#88c9f3;}*/


.sBox .btnWrap ul li.view a{background:#88c9f3;}
.sBox .btnWrap ul li.view:nth-child(2) a{background:#193d9b;}


.sBox .btnWrap a .viewer{ width:100%; padding-left:40%; box-sizing:border-box; background:url(../images/icon_viewer.png) no-repeat 20% center; }
.sBox .btnWrap a .download{width:100%; padding-left:40%; box-sizing:border-box; background:url(../images/icon_down.png) no-repeat 20% center; }


.sBox{width:49%; padding-bottom:40px; float:left;}
.sBox:nth-child(2n){float:right;}
.sBox:nth-child(2n+1){clear:both;}

@media screen and (max-width:850px){
	
	
	#mainWrap .mContWrap .mainCate a span.txt{font-size:4vw;}
	
	.sBox{width:100%; padding-bottom:20px; float:left;}
    .sBox:nth-child(2n){float:left; clear:both;}
    .sBox:nth-child(2n+1){clear:both;}
	

}


@media screen and (max-width:640px){
	
	
	.sBox .tit{font-size:16px;}
    .popTit{font-size:14px;}
	
	.sBox .btnWrap a{font-size:16px;}	
	

}

@media screen and (max-width:480px){
	
	

	.sBox{padding-bottom:40px;}	
	.sBox .tit{font-size:14px;}	
	.sBox .btnWrap{height:50px;}
	.sBox .btnWrap a{padding:10px 0; font-size:14px;}	
	.sBox .btnWrap a .viewer{ padding-left:30%; height:30px; line-height:30px; background-position:10% center; background-size:24px;}
    .sBox .btnWrap a .download{padding-left:30%; height:30px; line-height:30px; background-position:10% center; background-size:24px;}
	
	
	.sBox .btnWrap a .viewer01{ padding-left:30%; background-position:10% center;}
    .sBox .btnWrap a .download01{padding-left:30%; background-position:10% center;}
	

}




.popSwiper  .swiper-container {
        width: 100%;
        height: 100%;		
		
    }

.popSwiper  .swiper-wrapper {
        width: 100%;
        height: 100%;		
		
    }


.popSwiper  .swiper-slide {
        text-align: center;
        font-size: 18px;
        
		
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
		
		width:100%;
		height:100%;
		
		overflow:hidden;
		
    }
	
.popSwiper  .swiper-slide .guider{width:100%; height:100%;}

	
.popSwiper .swiper-pagination{text-align:center; bottom:10px; display:none;}
.popSwiper .swiper-pagination .swiper-pagination-bullet{background:#959595; width:10px; height:10px; opacity:1;}
.popSwiper .swiper-pagination .swiper-pagination-bullet-active{background:#cd3039; width:10px; height:10px;}
	  
.popSwiper .swiper-button-next{background:url(../images/arrowR.png) no-repeat center center; width:40px; height:40px; background-size:cover; }
.popSwiper .swiper-button-prev{background:url(../images/arrowL.png) no-repeat center center; width:40px; height:40px; background-size:cover; }
	
    @media screen and (max-width:480px){
		
		.popSwiper .swiper-button-next{display:none;}
		
		.popSwiper .swiper-button-prev{display:none;}
	}


/* 여성독립운동가 영상 캠페인 */
.popMovieShow{width:100%; text-align:center; position:relative; background:#f1f1f1; padding-top:10px; top:50%; transform:translateY(-50%); max-height:100%; overflow:auto;}
.popMovie{width:80%; margin:10px 10%; padding-bottom:45%; position:relative;}
.popMovie .videoWrap{position:absolute; top:0; left:0; width:100%; height:100%;  background:#000000;}
.popMovieTxt{width:100%; padding:10px 20px; box-sizing:border-box; display:none;}
.popMovieTxt .videoCont{width:100%; display:none;}
.popMovieTxt .videoCont ul{width:100%; display:flex; justity-content:space-between; justify-wrap:wrap; align-items:flex-start;}
.popMovieTxt .videoCont ul li{width:80%; font-size:12px; color:#292929; line-height:18px; text-align:left; padding:10px 0;}
.popMovieTxt .videoCont ul li:first-child{width:20%;}
.popMovieTxt .videoCont ul li.tit{padding-left:20px; position:relative; font-weight:600; font-size:14px;}
.popMovieTxt .videoCont ul li.tit::before{width:5px; height:5px; background:#cccccc; border-radius:100%; content:''; position:absolute; top:20px; left:0;}
.popMovieTxt .videoCont ul li.videoTit{font-weight:600;}


@media screen and (max-width:480px){
	
	.popMovieTxt .videoCont ul{display:inline-block; width:100%; }
	.popMovieTxt .videoCont ul li{width:100%;}
	.popMovieTxt .videoCont ul li.tit{width:100%; border-bottom:1px solid #333;}
	.popMovieTxt .videoCont ul li.videoTxt{width:100%;}
	
	
}