#container{}

#visual-wrap{position:relative; min-height: 100vh; height: 100%; text-align:center;}
#visual-wrap .img-box{position:absolute;left:0;top:0;width:100%;height:100%;background-repeat: no-repeat;background-position:center center;background-size:cover;-ms-transform: scale(1.2, 1.2);-webkit-transform: scale(1.2, 1.2);-webkit-transition:transform 7s ease-out, opacity 1s ease 0.3s;transition:transform 7s ease-out, opacity 1s ease 0.3s;}
#visual-wrap .box{height:900px;}
/* #visual-wrap .visual-text-box{display:inline-block;position:absolute;top:227px;left:50%;z-index:30;width:860px;margin-left:-430px;padding:70px;border-width:20px;border-style:solid;border-color:rgba(255,255,255,0.15);text-align:center;} */
#visual-wrap .visual-text-box{display:inline-block;position:absolute;top:200px;left:50%;z-index:30;width:860px;margin-left:-430px;padding:70px;border-width:20px;border-style:solid;border-color:rgba(255,255,255,0.15);text-align:center;}
#visual-wrap .visual-text-box .con-box{display:inline-block;position:relative;padding:30px 20px;}
#visual-wrap .visual-text-box .con-box:before{content:"";position:absolute;left:20px;top:0;width:62px;height:47px;background:url(../images/main/visual_tit_i01.png) no-repeat;}
#visual-wrap .visual-text-box .con-box:after{content:"";position:absolute;right:0;bottom:40px;width:62px;height:47px;background:url(../images/main/visual_tit_i02.png) no-repeat;}
#visual-wrap .visual-text-box .con-box .tit{margin-bottom:15px;font-size:62px;line-height:1.2;color:#fff;font-weight:300;font-family: 'NanumSquare';}
#visual-wrap .visual-text-box .con-box .txt{letter-spacing: 3px;font-size:18px;color:#fff;font-family: 'NanumSquare';}

#visual-wrap .visual-slide.on .slick-active .img-box {-ms-transform: scale(1, 1) rotate(.001deg);-webkit-transform: scale(1, 1) rotate(.001deg);transform: scale(1, 1) rotate(.001deg);-webkit-transition-delay: 0s;transition-delay: 0s;}

#visual-wrap .btn-box{margin-top:40px;text-align: center;}
/* #visual-wrap .detail-view{display:inline-block;position:absolute;left:50%;top:700px;z-index:30;width:250px;height:55px;margin-left:-125px;line-height: 55px;font-size:15px;color:#fff;background:url(../images/main/visual_btn_bak.png) no-repeat;} */
#visual-wrap .detail-view{display:inline-block;position:absolute;left:50%;top:738px;z-index:30;width:250px;height:55px;margin-left:-125px;line-height: 55px;font-size:15px;color:#fff;background:url(../images/main/visual_btn_bak.png) no-repeat;}

#visual-wrap .scroll-txt{position:absolute;left:0;bottom:30px;width:100%;}
#visual-wrap .scroll-txt p{position:relative;padding-top:85px;text-align:center;font-size:12px;color:#fff;}
#visual-wrap .scroll-txt p:before{content:"";position:absolute;left:50%;top:20px;width:1px;height:50px;background-color:#fff;}
/* #visual-wrap .scroll-txt p:before{content:"";position:absolute;left:50%;top:0;width:1px;height:70px;background-color:#fff;} */

/*FHD이상 추가*/
@media screen and (min-width:1930px){
	#visual-wrap .visual-text-box{top: 260px;}
	#visual-wrap .detail-view{top: 840px;}
	#visual-wrap .scroll-txt p:before{top:0;height:70px;}
}

@media screen and (max-width:1600px) {
    #visual-wrap .box{height:800px !important;}
    #visual-wrap .visual-text-box{top:180px;}
    #visual-wrap .detail-view{top:640px;}
    #visual-wrap .scroll-txt p{display:none;}
}
@media screen and (max-width:1200px) {
    #visual-wrap .box{height:700px !important;padding-top: 100px;}
    #visual-wrap .visual-text-box{top:100px;}
    #visual-wrap .detail-view{top:550px;}
    #visual-wrap .scroll-txt p{display:none;}
}

