@charset "utf-8";
.control{float:right; margin:-5px 0 0 0;}
.control button,
.more{float:left; width:48px; height:48px; margin:0 7px 0 0; font-size:0; text-indent:-9999px; border-radius:6px; border:1px solid #e3e6eb; box-sizing:border-box; background:#fff url(../../images/ch/main/ico_arrow.png) no-repeat 16px 50%; color:#19305a;}
.control .btn_next{background-position:-39px 50%;}
.more{display: flex; justify-content: center; align-items:center; width:116px; margin:0; font-size:18px; font-family:"Pretendard"; font-weight: 700; text-indent:0; background:#fff;}
.more:after{content: ''; display: inline-block; vertical-align: middle; width:14px; height:14px; margin:0 0 0 5px; background: url(../../images/ch/main/ico_more.png) no-repeat;}
.control button:hover,
.more:hover{text-decoration: none; border-color: #656d7b; transition: 0.2s ease-in;}
@media all and (max-width:1024px) {
    .control button,
    .more{width:35px; height:35px; background-position:10px 50%;}
    .control .btn_next{background-position:-46px 50%;}
    .more{width:75px; font-size:14px;}
}
@media all and (max-width:568px) {
    .control button{margin:0 4px 0 0;}
    .more{width:35px; font-size:0;}
    .more::after{margin:0 0 0 3px;}
}

.sec1{z-index:1; position:relative; height:721px; box-sizing: border-box; background:url(../../images/member/main/bg.jpg) no-repeat 50% 0;}
.sec2{position:relative; background:url(../../images/member/main/bg2.jpg) no-repeat;}

#visual{height:538px; padding:70px 0 0 0; box-sizing: border-box;}
#visual .txt{float:left; width:35.625%;}
#visual .greeting{font-size:38px; line-height:1.4; letter-spacing:-4px; font-weight:500; font-family:"score"; color:#222; word-break: keep-all;}
#visual .greeting strong{display:block; letter-spacing: -2px; font-size:52px; font-family:"SEBANG"; color:#201450; font-weight:700;}
#visual .greeting strong span{color: #3b2688;}

#visual .txt dl{margin:80px 0 0 0; display:grid; grid-template-columns:87px 1fr; row-gap:18px; font-size:20px; font-weight: 500; color:#222;}
#visual .txt dt{font-weight:700; color:#3b2688;}

#visual .img{position: absolute; bottom:66px; left:35.625%; width:29.166%;}
#visual .img img{max-width:100%; border-radius:30px 30px 0 0; border:2px solid #d1cee1; box-shadow:0 0 14px rgba(59,38,136,0.12);}

#visual .career{float:right; width:320px; margin:79px 0 0 0; border-radius:14px; overflow:hidden; box-shadow:0 12px 18px rgba(25,40,66,.08); font-weight:400;}
#visual .career h4{height:69px; line-height:69px; padding:0 0 0 25px; background:#645d81; color:#f3f1fb; font-size:24px; font-family: "Pretendard"; font-weight: 700;}
#visual .career .list{height:285px; padding:20px 12px 30px 26px; border: 1px solid #cdc4ec; box-sizing: border-box; border-radius:0 0 14px 14px; background:#fff;}
#visual .career ul{overflow-y:scroll; height:100%; scrollbar-width:thin;}
#visual .career ul::-webkit-scrollbar{width:2px;}
#visual .career ul::-webkit-scrollbar-thumb{background-color:#cfccdf;}
#visual .career ul::-webkit-scrollbar-track{background-color:#e4e1f1;}
#visual .career li{position:relative; padding: 0 0 9px 24px;}
#visual .career li:before{content:""; position:absolute; left:0; top:9px; width:6px; height:1px; background:#393549;}

@media all and (max-width:1380px) {
    #visual .greeting{font-size:30px;}
    #visual .greeting strong{font-size:45px;}
    #visual .career{margin:65px 0 0 0;}
    #visual .career li{padding:0 0 9px 15px;}
    #visual .career .list{height:250px;}
    #visual .txt dl{margin:50px 0 0 0;}
}
@media all and (max-width:1024px) {
    #visual{display: flex; flex-wrap: wrap; align-items: end; height:auto; padding:30px 0 60px 0;}
    #visual .img{position: static; float:left; width:40%; max-width:340px; height:100%; text-align: center; vertical-align: bottom;}
    #visual .greeting{letter-spacing: -3px; font-size:27px;}
    #visual .greeting strong{font-size:38px;}
    #visual .txt{float:left; width:60%; padding:0 0 0 30px; box-sizing: border-box;}
    #visual .txt dl{margin:25px 0 40px; row-gap:12px; font-size:18px;}
    #visual .career{float:none; clear:both; width:100%; margin:0 auto; border-radius:0 14px 14px 14px;}
    #visual .career h4{height:55px; line-height:55px; font-size:20px;}
    #visual .career .list{height:173px; padding:18px 12px 20px 26px;}
    #visual .career li{float: left; width:50%; box-sizing: border-box;}
}
@media all and (max-width:768px) {
    #visual .greeting{font-size:23px;}
    #visual .greeting strong{font-size:34px;}
    #visual .txt dl{margin:20px 0 30px; grid-template-columns:60px max-content;}  
}
@media all and (max-width:568px) {
    #visual .img{width:100%; max-width:300px; margin:0 auto 20px;}
    #visual .img img{max-width:100%; border-radius:20px;}
    #visual .txt{width:100%; padding:0; text-align: center;}
    #visual .greeting{font-size:20px;}
    #visual .greeting strong{font-size:32px;}
    #visual .career{border-radius:14px;}
    #visual .career h4{height:50px; line-height:50px; font-size:18px;}
    #visual .career li{width:100%;}
    #visual .txt dl{justify-content:center; text-align: left; font-size:17px;}
}

#quick {position:absolute; top:471px; left:50%; transform: translateX(-50%); overflow:hidden; width:664px; height:130px; border-radius:14px; border: 1px solid rgba(255,255,255,0.5); box-sizing: border-box; background:#7d70b4;}
#quick ul{display: flex; justify-content:space-around; height:100%; padding:0 30px; box-sizing: border-box;}
#quick li {flex:1;}
#quick li a{z-index:1; position:relative; display:flex; flex-direction: column; align-items: center; height:100%; padding:92px 0 0 0; letter-spacing: 0; font-weight:600; box-sizing:border-box; text-decoration:none; color:#fff; text-shadow:0 0 6px rgba(0,0,0,0.5);}
#quick li a:before{opacity:0.9; content: ''; display: block; position: absolute; top:50%; left:0; width:2px; height:49px; background:rgba(0,0,0,0.2); transform:translateY(-50%);}
#quick li.list1 a:before{display: none;}
#quick li a:after{z-index:-1; content: ' '; position: absolute; top:18px; left:0; width:100%; height:66px; background:url(../../images/member/main/ico_lnk1.png) no-repeat 50% 0;}
#quick li.list2 a:after{background-image:url(../../images/member/main/ico_lnk2.png);}
#quick li.list3 a:after{background-image:url(../../images/member/main/ico_lnk3.png);}
#quick a:focus:after,
#quick a:hover:after{animation:ani_link 0.9s ease-in-out;}
@keyframes ani_link {
	0%{transform:translateY(0);}
	25%{transform:translateY(5px);}
	50%{transform:translateY(0);}
	75%{transform:translateY(7px);}
	100%{transform:translateY(0);}
}

@media all and (max-width:1024px) {
    .sec1{height:auto; background-size:auto calc(100% - 128px - 30px);}
    .sec2{background-size:90%;}
	#quick {position: static; width:100%; margin:0 0 70px; transform:inherit}
}
@media all and (max-width:768px) {
    .sec1{background-size:auto calc(100% - 118px - 30px);}
    .sec2{background-size:80%; background-position:0 120px;}
    #quick{height:120px;}
    #quick ul{padding:0;}
    #quick li a{padding:80px 0 0 0;}
    #quick li a::after{height:52px; background-size:contain;}
}
@media all and (max-width:568px) {
    #quick{margin:0 0 60px;}
    .sec2{background-position:0 170px;}
}

/* 의정활동 */
#board{position:relative; float:left; width:100%; height:615px;}
#board h3{display:inline-block; position:absolute; top:0; left:0; line-height:100%; font-size:42px; font-weight:700; font-family:"SEBANG"; color:#19305a;}
#board > ul{padding:0 0 0 105px; box-sizing:border-box;}
#board > ul > li{float:left; margin:0 12px 0 0;}
#board li h4{line-height:0; padding:0;}
#board li h4 br{display:none;}
#board li h4 a{position:relative; display:block; width:100%; line-height:35px; padding:0 13px; font-family:"Pretendard"; font-size:18px; font-weight:600; color:#2c3d58; text-decoration:none; box-sizing:border-box; border-radius:35px; background:#e5efff;}
#board li.on h4 a{z-index:1; color:#222; font-weight:600;}
#board .con{opacity:0; visibility:hidden; position:absolute; top:63px; left:0; width:100%; font-weight:400;}
#board .on .con{opacity:1; visibility:visible; top:73px; transition:0.35s ease-in-out;}
#board .list_wrap{overflow:hidden; width:calc(100% + 12px); box-sizing:border-box;}
#board .list_wrap .list:not(:first-of-type){display:none;}
#board .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;}
#board .list{position:relative; float:left;  width:20%;}
#board .con a{display:block; width:calc(100% - 12px); height:342px; padding:27px 15px 27px 23px; color:#555; text-decoration:none; border-radius:10px; border:2px solid #d1d6e1; box-sizing:border-box; background: #fff; transition:0.25s ease}
#board .con a:hover{border-color:#d1d6e1; background:#284c8f;}
#board .con a:hover .tit,
#board .con a:focus .tit,
#board .con a:active .tit{color:#fff; text-decoration:underline;}
#board .s_tit{display:inline-block; min-width:80px; height:32px; line-height:32px; padding:0 13px; margin:0 0 13px; font-weight:600; font-size:16px; color:#2c3d58; background:#e5efff; border-radius:32px; text-align:center; box-sizing:border-box;}
#board #board2 h4 a,
#board #board2 .s_tit{color:#1d4b68; background: #dceefa;}
#board #board3 h4 a,
#board #board3 .s_tit{color:#42277d; background: #eee6ff;}
#board .tit{display:inline-block; height:52px; line-height:26px; font-size:22px; font-weight:600; color:#2c3d58; overflow:hidden; text-overflow:ellipsis; white-space:normal;  display:-webkit-box; line-clamp:2; -webkit-box-orient:vertical; box-sizing:border-box;}
#board .date{position: absolute; bottom:28px; left:25px; display:inline-block; line-height:100%; font-size:15px; color:#777; font-weight:200;}
#board a:hover .date{color:#c5c5c5;}
#board .new{display:inline-block; vertical-align:middle; width:17px; height:17px; line-height:17px; margin:-2px 0 0 3px; font-size:10px; border-radius:50%; text-transform:uppercase; text-align:center; color:#fff; background:#ff404b;}
#board .con .none{width:100%; padding:4em 0 0 0; text-align:center; background:none;}
#board .more{display:none; position: absolute; right:0; top:-5px; margin:0;}
#board .on .more{display:flex;}
#board .control{display: none; position:absolute; right:116px; top:0;}
#board .on .control{display:block;}


@media all and (max-width:1024px) {
	#board {width:100%; height:410px;}
	#board h3{position:relative; padding:0 0 10px; font-size:31px;}
    #board > ul{padding:0;}
	#board .more{top:40px;}
	#board .control{top:45px; right:75px;}
	#board .con,
	#board .on .con{top:100px;}
	#board .list_wrap{width:calc(100% + 20px); margin:0 -10px;}
	#board .con a{height:235px; width:calc(100% - 20px); margin:0 auto; padding: 26px 15px 27px 20px;}
	#board .tit{height:46px; line-height:23px; font-size:17px;}
	#board .s_tit{min-width:0; height:27px; line-height:27px; padding:0 12px; margin:0 0 10px; font-size:13px;}
	#board .date{font-size:15px;}
	#board .new{line-height:18px;}
}
@media all and (max-width:768px) {
	#board h3{font-size:28px;}
    #board .date{font-size:14px;}
}
@media all and (max-width:568px) {
    #board{height:370px;}
    #board h3{font-size:24px;}
    #board > ul > li{margin:0 7px 0 0;}
	#board li h4 a{padding:5px 10px; line-height:120%; font-size:15px; text-align: center;}
	#board li h4 br{display:inline-block;}
	#board .list_wrap{width:calc(100% + 14px); margin:0 -7px;}
	#board .con a{height:210px; width:calc(100% - 14px); padding: 20px 15px 20px 15px;}
	#board .tit{height:42px; line-height:21px; font-size:16px;}
	
	#board .new{width:15px; height:15px; line-height:16px; font-size:9px;}
    #board .control{right:35px;}
}

/* 사진첩 */
#gallery{position:relative; float:left; width:100%; height:543px; box-sizing:border-box; font-weight:600;}
#gallery .inner{overflow:hidden;}
#gallery h3{float: left; line-height:100%; margin:0 0 35px; font-size:42px; font-weight:700; font-family:"SEBANG"; color:#19305a;}
#gallery .list_wrap{clear:both; width:calc(100% + 24px);} 
#gallery .list_wrap .list:not(:first-of-type){display:none;}
#gallery .list_wrap.slick-initialized .list:not(:first-of-type){display:block;}
#gallery .list a{overflow:hidden; position:relative; display:block; width:calc(100% - 24px); margin:0 24px 0 0; text-decoration:none; color:#19305a;}
#gallery .list a *{display:block;}
#gallery .img{display:flex; align-items:center; vertical-align:middle; position:relative; overflow:hidden; max-height:280px; border-radius:14px; border: 1px solid #d8dde5; box-sizing: border-box;}
#gallery .img img{display:inline; width:100%; transition:0.25s ease;}
#gallery a:hover img,
#gallery a:focus img{transform:scale(1.1);}
#gallery a:hover .img{border-color: #bcc3ce;}
#gallery .sbj{padding:24px 0 0 18px; font-family:"Pretendard";}
#gallery .tit{display:block; max-width:100%; margin:0 0 16px; line-height:100%; font-size:22px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; box-sizing:border-box;}
#gallery .list a:hover .tit,
#gallery .list a:focus .tit{text-decoration: underline;}
#gallery .date{line-height:100%; color:#656d7b; font-size:18px; font-weight:400;}
#gallery .date:before{content: ''; display:inline-block; vertical-align: middle; width:16px; height:16px; margin:-3px 6px 0 0; background: url(../../images/ch/main/ico_date.png) no-repeat;}

@media all and (max-width:1024px){
	#gallery{height:auto; padding:0 0 55px;}
	#gallery h3{margin:0 0 22px; font-size:31px;}
	
	#gallery .img{max-height:187px;}
    #gallery .sbj{padding:20px 0 0 10px;}
	#gallery .tit{margin:0 0 10px; font-size:18px;}
    #gallery .date{font-size:15px;}
}
@media all and (max-width:768px){
	#gallery h3{font-size:28px;}

	#gallery .img{max-height:160px;}
    #gallery .sbj{padding:15px 0 0 5px;}
	#gallery .tit{margin:0 0 7px; font-size:17px;}
	#gallery .date{font-size:14px;}
    #gallery .date::before{width:14px; background-size:14px;}
}
@media all and (max-width:568px){
	#gallery h3{font-size:24px;}
    #gallery .tit{font-size:16px;}
    #gallery .list_wrap{width:calc(100% + 14px);} 
    #gallery .list a{width:calc(100% - 14px); margin:0 14px 0 0;}
}