@charset "utf-8";
#container_main{float:left; width:100%; background:linear-gradient(to bottom, #fff 25%, #e3f5f5 50%, #e3f5f5 100%);}
#container_main h3{font-size:40px; font-family: "gmarket"; font-weight: 900; text-transform: uppercase;}
#container_main h3 span{color: #193473;}

.slick-vertical .slick-slide{border:none;}
.control{float:right;}
.control button,
.more{position: absolute; right:0; top:0; width:46px; height:46px; font-size:0; text-indent:-9999px; border-radius:50%; border:1px solid #e3e6eb; box-sizing:border-box; border: 1px solid #e3e3e3; background:#fff url(../../../images/en/main/ico_ctrl_w.png) no-repeat 0 0; color:#333; box-shadow: 0 0 10px rgba(51,51,51,0.2); transition:0.25s ease-in-out;}
.control button.slick-disabled{box-shadow: 0 0 10px rgba(185,185,185,0.2);}
.control .btn_next{background-position:-101px 0;}
.control .btn_stop{background-position:-51px -1px;}
.control .btn_stop.on{background-position:-50px -40px;}
.control button:not(.slick-disabled):hover,
.control button:not(.slick-disabled):focus{border-color: #3495a0; box-shadow:1px 1px 2px rgba(51,51,51,0.2);}
.more{display: flex; justify-content: center; align-items:center; width:152px; margin:0; border-radius:46px; font-size:15px; font-weight:300; text-indent:0; background:#fff; letter-spacing: 0; border-color:#ffc7d0;}
.more:after{content: ''; display: inline-block; vertical-align: middle; width:14px; height:14px; margin:0 0 0 5px; background: url(../../../images/en/main/ico_more.png) no-repeat;}
.more:hover{text-decoration: none; border-color: #db6a7c; transition: 0.2s ease-in; box-shadow: 1px 1px 2px rgba(51,51,51,0.2);}

@media all and (max-width:1024px) {
    #container_main h3{font-size:27px;}

    .control button,
    .more{width:40px; height:40px;}
    .more{width:85px;}
    .more span{display: none;}
    .more::after{margin:0;}
}
@media all and (max-width:768px) {
    #container_main h3{font-size:24px;}
	.control button{width:35px; height:35px; background-position:-8px -6px;}
    .control .btn_next{background-position:-108px -6px;}
    .control .btn_stop{background-position:-57px -6px;}
    .control .btn_stop.on{background-position:-57px -46px;}

}
@media all and (max-width:568px) {
    #container_main h3{font-size:21px;}

    .control button{margin:0 4px 0 0;}
    .control button,
    .more{width:35px; height:35px;}
    .more{font-size:0;}
}


.sec{position:relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; padding:50px 30px 0 30px; width:1460px;}

@media all and (max-width:1510px) {
    .sec{width:100%; padding:50px 50px 0 50px;}
}
@media all and (max-width:1490px) {
    .sec{padding:50px 20px 0 40px;}
}
@media all and (max-width:1024px) {
	.sec:before{display:none;}
	.sec{padding:0 15px;}
}

/* 비주얼 */
#visual{z-index:2; float:left; position:relative; width:60.35%; height:496px; border-radius:20px; box-shadow:0 0 10px rgba(51,51,51,0.4);}
#visual .list_wrap{width:100%; height:100%;}
#visual .list_wrap *{vertical-align:top; width:100%; height:100%;}
#visual .list_wrap .list{overflow:hidden; position:relative; left:0; top:0; border-radius:20px;}
#visual .list_wrap .list:not(:first-of-type){display:none;}
#visual .list_wrap.slick-initialized .list:not(:first-of-type){display:inline-block;}
#visual .list img{height:100%; object-fit:cover; object-position:bottom;}
#visual .control2{z-index:2; position:absolute; bottom:-30px; left:52px; display:flex; flex-wrap:wrap; justify-content:center; align-items: center; height:56px; padding:0 35px 0 30px; border-radius:56px; background:rgba(0,0,0,0.7); text-align:center; box-sizing:border-box;}
#visual .btn_stop{position:static; width:25px; height:14px; font-size:0; text-indent:-999px; background:url('../../../images/kr/main/arrow_visual.png') no-repeat 0 0;}
#visual .btn_stop.on{background-position:-25px 0;}
#visual .slick-dots{line-height:100%; display: flex; justify-content:center; align-items: center;}
#visual .slick-dots li{line-height:0;}
#visual .slick-dots button{position:relative; width:10px; height:10px; line-height:100%; margin:0 5px; font-size:0; text-indent:-999px; border-radius:50%; transition:0.3s ease; box-sizing:border-box; background:#fff;}
#visual .slick-dots .slick-active button{width:13px; height:13px; background:#f4c222;}
#visual .control{z-index:51; position: absolute; left:-30px; top:calc(50% - 30px); width:calc(100% + 60px);}
#visual .control button{left:0; width:60px; height:60px; margin:0;}
#visual .control button.slick-disabled:before{opacity:0.3;}
#visual .control .btn_next{left:auto; right:0;}
#visual .control button:before{content: ''; display: block; width:17px; height:17px; margin:0 0 0 24px; border-top:2px solid #000; border-right:2px solid #000; transform:rotate(-135deg);}
#visual .control .btn_next:before{left:auto; right:0; margin:0 0 0 17px; transform:rotate(45deg);}
#visual .control button:not(.slick-disabled):hover:before{border-color: #32949f;}


@media all and (max-width:1024px) {
	#visual{width:100%; height:auto; margin:0 0 60px;}
    #visual .list img{height:auto;}
    #visual .control{top:calc(50% - 23px); left:5px; width:calc(100% - 10px);}
    #visual .control button{width:45px; height:45px;}
    #visual .control button:before{margin:0 0 0 17px;}
    #visual .control .btn_next:before{margin:0 0 0 10px;}
    #visual .control2{left:50%; transform:translateX(-50%)}
}
@media all and (max-width:568px) {
	#visual{margin:0 0 50px;}
    #visual .control2{bottom:-20px; height:40px;}
}


/* 열린의장실 */
#chairman{position:relative; width:34.5%; height:496px; border-radius:20px; box-shadow:0 0 20px rgba(51,51,51,0.2); background: #fff;}
#chairman .pic{overflow:hidden; position:absolute; right:0; bottom:0; max-width:60%; border-radius:0 0 15px 0; text-align:right;}
#chairman .pic img{max-width:100%; margin:0 -15px 0 0;}
#chairman .txt{position:relative; padding:55px 15% 0 52px; font-size:23px; box-sizing:border-box; word-break:keep-all; font-family: "NanumSquare"; font-weight: 900;}
#chairman h3{display:inline-block; padding:0 0 5px; line-height:160%; font-size:23px; font-family: "NanumSquare"; text-transform: inherit; border-bottom: 1px solid #c1c1c1;}
#chairman .greeting{padding:32px 0 52px 0;}
#chairman .greeting strong{display: block; padding:0 0 5px; line-height:150%; font-family: "gmarket"; font-weight: 900; color:#32949f; font-size:31px;}

.btn_more{z-index:1; position:relative; display:block; width:126px; height:126px; padding:34px 0 0 0; line-height:100%; letter-spacing:0; font-weight:300; font-family:"score"; font-size:15px; color:#fff; border-radius:50%; background:#358088; box-sizing:border-box; text-align: center;}
.btn_more:hover{color:#fff; text-decoration:none;}
.btn_more:before{content:''; display:block; width:27px; height:25px; margin:0 auto 18px auto; background: url(../../../images/en/main/ico_greeting.png) no-repeat 50% 0;}
.btn_more:focus:before,
.btn_more:hover:before{animation:ani_bg 0.5s ease-in-out;}
@media all and (max-width:1510px) {
	#chairman .pic{width:50%; max-height:100%;}
    #chairman .greeting strong{font-size:28px;}
}
@media all and (max-width:1024px) {
	#chairman{width:100%; height:auto;}
    #chairman .txt{padding:35px 150px 25px 45px;}
    #chairman h3{display: none;}
    #chairman .greeting{padding:0 0 30px;}
    #chairman .greeting strong{font-size: 25px;}
	#chairman .pic img{max-height:230px;}

    .btn_more{width:110px; height:110px; padding:20px 0 0 0;}   
}
@media all and (max-width:768px) {
    #chairman .pic img{max-height:210px;}     
    #chairman .txt{padding:32px 33% 23px 30px; font-size:21px;}
    #chairman .greeting{padding:0 0 20px;}
    #chairman .greeting strong{line-height:120%; font-size: 22px;}
    .btn_more{width: 95px; height: 95px; padding:15px 0 0 0; font-size:14px;}
    .btn_more::before{margin:0 auto 14px;}
}

/* 바로가기 */
#link{clear:both; width:100%; padding:94px 0 89px 0; box-sizing:border-box;}
#link li {float:left; width:22.85%; line-height:120%;}
#link li + li{padding:0 0 0 2.857%;}
#link li a{z-index:1; display: flex; align-items: center; position:relative; width:100%; height:140px; padding:0 0 0 45.59%; letter-spacing:-0.5px; color:#222; box-sizing:border-box; font-size:20px; font-family: "gmarket"; font-weight:800; border-radius:20px; border: 1px solid #d4e6e3; box-shadow: 0 0 20px rgba(153,153,153,0.13); background: rgba(255,255,255,0.5); text-decoration: none;}
#link li a:before{content:''; display:block; position:absolute; top:0; left:0; width:45.59%; height:100%; background:url(../../../images/en/main/ico_lnk1.png) no-repeat 50% 50%;}
#link li span:after{content:''; display:block; width:30px; height:2px; margin:15px 0 0 0; background:#90c4b6;}
#link li.list2 a:before{background-image:url(../../../images/en/main/ico_lnk2.png);}
#link li.list3 a:before{background-image:url(../../../images/en/main/ico_lnk3.png);}
#link li.list4 a:before{background-image:url(../../../images/en/main/ico_lnk4.png);}
#link li a:hover{border-color: #90c4b6;}
#link li a:focus:before,
#link li a:hover:before{animation:ani_bg 0.5s ease-in-out;}

@keyframes ani_bg{
	0%{transform:rotate(0);}
	20%{transform:rotate(-8deg);}
	40%{transform:rotate(8deg);}
	60%{transform:rotate(-8deg);}
	80%{transform:rotate(8deg);}
	100%{transform:rotate(0deg);}
}
@media all and (max-width:1280px) {
	#link li a{display:block; height:auto; padding:90px 0 20px 0; text-align:center;}
	#link li a:before{width:100%; height:60px; margin:15px 0 0 0; background-size: contain;}
	#link li span:after{display: none;}
    #link li span:before{content:''; display:block; width:30px; height:2px; margin:0 auto 10px; background:#90c4b6;}
}
@media all and (max-width:1024px) {
    #link {padding:50px 0 55px;}
    #link li a{font-size:17px;}
}
@media all and (max-width:568px) {
    #link li {width:100%;}
    #link li + li{padding:10px 0 0 0;}
    #link li a{padding:0; font-size:15px; text-align: left; border-radius:14px;}
    #link li a:before{position: static; display: inline-block; vertical-align: middle; width:60px; height:45px; margin:10px 10px 10px 20px;}
    #link li a span{display: inline-block;}
    #link li span:before{display: none;}
}

/* 현역의원 */
#member{position:relative; z-index:53; clear:both; overflow:hidden; width:100%; padding:77px 0 103px; border-radius:200px 0 0 0; background:#fff url(../../../images/en/main/bg_council.png) no-repeat 100% 100%;}
#member .inner{position:relative; padding:0 485px 0 0; box-sizing:border-box;}
#member h3{height:97px; text-align:center;}
#member .more{top:-101px;}
#member .big_wrap{position:absolute; top:0; right:0; overflow:hidden; width:447px; color:#fff; background:#2b425b url(../../../images/en/main/bg_member.jpg) no-repeat; border-radius: 0 0 50px 0;}
#member .big_list .list{position: relative; overflow:hidden; width:100%; height:280px; padding:40px 165px 0 40px; box-sizing:border-box; vertical-align:top;}
#member .big_list .list:not(:first-of-type){display:none;}
#member .big_list.slick-initialized .list:not(:first-of-type){display:block;} 
#member .control{z-index:2; position:absolute; bottom:33px; left:41px; display: flex;}
#member .control button{position:static; margin:0 7px 0 0; background-color:#394964; border-color:#394964; transition: none;}

#member .pic{position:absolute; top:40px; right:40px; height:185px;}
#member .pic img{max-width:100%; max-height:100%;}
#member .txt .name{padding:10px 0 20px 0; font-size:19px; font-weight:900; font-family: "gmarket";}
#member .txt li{line-height:110%; padding:0 0 8px 16px; font-weight: 300; letter-spacing: 0;}
#member .txt li:before{top:6px; width:6px; height:3px; border-radius:0; background:#fff;}

#member .small_wrap{position:relative; float:left; width:100%; margin:0 0 0 -5px;}
#member .small_wrap *{vertical-align:top;}
#member .small_list {overflow:hidden; width:100%;}
#member .small_list .list{position:relative; float:left; margin:0 13px 25px 0; width:101px; height:126px; color:#fff;}
#member .small_list .list:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-shadow:inset 0 0 0 1px #358088;}
#member .small_list .list.active:before{box-shadow:inset 0 0 0 5px #193473; transition:0.3s ease-in-out;}
#member .small_list img{width:100%; height:100%;}

@media all and (max-width:1440px) {
	#member .inner{padding:0 485px 0 20px;}
	#member .big_wrap{right:20px;}
	#member .more{right:20px;}
}
@media all and (max-width:1024px) {
	#member{padding:65px 0; border-radius:80px 0 0 0;}
	#member .inner{padding:0 360px 0 15px;}
	#member h3{height:auto; padding:0 0 40px;}

	#member .small_wrap{margin:0;}
	#member .small_list .list{width:71px; height:92px; margin:0 4px 20px 0;}

	#member .big_wrap{right:15px; width:330px;}
	#member .big_list .list{height:243px; padding:24px 133px 0 23px;}
	#member .pic{top:24px; right:20px; height:137px;}
	#member .txt .name{font-size:18px;}
	#member .control{left:23px; bottom:20px;}
    #member .more{top:-82px; right:15px}
}
@media all and (max-width:768px) {
    #member{background-size:200px auto;}
    #member h3{padding:0 0 25px;}
    #member .more{top:-62px;}
	#member .inner{padding:0 15px 0 11px;}
	#member .big_wrap{position:relative; right:0; margin:0 auto 20px;}
	#member .big_list .list{height:216px; padding:21px 130px 0 23px;}
	
	#member .txt li{padding:0 0 8px 14px; font-size:15px;}
	#member .txt li:before{top:3px;}
	#member .txt .name{padding:5px 0 12px; font-size:17px;}    
	#member .small_list{display:flex; flex-wrap:wrap; justify-content:center;}
	#member .small_list .list{width:58px; height:66px;}
}
@media all and (max-width:568px) {
	#member{padding:50px 0 60px; border-radius:50px 0 0 0;}
	#member h3{padding:0 0 20px 15px;}
    #member .more{top:-52px;}
	#member .small_list .list{width:52px; height:61px; margin:6px 0 0 3px;}
}
@media all and (max-width:490px) {
	#member .inner{padding:0 15px 0 12px;}
	#member .big_wrap{right:0; width:calc(100% - 3px); margin:0 0 8px 0;}
	#member .small_list .list{width:calc(12.5% - 3px); height:55px;}
	#member .small_list .list.active:before{box-shadow:inset 0 0 0 4px #193473;}
}
@media all and (max-width:380px) {
	#member .big_list .list{height:198px; padding:18px 120px 0 20px;}
	#member .pic{top:18px; right:17px; height:127px;}
	#member .txt li{padding:0 0 8px 12px;}
	#member .small_list .list{height:46px; margin:5px 0 0 3px;}
}
@media all and (max-width:330px) {
	#member .small_list .list{height:42px;}
}

/* 사진첩 */
#gallery{overflow:hidden; position:relative; float:left; width:100%; height:604px; padding:83px 0 0 0; box-sizing:border-box; background:#f1f8f9;}
#gallery .inner{width:1460px; padding:0 30px;}
#gallery h3{height:91px; text-align: center;}
#gallery h3 span{color: #32949f;}
#gallery .list_wrap{clear:both;  width:calc(100% + 40px);} 
#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% - 40px); margin:0 40px 0 0;  text-decoration:none;}
#gallery .list a *{display:block;}
#gallery .list img{display:inline; width:100%; transition:0.25s ease;}
#gallery .img{display:flex; align-items:center; vertical-align:middle; position:relative; overflow:hidden; max-height:236px; border-radius:10px; box-sizing: border-box;}
#gallery a:hover img,
#gallery a:focus img{transform:scale(1.1);}
#gallery a:hover .img{border-color: #bcc3ce;}
#gallery .sbj{height:78px; padding:24px 0 0 0; box-sizing: border-box;}
#gallery .sbj:before,
#gallery .sbj:after{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#ddd;}
#gallery .sbj:before{z-index:1; opacity:0; visibility:hidden; width:0; height:2px; background:#32949f;}
#gallery a:hover .sbj:before{opacity:1; visibility:visible; width:100%; transition:width 0.5s linear;}
#gallery .date{float:left; line-height:100%; color:#666; font-size:14px; font-weight:300;}
#gallery .new{float:right; display:block; width:16px; height:17px; line-height:17px; border-radius:3px; font-size:12px; text-align:center; color:#fff; letter-spacing:0; background:#f5434a; text-transform:uppercase;}
#gallery .control{z-index:51; position: absolute; left:0; top:calc(50% - 30px); width:100%;}
#gallery .control button{left:0; width:60px; height:60px;}
#gallery .control button.slick-disabled:before{opacity:0.3;}
#gallery .control .btn_next{left:auto; right:0;}
#gallery .control button:before{content: ''; display: block; width:17px; height:17px; margin:0 0 0 24px; border-top:2px solid #333; border-right:2px solid #333; transform:rotate(-135deg);}
#gallery .control .btn_next:before{left:auto; right:0; margin:0 0 0 17px; transform:rotate(45deg);}
#gallery .control button:not(.slick-disabled):hover:before{border-color: #32949f;}
#gallery .more{position: absolute; right:24px; top:-5px;}
@media all and (max-width:1520px){
    #gallery{padding-left:20px; padding-right:20px;;}
    #gallery .inner{width:100%;}
}
@media all and (max-width:1024px){
	#gallery{height:auto; padding:60px 5px 65px;}
    #gallery .inner{padding:0 22px;}
	#gallery h3{height:auto; padding:0 0 32px;}
    #gallery .list_wrap{width:calc(100% + 25px);} 
	#gallery .list a{width:calc(100% - 25px); margin:0 25px 0 0;}
	#gallery .img{max-height:187px;}
    #gallery .sbj{height:60px; padding:20px 0 0 0;}
    #gallery .control{top:calc(50% - 23px);}
    #gallery .control button{width:45px; height:45px;}
    #gallery .control button:before{margin:0 0 0 17px;}
    #gallery .control .btn_next:before{margin:0 0 0 10px;}
    #gallery .more{top:-8px; right:20px;}
}
@media all and (max-width:768px){
    #gallery .list_wrap{width:calc(100% + 20px);} 
    #gallery .list a{width:calc(100% - 20px); margin:0 20px 0 0;}
	#gallery .img{max-height:160px;}
    #gallery .sbj{height:50px; padding:15px 0 0 0;}
}
@media all and (max-width:568px){
    #gallery{padding:50px 5px 55px;}
    #gallery h3{padding:0 0 25px;}
}