

img{max-width:100%;}

.wrap{position: relative; width: 1200px; margin: 0 auto; box-sizing:border-box;}
#container{padding-bottom: 55px; word-break:keep-all;}

@media screen and (max-width:1200px) {
	.wrap{ width:96%;}
}
@media screen and (max-width:640px) {
	.wrap{ width:100%;}
}


.visual{background: url(../images/main/visual_bg02.jpg) no-repeat center top;}
.visual .wrap{height: 695px; padding-top: 115px; box-sizing:border-box;}
.visual .visual_text{position: absolute; top: 91px; right: 6px; width: 440px; height: 217px; background: url(../images/main/main_sprite.png) no-repeat -7px -5px;}
.visual .visual_text:before{display: block; content:''; position: absolute; bottom: -30px; left: 0; width: 600px; height: 1px; background-color: #000; opacity:0.33;}

@media screen and (max-width:1200px) {
	.visual{background-size:cover;}
	.visual .wrap{height:auto; padding: 45px 0;}
	.visual .visual_text{position: relative; top: 10px; right: auto; left: -70px; margin: 0 auto;}
	.visual .visual_text:before{display: none;}
}
@media screen and (max-width:640px) {
	.visual .wrap{padding: 41px 0 15px;}
	.visual .visual_text{left: -48px; transform:scale(0.58); transform-origin:top;}
}

/*의사일정*/
.visual .schedule {position: relative; width: 681px; height: 227px; padding: 40px 30px; box-sizing:border-box; background: url(../images/main/schedule_bg.png) no-repeat center;}
.visual .schedule .section_title{padding-left: 13px; font-size: 25px; color: #fff; line-height: 1;}
.visual .schedule .top_link{position: absolute; top: 40px; right: 30px;}
.visual .schedule .top_link li{float: left; position: relative; padding: 0 32px; }
.visual .schedule .top_link li:before{display: block; content:''; position: absolute; right: 0; top: calc(50% - 7px); width: 1px; height: 15px; background-color: #fff; opacity:0.2;}
.visual .schedule .top_link li:first-child:after{display: block; content:''; position: absolute; left: 0; top: calc(50% - 7px); width: 1px; height: 15px; background-color: #fff; opacity:0.2;}
.visual .schedule .top_link li a{color: #fff;}
.visual .schedule .top_link li a:after{display: inline-block; content:''; width: 11px; height: 11px; margin-left: 8px; background: url(../images/main/main_sprite.png) no-repeat -95px -256px; vertical-align: middle;}
.visual .schedule .list{margin-top: 40px; padding: 0 35px;}
.visual .schedule .list .slide a{display: block; height: 65px; color: #fff; line-height: 65px;}
.visual .schedule .list .slide .date{display: inline-block; width: calc(45% - 10px); font-size: 15px; line-height: 1.2; text-align: center; vertical-align: middle;}
.visual .schedule .list .slide .date em{display: inline-block; font-size: 46px; font-weight: 600;}
.visual .schedule .list .slide .text{display:inline-block; overflow: hidden; width: 55%; max-height: 65px; font-size: 22px; line-height: 1.5; vertical-align: middle;}
.visual .schedule .list .slick-arrow{display: block; position: absolute; top: calc(50% - 18px); width: 19px; height: 37px; background: url(../images/main/main_sprite.png) no-repeat; font-size: 0; color:transparent;}
.visual .schedule .list .slick-arrow.slick-prev{left: 0; background-position:-16px -256px}
.visual .schedule .list .slick-arrow.slick-next{right:0; background-position:-52px -256px;}

@media screen and (max-width:1200px) {
	.visual .schedule{width: 100%;  margin: 30px auto 0; background-size: cover;}
}
@media screen and (max-width:900px) {
	.visual .schedule{width:500px; padding: 40px 3%; }
	.visual .schedule .section_title{display: inline-block; padding-left: 0;}
	.visual .schedule .top_link{overflow-x: auto; width: calc(90% - 220px); padding-bottom: 20px;}
	.visual .schedule .top_link:before{display: block; content:''; visibility: visible; position: absolute; top: 0; right: 0; z-index: 10; width: 50px; height: 100%; background: linear-gradient(to right, rgba(13,65,111,0) 0%,rgba(13,65,111,1) 67%,rgba(13,65,111,1) 100%); opacity:1; transition:all 0.2s linear;}
	.visual .schedule .top_link.scroll_active:before{visibility: hidden; opacity:0;}
	.visual .schedule .top_link ul{width: 380px;}
	.visual .schedule .top_link li{padding: 0 20px;}
}
@media screen and (max-width:640px) {
	.visual .schedule{width:100%; height: 197px; margin-top: -57px; padding: 24px 7%;}
	.visual .schedule .section_title{font-size: 18px;}
	.visual .schedule .top_link{top: 24px; width:calc(76% - 100px);}
	.visual .schedule .top_link ul{width: 400px;}
	.visual .schedule .top_link li{padding:0 15px;}
	.visual .schedule .top_link li a{font-size: 18px;}
	.visual .schedule .list .slide a{height: auto; padding: 0 5px; line-height: normal;}
	.visual .schedule .list .slide .date{width: 100%; font-size: 18px; text-align: left;}
	.visual .schedule .list .slide .date em{font-size: 30px;}
	.visual .schedule .list .slide .text{width: 100%; max-height:51px; font-size: 16px;}
}
/* 배너 */
.visual_img{text-align: center; padding-top:10px;}

/*열린의장실*/
.visual .rowgroup {margin-top: 40px;}
.visual .chair{float: left; position: relative; width: 429px;  background: url(../images/main/chair_pattern.gif) repeat;}
.visual .chair:before{display: block; content:''; position: absolute; right: 0; bottom: 0; width: 193px; height: 223px; background:url(../images/main/chairman_img001.png) no-repeat right bottom;}
.visual .chair a{display: block; height: 260px; padding:42px calc(100% - 192px) 40px 44px; box-sizing:border-box; text-align: center; text-decoration: none;}
.visual .chair .section_title{position: relative; width: 109px; height: 23px; margin: 0 auto; background: url(../images/main/main_sprite.png) no-repeat -685px -9px;}
.visual .chair .section_title:after{display: block; content:''; position: absolute; bottom: -15px; left: calc(50% - 15px); width: 30px; height: 1px; background-color: #000; opacity:0.2;}
.visual .chair .title{margin-top: 33px; font-size: 18px; color: #000;}
.visual .chair .name{width: 111px; height: 39px; margin: 5px auto 0; background: url(../images/main/main_sprite01.png) no-repeat -683px -46px;}
.visual .chair .greeting{height: 43px; margin-top: 22px; border: 1px solid #999; font-size: 16px; font-weight: 600; color: #000; line-height: 43px; text-align: center;}
.visual .chair .greeting:before{display: inline-block; content:''; width: 15px; height: 23px; margin-right: 10px; background: url(../images/main/main_sprite.png) no-repeat -126px -256px; vertical-align: middle;}

@media screen and (max-width:1200px) {
	.visual .chair{width: 49%;}
}
@media screen and (max-width:900px) {
	.visual .rowgroup{margin-top: 30px;}
	.visual .chair{float: none; width:500px; margin: 0 auto;}
}
@media screen and (max-width:640px) {
	.visual .rowgroup{margin-top: 10px;}
	.visual .chair{width:100%; height: 210px; }
	.visual .chair:before{transform:scale(0.86); content:''; transform-origin:right bottom;}
	.visual .chair a{padding:28px 155px 0 0;}
	.visual .chair .section_title{transform:scale(0.8); transform-origin:center top;}
	.visual .chair .title{margin-top: 22px;font-size: 14px; font-weight: 600;}
	.visual .chair .name{transform:scale(0.86); transform-origin:center top;}
	.visual .chair .greeting{width: 118px; height: 38px; margin:13px auto; font-size: 15px; line-height: 38px;}
}

/*아이콘 링크*/
.visual .icon_link{float: right; width: 741px; height: 260px; padding:66px 21px 0; box-sizing:border-box; border-radius: 0 50px 0 0; background:#07a455 url(../images/main/icon_bg.png) no-repeat center bottom; }
.visual .icon_link ul li{float: right; width: 20%;}
.visual .icon_link ul li a{display: block;  color: #111;}
.visual .icon_link ul li a span{display: block; margin: 0 auto;}
.visual .icon_link ul li a span.icon{width: 104px; height: 104px; border-radius:80px; background-color: #0a7942; text-align: center; line-height: 104px;}
.visual .icon_link ul li a span.icon:before{display: inline-block; content:''; background: url(../images/main/main_sprite.png) no-repeat; vertical-align: middle;}
.visual .icon_link ul li a span.icon1:before{width: 54px; height: 63px; background-position:-363px -243px;}
.visual .icon_link ul li a span.icon2:before{width: 52px; height: 58px; background-position:-453px -243px;;}
.visual .icon_link ul li a span.icon3:before{width: 52px; height: 53px; background-position:-542px -244px;}
.visual .icon_link ul li a span.icon4:before{width: 43px; height: 60px; background-position:-636px -243px;}
.visual .icon_link ul li a span.icon5:before{width: 49px; height: 52px; background-position:-722px -247px;}
.visual .icon_link ul li a span.text{margin-top: 15px; font-size: 17px; color: #111; text-align: center;}

@media screen and (max-width:1200px) {
	.visual .icon_link{position: relative; width: 49%; border-radius:0;}
	.visual .icon_link:before{display: block; content:''; visibility: visible; position: absolute; top: 0; right: 0; z-index: 10; width:100px; height: 100%; background:  linear-gradient(to right, rgba(9,167,87,0) 0%,rgba(10,137,73,1) 60%,rgba(10,122,66,1) 100%); opacity:1; transition:all 0.2s linear;}
	.visual .icon_link.scroll_acitve:before{visibility: hidden; opacity:0;}
	.visual .icon_link .inner{overflow-x: auto; position: relative; width: 100%; padding-bottom: 30px;}
	.visual .icon_link ul{width:620px;}
}
@media screen and (max-width:900px) {
	.visual .icon_link{float: none; width: 500px; margin: 30px auto;}
}
@media screen and (max-width:640px) {
	.visual .icon_link{width: 100%; height: 160px; margin-top: 10px; padding: 25px 0 0;}
	.visual .icon_link:before{width: 50px; content:'';}
	.visual .icon_link .inner{padding-bottom: 5px;}
	.visual .icon_link ul{min-width:590px;}
	.visual .icon_link ul li a span.icon{width: 83px; height: 83px; line-height:90px;}
	.visual .icon_link ul li a span.icon:before{transform:scale(0.8); content:'';}
	.visual .icon_link ul li a span.text{font-size: 15px;}
}


/*현역의원 소개*/
.introduce{float: left; position: relative; width: 523px; height: 418px; padding: 45px 50px 0 0; box-sizing:border-box; }
.introduce:before{display: block; content:''; position: absolute; top: 0; right: 0; z-index: -1; width: 800px; height: 100%; border-radius:0 0 50px 0; background: #eeee url(../images/main/introduce_bg.png) no-repeat right center;}
.introduce .section_title{font-size: 30px; font-weight: 600; color: #000;}
.introduce .list{ height: 260px; margin-top: 20px; padding:38px 52px 38px 42px; box-sizing:border-box; background: linear-gradient(135deg, #7c90e7 0%,#63ade7 50%,#48d5e6 100%);}
.introduce .list .slide{position: relative; min-height:200px; padding-left: 210px;} 
.introduce .list .slide .photo_area{position: absolute; top: 0; left: 0; width: 181px; height: 181px; border-radius: 100px; box-shadow:10px 10px 0 rgba(0,0,0,0.15);}
.introduce .list .slide .text_area{padding-top: 20px; text-align: center;}
.introduce .list .slide .text_area .name{font-size: 28px; color: #000;}
.introduce .list .slide .text_area .text{margin-top: 17px;}
.introduce .list .slide .text_area .text li{margin-top: 2px; font-size: 16px; color: #000;}
.introduce .list .slide .text_area .more{display: block; height: 43px; margin-top: 18px; border: 1px solid rgba(0,0,0,0.4); font-size: 16px; font-weight: 600; color: #000; line-height: 43px; text-align: center; text-decoration: none;}
.introduce .list .slide .text_area .more:before{display: inline-block; content:''; width: 22px; height: 19px; margin-right: 10px; background: url(../images/main/main_sprite.png) no-repeat -152px -257px; vertical-align: middle;}
.introduce .control{position: absolute; top:55px; right: 50px;}
.introduce .control button{display: block; float: left; width: 12px; height: 23px; margin-left: 12px; background: url(../images/main/main_sprite.png) no-repeat; font-size: 0; color: transparent;;}
.introduce .control button.prev{background-position:-14px -319px;}
.introduce .control button.pause{background-position:-47px -319px;}
.introduce .control button.play{display: none; background-position:-70px -319px;}
.introduce .control button.next{background-position:-98px -319px;}

@media screen and (max-width:1200px) {
	.introduce{width: 49%; padding-right: 2%;}
	.introduce .list{padding: 38px 2%;}
}
@media screen and (max-width:900px) {
	.introduce{width: 100%; border-radius:0; padding: 45px 0;}
	.introduce:before{right: -2vw; width: 900px; content:'';}
	.introduce .control{right: 0;}
}
@media screen and (max-width:640px) {
	.introduce{height: auto; padding: 26px 0 32px;}
	.introduce:before{right:-20px; border-radius:0; content:'';}
	.introduce .section_title{font-size: 18px;}
	.introduce .list{height: 170px; margin-top: 11px; padding:24px;}
	.introduce .list .slide{ min-height:130px; padding-left: 133px;} 
	.introduce .list .slide .photo_area{ width: 112px; height: 112px; box-shadow:7px 7px 0 rgba(0,0,0,0.15);}
	.introduce .list .slide .text_area{padding-top: 0;}
	.introduce .list .slide .text_area .name{font-size: 20px;}
	.introduce .list .slide .text_area .text{margin-top:11px;}
	.introduce .list .slide .text_area .text li{margin-top: 2px; font-size: 13px; }
	.introduce .list .slide .text_area .more{height: 38px; margin-top: 4px; font-size: 15px; line-height: 38px;}
	.introduce .control{top: 31px; right: 0; transform:scale(0.8); transform-origin:right top;}
}

/*의정활동 갤러리*/
.gallery{float: right; position: relative; width: 590px; margin: 45px 41px 0 0;}
.gallery .section_title{font-size: 30px; font-weight: 600; color: #000;}
.gallery .list{margin-top: 25px; }
.gallery .list li{float: left; }
.gallery .list li:last-child{float: right;}
.gallery .list li a{display: block; width: 275px; height: 282px; border: 1px solid #ddd; color: #222; text-decoration: none;}
.gallery .list li .img_area{overflow: hidden; height: 170px; line-height: 0;}
.gallery .list li .img_area img{width: 100%;}
.gallery .list li .text_area{ padding: 15px 25px; box-sizing:border-box; }
.gallery .list li .text_area .date{font-size: 15px; color: #6a6a6a;}
.gallery .list li .text_area .text{overflow: hidden; width: 100%; margin-top: 3px; font-size: 17px;  white-space:nowrap; text-overflow:ellipsis;}
.gallery .more{display: block; position: absolute; top: 5px; right: 0; width: 33px; height: 33px; background: url(../images/main/main_sprite.png) no-repeat -189px -255px;}

@media screen and (max-width:1200px) {
	.gallery{width: 49%; margin-right: 0;}
	.gallery .list li {width: 49%;}
	.gallery .list li a{width: 100%;}
}
@media screen and (max-width:900px) {
	.gallery{width: 100%;}
}
@media screen and (max-width:640px) {
	.gallery{margin-top: 25px;}
	.gallery .section_title{font-size: 18px;}
	.gallery .list{margin-top: 8px;}
	.gallery .list li {width: calc(50% - 10px);}
	.gallery .list li a{height: 162px;}
	.gallery .list li .img_area{height: 95px;}
	.gallery .list li .text_area{padding:10px 15px;}
	.gallery .list li .text_area .date{font-size: 13px;}
	.gallery .list li .text_area .text{margin-top: 0; font-size: 14px;}
	.gallery .more{transform:scale(0.5); transform-origin:right top;}

}

/* 공지사항 */
.board{float:left; position:relative; left: 18px; width:calc(100% - 36px); height:250px; margin-top: 55px;}
.board .list{position: relative;}
.board .list li.board_tab{display:inline; float: left; padding:0;}

.board .tabcontent{position: absolute; top: 54px; left:0; width:100%;  padding-top: 45px; box-sizing:border-box; }
.board .tabcontent:before{display: block; content:''; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 1px; background-color: #ddd;}
.board .tabcontent .first_content{float: left; width: 48%; padding-right: 40px; box-sizing:border-box;}
.board .tabcontent .first_content a{display: block; position: relative; padding-left: 150px; text-decoration: none;}
.board .tabcontent .first_content .icon{display: block; position: absolute; top:5px; left: 0; width: 119px; height: 119px; border: 1px solid #ccc; border-radius: 100px; text-align: center; line-height: 119px;}
.board .tabcontent .first_content .icon:before{display: inline-block; content:''; width: 59px; height: 46px; background: url(../images/main/main_sprite.png) no-repeat -281px -250px; vertical-align: middle;}
.board .tabcontent .first_content .title{overflow: hidden; width: 100%; font-size: 20px; font-weight: 600; color: #111; white-space:nowrap; text-overflow:ellipsis;}
.board .tabcontent .first_content .text{overflow: hidden; max-height: 45px; margin-top: 20px; font-size: 16px; color: #333; line-height: 1.5;}
.board .tabcontent .first_content a:hover .text{text-decoration: underline;}
.board .tabcontent .first_content .date{display: block; margin-top: 30px ;font-size: 16px; color: #555;}
.board .tabcontent ul{float: left; width: 52%; padding: 10px 0 10px 44px; border-left: 1px dotted #7f7f7f; box-sizing:border-box;}
.board .tabcontent ul li{ position:relative; width:100%; margin:2px 0; padding:0 0 0 18px; box-sizing:border-box;}
.board .tabcontent ul li:before{display:block; content:''; position:absolute; top:8px; left:0; width:4px; height:4px; background-color:#00c9c3;}
.board .tabcontent ul li a{display: inline-block; width: calc(100% - 150px); font-size: 17px; color:#333; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}
.board .tabcontent ul li .date{display: block; float:right; color:#555; font-size:16px;}


@media screen and (min-width:901px) {
	.board .list li.board_tab .tab_btn{display: block; position: relative; padding: 0 31px; color:#333; font-size:20px; line-height:1.2; text-align:center; text-decoration: none; letter-spacing: -1px;}
	.board .list li.board_tab:first-child .tab_btn{padding-left: 0;}
	.board .list li.board_tab .tab_btn:before{display: block; content:''; position: absolute; top: 20px; left: 0; width: 1px; height: 10px; background-color: #000; opacity:0.2;}
	.board .list li.board_tab:first-child .tab_btn:before{display: none;} 
	.board .list li.board_tab .tab_btn span{display: inline-block; position: relative; padding:10px 5px 20px; box-sizing:border-box;}
	.board .list li.board_tab .tab_btn span:after{display: block; content:'';  position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background-color: #00c9c3; transform:scaleX(0); transition:all 0.2s linear;}
	.board .list li.board_tab .tab_btn span br{display: none;}
	.board .list li.board_tab.active .tab_btn span{padding-top: 0; font-size: 30px; font-weight: 600; color: #000; transition:all 0.2s linear;}
	.board .list li.board_tab.active .tab_btn span:after{transform:scaleX(1);}

	.board .tabcontent .more{position: absolute; top: -50px; right:0px;}
	.board .tabcontent .more a{display:block; width:33px; height:33px; background:url(../images/main/main_sprite.png) no-repeat -189px -255px; font-size: 0; color: transparent;}
}
@media screen and (max-width:900px) {
	.board{left: 0; width: 100%; height:430px; border: 1px solid #ddd;}
	.board .list li.board_tab{width:33.33%;}
	.board .list li.board_tab .tab_btn{height: auto; padding: 0 5px; border-left: 1px solid #ddd;}
	.board .list li.board_tab .tab_btn:before{display: none;} 
	.board .list li.board_tab:first-child .tab_btn{border-left: none;}
	.board .list li.board_tab .tab_btn{display: block; position: relative; height: 68px; font-size: 17px; font-weight: 600; color: #333; line-height: 68px; text-align: center;}
	.board .list li.board_tab.active .tab_btn{font-size: 17px; font-weight: 600; color: #000;}
	.board .list li.board_tab .tab_btn span{display: inline-block; line-height: normal; vertical-align: middle;}
	.board .list li.board_tab .tab_btn:after{display: block; content:'';  position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background-color: #00c9c3; transform:scaleX(0); transition:all 0.2s linear;}
	.board .list li.board_tab.active .tab_btn:after{transform:scaleX(1);}
	.board .tabcontent{top: 68px; padding: 25px; height: 360px;}
	.board .tabcontent .first_content{float: none; width: 100%; padding-bottom: 15px; padding-right:0px}
	.board .tabcontent .first_content a{padding-left: 0;}
	.board .tabcontent .first_content .icon{display: none;}
	.board .tabcontent .first_content .title{font-size: 17px;}
	.board .tabcontent .first_content .text{margin-top: 8px; font-size: 15px; line-height: 1.3; max-height:40px}
	.board .tabcontent .first_content .date{margin-top: 5px; font-size: 14px;}
	.board .tabcontent ul{float: none; width: 100%; padding: 18px 0 0; border-top: 1px dotted #7f7f7f; border-left: none;}
	.board .tabcontent ul li:before{top: 6px; content:'';}
	.board .tabcontent ul li a{width: 100%; font-size: 15px; line-height: 1.2;}
	.board .tabcontent ul li .date{display: none;}
	.board .tabcontent .more{position: absolute; bottom: 0; left: 0; width: 100%; height: 47px; border-top: 1px solid #ddd;}
	.board .tabcontent .more a{display: block; width: 100%; height: 100%; font-size: 16px; color: #333; text-align: center; line-height: 47px;}
	.board .tabcontent .more a:after{display: inline-block; content:'';  width: 33px; height: 33px; background:url(../images/main/main_sprite.png) no-repeat -189px -255px; vertical-align: middle; transform:scale(0.5);}
}
@media screen and (max-width:640px) {
	.board{margin-top: 20px;}
	.board .list li.board_tab .tab_btn{padding: 0;}
}