@charset "utf-8";

#body{position:relative;}
#body .main-bg{position:absolute; width:55%; height:49.5%; background:#eeeeee; top:463px; left:0; z-index:-1;}

/*************21-10-22 유튜브 더보기 추가**************/
.media-div .cont-head p.more{display:inline-block; vertical-align: top; color:#525252; font-size:1.125em; padding-top:10px; margin-right:15px;}
.media-div .more i { font-size: 1.125em; margin-left: 5px; color: #525252; transition:all .3s; margin-right:10px;}
.media-div .more:hover{text-decoration:none;}
.media-div .more:hover i{margin-left:15px;} 
.contents-wrap .cont-head .title{vertical-align: middle;}
@media (max-width: 767px){
	.media-div .cont-head p.more{padding-top:0;}
}
/*************21-10-22 유튜브 더보기 추가 끝**************/

/*main-top*/
.main-top{position:relative;}
.main-top:after{display:block; content:''; clear:both;}
.main-top .main-visual{height:490px; width:100%; background:url(/resources/images/msd/main/main-visual.jpg) no-repeat; background-size:cover; background-position:left;}
.main-top .main-sns{float:left; width:49%; padding:24px 37px; background:#fff;box-shadow:0px 1px 10px rgba(0,0,0,.2); }
.main-top .main-sns h3{font-size:24px; font-weight:400; color:#161616; display:inline-block; line-height:55px}
.main-top .main-sns .sns-wrap > ul{ float:right;}
.main-top .main-sns .sns-wrap > ul:after{display:block; content:''; clear:both;}
.main-top .main-sns .sns-wrap > ul li{float:left; margin-left:10px;}
.main-top .main-sns .sns-wrap > ul li:first-child{margin-left:0;}
.main-top .main-sns .sns-phone {float: right;font-size: 25px;font-weight: 600;line-height: 55px;color: #333;}
.main-top .main-sns h3 span{color:#a53732; margin-left:10px}
.main-top .main-notice{float:right; width:49%; margin-top:-170px}
.main-top .main-notice h3{padding:20px 86px; background:#a53732; color:#fff; text-align: center; display:table-cell; font-size:24px; font-weight:400; }
.main-top .main-notice .notice-wrap{padding:40px; background:#fff; box-shadow:0px 1px 10px rgba(0,0,0,.2); }
.main-top .main-notice .notice-wrap ul li a{font-size:16px; color:#161616; line-height:2; width:100%; display:block;}
.main-top .main-notice .notice-wrap ul li a:after{display:block; content:''; clear:both;}
.main-top .main-notice .notice-wrap ul li a p{float:left; max-width:65%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-top .main-notice .notice-wrap ul li a span{float:right;}
/* main-center */
.main-center {padding: 60px 0 72px;}
.main-center .main-center-title { margin-bottom: 15px; color: #2f2f2f; font-size: 1.825em; font-weight: 500; text-align: center; }
.main-center .main-center-sub { color: #1b3f73; font-size: 1.2em; text-align: center; margin-bottom:50px}

/* main-center 언론보도*/
.news { overflow-x: hidden; height: auto; margin-bottom:60px;}
.news .slick-slide{margin-right:20px}
.news .more i { font-size: 1.125em; margin-left: 5px; color: #525252; transition:all .3s;}
.news .more:hover{text-decoration:none;}
.news .more:hover i{margin-left:15px;} 
.news .cont-head { margin-bottom: 50px; }
.news .cont-head p.more { display: inline-block; vertical-align: middle; color: #525252; font-size: 1.125em; transition: none; }
.news .cont-tit { font-size: 32px; display: inline-block; margin-right: 20px; font-weight: 400; vertical-align:middle;	 }
.news .cont-body { /*max-height: 295px;*/ overflow: hidden;}
.news .cont-body .item { display: flex !important; border: 1px solid #ddd; }
.news .cont-body .item::after { display: block; clear: both; content: ""; }
.news .cont-body .item .text { width: calc(100% - 295px); float: left; padding: 28px; background: #fff; }
.news .cont-body .item .text p a {font-size: 18px; line-height: 1.5; height: 100%; width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.news .cont-body .item .text h3 a { color: #000; font-size: 1.5em; font-weight: 400; line-height: 1.5; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border-bottom: 1px solid #fff; margin-bottom: 15px; }
.news .cont-body .item .img { width: 295px; height: 295px; overflow: hidden; }
.news .cont-body .item .img a img { width: auto; height: 100%; }
 .slide-btn { float: right; display: flex; }
 .slide-btn li { cursor: pointer; width: 40px; height: 40px; border: 1px solid #cecece; display: flex !important; justify-content: center; align-items: center; background: #fff; }
 .slide-btn li:last-child { border-left: 0; }
 .slide-btn li i {font-size: 1.5em; margin-top: -5px; color: #cecece; }

h3.red-tit{color:#a53732;}
span.red-tit{color:#a53732;}
span.dots{position:relative;}
span.dots:before{display:block; content:""; width:6px; height:6px; background:#a53732; border-radius:50%; position:absolute; top:-4px; left:10px;}

/* main-center 하단 컨텐츠*/
.contents-wrap:after{display:block; content:''; clear:both}
.contents-wrap .cont-head{margin-bottom:50px;}
.contents-wrap .cont-head:after{display:block; content:''; clear:both;}
.contents-wrap .cont-head h3{font-size:32px; line-height:1.2; font-weight:400; display:inline; margin-right:10px;}
.contents-wrap .cont-head .title{display:inline-block;}
.contents-wrap .cont-head .slide-btn{padding-top:36px;}
.contents-wrap .cont-head .slide-btn li{border:none; margin-left:10px;}
.contents-wrap .cont-head .slide-btn li i{color:#000}
.media-div{width:48%; float:left;}
.media-div .cont-body{overflow:hidden}
.media-div .cont-body .youtb{height:487px; border-radius: 20px; overflow:hidden;}
.media-div .item{ position:relative; border-radius: 25px; width:100%; height:480px;}
.media-div .item .it-in{height:100%; border-radius:25px; overflow:hidden;}
.media-div .item .it-in img{object-fit:cover; width:100%; height:100%;}
.media-div .item .text{width:100%; padding:35px 40px; position:absolute; bottom:0; background:rgba(0,0,0,0.6); border-bottom-left-radius:25px; border-bottom-right-radius:25px;}
.media-div .item .text a{color:#fff; display:block; clear:both;}
.media-div .item .text p{font-weight: 300; display:inline-block;}
.media-div .item .text p:first-child{font-size:24px; max-width:70%; float:left; display:block;}
.media-div .item .text p:first-child a{white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.media-div .item .text p.date{float:right;}
.media-div .item .text p.date a{float:right; line-height:1.5;padding-left:24px;}
.media-div .item .text p.date a:before{display:block; content:''; width:20px; height:20px; background:url(/resources/images/msd/main/date-icon.png); background-size:cover; float:left; margin-top:3px; margin-right:10px;}
.quick-div{width:49%; float:right;}
.quick-div .cont-head{margin-bottom:50px;}
.quick-div .cont-body .rowgroup01{margin-bottom:55px;}
.quick-div .cont-body .rowgroup01 ul:after{display:block; content:''; clear:both}
.quick-div .cont-body .rowgroup01 ul li{ float:left; margin-right:5.5%;width:12%}
.quick-div .cont-body .rowgroup01 ul li:hover .icon{transform:rotateY(180deg); transition:all 0.3s ease;}
.quick-div .cont-body .rowgroup01 ul li:last-child{margin-right:0;}
.quick-div .cont-body .rowgroup01 ul li .icon{padding:19px; border-radius:10px; background:#fff; box-shadow:0px 3px 10px rgba(0,0,0,.15); display:block; transform:rotateY(0deg); transition:all 0.3s ease;}
.quick-div .cont-body .rowgroup01 ul li .icon span{display:block; text-align: center;}
.quick-div .cont-body .rowgroup01 ul li .title{display:block; text-align:center; margin-top:20px; font-size:18px; line-height:1.4; letter-spacing:-3px; font-weight:500; white-space:nowrap;}
.quick-div .cont-body .rowgroup02 ul:after{display:block; content:''; clear:both;}
.quick-div .cont-body .rowgroup02 ul li{width:48%; margin-right:4%; height:260px; float:left; background:aqua;transition:all .3s linear}
.quick-div .cont-body .rowgroup02 ul li:first-child{background:#3152ab; }
.quick-div .cont-body .rowgroup02 ul li:first-child:hover{background:#213f90; transition:all .3s linear}
.quick-div .cont-body .rowgroup02 ul li:last-child{margin-right:0; background:#3d278f;}
.quick-div .cont-body .rowgroup02 ul li:last-child:hover{background:#2c1879; transition:all .3s linear}
.quick-div .cont-body .rowgroup02 ul li a{ display:block; width:100%; height:100%; padding:53px 28px;}
.quick-div .cont-body .rowgroup02 ul li:first-child a{background:url(/resources/images/msd/main/main0-linkbg01.png) no-repeat; background-position:right;}
.quick-div .cont-body .rowgroup02 ul li:last-child a{background:url(/resources/images/msd/main/main0-linkbg02.png) no-repeat; background-position:right;}
.quick-div .cont-body .rowgroup02 ul li a p:first-child{font-size:24px; color:#fff; margin-bottom:40px;}
.quick-div .cont-body .rowgroup02 ul li a p:last-child{font-size:20px; color:#fff; line-height:1.5; text-align: left;}

@media all and (max-width: 1200px) { 
	
	#body .fix-layout { padding: 0 20px !important; }
	/*main-top*/
	.main-top .main-visual{height:350px;}
	/*main-top sns*/
	.main-top .main-sns{float:none; position:absolute; bottom:272px; right:0; width:600px;}
	/*main-top notice*/
	.main-top .main-notice{float:none; width:100%; margin-top:30px;}
	/*main-center*/
	.news .cont-tit {font-size: 24px; margin-top: 0;}
	.news .cont-body .item .text h3 a {font-size: 20px;}
	.news .cont-body .item .text{padding:25px 12px;}
	
	/*media*/
	.media-div{width:100%; float:none; margin-bottom:60px;}
	.media-div .item{height:350px}
	.quick-div{width:100%; float:none;}
	 
	 
}


@media all and (max-width: 1000px) { 


 }

@media all and (max-width: 890px) { 
   
}
 
@media all and (max-width: 767px) { 
	
	#body .fix-layout { padding: 0 10px !important; }
 	
 	/*main-top*/
	.main-top .main-visual{height:250px;}
 
 	/*main-top sns*/
 	.main-top .main-sns h3{margin-top:0; font-size:18px; line-height: 35px;}
	.main-top .main-sns .sns-phone {font-size: 28px; line-height: 28px;}
	.main-top .main-sns{position:unset; width:100%;padding:12px 24px; min-height: 100px;}
	.main-top .main-sns ul li a img{width:50px; height:auto; }
	
	/*main-top notice*/
	.main-top .main-notice{margin-bottom:30px;}
	.main-top .main-notice h3{font-size:20px; padding:15px 55px;}
	.main-top .main-notice .notice-wrap{padding:20px; }
	.main-top .main-notice .notice-wrap ul li a{font-size:15px;}
	/* main-center */
	.main-center { padding: 20px 0; }
	.news .cont-tit, .pic .cont-tit, .main-bottom .donors-wall .cont-tit, .contents-wrap .cont-head h3{font-size:20px;}
	.contents-wrap .cont-head h3{line-height:0.3;}
	span.dots:before{left:5px;}
	
	.media-div .item{height:260px;}
	.media-div .cont-body .youtb{height:350px;}
	.media-div .item .text{padding:17px;}
	.media-div .item .text p:first-child{max-width:60%; font-size:15px;}
	
	
	.quick-div .cont-body .rowgroup01 ul li{width:28%; margin-right:7.3%;}
	.quick-div .cont-body .rowgroup01 ul li:nth-child(3n){margin-right:0;}
	.quick-div .cont-body .rowgroup01 ul li .title{font-size:15px; margin-top:5px;}
	.quick-div .cont-body .rowgroup02 ul li{height:185px;}
	.quick-div .cont-body .rowgroup02 ul li a p:first-child{font-size:15px; margin-bottom:15px;}
	.quick-div .cont-body .rowgroup02 ul li a p:last-child{font-size:15px; font-weight:300;}
	
	/* main-bottom */
	.main-bottom{ padding:30px 0px}
	
	
}

@media all and (max-width: 640px) { 
	
	/*main-top*/
	.main-top .main-visual{height:200px;}
	
	.quick-div .cont-body .rowgroup02 ul li a{padding:24px 16px;}
    
}

@media all and (max-width: 500px) { 
	.news .cont-body{width:100%;}
	.news .cont-body .item{display:block !important; border:none;}
	.news .cont-body .item .text{width:100%; float:none; border:1px solid #ccc; padding: 25px 12px 35px 12px;}
	.news .cont-body .item .text h3{margin-top:0;}
	.news .cont-body .item .text h3 a{font-size:18px;}
	.news .cont-body .item .text p{display:none;}
	.news .cont-body .item .img{width:100%; margin-top:-32px; height:150px; float:right;}
	.news .cont-body .item .img a img{width:100%; height:100%; object-fit:cover;}
	.news .slick-slide{height:auto !important;}
		.news .cont-tit{display:block; margin-right:0;}
	.news .cont-head .slide-btn{float:right; margin-bottom:12px;}
	.news .cont-head p.more{margin:12px 0; display:block;}
	
	.quick-div .cont-body .rowgroup01{margin-bottom:10px;}
	.quick-div .cont-body .rowgroup01 ul li{width:32%; margin-right:2%; margin-bottom:2%; padding:10px; background:#fff; border-radius:15px; box-shadow:0px 3px 10px rgba(0,0,0,.2); height:140px;}
	.quick-div .cont-body .rowgroup01 ul li:nth-child(3){margin-right:0}
	.quick-div .cont-body .rowgroup01 ul li .icon{padding:7px 0; border-radius: 0; background:none; box-shadow:none;}
}

@media all and (max-width: 350px) {
	.main-top .main-notice .notice-wrap ul li a p{max-width:55%;}
}

@media (max-width:1460px){
	#popup_2 div { width:700px;}
	#popup_3 div, #popup_4 div { width:500px;}
	#popup_3 img, #popup_4 img { width:100% !important;}
}

@media (max-width:1360px){
	#popup_1 {top: 60px !important;}
	#popup_2 {top: 745px !important;/*top: 570px !important; */left:0px !important}
	#popup_3 {top: 860px !important; left:0px !important}
	#popup_4 {top: 1200px !important; left:0px !important}
	#popup_1 div, #popup_2 div, #popup_3 div, #popup_4 div { width:450px !important; height:auto !important}
	#popup_1 img, #popup_2 img, #popup_3 img, #popup_4 img { width:100% !important;}
}


@media (max-width:650px){
	#popup_1 {top: 60px !important;}
	#popup_2 {top: 600px !important; /*top: 465px !important;*/ left:0px !important}
	#popup_3 {top: 700px !important; left:0px !important}
	#popup_4 {top: 1200px !important; left:0px !important}
	#popup_1 div, #popup_2 div, #popup_3 div, #popup_4 div { width:350px !important; height:auto !important}
	#popup_1 img, #popup_2 img, #popup_3 img, #popup_4 img { width:100% !important;}
}