@charset "utf-8";

.no_list{width:100% !important; padding:6em 0 0 0 !important; text-align:center;}
.no_list:before{display:none;}

/* 메인비주얼 */
#visual{z-index:2; position:relative; overflow:hidden;}
#visual:before{content:''; position:absolute; top:0; left:50%; margin:0 0 0 -960px; width:1660px; height:100%; border-radius:0 15px 15px 0; background:url(../../images/member/main/bg_mainvisual.jpg) no-repeat top left;}
#visual .pic{position:absolute; bottom:0; left:-160px;}
#visual .txt{float:right; height:600px; box-sizing:border-box; padding:109px 150px 0 0; font-family:'score'; color:#fff;}
#visual .txt p{font-size:48px; animation:slideup 1s both; word-break:keep-all;}
#visual .txt p span{position:relative; display:block; font-weight:400; font-size:24px; animation-delay:0.5s;}
#visual .txt p span:after{content:''; position:absolute; top:50%; left:267px; width:350px; height:1px; background:rgba(255,255,255,0.2);}
#visual .txt p em{font-weight:600; color:#fbfbe1;}
#visual .txt ul{padding:34px 0 0; animation:slideup 1s both; animation-delay:0.8s;}
#visual .txt ul li{position:relative; padding:0 0 31px 120px; font-size:20px; font-weight:600;}
#visual .txt ul li em{position:absolute; top:0; left:0; padding:0 0 0 15px; font-weight:300;}
#visual .txt ul li.sns em{top:4px;}
#visual .txt ul li em:before{content:''; position:absolute; top:11px; left:0; width:5px; height:5px; border-radius:50%; background:#fbfbe1;}
#visual .sns div a{display:inline-block; width:34px; height:34px; border-radius:50%; margin:0 5px 0 0; background:url(../../images/common/ico_fb.png) no-repeat top center; font-size:0; text-indent:-999px; vertical-align:top;}
#visual .sns div a.tw{background-image:url(../../images/common/ico_tw.png);}
#visual .sns div a.bl{background-image:url(../../images/common/ico_bl.png);}
#visual .sns div a.kko{background-image:url(../../images/common/ico_kko.png);}
#visual .sns div a.ins{background-image:url(../../images/common/ico_ins.png);}
#visual .sns div a.on{background-position:bottom center;}

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

.sec{padding:360px 0 0; margin:-300px 0 0; background:url(../../images/member/main/bg_section.jpg) no-repeat bottom center;}
.sec h4{font-family:'score'; font-weight:600;}

/* 바로가기 */
#quick{position:relative; box-sizing:border-box; padding:4px 0 60px 375px; background:url(../../images/member/main/bg_quick.png) no-repeat bottom left 30px;}
#quick h4{position:absolute; top:40px; left:230px; font-size:26px;}
#quick h4 span{display:block; margin:0 0 -4px; font-size:16px; font-weight:200; color:#777;}
#quick h4:after{content:'Quick Menu'; display:block; margin:-2px 0 0; font-family:'score'; font-weight:600; font-size:20px; color:rgba(0,0,0,0.2);}

#quick:after{content:''; display:block; clear:both;}
#quick a{position:relative; float:left; display:block; width:25%; 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/member/main/ico_quick1.png) no-repeat center; box-shadow:none;}
#quick a:nth-of-type(2):after{background-image:url(../../images/member/main/ico_quick2.png);}
#quick a:nth-of-type(3):after{background-image:url(../../images/member/main/ico_quick3.png);}
#quick a:nth-of-type(4):after{background-image:url(../../images/member/main/ico_quick4.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);}
}

