@charset "utf-8";

.tit {padding-left:15px; border-left:5px solid #204990; font-size:24px; line-height:26px; font-weight:500; color:#161616; margin-bottom:24px;}

/*arti1*/
.arti1:after{content:""; display:block; clear:both;}
.arti1 > div{float: left; width:50%; height: 480px;}
.arti1 > .main-visual{position:relative;}
.arti1 > .main-visual ul, .arti1 > .main-visual ul li{height:100%; overflow:hidden;}
.arti1 > .main-visual img{width:100%; height:100%; object-fit: cover;}
.arti1 > .main-visual .txt{position:absolute; right:30px; top:100px; text-align:right;}
.arti1 > .main-visual .txt .t1{font-size:50px; font-weight:500; color:#fff; margin-bottom:60px; line-height: 2rem;}
.arti1 > .main-visual .txt .t1 span{font-size:24px; }
.arti1 > .main-visual .txt .t2{font-size:32px; color:#fff; line-height: 1.3em;}
.arti1 > .main-visual .slick-list, .arti1 > .main-visual .slick-track{height:100%;}
.arti1 > .main-visual .slick-dots {position:absolute; text-align:center; top:90%; width:100%;}
.arti1 > .main-visual .slick-dots li{display:inline-block; margin-right:4px;}
.arti1 > .main-visual .slick-dots button{width:12px; height:12px; background-color:#fff; text-indent:-9999px; border-radius:50%;}
.arti1 > .main-visual .slick-dots li.slick-active button{background-color:#2f59a1;}
.arti1 > .s01-box{position: relative;background-color: transparent; background-image: linear-gradient(315deg, rgba(0, 148, 121, 0.85) 48%, rgba(40, 107, 214, 0.85) 100%), url(/resources/images/swc/main/s01-box-bg.png);background-repeat: no-repeat;background-position: 95% 95%;padding: 50px 70px 40px 70px;}
.arti1 > .s01-box:after{content:"Hoseo University Social Welfare Counseling"; display:block; font-size:30px; color:#fff; font-weight:500; position:absolute; width:230px; right:60px; bottom:60px; line-height:1.3em; text-align:center;}
.arti1 > .s01-box h3{font-size:24px; color:#fff; margin-bottom:32px;  font-weight:400;}
.arti1 > .s01-box .noti{margin-bottom:50px;}
.arti1 > .s01-box .noti li a{display:block; width:100%; padding:4px 0; margin-bottom:14px;}
.arti1 > .s01-box .noti li a:after{content:""; display:block; clear:both;}
.arti1 > .s01-box .noti li a p{width:80%; color:#fff; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.arti1 > .s01-box .noti li a span{float:right; color:#fff;}
.arti1 > .s01-box .sns li{display:inline-block; margin-right:12px; vertical-align: top;}
.arti1 > .s01-box .sns li a{display:block; width:100px; height:100px; background-color:#275098;/*background-color:#275098;*/ border-radius:12px; text-indent:-9999px; background-repeat:no-repeat; background-position:center;}
.arti1 > .s01-box .sns li:first-child a{background-image:url(/resources/images/swc/main/youtube.png);}
.arti1 > .s01-box .sns li:nth-child(2) a{background-image:url(/resources/images/swc/main/blog.png);}
.arti1 > .s01-box .sns li:nth-child(3) a{background-image:url(/resources/images/swc/main/insta.png);}
.arti1 > .s01-box .sns li:nth-child(4) a{background-image:url(/resources/images/swc/main/facebook.png);}


/*arti2*/
.arti2{padding-top:80px; margin-bottom:100px; background-image:url(/resources/images/swc/main/gray_bg.gif); background-size:100% 80%; background-repeat:no-repeat; }
.arti2 .fix-layout{padding:0 16px !important;}
.arti2 .tit-wrap .tit, .arti2 .tit-wrap span{display:inline-block;}
.tit-wrap span{margin-left:30px; padding-right:22px; background:url(/resources/images/swc/main/news_more.png) no-repeat right center; transition:all .3s;}
.tit-wrap span:hover{padding-right:32px;}
.arti2 .tit-wrap:after{content:""; display:block; clear:both;}
.arti2 .tit-wrap .pager{float:right;}
.arti2 .tit-wrap .pager button{width:40px; height:40px; text-indent:-9999px; border:1px solid #ddd;}
.arti2 .tit-wrap .pager button.prev{background:url(/resources/images/swc/main/news_pager_left.png) #fff no-repeat center;}
.arti2 .tit-wrap .pager button.next{background:url(/resources/images/swc/main/news_pager_right.png) #fff no-repeat center;}
.arti2 .news-wrap{margin-top:25px; }
.arti2 .news-wrap > ul:after{content:""; display:block; clear:both}
.arti2 .news-wrap > ul li{float:left; width:calc((100% - 12px) / 2); margin-right:12px; border:1px solid #ccc}
.arti2 .news-wrap .news-item a{display:block;}
.arti2 .news-wrap .news-item a:after{content:""; display:block; clear:both;}
.arti2 .news-wrap .news-item .text-wrap{float:left; width:60%; height:270px; background-color:#fff; border-right:1px solid #ccc; padding:35px;}
.arti2 .news-wrap .news-item .text-wrap h5{font-size:24px; color:#161616;  overflow: hidden; font-weight:400;
  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.5em; height:3em; margin-bottom:24px; word-break:keep-all;}
  .arti2 .news-wrap .news-item .text-wrap p{font-size:18px; color:#161616;  overflow: hidden;
  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; line-height:1.5em; height:6em; word-break:keep-all;}
.arti2 .news-wrap .news-item .img-wrap{float:right; width:40%; height:270px; overflow:hidden;}
.arti2 .news-wrap .news-item .img-wrap:hover img{transform:scale(1.1);}
.arti2 .news-wrap .news-item .img-wrap img{width:100%; height:100%; object-fit: cover; transition:all .3s;}


/*arti3*/
.arti3{padding:30px 0 50px 0; background-image:url(/resources/images/swc/main/gray_bg.gif), url(/resources/images/swc/main/blue_bg.gif), url(/resources/images/swc/main/yello_pt.gif), url(/resources/images/swc/main/circle_pt.gif);; background-size:60% 35%, 10% 70%, auto, auto; background-repeat:no-repeat; background-position:bottom left, top right, 5% 0%, 50% 40%;}
.arti3 .fix-layout{padding:0 16px !important;}
.arti3 .fix-layout:after{content:""; display:block; clear:both;}
.arti3 .fix-layout > div{float:left; width:50%;}
.arti3 .a03-left .a03-left-top{border:1px solid #ccc; margin-bottom:30px;}
.arti3 .a03-left .a03-left-top ul:after{content:""; display:block; clear:both;}
.arti3 .a03-left .a03-left-top li{float:left; width:calc(100% / 3); padding:24px 12px; text-align:center; background-color:#fff;}
.arti3 .a03-left .a03-left-top li:nth-child(2){border-left:1px solid #ccc; border-right:1px solid #ccc;}
.arti3 .a03-left .a03-left-top li a{display:block;}
.arti3 .a03-left .a03-left-top li a img{margin-bottom:24px; diaplay:block;}
.arti3 .a03-left .a03-left-top li a span{font-size:18px; display:block; color:#161616;}
.arti3 .a03-left .a03-left-bottom ul:after{content:""; display:block; clear:both;}
.arti3 .a03-left .a03-left-bottom li{float:left; width:calc((100% - 30px) / 2); margin-right:30px; height:240px; padding:40px 30px; background-repeat: no-repeat;}
.arti3 .a03-left .a03-left-bottom li:nth-child(2){margin-right:0;}
.arti3 .a03-left .a03-left-bottom li.pro{background-image:url(/resources/images/swc/main/quick_menu_icon04.png); background-color:#031e4f;  background-position:90% 90%;}
.arti3 .a03-left .a03-left-bottom li.campus{background-image:url(/resources/images/swc/main/quick_menu_icon05.png); background-color:#267aa1;  background-position:90% 50%;}
.arti3 .a03-left .a03-left-bottom li a{display:block; width:100%; height:100%;}
.arti3 .a03-left .a03-left-bottom li a p{font-size:20px; font-weight:500; margin-bottom:30px; color:#fff;}
.arti3 .a03-left .a03-left-bottom li a span{color:#fff; line-height:1.5em;}
.arti3 .a03-right{padding-left:50px;}
.arti3 .a03-right .vd-wrap{width:100%; height:422px;}
/**********21-10-19 버튼 추가사항**********/
.arti3 .a03-right .tit-wrap:after{display:block; content:''; clear:both;}
.arti3 .a03-right .tit-wrap .tit{float:left;}
.arti3 .a03-right .tit-wrap span{float:right; padding-right:30px; margin-left:0; background-position:50px;}
.arti3 .a03-right .tit-wrap span:hover{background-position-x:60px}
@media all and (max-width:767px){
	.arti3 .a03-right .tit-wrap span{background-position:45px;}
	.arti3 .a03-right .tit-wrap span:hover{background-position-x:55px}
}

/*arti4*/
.arti4{padding:80px 0 0 0; margin-bottom:150px; background-image:url(/resources/images/swc/main/gray_bg.gif); background-size:60% 60%; background-repeat:no-repeat;}
.arti4 .fix-layout{padding:0 16px !important;}
.arti4 .tit-wrap:after{content:""; display:block; clear:both;}
.arti4 .tit-wrap h3{float:left;}
.arti4 .tit-wrap a{transition:all .3s; float:right; width:60px; height:60px; display:block; background:url(/resources/images/swc/main/more.png) no-repeat center; text-indent:-9999px; overflow-x:hidden;}
.arti4 .tit-wrap a:hover{transform:rotate(180deg)}
.arti4 .ph-wrap{margin-top:32px;}
.arti4 .ph-wrap ul:after{content:""; display:block; clear:both;}
.arti4 .ph-wrap ul li{float:left; width:calc((100% - 48px) / 4); margin-right:16px;}
.arti4 .ph-wrap ul li a{display:block;}
.arti4 .ph-wrap ul li .ph{height:300px;  overflow:hidden;}
.arti4 .ph-wrap ul li .ph img{width:100%; height:100%; object-fit: cover; transition:all .3s;}
.arti4 .ph-wrap ul li .ph:hover img{transform:scale(1.1);}
.arti4 .ph-wrap ul li p{font-size:20px; color:#161616; margin-top:20px;}



/******************
반응형 시작**************/
@media all and (max-width:1700px){
	.arti1 > .s01-box:after{font-size:20px; width:142px;}
}
@media all and (max-width:1600px){
	.arti1 > .s01-box{padding:40px;}
	.arti1 > .s01-box .noti li a p{width:70%;}
	.arti1 > .s01-box .sns li a{width:70px; height:70px; background-size:auto 40%;}
}
@media all and (max-width:1400px){
	/*arti1*/
	.arti1 > div{height:400px;}
	.arti1 > .main-visual .txt .t1{margin-bottom:24px;}
	.arti1 > .main-visual .txt .t2{font-size:24px;}
	.arti1 > .s01-box{padding:30px; background-size:150px auto;}
	.arti1 > .s01-box:after{display:none;}
	.arti1 > .s01-box h3{margin-bottom:24px;}
	
	/*arti2*/
	.arti2 .news-wrap .news-item .text-wrap{padding:20px;}
	.arti2 .news-wrap .news-item .text-wrap h5{font-size:20px;}
	
	/*arti3*/
	.arti3 .a03-left .a03-left-top{margin-bottom:12px;}
	.arti3 .a03-left .a03-left-top li{float:none; padding:12px; width:100%; position:relative; height: 70px; border-bottom:1px solid #ccc;}
	.arti3 .a03-left .a03-left-top li:nth-child(2){border-left:none; border-right:none;}
	.arti3 .a03-left .a03-left-top li:last-child{border-bottom:none;}
	.arti3 .a03-left .a03-left-top li a img{width:60px; height:auto; margin-bottom:0; position:absolute; top:5px; left:50px;}
	.arti3 .a03-left .a03-left-top li a span{line-height:48px;}
	.arti3 .a03-left .a03-left-bottom li{width: calc((100% - 12px) / 2); margin-right:12px; padding:20px; height:200px;}
	.arti3 .a03-right .vd-wrap{height:375px;}
	
	/*arti4*/
	.arti4 .ph-wrap ul li .ph{height:200px;}
	.arti4 .tit-wrap a{width:32px; height:32px;}
}

@media all and (max-width:1000px){
	.arti3 .a03-left .a03-left-top li{text-align:left; padding-left:100px;}
	.arti3 .a03-left .a03-left-top li a img{left:24px;}
	.arti3 .a03-left .a03-left-bottom li{padding:24px;}
	.arti3 .a03-left .a03-left-bottom li.pro, .arti3 .a03-left .a03-left-bottom li.campus{background-image:none;}
	.arti3 .a03-right{padding-left:24px;}
	
	.arti4 {padding:50px 0 0 0;}
	.arti4 .tit-wrap a{width:32px; height:32px;}
}

@media all and (max-width:767px){
	h3{margin-top:0 !important;}
	.tit{font-size:18px; margin-bottom:24px;}
	
	
	/*arti1*/
	.arti1{background-image:url(/resources/images/swc/main/gray_bg.gif);}
	.arti1 > div{float:none;}
	.arti1 .main-visual{width:100%;}
	.arti1 > .main-visual .slick-dots{top:75%;}
	.arti1 > .main-visual .txt{left:0; top:80px; text-align:center; width:100%;}
	.arti1 .s01-box{width:80%; margin:-50px auto 0 auto; padding:16px; border-radius:4px;}
	.arti1 > .s01-box h3{font-size:18px;}
	
	/*arti2*/
	.arti2{padding-top:50px; margin-bottom:50px;}
	.arti2 .news-wrap{margin-bottom:16px;}
	.arti2 .news-wrap ul li{margin-right:0;}
	.arti2 .tit-wrap .pager{float:none; text-align:right;}
	.arti2 .tit-wrap .pager button{width:24px; height:24px; background-size:50% auto !important;}
	
	/*arti3*/
	.arti3 {padding:20px 0 52px 0;}
	.arti3 .fix-layout > div{float:none; width:100%;}
	.arti3 .a03-left .a03-left-bottom li{background-size:100px auto;}
	.arti3 .a03-left .a03-left-bottom li.pro{background-image:url(/resources/images/swc/main/quick_menu_icon04.png);}
	.arti3 .a03-left .a03-left-bottom li.campus{background-image:url(/resources/images/swc/main/quick_menu_icon05.png);}
	.arti3 .a03-right{padding-left:0; margin-top:32px;}
	
	/*arti4*/
	.arti4{padding-top:0px;}
	.arti4 .tit-wrap a{width:24px; height:24px;}
	.arti4 .ph-wrap{margin-top:0;}
	.arti4 .ph-wrap ul li{margin-right:0;}
}

@media all and (max-width:500px){
	.tit-wrap span{padding-right:16px; margin-left:11px;}
	
	.arti1 > .main-visual .txt .t1 span{font-size:18px;}
	.arti1 > .main-visual .txt .t2{font-size:22px;}
	.arti1 .s01-box{width:90%; height:350px;}
	.arti1 > .s01-box .noti li a p{width:60%;}
	.arti1 > .s01-box .sns li a{width:50px; height:50px;}
	
	.arti2 .news-wrap > ul li{border:none;}
	.arti2 .news-wrap .news-item .text-wrap{width:100%; float:none; border:1px solid #ccc;}
	.arti2 .news-wrap .news-item .img-wrap{width:90%; margin-top:-32px; height:150px;}
	
	.arti3 .a03-left .a03-left-bottom li{width:100%; margin-right:0;}
}