@charset "utf-8";

.wrap_sns{word-break:break-all;background:#eff3f8 url(../images/sns_bg.png) no-repeat center top;padding:60px 0;}
.wrap_sns > .container{max-width:1550px;margin: 0 auto;position:relative;}
.wrap_sns h2{padding-bottom:70px;font-size:42px;font-family:'Noto Bold';color:#222;line-height:1;}
/*게시판*/
.wrap_sns > .container > ul{position:relative;}
.wrap_sns > .container > ul > li{}
/*타이틀*/
.wrap_sns .title{position:absolute;top:0;font-size:24px;font-family:'Noto Regular';}
.wrap_sns .title a{display:block;line-height:1;color:#666;}
.wrap_sns .title a:before{content:"";display:inline-block;width:1px;height:20px;background:#888;margin:0 15px;}
.wrap_sns > .container > ul > li:nth-child(1) .title a:before{display:none;margin:0;}
.wrap_sns > .container > ul > li:nth-child(1) .title{left:0;}
.wrap_sns > .container > ul > li:nth-child(2) .title{left:43px;}
.wrap_sns > .container > ul > li:nth-child(3) .title{left:183px;}
.wrap_sns > .container > ul > li:nth-child(4) .title{left:265px;}
.wrap_sns > .container > ul > li.active:nth-child(1) .title a{color:#000;}
.wrap_sns > .container > ul > li.active:nth-child(2) .title a{color:#0065b3;}
.wrap_sns > .container > ul > li.active:nth-child(3) .title a{color:#2a9c4a  ;}
.wrap_sns > .container > ul > li.active:nth-child(4) .title a{color:#e31515 ;}
/*목록*/
.wrap_sns .list{padding-top:70px;}
.wrap_sns .list ul{}
.wrap_sns .list ul li{padding:0 15px;}
/*noData*/
.wrap_sns .list .nodata{font-size:18px;text-align:center;padding:30px 0;width:100%}
/*컨텐츠*/
.wrap_sns .con{}
.wrap_sns a.subject{display:block;}
/*썸네일*/
.wrap_sns .thumb{max-height:358px;overflow:hidden;position:relative;}
.wrap_sns .thumb img{width:100%;height:100%;}
.wrap_sns .thumb:after{content:"";display:block;width:30px;height:30px;position:absolute;right:5%;bottom:5%;border-radius:100px;background-size:100% !important;}
.wrap_sns .thumb.Facebook:after{background:#2a569c url(../images/bg_face.png) no-repeat center;}
.wrap_sns .thumb.Blog:after{background:#2a9c4a url(../images/bg_blog.png) no-repeat center;}
.wrap_sns .thumb.Youtube:after{background:#e31515 url(../images/bg_ytube.png) no-repeat center;}
/*제목*/
.wrap_sns .subjectText{display:none;}
/*내용*/
.wrap_sns .content{display:none;}
/*날짜*/
.wrap_sns .date{display:none;}
/*더보기*/
.wrap_sns a.more{display:none;}
/*활성화*/
.wrap_sns .list,
.wrap_sns a.more{display:none;}
.wrap_sns .active .list{display:block;}
.wrap_sns .active .title a{font-family:'Noto Medium';}
@media only screen and (max-width:1550px){
	.wrap_sns > .container{max-width:96%;}
}
@media only screen and (max-width:1024px){
	.wrap_sns h2{font-size:30px;}
	.wrap_sns .title{font-size:20px;}
	.wrap_sns .title a:before{height:15px;margin:0 10px;}
	.wrap_sns > .container > ul > li:nth-child(2) .title{left:35px;}
	.wrap_sns > .container > ul > li:nth-child(3) .title{left:143px;}
	.wrap_sns > .container > ul > li:nth-child(4) .title{left:205px;}
	.wrap_sns .list{padding-top:50px;}
}
@media only screen and (max-width:1024px){
	.wrap_sns{padding:30px 0;}
	.wrap_sns h2{font-size:25px;padding-bottom:30px;}
}
@media only screen and (max-width:340px){
	.wrap_sns .title{font-size:16px;}
	.wrap_sns .title a:before{display:none;}
	.wrap_sns > .container > ul > li:nth-child(2) .title{left:37px;}
	.wrap_sns > .container > ul > li:nth-child(3) .title{left:116px;}
	.wrap_sns > .container > ul > li:nth-child(4) .title{left:158px;}
}


/*SNS버튼*/
.wrap_sns .goto{display:flex;flex-wrap:wrap;justify-content:flex-end;position:absolute;right:0;top:100px;}
.wrap_sns .goto a{display:flex;align-items:center;width:48px;height:48px;border-radius:30px;margin-left:5px;}
.wrap_sns .goto a span{display:block;text-indent:-9999px;}
.wrap_sns .goto a.facebook{background:#2a569c url(../images/bg_face.png) no-repeat center;}
.wrap_sns .goto a.naverBlog{background:#2a9c4a url(../images/bg_blog.png) no-repeat center;}
.wrap_sns .goto a.yTube{background:#e31515 url(../images/bg_ytube.png) no-repeat center;}
/*공통*/
.wrap_sns .playstop{line-height:0;}
.wrap_sns .playstop button,
.wrap_sns .prevnext button{display:inline-block;text-indent:-9999px;position:absolute;top:-113px;width:45px;height:45px;border:1px solid #888;filter:alpha(opacity=40);opacity:0.4;}
/*컨트롤*/
.wrap_sns .control{}
.wrap_sns .control .container{}
	/*페이징*/
	.wrap_sns .paging{display:none;}
	/*재생정지*/
	.wrap_sns .playstop{}
	.wrap_sns .playstop button{display:none;right:44px;}
	.wrap_sns .playstop button.play{background:url(/sites/style_guide/images/common/play_2_b.png) no-repeat center;}
	.wrap_sns .playstop button.stop{background:url(/sites/style_guide/images/common/pause_2_b.png) no-repeat center;}
	.wrap_sns .playstop button.on{display:inline-block;}
/*이전다음*/
.wrap_sns .prevnext{}
.wrap_sns .prevnext .container{}
.wrap_sns .prevnext button{background:url(/sites/style_guide/images/common/arrow_3_b.png) no-repeat center;}
.wrap_sns .prevnext button.prev{right:88px;transform:rotate(180deg);}
.wrap_sns .prevnext button.next{right:0;}
@media only screen and (max-width:1024px){
	.wrap_sns .goto{top:-5px;}
	.wrap_sns .goto a{width:40px;height:40px;background-size:100% !important;}
	.wrap_sns .playstop{display:none;}
	.wrap_sns .prevnext button{top:50%;background-color:#FFF;}
	.wrap_sns .prevnext button.prev{right:auto;left:0;}
	.wrap_sns .prevnext button.next{right:0;}
}
@media only screen and (max-width:768px){
	.wrap_sns .goto{top:-3px;}
	.wrap_sns .goto a{width:35px;height:35px;}
}


/*HOVER************************************************************/
@media only screen and (min-width:1025px){
	.wrap_sns .title a:hover{font-family:'Noto Medium';}
	.wrap_sns .thumb img:hover{transform:scale(1.05);transition: all 0.5s cubic-bezier(0.2, 0, 0.3, 1);}
	.wrap_sns .goto a:hover{width:auto;background-position:10px center !important;}
	.wrap_sns .goto a:hover span{text-indent:0;font-size:16px;font-family:'Noto Medium';color:#FFF;line-height:1;padding:0 20px 0 55px;}

	.wrap_sns .playstop button:hover,
	.wrap_sns .prevnext button:hover{background-color:rgba(0,0,0,0.5) !important;}
}

/* 대학홍보SNS -> 인하공전SNS */ 

.snsContainer { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:strech; } 
/*.snsContainer .snsItem { flex:0 0 456px; padding:30px 30px; color:#fff; margin-bottom:20px; }*/
.snsContainer .snsItem { flex:0 0 30%; padding:30px 30px; color:#fff; margin-bottom:50px; }

.snsContainer .snsItem:nth-child(1) { background:url("/sites/kr/images/sub/bg_youtube.png"); border:1px solid #e24a4a; }
.snsContainer .snsItem:nth-child(2) { background:url("/sites/kr/images/sub/bg_facebook.png"); border:1px solid #475993; }
.snsContainer .snsItem:nth-child(3) { background:url("/sites/kr/images/sub/bg_naverblog.png"); border:1px solid #099a32; }

.snsContainer .snsItem .snsItemContainer { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; }
.snsContainer .snsItem .snsItemContainer .snsContent { flex-basis:100%; align-self:auto; }

.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(1) { display:flex; flex-flow:row nowrap; justify-content:flex-start; }
.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(1) img {margin-top:3px;}
.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(1) span { font-size:22px; font-weight:bold; padding-left:10px;}
.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(2) { padding-top:20px; padding-left:50px; }

.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(3) a { display:block; position:relative; padding-top:40px; padding-right:30px; text-align:right; color:#fff;  }
.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(3) a span { position:relative; }
.snsContainer .snsItem .snsItemContainer .snsContent:nth-child(3) a::before { content:""; position:absolute; width:50px; height:50px; border-radius:30px; top:26px; right:10px;  }
.snsContainer .snsItem:nth-child(1) .snsItemContainer .snsContent:nth-child(3) a::before { background-color:#f1ae0e; }
.snsContainer .snsItem:nth-child(2) .snsItemContainer .snsContent:nth-child(3) a::before { background-color:#0e88ef; }
.snsContainer .snsItem:nth-child(3) .snsItemContainer .snsContent:nth-child(3) a::before { background-color:#0ac171; }

@media only screen and (max-width: 768px) { 
    .snsContainer {
        flex-direction: column;
        align-items: center; 
    }

    .snsContainer .snsItem {
        flex: 0 0 auto; 
        width: 90%; 
}