@charset "utf-8";

.content_title h2{text-align: center; display: block; font-size: 200%; font-weight: 700;}

#page h3 { color:#333; font-size:140%;}
#page h3 span { padding-left:5px; font-size:65%; font-weight: 400; color:#666}

/* 의장인사말 */

.p0101 .greating{position: relative;}
.p0101 .greating:before {content:''; position: absolute; left:0; right:0; bottom:0; height:200px; transition: all 0.3s ease-out;}
.p0101 .greating .content_wrap{position: relative; display: flex; flex-wrap: wrap;}
.p0101 .greating .content_wrap .img, .p0101 .greating .content_wrap .txt{width:50%}
.p0101 .greating .content_wrap .name{position:absolute; bottom:0px; left:0; right:0%; height:200px; color:#fff; font-size: 130%; padding:50px 50px; background:url(/images/main/contents/p0101_mark.png) center right no-repeat; }
.p0101 .greating .content_wrap .name span{display:block; padding-left:50%; transition: all 0.3s ease-out;}
.p0101 .greating .content_wrap .name i{font-family:'Nanum Brush Script', cursive; font-size: 200%; display: inline-block; padding-left:20px}
.p0101 .greating .content_wrap .txt{padding-top:8%}
.p0101 .greating .content_wrap .txt strong{font-size:170%; font-weight: 700;}
.p0101 .greating .content_wrap .txt strong span{color:#333; font-size:130%; display: block;}
.p0101 .greating .content_wrap .txt em{font-size:130%; padding-top:7%; display: block;}



.greating_2{position: relative;}
.greating_2 .content_wrap{position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;}
.greating_2 .content_wrap .img{width:40%;position: relative; height: auto;}
.greating_2 .content_wrap .img div {position: relative; z-index:55;}
.greating_2 .content_wrap .img::before {content: ''; position: absolute; left:20px; right:-20px;; top:20px; bottom:-20px; background-color: rgba(0,0,0,0.1);}
.greating_2 .content_wrap .img::after {content: ''; position: absolute;  bottom:-100px; height:200px; right:50px; left:-100%; z-index: 3; background-image:url(/images/main/contents/p0101_mark.png); background-position: center 50%; background-repeat: no-repeat;}
.greating_2 .content_wrap .img img{width:100%; position: relative; z-index:55;}
.greating_2 .content_wrap .txt{width:50%}
.greating_2 .content_wrap .txt{padding-top:10px}
.greating_2 .content_wrap .txt strong{font-size:170%; font-weight: 700;}
.greating_2 .content_wrap .txt strong span{color:#333; font-size:150%;}
.greating_2 .content_wrap .txt em{font-size:130%;  font-weight: 700; padding-bottom:4%; display: block; color:#666; }
.greating_2 .content_wrap .txt p{font-size:110%; position: relative; color:#666; padding-top: 40px; margin-top: 30px; font-weight:400; line-height:130%}
.greating_2 .content_wrap .txt p::before{content: ''; position: absolute; top:0; height: 2px; left:-50%; right:70%; }

/* 역대의원 */
.allDaesoo {padding-right: 700px; margin-left: 20px;}

/* 청원절차 */
.petition_step {margin:0 10%;}
.petition_step > li{position: relative; display: flex; margin:20px 0; justify-content:space-between; flex-wrap: nowrap;}
.petition_step > li:first-child{margin-top:0;}
.petition_step > li:last-child{margin-bottom:0;}
.petition_step dl, .petition_step i span{position: relative; line-height: 20px;color:#fff;  text-align: center; border-radius: 10px; margin:10px 0; box-shadow: 3px 3px 7px rgba(0,0,0,0.1);z-index:99;}
.petition_step dl {width:60%; }
.petition_step dl dt {text-align:center !important}
.petition_step dl dt, .petition_step dl dd{ padding:15px 20px;}
.petition_step dl dd {background:#f1f2f5; color:#333; text-align: left;  border-radius:0 0 10px 10px; border-top:none}
.petition_step li:first-child dl , .petition_step li:last-child dl  {background:#2e2e75 !important}
.petition_step i {width:30%; position: relative; }
.petition_step i span{ background:#3372d0; position: relative; display:block; padding:15px 10px;text-align:center !important}
.petition_step i:before {content: ''; position: absolute; left:-33%; top:35px; height:1px; right:0; background:#ccc; z-index:9; }
.petition_step .style01{background:#d24468}
.petition_step > li:after {content:'\f078';font-size:25px; position: absolute; left:29%; bottom:-20px;  color:rgba(0,0,0,0.6); font-family: 'FontAwesomeS'; }
.petition_step > li:last-child:after {display:none}

/* 윤리강령 */
.principle  {background-image: url(/images/main/contents/p0203_bg.png); background-position: right bottom; background-repeat: no-repeat;}
.principle .center {padding:2% 3% 5% 3%; font-size: 110%;}
.principle .box {background:rgba(255,255,255,0.9); padding:4% 5%; border-top:1px solid #666; margin:0 3% 3% 3%}
.principle h3 {padding:0 !important; text-align: center; display:inline-block !important; font-size: 170% !important;}
.principle h3 i{position: relative;}
.principle h3:before {position: absolute; top:auto !important; left:0 !important; right:0 !important; bottom:0px !important; height:1px !important; width:auto !important;  border-radius: 0 !important; border:none !important; border-bottom:14px solid !important; opacity: 0.7; background: none !important}
.principle p { text-align: center;}
.principle ol {counter-reset: principle; }
.principle ol li {list-style:none; position:relative; padding-left:60px; margin:30px 0; font-weight: 400; font-size: 120%; border-bottom:1px dashed #ccc; padding-bottom:30px}
.principle ol li:last-child {border-bottom:none; padding-bottom:0px}
.principle ol li:before { counter-increment: principle; content: counter(principle,decimal); font-weight: 400; position: absolute; left:0; top:0; width:35px; line-height:35px; background:#777; color:#fff; text-align: center; border-radius: 50%; background-color: #2e2e75 ; }

/* 청사안내 */
.office_map .box{padding:0 !important; display: flex; flex-wrap: wrap;}
.office_map .box .img{width:60%; text-align: center !important;}
.office_map .box .con{width:40%; background-color:#f1f2f5; padding:3% 4%;}
.office_map .box .con dt{font-size: 150%; font-weight: 700; margin-bottom:10px}


/* 의안처리절차 */
.bill_step {margin:0 10%;}
.bill_step > li {position: relative; margin:20px 0 }
.bill_step dl{position: relative; display: flex; margin:20px 0; justify-content:space-between; flex-wrap: wrap; }
.bill_step dl dt, .bill_step dd span{position: relative; line-height: 20px; border-radius: 10px; margin:10px 0; box-shadow: 3px 3px 7px rgba(0,0,0,0.1); padding:10px 20px;}
.bill_step dl dt{width:40%; color:#fff;  display:flex; justify-content:center;align-items:center; text-align:center !important}
.bill_step dl dd strong {margin-bottom:5px; display:block; font-size:90%}
.bill_step dl dd li{line-height:20px; font-size:90% }
.bill_step dl dd .num3 li{display:inline-block; margin-right:20px}

.bill_step dd {width:55%; position: relative; }
.bill_step dd .gray_box {padding:3px 10px !important; margin-top:10px}
.bill_step dd span{ background:#fff; position: relative; display:block; padding:15px 10px; border:1px solid #ddd}
.bill_step dd:before {content: ''; position: absolute; left:-9%; top:50%; height:1px; right:0; background:#ccc }
.bill_step > li:first-child dl dt, .bill_step > li:last-child dl dt  {}
.bill_step > li:after {content:'\f309';font-size:25px; position: absolute; left:19.5%; bottom:-20px;  color:rgba(0,0,0,0.6); font-family: 'FontAwesomeS'; }
.bill_step > li:last-child:after {display:none}

.bill_step li .w2 {display:flex; justify-content: space-between; margin: 0%; position: relative;}
.bill_step li .w2:before, .bill_step li .w2:after {content:'\f309'; font-size:25px; position: absolute; top:-20px;  color:rgba(0,0,0,0.6); font-family: 'FontAwesomeS'; }
.bill_step li .w2:before { left:30%; transform:rotate(45deg);}
.bill_step li .w2:after { right:30%; transform:rotate(-45deg);}
.bill_step li .w2 > li{width:48%; }
.bill_step li .w2 > li > .bill_step{margin:0%;}
.bill_step li .w2 > li > .bill_step dl{display:flex; flex-wrap: wrap;}
.bill_step li .w2 > li > .bill_step dl dt {text-align: center;}
.bill_step li .w2 > li > .bill_step dl dt, .bill_step li .w2 > li > .bill_step dl dd, .bill_step li .w2 > li > .bill_step dl dd span{width:100%; margin:1px 0; display: block;}
.bill_step li .w2 > li > .bill_step dl dd:before {display:none}
.bill_step li .w2 > li > .bill_step > li:after {content:'\f309';font-size:25px; position: absolute; left:48%; bottom:-20px;  color:rgba(0,0,0,0.6); font-family: 'FontAwesomeS'; }

.bill_step.type1 dt{background:#2e2e75 !important}
.bill_step.type2 dl dt{background: #3372d0 !important;}

.line_box2 {border:1px solid #ddd; padding:15px 10px;  box-shadow:4px 4px 5px rgba(0,0,0,0.04); }
.flex_list {display:flex;  justify-content: center; flex-wrap: wrap;}
.flex_list li{display:flex;  justify-content: space-around; padding:5px 10px; font-size: 85%;}
.board_img {display: block; text-align: center;}
.board_img img{border-radius: 10px; border: 1px solid #ccc; width:150px}
.board_img span{display: block;}
.board_img span strong{display: block; font-weight: 700; font-size: 130%;}


/* 배너모음 */
.banner_list .row > div{margin-bottom: 40px;}
.banner_list a{display: block; border: 1px solid #aaa;}
.banner_list a img{width:100%}
@media only screen and (max-width:761px){
    .banner_list .row .col_4{flex: 0 0 50%;  max-width:50%;}
}
@media only screen and (max-width:450px){
    .banner_list .row .col_4{flex: 0 0 100%;  max-width:100%;}
}   





@media only screen and (max-width:991px){
.line_box2 {padding:7px 5px;  box-shadow:4px 4px 5px rgba(0,0,0,0.04); }

.board_img img{width:100px}
}

@media only screen and (max-width:761px){
    .board_img img{width:70px}
    }
    





@media only screen and (max-width:991px){
    .p0101 .greating .content_wrap .txt{font-size: 80%;}
    .bill_step {margin:0%;}

    .greating_2{font-size: 80%;}

}

@media only screen and (max-width:761px){
    #page h3 span { display:block; padding:0}
    .petition_step {margin:0%;}
}

@media only screen and (max-width:700px){
    .p0101 .greating .content_wrap .img, .p0101 .greating .content_wrap .txt{width:100%}
    .p0101 .greating:before {height:50%;}
    .p0101 .greating .content_wrap .name{ bottom:270px; background: none; }
    .p0101 .greating .content_wrap .name span{padding-left:60%}
    .p0101 .greating .content_wrap {margin:0 -20px;}
    .p0101 .greating .content_wrap .txt{padding:50px 40px; background:#f6f6f6; font-size: 90%; }


    .greating_2 .content_wrap .txt, .greating_2 .content_wrap .img{width:90%; margin:0 auto}
    .greating_2 .content_wrap .img::after { bottom:-50px; height:100px; right:50px; left:-100%; z-index: 3; background-size: 90px auto;}
    .greating_2 .content_wrap .img div{height: 600px;  overflow: hidden;}
    .greating_2 .content_wrap .txt {margin-top:100px; font-size: 110%;}

    .office_map .box .img, .office_map .box .con{width:100%;}
    .office_map .box .con{ padding:5% 7%;}
    .office_map .box .con .list li{width:50%; float: left;}

    .bill_step > li > dl > dt, .bill_step > li > dl > dd, .bill_step > li > dl > dd span{width:100%; margin:1px 0; display: block;}
    .bill_step > li:after {left:48%}
    .bill_step > li > dl > dd:before {display:none}
    .bill_step > li > dl > dd li{line-height: 15px;}
    .bill_step > li > dl > dt{text-align: center;}
    .bill_step > li > .w2 { flex-wrap: wrap;}
    .bill_step > li > .w2 li{width:100%; }
    .bill_step > li > .w2:after { left:48%; transform:rotate(0deg);}
    .bill_step > li > .w2:before {display:none}
    .bill_step.type2 > li > .w2 > li{width:48% }
    .bill_step.type2 > li > .w2:before { left:30%; transform:rotate(45deg); display:block; top:-15px}
    .bill_step.type2 > li > .w2:after { right:30%; transform:rotate(-45deg); left:auto; top:-15px}
    
    .principle .box {padding:2% 3%; margin:0 0% 3% 0%}
    
}

@media only screen and (max-width:500px){
    .p0101 .greating:before {height:60%;}
    .p0101 .greating .content_wrap .name{ bottom:220px;  }
    .p0101 .greating .content_wrap .name span{padding-left:50%}
    
    .greating_2 .content_wrap .img div{height: 400px;  overflow: hidden;}

    .petition_step i span{padding:8px 5px;}    
    .petition_step i:before { top:28px; }

    .principle h3 {font-size: 140% !important;}
	.principle  {background-size:50% auto}
	.principle ol li {padding-left:50px; margin:10px 0; padding-bottom:10px; font-size:100%}    
}