@media screen and (max-width:870px) {
    #visual-wrap .visual-text-box{left:5%;width:90%;margin-left:0;padding:45px;border-width:15px;}
}
@media screen and (max-width:800px) {
    #visual-wrap .box{height:550px !important;}
    #visual-wrap .visual-text-box{padding:30px 15px;}
    #visual-wrap .visual-text-box .con-box .tit{font-size:45px;}
    #visual-wrap .visual-text-box .con-box .txt{line-height:1.3;}

    #visual-wrap .detail-view{top:auto;bottom:60px;}
}
@media screen and (max-width:480px) {
    #visual-wrap .visual-text-box .con-box{padding:30px 0;}
    #visual-wrap .visual-text-box .con-box .tit{font-size:35px;}
}
@media screen and (max-width:350px) {
    #visual-wrap .visual-text-box .con-box .tit{font-size:30px;}
}

#content{position:relative;}

#content .tit-01{margin-bottom:10px;font-weight:900;line-height:1.1;letter-spacing: 5px;font-size:50px;color:#111111;font-family: 'NanumSquare';}
#content .txt-01{line-height:1.4;font-size:17px;color:#888888;}
#content .default-more{display:inline-block;position:relative;margin-top:25px;padding-right:15px;}
#content .default-more:after{content:"";position:absolute;right:0;top:5px;width:7px;height:7px;border-radius:7px;background-color:#00d5c9;}
#content .default-more span{display:inline-block;padding-bottom:7px;border-bottom:1px solid #bcbcbc;letter-spacing:2px;font-size:12px;color:#666;}
@media screen and (max-width:1024px) {
    #content .default-more{}
}
@media screen and (max-width:600px) {
    #content .tit-01{font-size:35px;}
    #content .txt-01{font-size:15px;}
}


/*-------------------------------------------------------------------
	분류그룹 : seciton-01 (PROMOTION IDEO) 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    변경 : 기존 section04였으나, 01로 이동 (20230925)
-------------------------------------------------------------------*/
#content .section-01{margin-top: -40px;padding:125px 0;background-color:#f8f8f8;}
#content .section-01 .slide-box{position:relative;}
#content .section-01 .slide-box .tit-box{position:absolute;left:900px;top:0;z-index: 99;}
#content .section-01 .slide-box .video-slide-box{position:relative;}
#content .section-01 .slide-box .video-slide-box .slick-list{padding-left: 0 !important;}
#content .section-01 .slide-box .video-slide-box .list-con{position: relative;height:490px;opacity:0.55;transition:opacity 0.5s;outline:none;}
#content .section-01 .slide-box .video-slide-box .list-con.slick-active{opacity:1;}
#content .section-01 .slide-box .video-slide-box .list-con .img-box{display:block;float:left;position:relative;width:820px;height:100%;background-repeat: no-repeat;background-size:cover;background-position:center center;}
#content .section-01 .slide-box .video-slide-box .list-con .img-box .icon{position:absolute;left:50%;top:50%;width:75px;height:75px;margin:-37.5px 0 0 -37.5px;background:url(../images/main/video_i.png) no-repeat;}
#content .section-01 .slide-box .video-slide-box .list-con .txt-box{position:absolute;left:900px;top:0;padding:330px 140px 0 0;line-height:1.3;font-size:23px;color:#333;}
#content .section-01 .slide-box .video-slide-box .slick-dots{position:absolute;left:900px;bottom:0;}
#content .section-01 .slide-box .video-slide-box .slick-dots > li{float:left;margin-right:8px;}
#content .section-01 .slide-box .video-slide-box .slick-dots > li button{width:32px;height:5px;border:0;font-size:0;background-color:#dddddd;cursor: pointer;}
#content .section-01 .slide-box .video-slide-box .slick-dots > li.slick-active button{background-color:#00d5c9;}

@media screen and (max-width:1697px) {
    #content .section-01 .slide-box .tit-box{left:inherit;right:0;width:500px;padding-left:60px;}
    #content .section-01 .slide-box .video-slide-box .list-con .img-box{width:calc(100% - 500px);}
    #content .section-01 .slide-box .video-slide-box .list-con  .txt-box{position:static;float:right;width:500px;padding: 330px 140px 0 60px;}
    #content .section-01 .slide-box .video-slide-box .slick-dots{left:auto;right:330px;}
}

@media screen and (max-width:1400px) {
    #content .section-01{padding:80px 0;}
}