.more{z-index:2; position:absolute; top:35px; right:30px; padding:0 22px 0 0; font-size:14px; font-weight:400; color:#555;}
.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:#258eba;}
.more:after{top:5px; right:5px; width:2px; height:12px;}

/* 게시판 */
#board .con{position:relative; height:340px; box-sizing:border-box; padding:50px 50px 0; border-radius:10px 10px 0 0; background:#fff;}
#board .con li h4{display:inline-block;}
#board .con li h4 a{z-index:1; position:relative; display:block; width:190px; height:55px; line-height:55px; box-sizing:border-box; padding:0 0 0 20px; border-radius:10px; color:#777; font-size:18px; font-weight:200; text-decoration:none;}
#board .con li h4 a:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-bottom:1px dashed #e0e0e0;}
#board .con li.on h4 a{font-weight:600; color:#fff; 
background:rgb(46,160,171);
background: -moz-linear-gradient(90deg, rgba(46,160,171,1) 0%, rgba(44,126,170,1) 50%, rgba(41,94,170,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(46,160,171,1) 0%, rgba(44,126,170,1) 50%, rgba(41,94,170,1) 100%);
background: linear-gradient(90deg, rgba(46,160,171,1) 0%, rgba(44,126,170,1) 50%, rgba(41,94,170,1) 100%);}
#board .con li.on h4 a:before{display:none;}

#board .con ul{opacity:0; visibility:hidden; position:absolute; width:100%; top:35px; left:0; box-sizing:border-box; padding:0 50px 0 310px; transition:.35s ease-in-out;}
#board .con .on ul{opacity:1; visibility:visible; top:50px;}
#board .con ul:after{content:''; display:block; clear:both;}
#board .con ul li{float:left; width:calc((100% - 133px) / 3); box-sizing:border-box; padding:0 0 0 4px;}
#board .con ul li + li{margin:0 0 0 66px;}
#board .con ul li *{display:block; text-decoration:none;}

#board .con .type{display:inline-block; padding:6px 13px; border-radius:15px; margin:0 0 0 -4px; background:#f0f4fa; color:#1f5bb4; font-size:14px;}
#board .con .type.qna{background:#edf6f9; color:#258eba;}
#board .con .type.five{background:#f4f3fb; color:#534eaf;}

#board .con .tit{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:15px 0; font-size:20px;}
#board .con .txt{padding:0 0 18px; border-bottom:1px dashed #dedede;}
#board .con .txt span{overflow:hidden; text-overflow:ellipsis; line-height:1.5; height:6em; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; color:#555;}
#board .con .date{box-sizing:border-box; padding:0 0 0 20px; margin:16px 0 0; color:#666; background:url(../../images/member/main/ico_date.gif) no-repeat center left;}
#board .con .new{display:inline-block; width:20px; height:20px; line-height:20px; margin:1px 0 0 10px; text-transform:uppercase; text-align:center; color:#fff; border-radius:5px 5px 0 5px; background:#e15c5c; vertical-align:top; font-family:'score'; font-size:12px; font-weight:500;}

#board .more{display:none; top:123px; right:auto; left:202px; width:18px; height:18px; padding:0; font-size:0; text-indent:-999px;}
#board .on .more{display:block;}
#board .con > li:nth-child(3) .more{top:178px;}
#board .con > li:nth-child(4) .more{top:233px;}

#board .more:before, #board .more:after{width:100%; height:2px; margin:-1px 0 0; background:rgba(255,255,255,0.8); transition:.3s;}
#board .more:after{top:0; right:50%; margin:0 -1px 0 0; width:2px; height:100%;}
#board .more:hover:before,
#board .more:focus:before,
#board .more:active:before,
#board .more:hover:after,
#board .more:focus:after,
#board .more:active:after{background:#fff;}

/* 갤러리 */
#gallery{position:relative; padding:71px 0 80px; background:#fff url(../../images/member/main/bg_gallery.png) no-repeat bottom center;}
#gallery .inner{padding-left: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-family:'score'; 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 .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; border-radius:50%; background:#fff; font-size:0; text-indent:-999px; transition:.3s;}
#gallery .control .btns:before{content:''; position:absolute; width:10px; height:10px; top:12px; left:13px; border-top:1px solid #7b7b7b; border-right:1px solid #7b7b7b; transform:rotate(-135deg);}
#gallery .control .btns.btn_next:before{left:11px; transform:rotate(45deg);}

#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:0; left: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; border-radius:10px; 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 (max-width: 1700px) {
    #visual .pic {left: 0px;}

}
@media all and (max-width:1400px) {
    #visual{background:url(../../images/member/main/bg_mainvisual.jpg) no-repeat center; background-size:cover;}
    #visual:before{display:none;}
    /* #visual .pic{left:-250px;} */
    #visual .txt{padding:109px 20px 0 0;}
    
    .sec{padding:0; margin:0;}
    #quick{padding:60px 0 65px 375px;}
    #quick h4{top:90px;}
    .list_wrap{left:15px;}
}
@media all and (max-width:1024px) {
    /* #visual .pic{left:-110px;} */
    /* #visual .pic img{width:620px;} */
    #visual .pic img {width: 300px;}
    #visual .txt{height:auto; padding:60px 50px 40px 0;}
    #visual .txt p{font-size:30px;}
    #visual .txt p span{font-size:20px;}
    #visual .txt p span:after{left:229px; width:150px;}
    #visual .txt ul li{padding:0 0 15px 100px; font-size:1.125em; height: 23px;}
    
    #quick{padding:60px 0 55px 245px; background-size:100px; background-position:bottom left;}
    #quick h4{top:65px; left:90px;}
    #quick a{padding:102px 0 0;}
    #quick a:before, #quick a:after{width:90px; height:90px; margin:0 0 0 -45px; background-size:40px;}
    
    #board .con .on ul{top:24px;}
    
    #board .con{height:290px; padding:25px 25px 0;}
    #board .con li h4 a{width:170px;}
    #board .con ul{top:20px; padding:0 35px 0 220px;}
    #board .con ul li{width:calc((100% - 33px) / 2);}
    #board .con ul li:nth-child(3){display:none;}
    #board .con ul li + li{margin:0 0 0 33px;}
    #board .more{top:98px; left:161px;}
    #board .con > li:nth-child(3) .more{top:153px;}
    #board .con > li:nth-child(4) .more{top:208px;}
    
    #gallery{background:#fff url(../../images/member/main/bg_gallery.png) no-repeat bottom center;}
    #gallery .inner{padding-left:15px !important;}
    .list_wrap{left:auto; right:15px; 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 .pic img {width: 250px;}

    /* #visual .pic{left:-150px;}
    #visual .pic img{width:520px;} */
    #visual .txt{padding:40px 30px 30px 0;}
    #visual .txt p{font-size:25px;}
    #visual .txt p span{font-size:18px;}
    #visual .txt p span:after{left:197px; width:120px;}
    #visual .txt ul li{padding:0 0 10px 100px;}
    
    #quick{padding:30px 0 25px; background-size:50px;}
    #quick h4{position:static; padding:0 0 20px; text-align:center; font-size:23px;}
    #quick h4 span{display:inline;}
    #quick h4:after{display:none;}
    #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;}
    
    .more{right:auto; left:253px;}
    
    #board .con .on ul{top:90px;}
    
    #board .con > li{float:left;}
    #board .con > li + li{margin:0 0 0 15px;}
    #board .con{height:349px;}
    #board .con ul{top:70px; padding:0 25px;}
    #board .con li h4 a{width:auto; height:35px; line-height:35px; padding:0 15px;}
    #board .con .tit{padding:15px 0 10px; font-size:1.125em;}
    #board .more{width:20px; height:20px; left:auto; top:32px !important; right:25px;}
    #board .more:before, #board .more:after{background:#258eba;}
    
    #gallery{padding:40px 0 20px;}
    #gallery .inner{padding-left:10px !important;}
    #gallery .tit:before{display:none;}
    #gallery h4{padding:0; font-size:25px;}
    #gallery h4 span{margin:0; font-size:15px;}
    .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 .pic img {width: 150px;} 
    #visual .pic {border-radius: 100px; overflow: hidden; bottom: 30px; left: 10px;} 
    #visual .txt{float:none; padding:40px 0 30px 145px;}
    #visual .txt p{font-size:21px;}
    #visual .txt p span{font-size:15px;}
    #visual .txt p span:after{left:165px; width:100px;}
    #visual .txt ul{padding:20px 0 0;}
    #visual .txt ul li{padding:0 0 5px 80px; font-weight:500;}
    #visual .txt ul li em:before{top:6px;}
    #visual .sns div a{margin:0 0 2px;}
    
    #quick{background:none;}
    #quick h4{font-size:20px;}
    #quick h4 span{font-size:14px;}
    #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;}
    
    .more{top:29px; left:214px;}
    .more:after{top:4px;}
    
    #board .con .on ul{top:69px;}
    
    #board .con > li + li{margin: 0 0 0 10px;}
    #board .con li h4 a{padding:0 10px; font-size:1em;}
    #board .con{height:302px; padding:15px 15px 0;}
    #board .con ul{top:53px; padding:0 15px;}
    #board .con .type{padding:4px 10px; font-size:12px;}
    #board .con .new{width:16px; height:16px; line-height:16px; margin-top:0; font-size:10px;}
    #board .more{top:23px !important; right:15px;}
    
    #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;}
    .list_wrap{position:static; margin:20px auto 0;}
    .next_wrap{display:none;}
}

@media all and (max-width:480px) {
    #visual .pic img {width: 125px;}
    #visual .txt{padding:20px 0;}
    #visual .txt p span:after{display:none;}
    #visual .txt ul{padding:20px 0 0 140px;}
    #visual .txt ul li{padding:0 0 5px 65px;}
    #visual .txt ul li em{padding:0 0 0 10px;}
    #visual .txt ul li {font-size: 14px;}
    #visual .sns div a {width: 27px; height: 27px; background: url(../../images/common/ico_fb.png) no-repeat -4px -3px;}


    #board .con .on ul{top:83px;}
    #board .con{padding:15px 55px 0 15px;}
    #board .con > li{width:calc((100% - 30px) / 4);}
    #board .con li h4{display:block;}
    #board .con li h4 a{width:100%; height:auto; line-height:130%; padding:5px 0; text-align:center;}
    #board .con li h4 a span{display:block;}
    #board .con ul li{width:calc((100% - 20px) / 2);}
    #board .con ul li + li{margin: 0 0 0 20px;}
    #board .more{top:28px !important;}
}

@media all and (max-width:380px) {
    #visual .txt ul {padding: 20px 0 0 100px;}
    #visual .pic img {width: 100px;}
    #visual .pic {bottom: 65px;}


    #quick {padding:20px 0;}
    #quick h4{padding:0 0 15px; font-size:18px;}
    #quick h4 span{font-size:12px;}
    #quick a + a{background:none;}
}
@media all and (max-width:360px) {
    .list_wrap{width:100%; height:200px;}
    .list_wrap .list a{height:200px;}
}
@media all and (max-width:330px)  {
    #visual .txt ul {padding: 20px 0 0 85px;}
}