@charset "utf-8";
#container_main {min-height:300px;}

/* 비주얼 */
#visual {position:relative; width:100%; height:390px; background:url("/images/ch/main/visual_bg.jpg") center center repeat-x;}
#visual .img_kids {position:absolute; left:50%; bottom:0; margin:0 0 0 -566px;}
#visual .img_txt1 {position:absolute; top:96px; left:50%; margin:0 0 0 171px;}
#visual .img_txt2 {position:absolute; top:146px; left:50%; margin:0 0 0 171px;}
#visual .visual_txt {display:inline-block; position:absolute; top:50%; left:50%; width:406px; margin:0 0 0 174px; word-break: keep-all;}

/* 의회소개 */
#introduce {position:relative; padding:58px 0px 100px; background-color:#c1efff; background-image:url("/images/ch/main/bg_pattern.jpg"); background-repeat:repeat-x; background-position:0 100%; box-sizing:border-box;}
#introduce .inner h3 {position:relative; margin-bottom:40px; font-size:36px; font-weight: 900; text-align:center; line-height:100%;}
#introduce .inner h3:before {display: inline-block; vertical-align: middle; margin: 0 25px 20px -20px; width: 84px; height: 66px; background-image: url(/images/ch/main/icon_1.png); background-repeat: no-repeat; background-size: contain; content: "";}
#introduce .inner .wrapper {position:relative;}
#introduce .inner .wrapper .left {position:relative; z-index:9; float:left; width:557px; height:367px;}
#introduce .inner .wrapper .left img {position:absolute; top:0; left:0; width:100%;}
#introduce .inner .wrapper .left:after {display:block; position:absolute; z-index:-1; top:20px; left:20px; width:100%; height:100%; background-color:#cedaff; content:"";}
#introduce .inner .wrapper .right {position:relative; z-index:2; float:right; width:557px;}
#introduce .inner .wrapper .right .top_img {position:relative; width:100%; height:80px;}
#introduce .inner .wrapper .right .top_img img {position:absolute; top:50%; transform:translateY(-30%);}
#introduce .inner .wrapper .right > p {font-size:17px; word-break:keep-all;}
#introduce .inner .wrapper .right .list_box {width:100%;}
#introduce .inner .wrapper .right .list_box ul {width:100%;}
#introduce .inner .wrapper .right .list_box ul:after{content: ""; display: block; clear: both;}
#introduce .inner .wrapper .right .list_box ul li {position:relative; float:left; width:140px; margin-right:calc(137px / 2); padding-top:46px; text-align:center; box-sizing:border-box;}
#introduce .inner .wrapper .right .list_box ul li:last-of-type {margin-right:0;}
#introduce .inner .wrapper .right .list_box ul li:nth-of-type(1) .circle_box,
#introduce .inner .wrapper .right .list_box ul li:nth-of-type(1) .circle_box:after {background-color:#00956d;}
#introduce .inner .wrapper .right .list_box ul li:nth-of-type(2) .circle_box,
#introduce .inner .wrapper .right .list_box ul li:nth-of-type(2) .circle_box:after {background-color:#df4d3a;}
#introduce .inner .wrapper .right .list_box ul li:nth-of-type(3) .circle_box,
#introduce .inner .wrapper .right .list_box ul li:nth-of-type(3) .circle_box:after {background-color:#9047f3;}
#introduce .inner .wrapper .right .list_box ul li:hover > a .text_box strong {text-decoration:underline;}
#introduce .inner .wrapper .right .list_box ul li .circle_box {display:inline-block; position:relative; width:131px; height:131px; border-radius:50%; transition:0.3s ease;}
#introduce .inner .wrapper .right .list_box ul li .circle_box:after {position:absolute; left:50%; bottom:-10px; width:15px; height:15px; content:""; transform:rotate(45deg) translateX(-50%);}
#introduce .inner .wrapper .right .list_box ul li .circle_box img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
#introduce .inner .wrapper .right .list_box ul li .text_box {display:inline-block; width:100%; padding-top:16px; font-size:24px; font-weight:700;}
#introduce .inner .wrapper .right .list_box ul li .text_box strong {display:block; width:100%;}

