@charset "utf-8";
/*
    FSI MAIN STYLE
    WRITER : Lee Jeonghee
	Last Modify Date : 2024. 08. 19.
*/

@media only screen and (max-width:480px) {
	html { font-size:12px; }
}

/* visual */
.visual { padding:13.25em 3% 6.25em; background:url(../images/main/bg_visual.jpg) no-repeat center; background-size:cover; }
.visual .inner { display:flex; justify-content:space-between; align-items:center; max-width:1320px; margin:0 auto; }
.visual h3 { font-size:2.625em; font-weight:400; color:#fff; }
.visual .conArea { width:31.625em; }
.visual .poster { overflow:hidden; border-top-left-radius:1.375em; }
.visual .result { overflow:hidden; margin-top:.3125em; border-bottom-right-radius:1.375em; }
.visual .result .col1 { background:#3e95ff; border-radius:2em 2em 0 0; }
.visual .result .col2 { background:#ff8839; }
.visual .result .title { display:flex; justify-content:space-between; padding:2.1875em 2.5em; background:#fff; box-sizing:border-box; }
.visual .result .title h4 { font-size:1.5em; letter-spacing:-.05em; }
.visual .result .title .info ul { display:flex; justify-content:space-between; }
.visual .result .title .info ul li i { display:inline-block; width:.625em; height:.625em; margin-right:.3125em; border-radius:50%; }
.visual .result .title .info ul li span { display:inline-block; font-size:.875em; letter-spacing:-.025em; color:#7e7e7e; }
.visual .result .title .info .date { font-size:.875em; letter-spacing:.025em; color:#7e7e7e; }
.visual .result .content { display:flex; align-items:center; justify-content:space-between; padding:0 2em 2.625em 2.625em; background:#fff; }
.visual .result .content .chart { width:13.75em; height:7.25em; }
.visual .result .content .data dl { text-align:right; }
.visual .result .content .data dl dt { font-size:1.063em; font-weight:500; color:#004b9f; letter-spacing:-.05em; }
.visual .result .content .data dl dd { display:flex; align-items:center; justify-content:flex-end; }
.visual .result .content .data dl dd em { font-size:2.75em; font-weight:900; color:#044bbf; letter-spacing:-.02em; }
.visual .result .content .data dl dd span { font-size:2.375em; font-weight:900; color:#627ac7; }
.visual .result .content .data p { margin-top:1.1428em; font-size:.875em; letter-spacing:-.05em; color:#7f7f7f; }
.visual .result .btns { display:flex; }
.visual .result .btns li { flex:1; }
.visual .result .btns li a { display:block; padding:1.625em 0; text-align:center; }
.visual .result .btns li .btn1 { background:#0061ce; }
.visual .result .btns li .btn2 { background:#004b9f; }
.visual .result .btns li a span { display:inline-block; position:relative; padding-right:1em; font-size:1.125em; font-weight:500; letter-spacing:-.025em; color:#fff; }
.visual .result .btns li a span::after { content:''; position:absolute; right:.125rem; top:50%; width:.4375rem; height:.4375rem; margin-top:-.1875rem; border-top:2px solid rgba(255, 255, 255, .6); border-right:2px solid rgba(255, 255, 255, .6); transform:rotate(45deg); }
@media screen and (max-width:960px) {
	.visual { position:relative; padding:14em 8.3333% 0; background:none; }
	.visual::before { content:''; position:absolute; top:0; left:0; width:100%; height:29.5833em; background:url(../images/main/bg_visual_mo.jpg) no-repeat center; background-size:cover; z-index:-1; }
	.visual .inner { display:block; }
	.visual h3 { font-size:1.8333em; line-height:1.2; }
	.visual .conArea { width:100%; margin-top:3em; }
	.visual .poster img { width:100%; }
	.visual .result { margin-top:.3333em; border:1px solid #aeb0af; box-sizing:border-box; }
	.visual .result .title { padding:1.3333em 2em; }
	.visual .result .title h4 { font-size:1.1666em; }
	.visual .result .title .info ul li i { width:.5em; height:.5em; margin-right:.1666em; }
	.visual .result .title .info ul li span { font-size:.75em; }
	.visual .result .title .info .date { font-size:.75em; }
	.visual .result .content { padding:0 2em 2em; }
	.visual .result .content .chart { width:53.2786%; height:5.8333em; }
	.visual .result .content .data dl dt { font-size:.8333em; }
	.visual .result .content .data dl dd { margin-top:.3333em; }
	.visual .result .content .data dl dd em { font-size:2.1666em; }
	.visual .result .content .data dl dd span { font-size:1.9166em; }
	.visual .result .content .data p { font-size:.75em; }
	.visual .result .btns li a { padding:1.1666em 0; }
	.visual .result .btns li a span { padding-right:.8333em; font-size:1em; letter-spacing:-.05em; }
	.visual .result .btns li a span::after { right:0; width:.3333rem; height:.3333rem; margin-top:-.1666rem; border-width:1px;
	}
}

/* notice */
.notice { padding:10em 3% 6.875em; background:#f9f9f9; }
.notice .inner { display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1220px; margin:0 auto; }
.notice .conArea { position:relative; width:54.918%; margin-top:4.375em; }
.notice .conArea:nth-child(2n) { width:38.1967%; }
.notice .conArea:nth-child(-n+2) { margin-top:0; }
.notice .conArea .title { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.75em; }
.notice .conArea .title h3 { font-size:1.875em; font-weight:900; }
.notice .conArea .title h3 span { color:#027e45; }
.notice .conArea .title .btnMore a { display:block; position:relative; width:1.75em; height:1.75em; text-indent:-9999px; }
.notice .conArea .title .btnMore a::before,
.notice .conArea .title .btnMore a::after { content:''; position:absolute; top:50%; left:0; width:1.6875em; height:1px; background:#a0a5aa; }
.notice .conArea .title .btnMore a::after { transform:rotate(90deg); }
/* popup */
.notice .conArea.popup { padding-bottom:1.6875em; }
.notice .popupSwiper { border-radius:1.375em 0; }
.notice .popupSwiper .swiper-slide a { overflow:hidden; display:block; height:19.375em; }
.notice .popupSwiper .swiper-slide img { width:100%; height:100%; object-fit:cover; }
.notice .popupControl { position:absolute; bottom:0; left:50%; padding:.875em 1em; background:#fff; border:1px solid #e5ecee; border-radius:2em; box-shadow:0px 12px 21px rgba(0, 0, 0, .02); transform:translateX(-50%); z-index:2; }
.notice .popupControl button { display:inline-block; position:relative; width:1.5em; height:1.5em; text-indent:-9999px; }
.notice .popupControl button::after { content:''; position:absolute; right:50%; top:50%; width:.4375em; height:.4375em; margin-top:-.25em; margin-right:-.375em; border-top:2px solid #767676; border-left:2px solid #767676; transform:rotate(-45deg); }
.notice .popupControl .next::after { margin-right:-.1875em; transform:rotate(135deg); }
.notice .popupControl .pagination { display:inline-block; vertical-align:middle; width:auto; margin:0 .5rem; font-size:.9375em; color:#a4a4a4; }
.notice .popupControl .pagination .now { font-weight:700; color:#070707; }
.notice .popupControl .dots { display:none; }
/* board */
.notice .board { border-top:1px solid #7fac90; }
.notice .board li { border-bottom:1px solid #e2e2e2; }
.notice .board li a { overflow:hidden; display:block; position:relative; padding:1.125em 4.25em 1.125em 0; }
.notice .board li a::after { content:''; display:block; position:absolute; top:50%; right:0; width:1.5em; height:1.125em; background:url(../images/main/icon_board_arrow.svg) no-repeat center; background-size:contain; transform:translateY(-50%); }
.notice .board li i { float:left; font-style:normal; font-size:.75em; font-weight:500; color:#465489; letter-spacing:-.025em; line-height:1; text-align:center; }
.notice .board li i b { display:block; font-size:2.3125rem; font-weight:900; }
.notice .board li span { overflow:hidden; display:block; margin-left:4.875rem; height:2.6em; font-size:1.125em; letter-spacing:-.025em; word-break:keep-all; }
/* card */
.notice .gallery { display:flex; justify-content:space-between; }
.notice .gallery .item { width:32.2388%; }
.notice .gallery .item a { display:block; }
.notice .gallery .item .img { overflow:hidden; display:block; position:relative; width:100%; height:12.25em; border-radius:.375em .375em 0 0; }
.notice .gallery .item .img img { width:100%; height:100%; object-fit:cover; }
.notice .gallery .item .txt { display:block; padding:1.375em; background:#fff; border:1px solid #e5ecee; border-top:none; border-radius:0 0 .375em .375em; box-sizing:border-box; }
.notice .gallery .item .txt strong { overflow:hidden; display:block; font-weight:400; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.notice .gallery .item .txt i { display:block; margin-top:.5em; font-style:normal; font-size:.875em; color:#818080; }
/* service */
.notice .service { display:flex; flex-wrap:wrap; justify-content:space-between; }
.notice .service + .service { margin-top:1.25em; }
.notice .service li a { display:flex; flex-direction:column; justify-content:center; align-items:center; width:8.625em; height:8.625em; background:#fff; border:1px solid #e5ecee; border-radius:50%; box-shadow:0px 12px 21px rgba(0, 0, 0, .02); }
.notice .service li i { display:inline-block; width:3.5em; height:3em; margin-bottom:.3125em; background:no-repeat center; background-size:contain; }
.notice .service li .icon1 { background-image:url(../images/main/icon_service1.png); }
.notice .service li .icon2 { background-image:url(../images/main/icon_service2.png); }
.notice .service li .icon3 { background-image:url(../images/main/icon_service3.png); }
.notice .service li .icon4 { background-image:url(../images/main/icon_service4.png); }
.notice .service li .icon5 { background-image:url(../images/main/icon_service5.png); }
.notice .service li .icon6 { background-image:url(../images/main/icon_service6.png); }
.notice .service li span { color:#39498c; letter-spacing:-.01em; text-align:center; }
@media screen and (max-width:1200px) {
	.notice .conArea { width:50%; }
	.notice .conArea:nth-child(2n) { width:42%; }
}
@media screen and (max-width:1080px) {
	.notice .service li a { width:7.5em; height:7.5em; }
}
@media screen and (max-width:960px) {
	.notice { padding:4em 8.3333%; background:#fff; }
	.notice .conArea { width:100%; margin-top:3em; }
	.notice .conArea:nth-child(2n) { width:100%; }
	.notice .conArea:nth-child(1) { order:2; margin-top:1.6666em; }
	.notice .conArea:nth-child(2) { order:1; }
	.notice .conArea:nth-child(3) { order:3; }
	.notice .conArea:nth-child(4) { order:4; }
	.notice .conArea .title { margin-bottom:.8333em; }
	.notice .conArea .title h3 { font-size:1.5em; }
	.notice .conArea .title .btnMore a { width:1.5em; height:1.5em; }
	.notice .conArea .title .btnMore a::before,
	.notice .conArea .title .btnMore a::after { width:1.4166em; }
	/* popup */
	.notice .conArea.popup { padding-bottom:0; }
	.notice .popupSwiper .swiper-slide a { height:auto; }
	.notice .popupControl { position:static; margin-top:1em; padding:0; background:none; border:none; box-shadow:none; transform:none; }
	.notice .popupControl button { display:none; }
	.notice .popupControl .pagination { display:none; }
	.notice .popupControl .dots { display:block; text-align:center; }
	.notice .popupControl .dots .swiper-pagination-bullet { margin:0 .25em; background:#cbd9dc; opacity:1; }
	.notice .popupControl .dots .swiper-pagination-bullet-active { background:#4495aa; opacity:1; }
	/* board */
	.notice .board { padding-top:1.3333em; border-color:#bbd3c3; }
	.notice .board li { border:none; }
	.notice .board li a { padding:.5833em 0; }
	.notice .board li a::after { display:none; }
	.notice .board li i { font-size:.6666em; }
	.notice .board li i b { font-size:2.0833rem; }
	.notice .board li span { margin-left:4.3333rem; font-size:1.0833em; }
	/* card */
	.notice .gallery { margin-top:1.5em; }
	.notice .gallery .item { width:48.3443%; }
	.notice .gallery .item:last-child { display:none; }
	.notice .gallery .item .img { height:11em; }
	.notice .gallery .item .txt { padding:1em .8333em; }
	.notice .gallery .item .txt strong { font-size:.9166em; font-weight:700; }
	.notice .gallery .item .txt i { margin-top:.2em; font-size:.8333em; }
	/* service */
	.notice .service + .service { margin-top:1.5em; }
	.notice .service li { margin-top:1em; }
	.notice .service li a { width:7.666em; height:7.666em; background:#f4f7fc; border-color:#d9e3e5; }
	.notice .service li i { width:3.25em; height:2.5em; margin-bottom:.25em; }
	.notice .service li .icon1 { background-image:url(../images/main/icon_service1_mo.png); }
	.notice .service li .icon2 { background-image:url(../images/main/icon_service2_mo.png); }
	.notice .service li .icon3 { background-image:url(../images/main/icon_service3_mo.png); }
	.notice .service li .icon4 { background-image:url(../images/main/icon_service4_mo.png); }
	.notice .service li .icon5 { background-image:url(../images/main/icon_service5_mo.png); }
	.notice .service li .icon6 { background-image:url(../images/main/icon_service6_mo.png); }
	.notice .service li span { font-size:.9166em; font-weight:500; letter-spacing:-.05em; line-height:1.2; }
}

/* map */
.foodMap { position:relative; }
.foodMap #map { height:41.875em; }
.foodMap .overlay { position:relative; }
.foodMap .overlay .marker { width:.875em; height:.875em; background:#2662a2; border-radius:50%; }
.foodMap .overlay .infoArea { position:absolute; top:-3.5em; left:0; padding-left:3.375em; }
.foodMap .overlay .infoArea .box { position:relative; width:14.5em; padding:2.125em 2.5em; background:#fff; border:1px solid #cacdd5; border-radius:1.5em; box-shadow:0px 28px 29px rgba(0, 0, 0, .15); box-sizing:border-box; }
.foodMap .overlay .infoArea .box::before { content:''; position:absolute; top:3.125em; left:-2.5em; width:2.625em; height:1.5em; background:url(../images/main/icon_map_info.png) no-repeat; background-size:contain; }
.foodMap .overlay .infoArea .tit { font-size:1.25em; font-weight:700; letter-spacing:-.025em; }
.foodMap .overlay .infoArea .tit b { color:#ea4403; }
.foodMap .overlay .infoArea .list { margin-top:.875em; }
.foodMap .overlay .infoArea .list li { margin-top:.25em; }
.foodMap .overlay .infoArea .list li a { display:block; padding-right:1.5em; letter-spacing:-.025em; line-height:1.375em; }
.foodMap .overlay .infoArea .list li a span { overflow:hidden; display:block; position:relative; text-overflow:ellipsis; white-space:nowrap; }
.foodMap .overlay .infoArea .list li a span::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:#8cc0f3; transition:.15s; }
.foodMap .overlay .infoArea .list li a:focus,
.foodMap .overlay .infoArea .list li a:hover { color:#005cc3; background:url(../images/main/icon_map_link.png) no-repeat right center; background-size:1.375em; }
.foodMap .overlay .infoArea .list li a:focus span::after,
.foodMap .overlay .infoArea .list li a:hover span::after { width:100%; }
.foodMap .overlay .infoArea .list li.btnMore { display:none; }
.foodMap .inner { position:absolute; top:3.5em; left:0; width:100%; height:0; padding:0 3%; box-sizing:border-box; z-index:2; }
.foodMap .option { position:relative; max-width:1220px; margin:0 auto; }
.foodMap .option .box { display:flex; position:absolute; top:0; left:0; width:31.25em; height:34.875em; }
.foodMap .option .title { flex-grow:1; padding:1.25em 1.875em 2.5em; background:#206cc2; border-radius:1.5em 0 0 1.5em; }
.foodMap .option .title h3 { height:17.625em; background:url(../images/main/option_title.png) no-repeat; background-size:contain; text-indent:-9999px; }
.foodMap .option .title .category { margin-top:1.125em; padding:0 1.75em; }
.foodMap .option .title .category li { overflow:hidden; position:relative; margin-top:.625em; }
.foodMap .option .title .category li input { overflow:hidden; position:absolute; left:0; top:0; width:1px; height:1px; margin-left:-9999px; }
.foodMap .option .title .category li label { display:block; position:relative; padding-left:1.875rem; font-size:1.25em; font-weight:500; letter-spacing:-.025em; color:#badaff; cursor:pointer; }
.foodMap .option .title .category li label::before { content:''; display:block; position:absolute; top:.125rem; left:0; width:1.375rem; height:1.375rem; border:2px solid #badaff; border-radius:50%; box-sizing:border-box; transition:all .15s; }
.foodMap .option .title .category li label::after { content:''; display:block; position:absolute; top:.4375rem; left:.375rem; width:.5625rem; height:.3125rem; border:2px solid #206cc2; border-top:0; border-right:0; transform:rotate(-45deg); transition:.15s; }
.foodMap .option .title .category li input:checked + label { color:#fff; }
.foodMap .option .title .category li input:checked + label::before { background:#fff; border-color:#fff; }
.foodMap .option .title .txt { margin-top:2.25rem; padding:0 1.75rem; font-size:.875em; font-weight:300; color:#badaff; letter-spacing:-.03em; line-height:1.4; word-break:keep-all; }
.foodMap .option .title .txt b { display:block; margin-bottom:.125rem; font-weight:500; color:#fff; }
.foodMap .option .list { overflow-y:auto; flex-shrink:0; width:32%; max-height:100%; background:#004b9f; border-radius:0 1.5em 1.5em 0; direction:rtl; }
.foodMap .option .list::-webkit-scrollbar { width:6px; height:6px; }
.foodMap .option .list::-webkit-scrollbar-thumb { background:#78b7ff; }
.foodMap .option .list::-webkit-scrollbar-track { background:transparent; }
.foodMap .option .list::-webkit-scrollbar-corner { background:transparent; }
.foodMap .option .regionSel { direction:ltr; }
.foodMap .option .regionSel .viewCode { display:none; }
.foodMap .option .regionSel .selectList { padding:.875em 0; box-sizing:border-box; }
.foodMap .option .regionSel .selectList ul { padding:0 .25em; }
.foodMap .option .regionSel .selectList button { display:flex; justify-content:space-between; width:100%; padding:.5em 1.625em .5em 1.25em; border-radius:.375em; transition:.15s; }
.foodMap .option .regionSel .selectList button span { letter-spacing:-.025em; color:#fff; }
.foodMap .option .regionSel .selectList button i { font-style:normal; color:#87aad2; }
.foodMap .option .regionSel .selectList .active button { background:#fff; }
.foodMap .option .regionSel .selectList .active button span { font-weight:700; color:#12539c; }
.foodMap .option .regionSel .selectList .active button i { color:#12539c; }
@media screen and (max-width:960px) {
	.foodMap #map { height:25.3333em; }
	.foodMap .overlay .marker { width:.5em; height:.5em; }
	.foodMap .overlay .infoArea { top:-2.3333em; padding-left:2em; }
	.foodMap .overlay .infoArea .box { width:9.75em; padding:1.3333em; border-radius:1em; box-shadow:0px 14px 15px rgba(0, 0, 0, .15); }
	.foodMap .overlay .infoArea .box::before { top:2em; left:-1.25em; width:1.3333em; height:.8333em; background-image:url(../images/main/icon_map_info_mo.png); }
	.foodMap .overlay .infoArea .tit { font-size:1em; }
	.foodMap .overlay .infoArea .list { margin-top:1em; }
	.foodMap .overlay .infoArea .list li a { padding-right:0; }
	.foodMap .overlay .infoArea .list li a:focus,
	.foodMap .overlay .infoArea .list li a:hover { font-weight:700; background:none; }
	.foodMap .overlay .infoArea .list li.moNone { display:none; }
	.foodMap .overlay .infoArea .list li.btnMore { display:block; }
	.foodMap .overlay .infoArea .list li.btnMore a { font-weight:400; color:#002ce8; }
	.foodMap .overlay .infoArea .list li.btnMore a span { padding-top:1.6666em; }
	.foodMap .overlay .infoArea .list li.btnMore a span::before { content:'…'; position:absolute; top:.3333em; left:0; color:#000; line-height:1; transform:rotate(90deg); }
	.foodMap .overlay .infoArea .list li.btnMore a span::after { display:none; }
	.foodMap .inner { top:0; padding:0; }
	.foodMap .option .box { flex-direction:column; width:15em; height:25.3333em; }
	.foodMap .option .title { padding:2em 2.1666em 2.1666em; border-radius:0; }
	.foodMap .option .title h3 { height:10.5em; background-image:url(../images/main/option_title_mo.png); }
	.foodMap .option .title .category { margin-top:1.5em; padding:0; }
	.foodMap .option .title .category li { margin-top:.5em; }
	.foodMap .option .title .category li label { padding-left:2rem; font-size:1.1666em; }
	.foodMap .option .title .category li label::before { top:.0833rem; width:1.3333rem; height:1.3333rem; border-width:1px; }
	.foodMap .option .title .category li label::after { top:.4166rem; left:.3333rem; width:.5833rem; height:.3333rem; border-width:1px; }
	.foodMap .option .title .txt { display:none; }
	.foodMap .option .list { overflow:hidden; width:100%; height:4.3333em; max-height:none; border-radius:0; }
	.foodMap .option .regionSel .viewCode { display:block; }
	.foodMap .option .regionSel .viewCode button { display:block; position:relative; width:100%; padding:1.25rem 3.3333rem 1.25rem 2.5rem; font-size:1.25em; color:#fff; text-align:left; }
	.foodMap .option .regionSel .viewCode button::after { content:''; position:absolute; right:1.5rem; top:50%; width:.5rem; height:.5rem; margin-top:-.4166rem; border-bottom:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); transition:.15s; }
	.foodMap .option .regionSel .viewCode button.on::after { margin-top:0; transform:rotate(-135deg); }
	.foodMap .option .regionSel .viewCode button span { margin-right:1rem; }
	.foodMap .option .regionSel .viewCode button i { font-style:normal; }
	.foodMap .option .regionSel .viewCode button i::after { content:'곳'; }
	.foodMap .option .regionSel .selectList { display:none; overflow-y:auto; position:absolute; top:100%; left:0; width:100%; padding:1em 0; max-height:17em; background:#004b9f; z-index:1; }
	.foodMap .option .regionSel .selectList ul { padding:0 1.25em; }
}

/* statistics */
.statistics { padding:4.375em 3%; background:url(../images/main/bg_statistics.jpg) no-repeat center; background-size:cover; }
.statistics .inner { max-width:1220px; margin:0 auto; padding:0 2.8125em; box-sizing:border-box; }
.statistics h3 { font-size:2.625em; color:#fff; text-align:center; }
.statistics .tabArea { margin:1.75em 0 2.625em; }
.statistics .tabBtn { display:flex; justify-content:center; }
.statistics .tabBtn li { margin:0 1.5625em; }
.statistics .tabBtn li span { display:block; padding:.125rem 0; font-size:1.25em; color:#fff; letter-spacing:-.01em; border-bottom:1px solid transparent; transition:border .15s; }
.statistics .tabBtn li .active span { font-weight:500; border-color:#fff; }
.statistics .stateSwiper .swiper-wrapper { justify-content:space-between; }
.statistics .stateSwiper .swiper-slide { width:19.292%; min-height:16.5625em; padding:1.875em 0; background:linear-gradient(0deg, rgba(88,190,176,1) 0%, rgba(174,227,218,1) 100%); border:1px solid rgba(255, 255, 255, .75); border-radius:1.375em; box-sizing:border-box; }
.statistics .stateSwiper.score .swiper-slide { padding-bottom:1.375em; }
.statistics .stateSwiper .swiper-slide .name { margin-top:1em; font-size:1.125em; letter-spacing:-.04em; color:#2e2e2e; text-align:center; word-break:keep-all; }
.statistics .stateSwiper .swiper-slide .percent,
.statistics .stateSwiper .swiper-slide .score { margin-top:.1875rem; font-size:1.625em; font-weight:700; color:#123326; letter-spacing:-.025em; text-align:center; }
.statistics .stateSwiper .swiper-slide .txt { letter-spacing:-.04em; color:#2e2e2e; text-align:center; }
.statistics .stateSwiper .stateControl { display:none; }
.statistics .circleChart { position:relative; width:7em; height:7em; margin:0 auto; }
.statistics .circleChart .chartBox { width:100%; height:100%; padding:.3125em; background:#fff; border-radius:50%; box-sizing:border-box; }
.statistics .circleChart .chartBase { position:absolute; left:0; top:0; right:0; bottom:0; border:.625em solid; border-radius:50%; box-sizing:border-box; }
.statistics .circleChart .chartBox svg { overflow:visible; position:relative; width:100%; height:100%; transform:rotateY(180deg) rotate(-90deg); }
.statistics .circleChart .progress { fill:transparent; stroke-width:.625em; }
.statistics .circleChart.active .progress { transition:.5s; }
.statistics .circleChart.col1 .chartBase { border-color:#d9f8fc; }
.statistics .circleChart.col2 .chartBase { border-color:#deedff; }
.statistics .circleChart.col3 .chartBase { border-color:#e9fad2; }
.statistics .circleChart.col4 .chartBase { border-color:#f9f7c9; }
.statistics .circleChart.col5 .chartBase { border-color:#fceae0; }
.statistics .icon { position:absolute; top:50%; left:50%; width:3.5em; height:3.5em; background:no-repeat center; background-size:contain; transform:translate(-50%, -50%); }
.statistics .icon1 { background-image:url(../images/main/icon_state1.png); }
.statistics .icon2 { background-image:url(../images/main/icon_state2.png); }
.statistics .icon3 { background-image:url(../images/main/icon_state3.png); }
.statistics .icon4 { background-image:url(../images/main/icon_state4.png); }
.statistics .icon5 { background-image:url(../images/main/icon_state5.png); }
.statistics .icon6 { background-image:url(../images/main/icon_state6.png); }
.statistics .icon7 { background-image:url(../images/main/icon_state7.png); }
.statistics .icon8 { background-image:url(../images/main/icon_state8.png); }
.statistics .icon9 { background-image:url(../images/main/icon_state9.png); }
.statistics .icon10 { background-image:url(../images/main/icon_state10.png); }
.statistics .icon11 { background-image:url(../images/main/icon_state11.png); }
.statistics .icon12 { background-image:url(../images/main/icon_state12.png); }
.statistics .icon13 { background-image:url(../images/main/icon_state13.png); }
.statistics .icon14 { background-image:url(../images/main/icon_state14.png); }
.statistics .icon15 { background-image:url(../images/main/icon_state15.png); }
.statistics .icon16 { background-image:url(../images/main/icon_state16.png); }
.statistics .icon17 { background-image:url(../images/main/icon_state17.png); }
.statistics .icon18 { background-image:url(../images/main/icon_state18.png); }
.statistics .icon19 { background-image:url(../images/main/icon_state19.png); }
.statistics .icon20 { background-image:url(../images/main/icon_state20.png); }
@media screen and (max-width:960px) {
	.statistics { padding:3.3333em 8.3333% 4.1666em; background:none; }
	.statistics .inner { padding:0; }
	.statistics h3 { font-size:1.5em; font-weight:900; color:#000; text-align:left; }
	.statistics h3 span { color:#027e45; }
	.statistics .tabArea { overflow-x:auto; overflow-y:hidden; white-space:nowrap; margin:2em 0; }
	.statistics .tabBtn { display:block; }
	.statistics .tabBtn li { display:inline-block; margin:0 0 0 .6666em; }
	.statistics .tabBtn li:first-child { margin-left:0; }
	.statistics .tabBtn li span { padding:.25rem 0; color:#000; }
	.statistics .tabBtn li .active span { border-color:#000; }
	.statistics .stateSwiper { padding:0 1px; }
	.statistics .stateSwiper .swiper-slide { min-height:auto; padding:1.1666em 0; background:#a5dbd2; border-color:#7cb5ac; border-radius:.8333em; }
	.statistics .stateSwiper.score .swiper-slide { padding-bottom:1.1666em; }
	.statistics .stateSwiper .swiper-slide .name { margin-top:.6666rem; padding:0 .4166rem; font-size:.9166em; letter-spacing:-.06em; }
	.statistics .stateSwiper .swiper-slide .percent,
	.statistics .stateSwiper .swiper-slide .score { margin-top:0; font-size:1.3333em; }
	.statistics .stateSwiper .swiper-slide .txt { font-size:.8333em; }
	.statistics .stateSwiper .stateControl { display:block; margin-top:1em; }
	.statistics .stateSwiper .stateControl .dots { text-align:center; }
	.statistics .stateSwiper .stateControl .dots .swiper-pagination-bullet { margin:0 .25em; background:#cbd9dc; opacity:1; }
	.statistics .stateSwiper .stateControl .dots .swiper-pagination-bullet-active { background:#4495aa; opacity:1; }
	.statistics .circleChart { width:4.6666em; height:4.6666em; }
	.statistics .circleChart .chartBox { padding:.25em; }
	.statistics .circleChart .chartBase { border-width:.5em; }
	.statistics .circleChart .progress { stroke-width:.5em; }
	.statistics .icon { width:2.3333em; height:2.3333em; }
}
@media screen and (max-width:540px) {
	.statistics .stateSwiper .swiper-slide { min-height:12em; }
	.statistics .stateSwiper.score .swiper-slide .name { padding:0; }
}

/* banner */
.banner { padding:3.375em 3% 2.875em; }
.banner .inner { max-width:1220px; margin:0 auto; }
.banner .bannerArea { position:relative; margin-bottom:2.875em; padding:0 6.25em; }
.banner .bannerSwiper .swiper-slide a { display:block; }
.banner .bannerControl { position:absolute; top:0; left:0; width:100%; }
.banner .bannerControl button { position:absolute; top:0; left:3.125em; width:2.125em; height:2.25em; background:url(../images/main/btn_banner_prev.svg) no-repeat center; background-size:contain; text-indent:-9999px; }
.banner .bannerControl .next { left:auto; right:3.125em; background-image:url(../images/main/btn_banner_next.svg); }
#seoul-common-banner a { overflow:hidden; display:block; width:100%; height:5.625em; }
#seoul-common-banner img { width:100%; height:100%; object-fit:cover; }
@media screen and (max-width:960px) {
	.banner { display:none; }
}