@charset "utf-8";

/* 메인비주얼 */
#visual{padding:50px 0; background:url(../../images/committee/main/mainvisual.jpg) no-repeat top center; background-size:cover; color:#fff;}
#visual .pic{overflow:hidden; float:right; border-radius:10px; width:950px; height:450px;}
#visual .pic img{width:100%; height:100%;}
#visual .tit{float:left; width:calc(100% - 960px);}
#visual .tit *:not(a){font-family:'score'; animation:slideup 1s both;}
#visual .tit .t1{line-height:170%; padding:70px 0 0; font-size:30px; font-weight:200; text-shadow:0 0 3px rgba(0,0,0,0.5);}
#visual .tit .t1 span{display:block; font-weight:600; font-size:1.667em;}
#visual .tit .t2{position:relative; box-sizing:border-box; padding:26px 0 78px; font-size:14px; word-break:keep-all; animation-delay:0.5s;}
#visual .tit .t2:after{content:''; position:absolute; display:block; top:104px; right:-60px; width:250px; height:1px; background:#f3c122;}
#visual .tit a{position:relative; display:inline-block; box-sizing:border-box; padding:11px 79px 11px 21px; color:#fff; border:2px solid #fff; font-weight:400; transition:.2s; font-size:18px; animation:slideup 1s both; animation-delay:0.8s;}
#visual .tit a:before{content:''; position:absolute; top:19px; right:20px; width:30px; height:7px; background:url(../../images/committee/main/ico_arrow.png) no-repeat top left; transition:.5s;}

#visual .tit a:hover,
#visual .tit a:active,
#visual .tit a:focus{border-color:#f3c122; background:rgba(0,0,0,0.7); text-decoration:none;}

#visual .tit a:hover:before,
#visual .tit a:active:before,
#visual .tit a:focus:before{right:15px;}

@keyframes slideup{
	0%{transform:translateY(20px); opacity:0; visibility:hidden;}
	100%{transform:translateY(0); opacity:1; visibility:visible;}
}

.sec{position:relative; padding:50px 0 0; background:url(../../images/committee/main/bg_section.jpg) no-repeat bottom center; background-size:cover;}
.sec h4{font-family:'score'; font-weight:600;}

.btns{position:absolute; display:block; top:50%; left:0; margin:-15px 0 0; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.15); font-size:0; text-indent:-999px; transition:.5s;}
.btns:before{content:''; position:absolute; top:10px; left:12px; width:10px; height:10px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(-135deg);}
.btns.btn_next{left:auto; right:0; }
.btns.btn_next:before{left:8px; transform:rotate(45deg);}