/* 모의의회 견학 갤러리 */
#gallery {position:relative; height:525px; padding: 58px 0 77px; background-image:url("/images/ch/main/bg_pink2.jpg"); box-sizing:border-box;}
#gallery .inner{position: relative;}
#gallery .inner h3 {position:relative; margin: 0 0 50px; padding: 0 3% 0 0; font-weight: 900; font-size:36px; text-align:center; line-height:100%;}
#gallery .inner h3:before {display: inline-block; vertical-align: middle; margin: 0 23px 4px -20px; width: 84px; height: 66px; background-image: url(/images/ch/main/icon_2.png); background-repeat: no-repeat; background-size: contain; content: "";}
#gallery .inner h3 span {font-weight:lighter;}
#gallery .inner .wrapper{overflow:hidden; width:100%; text-align:center;}
#gallery .inner .wrapper .gallery_item {display:inline-block; float:left; width:287px; background-color:#ddd; transition:box-shadow 0.3s;}
#gallery .inner .wrapper .gallery_item:nth-child(1),
#gallery .inner .wrapper .gallery_item:nth-child(2),
#gallery .inner .wrapper .gallery_item:nth-child(3) {margin-right:calc(52px / 3);}
#gallery .inner .wrapper .gallery_item:hover {box-shadow:5px 5px 7px #8f8f8f;}
#gallery .inner .wrapper .gallery_item .top_img {display:inline-block; width:100%;}
#gallery .inner .wrapper .gallery_item .top_img img {width:100%;}
#gallery .inner .wrapper .gallery_item .bottom_text {display:inline-block; width:100%; padding:9px 18px; background-color:#fff; box-sizing:border-box;}
#gallery .inner .wrapper .gallery_item .bottom_text strong {display:inline-block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#gallery .inner .wrapper .gallery_item .bottom_text .date {display:inline-block; position:relative; width:100%; font-size:13px; text-align:right;}
#gallery .inner .wrapper .gallery_item .bottom_text .date:before {display:inline-block; position:absolute; top:50%; width:13px; height:11px; background-image:url("/images/ch/main/icon_calendar.png"); background-size:contain; content:""; transform:translateY(-56%) translateX(-170%);}
#gallery .inner .more{position: absolute; display: block; top: 14px; left: 50%; width: 36px; height: 36px; margin:0 0 0 190px; font-size:0; text-indent:-999px; background: url(/images/ch/main/icon_more.png);}
#gallery p.empty{padding:30px 0 0 0; box-sizing: border-box;}
@media all and (max-width:1220px) {
    #introduce .inner .wrapper {position:relative; width:100%; padding:0 0 0 500px; box-sizing:border-box;}
    #introduce .inner .wrapper .left {position:absolute; top:0; left:0; float:left; width:470px; height:310px;}
    #introduce .inner .wrapper .right {width:100%;}
    #introduce .inner .wrapper .right .top_img,
    #introduce .inner .wrapper .right > p {padding-left:20px;}
    #introduce .inner .wrapper .right .list_box ul li {width:30%; margin-right:5%;}
    #gallery {height:auto;}
    #gallery .inner .wrapper .gallery_item {width:24%;}
    #gallery .inner .wrapper .gallery_item:nth-child(1),
    #gallery .inner .wrapper .gallery_item:nth-child(2),
    #gallery .inner .wrapper .gallery_item:nth-child(3) {margin-right:calc(4% / 3);}
}
@media all and (max-width:1200px) {
    #visual .img_kids {left:2%; width:600px; margin:0 0 0 0px;}
    #visual .img_txt1 {top:110px;}
    #visual .img_txt1,
    #visual .img_txt2 {left:50%; height:30px; margin:0 0 0 100px;}
    #visual .visual_txt {width:300px; margin:0 0 0 103px;}
    #introduce .inner h3,
    #gallery .inner h3 {font-size:28px;}
    #introduce .inner h3:before{width:50px; height:40px; margin: 0 15px 10px -10px;}
    #gallery .inner h3:before{width:50px; height:40px; margin: 0 12px 5px 6px;}
    #gallery .inner .more{top: 5px; left: 50%; margin:0 0 0 144px; width: 26px; height: 26px; background-size: contain;}
}
@media all and (max-width:1024px) {
    #introduce {padding:52px 0px 41px;}
    #introduce .inner h3 {margin-bottom:30px;}
    #introduce .inner .wrapper {padding:0; overflow:hidden;}
    #introduce .inner .wrapper .left {display:block; position:relative; width:calc(100% - 20px); height:50vw; margin:0 auto; padding:0 0 0 0;}
    #introduce .inner .wrapper .left img {height:100%;}
    #introduce .inner .wrapper .right {margin-top:20px;}
    #introduce .inner .wrapper .right .top_img,
    #introduce .inner .wrapper .right > p {padding-left:0;}
    #introduce .inner .wrapper .right .top_img img {left:50%; width:50%; transform:translateX(-50%);}
    #introduce .inner .wrapper .right > p {padding:0 40px; font-size:15px; text-align:center; line-height:150%;}
    #introduce .inner .wrapper .right .list_box ul li .text_box {font-size:20px;}
    #gallery {height:auto; padding:52px 0px 41px;}
    #gallery .inner h3 {margin-bottom:30px;}
    #gallery .inner .wrapper {overflow:hidden; text-align:center;}
    #gallery .inner .wrapper .gallery_item {width:48%; margin-bottom:10px;}
    #gallery .inner .wrapper .gallery_item:nth-child(2) {margin-right:0;}
    #gallery .inner .wrapper .gallery_item:nth-child(2n) {float:right;}
    #gallery .inner .more{top: 5px;}
}
@media all and (max-width:1024px) {
    #visual .img_kids {width:500px;}
}
@media all and (max-width:840px) {
    #visual .img_kids {left:50%; width:450px; transform:translateX(-50%);}
    #visual .img_txt1 {top:50px; left:50%; margin:0 0 0 0; transform:translateX(-50%);}
    #visual .img_txt2 {top:90px; left:50%; margin:0 0 0 0; transform:translateX(-50%);}
    #visual .visual_txt {display:inline; top:33%; left:0%; width:100%; margin:0; padding:0 10px; text-align:center; transform:translateX(-0%); box-sizing:border-box;}
    #introduce .inner h3,
    #gallery .inner h3 {font-size:22px;}
    #introduce .inner h3:before,
    #gallery .inner h3:before {width:40px; height:32px;}
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(1) .circle_box,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(2) .circle_box,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(3) .circle_box {width:100px; height:100px;}
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(1) .circle_box img,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(2) .circle_box img,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(3) .circle_box img {width:50%;}
    #gallery .inner .wrapper .gallery_item .bottom_text {padding:10px 12px;}
    #gallery .inner .more{top: 6px; margin:0 0 0 118px; width: 20px; height: 20px;}
}
@media all and (max-width:768px) {
    #gallery .inner h3 {padding: 0 6% 0 0;}
    #gallery .inner .more{top: 5px; margin:0 0 0 114px;}
}
@media all and (max-width:700px) {
    #introduce .inner .wrapper .right .top_img img {width:70%;}
}
@media all and (max-width:500px) {
    #visual .visual_txt > br {word-break:keep-all;}
    #introduce .inner .wrapper .right .list_box ul li {padding-top:20px;}
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(1) .circle_box,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(2) .circle_box,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(3) .circle_box {width:70px; height:70px;}
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(1) .circle_box img,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(2) .circle_box img,
    #introduce .inner .wrapper .right .list_box ul li:nth-of-type(3) .circle_box img {width:50%;}
    #introduce .inner .wrapper .right .list_box ul li .text_box {font-size:15px;}
    #gallery .inner .more{margin-top: 2px;}
    #gallery .inner h3 {padding: 0 7% 0 0;}
}
@media all and (max-width:500px) {
    #introduce .inner h3:before{margin:0 5px 10px -10px;}
    #gallery .inner h3:before{margin:0 0 5px 6px;}
}