@media screen and (max-width:1024px) {
    #content .section-01{padding:50px 15px;}
    #content .section-01 .slide-box .tit-box{position:static;width:100%;padding:0;margin-bottom:60px;}
    #content .section-01 .slide-box .video-slide-box .list-con{height:auto;}
    #content .section-01 .slide-box .video-slide-box .list-con .txt-box{position:static;float:none;width:auto;padding:0;margin-bottom:20px;}
    #content .section-01 .slide-box .video-slide-box .list-con .txt-box br{display:none;}
    #content .section-01 .slide-box .video-slide-box .list-con .img-box{width:100%;height:400px;}

    #content .section-01 .slide-box .video-slide-box .slick-dots{right:auto;bottom:auto;left:0;top:-40px;}

}


/*-------------------------------------------------------------------
	분류그룹 : seciton-02 충남대학교 사회공헌센터 
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .section-02{background-color:#fff;}
#content .section-02 .con-area{padding:100px 0;}
#content .section-02 .con-h{position:relative;margin-bottom:25px;}
#content .section-02 .con-h:after{content:"";display:block;clear:both;}
#content .section-02 .con-h h2{float:left;font-size:45px;color:#111;font-weight:900;font-family: 'NanumSquare';}
#content .section-02 .con-h .tab-tit-list{float:left;padding: 10px 0 0 20px;}
#content .section-02 .con-h .tab-tit-list > li{position:relative;float:left;padding:0 25px;}
#content .section-02 .con-h .tab-tit-list > li:first-child:after{content:"";position:absolute;right:0;top:2px;width:1px;height:19px;background-color:#bbb;}
#content .section-02 .con-h .tab-tit-list > li > a{display:block;position:relative;font-weight:900;font-size:26px;color:#bbb;font-family: 'NanumSquare';}
#content .section-02 .con-h .tab-tit-list > li > a > span{position:relative;z-index:20;font-weight:900;font-size:26px;color:#bbb;font-family: 'NanumSquare';}
#content .section-02 .con-h .tab-tit-list > li > a.active  > span, #content .section-02 .con-h .tab-tit-list > li > a:hover  > span{color:#111;}
#content .section-02 .con-h .tab-tit-list > li > a.active:after, #content .section-02 .con-h .tab-tit-list > li > a:hover:after{content:"";position:absolute;left:0;bottom:0;z-index:1;width:100%;height:8px;background-color:#00d5c9;}


#content .section-02 .tab-container{position:relative;}
#content .section-02 .tab-container .tab-box{display:none;}
#content .section-02 .tab-container .tab-box.active{display:block;}
#content .section-02 .tab-container .tab-box .more-btn{position: absolute;top:-67px;right:0;}
#content .section-02 .tab-container .tab-box .news-list{margin:0 -13px;}
#content .section-02 .tab-container .tab-box .news-list:after{content:"";display:block;clear:both;}
#content .section-02 .tab-container .tab-box .news-list > li{float:left;width:25%;padding:0 13px;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box{display:block;height:390px;border:1px solid #e9e9e9;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box > figure{display:block;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box > figure img{display:block;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con{padding:30px 30px 0;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .date{display:block;margin-bottom:20px;font-size:15px;font-weight:500;color:#888888;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .tit{display:block;margin-bottom:15px;line-height: 1.3;font-weight:500;font-size:20px;color:#333;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .txt{line-height: 1.3;font-size:16px;color:#888888;}
#content .section-02 .tab-container .tab-box .news-list > li > .con-box:hover{box-shadow: 0px 0px 30px #f3f3f3;}


#content .section-02 .tab-container .tab-box .notice-list-2{margin:0 -15px 0px;    line-height: 1.4;}
#content .section-02 .tab-container .tab-box .notice-list-2:after{content:"";display:block;clear:both;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li{float:left;width:25%;padding:0 15px 0px;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a{display:block;position:relative;height:390px;padding:20px 30px;border:1px solid #e9e9e9;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-01{}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-01 span{display:inline-block;margin:0 7px 7px 0;padding:3px 5px;border:1px solid #cccccc;font-size:14px;color:#888;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-02{margin-top:10px;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-02:after{content:"";display:block;clear:both;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-02 > li{position:relative;float:left;margin-bottom:5px;padding:0 10px;font-size:15px;color:#888888;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-02 > li:first-child{padding-left:0;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-02 > li:after{content:"";position:absolute;right:0;top:5px;width:1px;height:10px;background:#888;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .cate-02 > li:last-child:after{content:none;}

#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .dday{margin-bottom:5px;text-align:right;font-size:30px;color:#555;font-weight:300;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .tit{display:block;font-size:20px;color:#333333;font-weight:500;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .date{display:block;position:absolute;left:7%;bottom:20px;width:86%;padding-top:18px;border-top:1px solid #e9e9e9;font-size:15px;font-weight:500;color:#888;background-image:url(../images/custom/link_arrow.png);background-repeat:no-repeat;background-position:right top 22px;}

#content .section-02 .tab-container .tab-box .notice-list-2 > li > a:hover{box-shadow: 0px 0px 30px #f3f3f3;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li > a:hover > .date{background-image:url(../images/custom/link_arrow_on.png);}

#content .section-02 .tab-container .tab-box .notice-list-2 > li.dday > a > .dday{color:#dadada;}
#content .section-02 .tab-container .tab-box .notice-list-2 > li.dday > a > .tit{color:#999999;}



@media screen and (max-width:1400px) {
    #content .section-02 .con-area{padding:50px 15px;}
}
@media screen and (max-width:1200px) {
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con{padding:30px 15px 0;}
}
@media screen and (max-width:1024px) {
    #content .section-02 .tab-container .tab-box .news-list{margin:0 -5px;}
    #content .section-02 .tab-container .tab-box .news-list > li{padding:0 5px;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .date{margin-bottom:10px;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .tit{margin-bottom:10px;}

	#content .section-02 .tab-container .tab-box .notice-list-2 > li{width:33.33%;}
}
@media screen and (max-width:800px) {
    #content .section-02 .con-h h2{font-size:35px;}
    #content .section-02 .tab-container .tab-box .more-btn{top:-60px;}
    #content .section-02 .tab-container .tab-box .news-list{margin:0 -10px;}
    #content .section-02 .tab-container .tab-box .news-list > li{float:left;width:50%;padding:0 10px;margin-bottom:20px;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > figure img{max-width: inherit;width:100%;}

	#content .section-02 .tab-container .tab-box .notice-list-2 > li{width:50%;}
}

@media screen and (max-width:600px) {
    #content .section-02 .con-h h2{float:none;margin-bottom:15px;}
    #content .section-02 .con-h .tab-tit-list{float:none;padding-left:0px;}
    #content .section-02 .con-h .tab-tit-list:after{content:"";display:block;clear:both;}
    #content .section-02 .con-h .tab-tit-list > li:first-child{padding-left:0;}

	#content .section-02 .tab-container .tab-box .notice-list-2{margin:0 0 40px;}
	#content .section-02 .tab-container .tab-box .notice-list-2 > li{width:100%;margin-bottom:20px;}
	#content .section-02 .tab-container .tab-box .notice-list-2 > li > a{height:auto;padding:20px;}
	#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .tit{margin-bottom:15px;}
	#content .section-02 .tab-container .tab-box .notice-list-2 > li > a > .date{position:static;width:100%;}
}
@media screen and (max-width:480px) {
    #content .section-02 .con-h .tab-tit-list > li > a > span{font-size:22px;}
    #content .section-02 .tab-container .tab-box .news-list{margin:0;}
    #content .section-02 .tab-container .tab-box .news-list > li{width:100%;padding:0;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box{height:auto;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con{padding:20px 15px;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .tit{height:auto;font-size:18px;}
    #content .section-02 .tab-container .tab-box .news-list > li > .con-box > .con-con > .txt{font-size:15px;}
}



/*-------------------------------------------------------------------
	분류그룹 : seciton-03 PROJECT slide
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .section-03{background-color:#f8f8f8;}
#content .section-03 .con-area{padding:110px 0 160px;}
#content .section-03 .con-h{margin-bottom:40px;text-align: center;}
#content .section-03 .con-box{position: relative;}
#content .section-03 .con-box .project-list{margin:0 -25px;}
#content .section-03 .con-box .project-list:after{content:"";display:block;clear:both;}
#content .section-03 .con-box .project-list .list-con{float:left;width:33.33%;height:auto !important;padding:0 25px;}
#content .section-03 .con-box .project-list .list-con > .con-con{display:block;overflow:hidden;position:relative;height:220px;background-repeat: no-repeat;background-position:center center;background-size:cover;}
#content .section-03 .con-box .project-list .list-con > .con-con .txt-box{position:relative;z-index:20;padding:35px 35px 0 35px;}
#content .section-03 .con-box .project-list .list-con > .con-con .txt-box span{display:block;margin-bottom:10px;font-size:16px;color:#fff;}
#content .section-03 .con-box .project-list .list-con > .con-con .txt-box strong{display:block;line-height:1.3;font-size:23px;font-weight:500;color:#fff;}
#content .section-03 .con-box .project-list .list-con > .con-con .arrow{display:block;position:absolute;left:35px;bottom:35px;z-index:20;opacity:0;transition:opacity 0.4s;}
#content .section-03 .con-box .project-list .list-con > .con-con .mask{display:block;position: absolute;left:0;top:0;z-index:10;width:100%;height:100%;background-image:url(../images/main/project_mask.png);background-repeat: no-repeat;background-position:center center;background-size:cover;opacity:0;transition:opacity 0.4s;}
#content .section-03 .con-box .project-list .list-con:hover  > .con-con .arrow{opacity: 1;}
#content .section-03 .con-box .project-list .list-con:hover  > .con-con .mask{opacity:0.8;}
#content .section-03 .con-box .slick-dots{position:absolute;width:100%;left:0px;bottom:-50px;padding:0 25px;}
#content .section-03 .con-box .slick-dots > li{float:left;width:32px;}
#content .section-03 .con-box .slick-dots > li button{width:100%;height:4px;border:0;font-size:0;background-color:#e4e4e4;cursor: pointer;}
#content .section-03 .con-box .slick-dots > li.slick-active button{background-color:#484848;}

@media screen and (max-width:1400px) {
    #content .section-03 .con-area{padding:50px 15px 100px;}
}
@media screen and (max-width:1200px) {
    #content .section-03 .con-box .project-list{margin:0 -15px;}
    #content .section-03 .con-box .project-list .list-con{padding:0 15px;}
}


/*-------------------------------------------------------------------
	분류그룹 : seciton-04 ACADEMY slide
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#content .section-04{background-color:#fff;}
#content .section-04 .con-area{padding:100px 0;}
#content .section-04 .con-h{float:left;width:330px;}
#content .section-04 .con-box{position:relative;float:left;width:76.5%;width:calc(100% - 330px);}
#content .section-04 .con-box .academy-list{margin:0 -25px;}
#content .section-04 .con-box .academy-list:after{content:"";display:block;clear:both;}
#content .section-04 .con-box .academy-list .item{float:left;width:33.33%;;height:auto !important;padding:0 25px;outline:none;}
#content .section-04 .con-box .academy-list .con-con{display:block;outline:none;}
#content .section-04 .con-box .academy-list .con-con figure{display:block;}
#content .section-04 .con-box .academy-list .con-con figure img{display:block;}
#content .section-04 .con-box .academy-list .con-con .txt-box{padding:20px 0 10px;}
#content .section-04 .con-box .academy-list .con-con .txt-box .tit{display:block;overflow:hidden;height:60px;margin-bottom:15px;font-weight:500;line-height:1.3;font-size:21px;color:#333333}
#content .section-04 .con-box .academy-list .con-con .txt-box .txt{font-size:16px;color:#888888;}
#content .section-04 .con-box .slick-dots{position:absolute;left:-303px;bottom:0;}
#content .section-04 .con-box .slick-dots > li{float:left;margin-right:8px;}
#content .section-04 .con-box .slick-dots > li button{width:32px;height:5px;border:0;font-size:0;background-color:#dddddd;cursor: pointer;}
#content .section-04 .con-box .slick-dots > li.slick-active button{background-color:#00d5c9;}

@media screen and (max-width:1400px) {
    #content .section-04 .con-area{padding:50px 15px;}
}
@media screen and (max-width:1200px) {
    #content .section-04 .con-box .academy-list{margin:0 -15px;}
    #content .section-04 .con-box .academy-list .item{padding:0 15px;}
}

@media screen and (max-width:1024px) {
    #content .section-04 .con-h{float:none;width:100%;margin-bottom:60px;}
    #content .section-04 .con-box{float:none;width:100%;}

    #content .section-04 .con-box .slick-dots{left:15px;bottom:auto;top:-40px;}
}
@media screen and (max-width:800px) {
    #content .section-04 .con-box .academy-list .con-con .txt-box .tit{height:auto;font-size:20px;}
}
@media screen and (max-width:600px) {
    #content .section-04 .con-box .academy-list .con-con .txt-box .tit{font-size:18px;}
    #content .section-04 .con-box .academy-list .con-con .txt-box .txt{font-size:14px;}
}
@media screen and (max-width:480px) {
    #content .section-04 .con-box .academy-list{margin:0 -5px;}
    #content .section-04 .con-box .academy-list .item{padding:0 5px;}
    #content .section-04 .con-box .academy-list .con-con .txt-box .tit{font-size:16px;}
}