@charset "utf-8";

#fs_content {min-height:518px;}

/* 비주얼 */
.fs_main_visual {position:relative;}
.fs_main_visual:before {content:"";z-index:-1;display:block;position:absolute;top:0;left:0;width:100%;height:480px;background:url("../images/main/mvis_pattern.gif") repeat left top;}
.fs_main_visual .wrap {display:flex;flex-flow:row nowrap;justify-content:space-between;min-height:520px;}
.fs_main_visual .wrap > div {flex:1 1 50%;position:relative;width:50%;}

.mvis_area:before {content:"";z-index:-1;display:block;position:absolute;top:0;right:-40px;width:1000px;height:520px;border-radius:0 30px 30px 0;background:url("../images/main/mvis.png") no-repeat right top;background-size:cover;}
.mvis_area:after {content:"";z-index:-1;display:block;position:absolute;right:0;bottom:50px;width:333px;height:318px;background:url("../images/main/mvis_icon.png") no-repeat left top;}
.mvis_area p {color:#000;font-family:"GmarketSans",sans-serif;font-weight:500;}
.mvis_area strong {color:#2672ab;font-family:"GmarketSans",sans-serif;font-size:1.371em;font-weight:700;}
.mvis_area .txt1 {margin-top:100px;font-size:1.5em;}
.mvis_area .txt2 {position:relative;margin-top:15px;font-size:2.188em;}
.mvis_area .txt2:before {content:"";display:block;position:absolute;top:-45px;left:288px;width:51px;height:40px;background:url("../images/main/mvis_deco.png") no-repeat left top;}
.mvis_area .txt3 {margin-top:32px;color:#333;line-height:1.4;font-size:1.25em;}
.mvis_area .txt3 em {color:#00acb3;}

/* 바로가기 */
.quick_area {padding-top:80px;padding-left:100px;}
.quick_area ul {display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);place-items:center center;gap:20px 20px;}
.quick_area li {width:100%;}
.quick_area li a {display:block;position:relative;height:170px;padding:30px 25px 10px 25px;border-radius:30px;background:#fff;color:#333;line-height:1.5;font-weight:600;box-shadow:4px 4px 20px rgba(0,0,0,0.1);transition:background 300ms ease-in-out;word-break:keep-all;}
.quick_area li a:before {content:"";display:block;position:absolute;right:25px;bottom:25px;width:50px;height:50px;background:no-repeat left top;transition:all 300ms ease-in-out;}
.quick_area li:nth-child(1) a:before {background-image:url("../images/main/quick_ico1.png");}
.quick_area li:nth-child(2) a:before {background-image:url("../images/main/quick_ico2.png");}
.quick_area li:nth-child(3) a:before {background-image:url("../images/main/quick_ico3.png");}
.quick_area li:nth-child(4) a:before {background-image:url("../images/main/quick_ico4.png");}
.quick_area li:nth-child(5) a:before {background-image:url("../images/main/quick_ico5.png");}
.quick_area li:nth-child(6) a:before {background-image:url("../images/main/quick_ico6.png");}
.quick_area li a:hover {background:url("../images/main/quick_ov.png") no-repeat center center;background-size:cover;color:#fff;}
.quick_area li:nth-child(1) a:hover:before {background-image:url("../images/main/quick_ico1_ov.png");}
.quick_area li:nth-child(2) a:hover:before {background-image:url("../images/main/quick_ico2_ov.png");}
.quick_area li:nth-child(3) a:hover:before {background-image:url("../images/main/quick_ico3_ov.png");}
.quick_area li:nth-child(4) a:hover:before {background-image:url("../images/main/quick_ico4_ov.png");}
.quick_area li:nth-child(5) a:hover:before {background-image:url("../images/main/quick_ico5_ov.png");}
.quick_area li:nth-child(6) a:hover:before {background-image:url("../images/main/quick_ico6_ov.png");}

/* 자치법규 게시판 */
.notice_area {margin:80px 0;text-align:center;}
.notice_area .tab_btn {display:inline-block;border-radius:60px;background:#f6f6f6;}
.notice_area .tab_btn > div {overflow:hidden;display:inline-block;position:relative;padding:20px 30px;color:#666;font-size:1.25em;font-weight:400;cursor:pointer;text-transform:uppercase;transition:all 300ms ease-in-out;}
.notice_area .tab_btn > div.active {border-radius:60px;background:#00acb3;color:#fff;font-weight:600;}
.notice_area .tab_cont {position:relative;height:275px;margin-top:30px;}
.notice_area .tab_cont > div {opacity:0;position:absolute;top:-999%;width:100%;transform:scale(0.9);transition:opacity 500ms ease-in-out 0ms,transform 500ms ease-in-out 0ms;}
.notice_area .tab_cont > div.active {top:0;opacity:1;transform:scale(1);}
.notice_area .notice_list {display:flex;flex-flow:row nowrap;justify-content:space-between;margin:0 -10px;}
.notice_area .notice_list li {flex:0 1 335px;width:25%;margin:0 10px;}
.notice_area .notice_list li > a {display:block;padding:30px;border:1px solid #ddd;border-radius:30px;line-height:1.3;text-align:left;word-break:keep-all;transition:all 300ms ease-in-out;}
.notice_area .notice_list li > a:hover {border-color:#00acb3;}
.notice_area .notice_list li > a span {display:block;}
.notice_area .notice_list li > a .tag {margin-bottom:18px;color:#666;font-size:0.875em;font-weight:600;}
.notice_area .notice_list li > a .tag.n1 {color:#005fa2;}
.notice_area .notice_list li > a .tag.n2 {color:#f47115;}
.notice_area .notice_list li > a .tag.n3 {color:#37b549;}
.notice_area .notice_list li > a .tag.n4 {color:#372f65;}
.notice_area .notice_list li > a .tit {margin-bottom:37px;color:#333;font-size:1.125em;font-weight:600;}
.notice_area .notice_list li > a .date {padding-left:20px;background:url("../images/main/date_ico.png") no-repeat left center;color:#666;font-size:0.875em;}
.notice_area .more {display:inline-block;position:relative;margin-top:50px;padding:0 25px 10px 0;background:url("../images/main/more.png") no-repeat right top;color:#00acb3;}
.notice_area .more:before {content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:1px;background:#ddd;transition:all 300ms ease-in-out;}
.notice_area .more:hover:before {background:#00acb3;}

/* 행정심판/소청심사 링크 */
.link_area {display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:96px;}
.link_area > div {z-index:0;position:relative;width:calc(50% - 10px);padding:80px;border-radius:30px;background:#2672ab;color:#fff;}
.link_area > div.judge {background:url("../images/main/link_bg1.jpg") no-repeat center center;background-size:cover;}
.link_area > div.petition:before {content:"";z-index:-1;display:block;position:absolute;right:30px;bottom:-24px;width:270px;height:302px;background:url("../images/main/link_bg2.png") no-repeat right top;}
.link_area > div.petition li {background:rgba(38,114,171,0.5);border-radius:15px;}
.link_area h3 {font-size:1.875em;font-weight:600;}
.link_area p {margin-top:20px;line-height:1.5;}
.link_area li {position:relative;float:left;min-width:90px;margin-top:61px;padding:20px 0;text-align:center;}
.link_area li:first-child {min-width:65px;text-align:left;}
.link_area li:first-child:before {display:none;}
.link_area li:before {content:"";display:block;position:absolute;top:1px;left:0;width:1px;height:38px;background:rgba(255,255,255,0.2);}
.link_area li > a {display:inline-block;min-width:40px;padding-top:55px;background:no-repeat center top;font-weight:600;}
.link_area li:nth-child(1) > a {background-image:url("../images/main/link_ico1.png");}
.link_area li:nth-child(2) > a {background-image:url("../images/main/link_ico2.png");}
.link_area li:nth-child(3) > a {background-image:url("../images/main/link_ico3.png");}

/* 배너모음 */
.banner_area {border-top:1px solid #cfd0d7;padding:25px 0;}
.banner_area > .wrap {display:flex;flex-flow:row nowrap;justify-content:space-between;}
.banner_area .banner_tit {flex:1 150px;width:150px;padding-left:38px;background:url("../images/main/banner_ico.png") no-repeat left top 8px;color:#000;line-height:35px;font-weight:600;}
.banner_area .banner_list {overflow:hidden;width:calc(100% - 415px);}
.banner_area .banner_list .swiper-slide {display:inline-block;position:relative;width:auto;padding:0 24px 0 20px;}
.banner_area .banner_list .swiper-slide:before {content:"";display:block;position:absolute;top:15px;right:0;width:4px;height:4px;border-radius:100%;background:#ddd;}
.banner_area .banner_list .swiper-slide a {display:block;line-height:35px;vertical-align:middle;}
    /* 컨트롤 */
    .banner_area .banner_ctrl {width:150px;text-align:right;}
    .banner_area .banner_ctrl > button {display:inline-block;line-height:0;}
    .banner_area .banner_ctrl > button img {vertical-align:middle;}
    .banner_area .banner_ctrl .prev, .banner_area .banner_ctrl .next {position:relative;padding:0 10px;}
    .banner_area .banner_ctrl .prev:before {content:"";display:block;position:absolute;top:0;right:-2px;width:1px;height:11px;background:#ddd;}
    .banner_area .banner_ctrl .pause, .banner_area .banner_ctrl .play {margin-left:10px;width:35px;height:35px;background:#eee;border:1px solid #ddd;border-radius:100%;}
    .banner_area .banner_ctrl .play {display:none;}
    /* 전체보기 */
    .banner_area .banner_more {display:block;margin-left:10px;padding:0 20px;background:#372f65;border-radius:20px;color:#fff;height:38px;line-height:38px;}
    .banner_area .banner_list.open_banner {overflow:unset;width:calc(100% - 265px);}
    .banner_area .banner_list.open_banner .swiper-wrapper {flex-wrap:wrap;height:auto;}

/* pc */
@media only screen and (max-width:1399px){
    /* 비주얼 */
    .fs_main_visual .wrap > div.mvis_area {flex:0 0 40%;width:40%;}
    .mvis_area:before {right:-10px;}
    .mvis_area:after {bottom:20px;width:236px;height:225px;background-size:contain;}
    .mvis_area strong {font-size:1.25em;}
    .mvis_area .txt2:before {left:238px;}

    /* 바로가기 */
    .fs_main_visual .wrap > div.quick_area {flex:0 0 60%;width:60%;}
    .quick_area {padding-left:30px;}

    /* 행정심판/소청심사 링크 */
    .link_area > div {padding:5%;}
    .link_area > div.petition:before {right:2%;width:200px;height:224px;background-size:contain;}
}
/* 태블릿 */
@media only screen and (max-width:1023px){
    /* 비주얼 */
    .fs_main_visual {z-index:-1;background:url("../images/main/mvis_pattern.gif") repeat left top;}
    .fs_main_visual:before {display:none;}
    .fs_main_visual .wrap {display:block;}
    .fs_main_visual .wrap > div {z-index:10;}
    .fs_main_visual .wrap > div.mvis_area {width:100%;padding-top:10%;padding-left:3%;}
    .mvis_area:before {right:-2%;background-position:left top -80px;}
    .mvis_area:after {top:25%;right:0;}
    .mvis_area .txt1 {margin-top:0;}
    .mvis_area .txt2 {margin-top:1%;}
    .mvis_area .txt3 {margin-top:2%;}
    .mvis_area .txt3 .br_none {display:none;}

    /* 바로가기 */
    .fs_main_visual .wrap > div.quick_area {width:100%;padding:5% 0 0}
    .quick_area li a {height:120px;}

    /* 자치법규 게시판 */
    .notice_area {margin:10% 0;}
    .notice_area .more {margin-top:3%;}

    /* 행정심판/소청심사 링크 */
    .link_area {margin-bottom:10%;}
    .link_area li {margin-top:5%;}
    .link_area li:before {top:0;bottom:0;margin:auto 0;}
    .link_area p br {display:none;}

    /* 배너모음 */
    .banner_area {padding:2% 0;}
    .banner_area .banner_tit {flex:1 120px;width:120px;}
    .banner_area .banner_list {width:calc(100% - 350px);}
    .banner_area .banner_list .swiper-slide {padding:0 14px 0 10px;}
    .banner_area .banner_ctrl {width:120px;}
        /* 전체보기 */
        .banner_area .banner_list.open_banner {overflow:unset;width:calc(100% - 230px);}
}
/* 모바일 */
@media only screen and (max-width:767px){
    /* 비주얼 */
    #fs_content {min-height:auto;}
    .fs_main_visual .wrap {min-height:auto;}
    .mvis_area:before {background-position:left top -150px;}
    .mvis_area:after {display:none;}
    .mvis_area strong {font-size:1.125em;}
    .mvis_area .txt2:before {top:-30px;left:190px;width:40px;height:30px;background-size:contain;}

    /* 바로가기 */
    .quick_area li a:before {right:10px;bottom:15px;width:35px;height:35px;background-size:contain;}

    /* 자치법규 게시판 */
    .notice_area .tab_cont {height:327px;margin-top:3%;}
    .notice_area .notice_list {flex-flow:row wrap;margin:0 -5px;}
    .notice_area .notice_list li {flex:0 1 calc(50% - 10px);margin:0 5px 10px;}
    .notice_area .notice_list li > a {padding:20px;}
    .notice_area .notice_list li > a .tag {margin-bottom:5%;}
    .notice_area .notice_list li > a .tit {margin-bottom:10%;}

    .link_area {display:block;}
    .link_area > div {width:100%;padding:8%;}
    .link_area > div.judge {margin-bottom:10px;}
    .link_area p {margin-top:2%;padding:2%;}
    .link_area li {margin-top:0;}
    .link_area > div.judge p {background:rgba(0,0,0,0.3);}
    .link_area > div.petition p {background:rgba(38,114,171,0.5);}
    .link_area > div.petition li {border-radius:0;}

    /* 배너모음 */
    .banner_area > .wrap {flex-flow:row wrap;justify-content:center;}
    .banner_area .banner_tit {flex:1 1 100%;width:100%;}
    .banner_area .banner_list {flex:1 1 100%;width:100%;margin-bottom:10px;}
    .banner_area .banner_list .swiper-slide {padding:0 14px 0 10px;}
}
@media only screen and (max-width:480px) {
    /* 비주얼 */
    .fs_main_visual .wrap > div.mvis_area {padding-left:0;}
    .mvis_area .txt3 br {display:none;}

    /* 바로가기 */
    .quick_area ul {grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(3, 1fr);gap:10px 10px;}
    .quick_area li a {height:auto;min-height:69px;padding:15px 45px 15px 15px;}
    .quick_area li a:before {top:0;bottom:0;margin:auto 0;}

    /* 자치법규 게시판 */
    .notice_area .tab_btn > div {padding:20px 15px;}
    .notice_area .tab_cont {height:650px;}
    .notice_area .notice_list {margin:0;}
    .notice_area .notice_list li {flex:0 1 100%;margin:0 0 5px;}
}