.btns.btn_stop{opacity:0.8; position:absolute; top:13px; left:auto; right:14px; margin:0; background:none;}
.btns.btn_stop:before{width:8px; height:14px; border-top:none; border-left:2px solid #fff; border-right-width:2px; transform:none;}
.btns.btn_stop.on:before{margin:2px 0 0 -5px; border-right:none; border-top:12px solid #fff; border-left:12px solid transparent; transform:rotate(45deg);}

.more{z-index:2; position:absolute; top:51px; right:50px; padding:0 22px 0 0; font-size:14px; font-weight:400; color:#fff;}
.more:hover,
.more:focus,
.more:active{text-decoration:none;}
.more:before,
.more:after{content:''; position:absolute; top:50%; margin:-1px 0 0; right:0; width:12px; height:2px; background:#f1c123;}
.more:after{top:5px; right:5px; width:2px; height:12px;}

/* 의사일정 */
#agenda{overflow:hidden; position:relative; height:120px; box-sizing:border-box; padding:0 156px 0 50px; border-radius:10px; box-shadow:5px 0 20px rgba(64,64,64,0.4); background:rgb(47,162,171);
background:-moz-linear-gradient(90deg, rgba(47,162,171,1) 0%, rgba(41,95,170,1) 50%, rgba(41,95,170,1) 100%);
background:-webkit-linear-gradient(90deg, rgba(47,162,171,1) 0%, rgba(41,95,170,1) 50%, rgba(41,95,170,1) 100%);
background:linear-gradient(90deg, rgba(47,162,171,1) 0%, rgba(41,95,170,1) 50%, rgba(41,95,170,1) 100%);}
#agenda > *{float:left; color:#fff;}
#agenda h4{line-height:120px; font-size:26px;}
#agenda h4:after{content:''; display:inline-block; width:5px; height:18px; margin:51px 43px 0 45px; background:#f3c122; transform:skew(15deg); vertical-align:top;}
#agenda .date_wrap{position:relative; width:295px; height:120px; box-sizing:border-box; padding:0 55px;}
#agenda .date_wrap .list p{line-height:118px; font-family:'score'; font-size:26px; text-align:center;}
#agenda .txt_wrap{overflow:hidden; position:relative; width:calc(100% - 604px); height:60px; margin:30px 0 0 40px; box-sizing:border-box; padding:0 50px 0 25px; background:rgba(0,0,0,0.15);}
#agenda .txt_wrap p{line-height:60px; position:relative; box-sizing:border-box; padding-left:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#agenda .txt_wrap p:before {content:''; position:absolute; top:50%; margin:-3px 0 0; left:0; width:5px; height:5px; border-radius:50%; background:#f3c122;}
#agenda .txt_wrap a{color:#fff;}

/* 바로가기 */
#quick{position:relative; padding:74px 0 70px;}
#quick:after{content:''; display:block; clear:both;}
#quick a{position:relative; float:left; display:block; width:20%; padding:132px 0 0; text-decoration:none; text-align:center; font-size:18px; font-weight:400;}
#quick a + a{background:url(../../images/committee/main/img_line.png) no-repeat center left;}
#quick a:before, 
#quick a:after{content:''; position:absolute; top:0; left:50%; margin:0 0 0 -60px; width:120px; height:120px; border-radius:25px; background:#fff; box-shadow:5px 0 15px rgba(204,204,204,0.4); transition:.5s;}
#quick a:after{background:url(../../images/committee/main/ico_quick1.png) no-repeat center; box-shadow:none;}
#quick a:nth-of-type(2):after{background-image:url(../../images/committee/main/ico_quick2.png);}
#quick a:nth-of-type(3):after{background-image:url(../../images/committee/main/ico_quick3.png);}
#quick a:nth-of-type(4):after{background-image:url(../../images/committee/main/ico_quick4.png);}
#quick a:nth-of-type(5):after{background-image:url(../../images/committee/main/ico_quick5.png);}
#quick a:hover:after,
#quick a:focus:after,
#quick a:active:after{animation:ani_link 0.9s ease-in-out;}
@keyframes ani_link {
	0%{transform:translateY(0);}
	25%{transform:translateY(6px);}
	50%{transform:translateY(0);}
	75%{transform:translateY(8px);}
	100%{transform:translateY(0);}
}

/* 갤러리 */
#gallery{position:relative; padding:70px 0 76px;}
#gallery:before{content:''; position:absolute; bottom:0; left:50%; margin:0 0 0 -960px; width:1329px; height:100%; background:#fff url(../../images/committee/main/bg_gallery.png) no-repeat bottom left;}
#gallery .inner{padding-right:700px !important;}
#gallery .tit{position:relative; word-break:keep-all;}
#gallery .tit:before{content:''; position:absolute; top:10px; right:0; width:50px; height:50px; box-sizing:border-box; border-top:10px solid #258eba; border-right:10px solid #258eba;}
#gallery h4{box-sizing:border-box; padding:0 100px 0 0; line-height:110%; font-size:32px;}
#gallery h4:after{content:''; display:block; width:50px; height:1px; margin:23px 0 20px; background:#295daa;}
#gallery h4 span{display:block; margin:0 0 -4px; font-size:16px; font-weight:200; color:#666;}
#gallery p{font-family:'score'; color:rgba(85,85,85,0.8);}

#gallery .more{top:35px; left:auto; right:30px; color:#555;}
#gallery .more:before, #gallery .more:after{background:#258eba;}
#gallery .control{padding:28px 0 30px;}
#gallery .control .btns{position:relative; display:inline-block; width:35px; height:35px; margin:0 2px 0 0; border:1px solid #dfdfdf; background:#fff; transition:.3s;}
#gallery .control .btns:before{top:12px; left:13px; border-color:#7b7b7b;}
#gallery .control .btns.btn_next:before{left:11px;}

#gallery .control .btns:hover,
#gallery .control .btns:active,
#gallery .control .btns:focus,
#gallery .control .btns:hover:before,
#gallery .control .btns:active:before,
#gallery .control .btns:focus:before{border-color:#258eba;}

#gallery .list a{overflow:hidden; position:relative; display:block; border-radius:10px;}
#gallery .list a img{width:100%; height:100%;}

.list_wrap{z-index:2; overflow:hidden; position:absolute; bottom:5px; right:0; width:650px; height:380px; border-radius:10px; box-shadow:5px 0 30px rgba(85,85,85,0.4);}
.list_wrap .list a{width:100%; height:380px;}
.next_wrap .list a{width:210px; height:140px; margin:0 30px 0 0;}
.next_wrap .list a:before{opacity:0; visibility:hidden; content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border:3px solid #295daa; transition:.5s;}
.next_wrap .list a:hover:before,
.next_wrap .list a:active:before,
.next_wrap .list a:focus:before{opacity:1; visibility:visible;}

@media all and (max-width:1400px) {
    .list_wrap{right:15px;}
}
@media all and (max-width:1240px) {
    #visual{padding:30px 0 50px;}
    #visual .inner > div{float:none;}
    #visual .pic{margin:0 auto;}
    #visual .tit{width:100%; box-sizing:border-box; padding:0 180px 0 0;}
    #visual .tit .t1{padding:4.3% 0 0; font-size:25px;}
    #visual .tit .t1 span{display:inline-block;}
    #visual .tit .t2{padding:10px 0 0;}
    #visual .tit .t2 br, #visual .tit .t2:after{display:none;}
    #visual .tit a{position:absolute; bottom:0; right:15px;}
}
@media all and (max-width:1024px) {
    #visual{padding:20px 0 40px;}
    #visual .pic{width:100%; height:auto;}
    #visual .tit .t1{font-size:20px;}
    
    .sec{padding:15px 0 0;}
    .more{top:29px; right:auto; left:190px;}
    
    #agenda{height:auto; padding:25px 30px 15px;}
    #agenda h4{width:100%; line-height:100%; margin:0 0 10px; font-size:21px;}
    #agenda h4:after{display:none;}
    #agenda .date_wrap{width:260px; height:60px; padding:0 45px;}
    #agenda .date_wrap .list p{line-height:58px; font-size:23px;}
    #agenda .txt_wrap{width:calc(100% - 290px); margin:0 0 0 30px;}
    
    #quick {padding:35px 0;}
    
    #gallery{background:#fff url(../../images/committee/main/bg_gallery.png) no-repeat bottom center;}
    #gallery:before{display:none;}
    #gallery .inner{padding-right:15px !important;}
    .list_wrap{width:500px; height:290px;}
    .list_wrap .list a{height:290px;}
    .next_wrap{box-sizing:border-box; padding:0 535px 0 0;}
    .next_wrap .list a{width:170px; height:110px; margin:0 10px 0 0;}
}

@media all and (max-width:768px) {
    #visual{padding:10px 0 20px;}
    #visual .tit .t1{font-size:1.125em;}
    #visual .tit .t1 span{font-size:1.389em;}
    #visual .tit a{position:absolute; right:10px; font-size:0.938em;}
    #visual .tit a:before{top:17px;}
    
    .sec{padding:10px 0 0;}
    .more{top:25px; left:167px;}
    #agenda h4{font-size:1.125em;}
    #agenda .date_wrap{width:230px; height:50px; padding:0 30px;}
    #agenda .date_wrap .list p{line-height:50px; font-size:21px;}
    #agenda .txt_wrap{width:calc(100% - 260px); height:50px;}
    #agenda .txt_wrap p{line-height:50px;}
    
    #quick a{padding:88px 0 0; font-size:1em;}
    #quick a:before, #quick a:after{width:76px; height:76px; margin:0 0 0 -38px; border-radius:15px;}
    #quick a:after{background-size:35px;}
    
    #gallery{padding:40px 0 20px;}
    #gallery .inner{padding-right:10px !important;}
    #gallery .tit:before{display:none;}
    #gallery h4{padding:0; font-size:25px;}
    #gallery h4 span{margin:0; font-size:15px;}
    #gallery .more{right:auto; left:286px;}
    .list_wrap{right:10px; width:350px; height:220px;}
    .list_wrap .list a{height:220px;}
    .next_wrap {padding:0 370px 0 0;}
}

@media all and (max-width:568px) {
    #visual .tit{box-sizing:border-box; padding:0 90px 0 0;}
    #visual .tit .t2{font-size:13px;}
    #visual .tit a{bottom:-10px; width:64px; padding:6px 12px 18px;}
    #visual .tit a:before{top:42px; right:15px; background-size:18px;}
    
    .more{top:20px; left:auto; right:20px;}
    .more:after{top:4px;}
    .btns.btn_stop{top:7px; right:5px;}
    
    #agenda{padding:20px 20px 15px;}
    #agenda > * {float:none;}
    #agenda .date_wrap{width:100%;}
    #agenda .date_wrap .list p{font-size:19px;}
    #agenda .txt_wrap{width:100%; margin:0; padding:0 45px 0 15px;}
    
    #quick a{padding:63px 0 0;}
    #quick a:before, #quick a:after{width:56px; height:56px; margin:0 0 0 -28px; border-radius:10px;}
    #quick a:after{background-size:25px;}
    
    #gallery{padding:25px 0;}
    #gallery h4{font-size:21px;}
    #gallery h4:after{margin:19px 0 16px;}
    #gallery .control{position:absolute; bottom:0; right:0; padding:0;}
    #gallery .more{top:29px; left:233px;}
    .list_wrap{position:static; margin:20px auto 0;}
    .next_wrap{display:none;}
}

@media all and (max-width:480px) {
    #quick{padding:25px 0 0;}
    #quick a{width:33.33%; padding-bottom:25px;}
    #quick a + a{background:none;}
    #quick a:nth-child(n + 5){width:50%;}
}

@media all and (max-width:360px) {
    .list_wrap{width:100%; height:200px;}
    .list_wrap .list a{height:200px;}
}