@charset "UTF-8";
/* ------------------------------------------------------------------------- */
/* CSS Table of Contents
/* ------------------------------------------------------------------------- */
/*

0. Reset

1. Global
1-1. input & select
1-2. button
1-3. table
1-4. tab
1-5. list
1-6. box
1-7. layer

2. Layout
2-1. wrap
2-2. header
2-3. footer

3. Contents
3-1. cnt
3-2. 메인
3-3. 데이터셋
3-4. 통계정보
3-5. 생활지도
3-6. 융합지도
3-7. 평생학습도시
3-8. 지속가능발전

4. Etc
4-1. library - leaflet


/* ------------------------------------------------------------------------- */
/* 0. Reset
/* ------------------------------------------------------------------------- */
/* webfont - GmarketSans */
@font-face {
    font-family: "GmarketSans";
    font-weight: 700;
    font-display: swap;
    src: local(""), url("../fonts/GmarketSans-Bold.woff2") format("woff2"), url("../fonts/GmarketSans-Bold.woff") format("woff");
    /* unicode-range:U+AC00-D7A3; */
}
/* ------------------------------------------------------------------------- */
/* 1. Global
/* ------------------------------------------------------------------------- */
.forMo {
    display: none;
}

.tal {
    text-align: left !important;
}

.tac {
    text-align: center !important;
}

.tar {
    text-align: right !important;
}

h3.subtitle {
    color: #2856B6;
    font-size: 48px;
    text-align: center;
    line-height: 1.2;
}
h3.subtitle p {
    margin-top: 24px;
    color: #3d4650;
    font-size: 20px;
}

.mGird1 {
    margin-bottom: 15px;
}
.mGird1 .mTitle1 .gRt {
    position: relative;
    top: auto;
    right: auto;
}
.mGird1 .mTitle1 .gRt select + select {
    margin-left: 10px;
}

.mGird1.s { height: 750px;}
.mGird1.m { height: 1150px; }
.mGird1.l { height: 1330px; }
.mGird1.xl { height: 1850px;}

/* ------------------------------------------------------------------------- */
/* 1-1. input, select
/* ------------------------------------------------------------------------- */
select, TEXTAREA {
    font-family: "Noto Sans Korean", "Open Sans", sans-serif, Dotum, "돋움", Gulim, "굴림", Helvetica, Apple-Gothic;
}

/* ------------------------------------------------------------------------- */
/* 1-2. button
/* ------------------------------------------------------------------------- */
.box_btn.blue > * {
    border-color: #2f62cd;
    background-color: #2f62cd;
    color: #fff;
}
.box_btn.radius > * {
    border-radius: 4px;
}
.box_btn.img > * {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}
.box_btn.img > *:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    transform: translateY(-50%);
}
.box_btn.img.inquiryHow > * {
    padding-right: 20px;
    padding-left: 48px;
}
.box_btn.img.inquiryHow > *:before {
    left: 22px;
    width: 14px;
    height: 14px;
    background-image: url("../images/i_inquiryHow_wh.png");
}

/* ------------------------------------------------------------------------- */
/* 1-3. table
/* ------------------------------------------------------------------------- */
table.tbl_col > thead > tr > th {
    padding: 12px 10px;
    border: 1px solid #2f62cd;
    border-width: 1px 0;
    background: #ecf2fe;
    color: #2856B6;
    font-weight: 500;
    text-align: center;
}
table.tbl_col > tbody > tr > th {
    padding: 12px 10px;
    border-bottom: 1px solid #d7d7d7;
    background: #f5f5f5;
    color: #2d2d2d;
    font-weight: 500;
    text-align: center;
}
table.tbl_col > tbody > tr > td {
    padding: 12px 10px;
    border-bottom: 1px solid #d7d7d7;
    color: #2d2d2d;
    font-weight: 500;
    text-align: left;
}

/* ------------------------------------------------------------------------- */
/* 1-4. tab
/* ------------------------------------------------------------------------- */
.mTab1 .dep1 a {
    min-width: 0;
    height: 57px;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.mTab1 .dep1 a.selected:before {
    bottom: -1px;
}
.mTab1 .dep1 .selList {
    display: flex;
}
.mTab1 .dep1 .selList > a {
    flex: 1;
}
.mTab1 .dep2 a {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------- */
/* 1-5. list
/* ------------------------------------------------------------------------- */
ul.list_bullet > li {
    position: relative;
    padding-left: 12px;
    color: #2d2d2d;
    font-weight: 500;
}
ul.list_bullet > li:before {
    display: block;
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 4px;
    height: 4px;
    background: #2d2d2d;
}

ul.list_bullet > li.no-bullet:before {
    content: none;
}

/* ------------------------------------------------------------------------- */
/* 1-7. layer
/* ------------------------------------------------------------------------- */
.layer_inquiryHow {
    width: 900px;
    margin-left: -450px;
}
.layer_inquiryHow > dl > dt {
    padding: 25px 0;
}
.layer_inquiryHow > dl > dd {
    overflow-y: auto;
    max-height: 501px;
    padding: 0 50px;
}
.layer_inquiryHow > dl > dd dl dt {
    padding-bottom: 15px;
    color: #2d2d2d;
    font-size: 16px;
    text-align: left;
}
.layer_inquiryHow > dl > dd dl dd {
    padding-bottom: 30px;
}
.layer_inquiryHow > dl > dd dl dd .list_bullet {
    margin-bottom: 15px;
}

/* ------------------------------------------------------------------------- */
/* 2. Layout
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* 3. Contents
/* ------------------------------------------------------------------------- */
.main_roll_slide .slide06 {
    background: url("../images/main_visual06.gif") no-repeat center/cover;
}

.main_roll_nav li {
    width: 14%;
}

/* ------------------------------------------------------------------------- */
/* 3-7. 평생학습도시
/* ------------------------------------------------------------------------- */
#gnrlz-idex ul {
    position: relative;
    padding-top: 10px;
    text-align: center;
}
#gnrlz-idex ul:before, #gnrlz-idex ul:after {
    display: block;
    content: "";
    position: absolute;
}
#gnrlz-idex ul li {
    position: relative;
    padding: 10px 0 0 40px;
}
#gnrlz-idex ul li:before, #gnrlz-idex ul li:after {
    display: block;
    content: "";
    position: absolute;
}
#gnrlz-idex ul li > div {
    position: relative;
    height: 82px;
    border-radius: 10px;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
#gnrlz-idex ul li > div:before, #gnrlz-idex ul li > div:after {
    display: block;
    content: "";
    position: absolute;
}
#gnrlz-idex ul li > div > div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 20px 10px;
    color: #fff;
    word-break: keep-all;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
}
#gnrlz-idex ul li > div > div span {
    display: block;
    font-family: "GmarketSans";
    font-size: 14px;
    font-weight: 700;
}
#gnrlz-idex ul li .toggleDepth {
    display: none;
    position: absolute;
    top: 40px;
    left: 10px;
    z-index: 5;
    width: 20px;
    height: 20px;
    border: 1px solid #3d4650;
    border-radius: 4px;
    background: #fff;
}
#gnrlz-idex ul li .toggleDepth:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: url("../images/i_plus2.png") no-repeat center/100% auto;
}
#gnrlz-idex ul li .toggleDepth.active:before {
    height: 2px;
    margin-top: -1px;
    background-image: url("../images/i_minus2.png");
}
#gnrlz-idex ul li.hasDepth .toggleDepth {
    display: block;
}
#gnrlz-idex ul.depth1 {
    padding-top: 0;
}
#gnrlz-idex ul.depth1 > li {
    padding: 0;
}
#gnrlz-idex ul.depth1 > li > div {
    display: inline-block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 5px solid #66ebb8;
    border-radius: 50%;
    background: #12bfa0;
    font-size: 16px;
    font-weight: 700;
    vertical-align: bottom;
    -ms-box-shadow: 5px 8px 17.46px 0.54px rgba(27, 27, 27, 0.16);
    -o-box-shadow: 5px 8px 17.46px 0.54px rgba(27, 27, 27, 0.16);
    box-shadow: 5px 8px 17.46px 0.54px rgba(27, 27, 27, 0.16);
}
#gnrlz-idex ul.depth1 > li > div:before {
    top: auto;
    right: -1px;
    bottom: -19px;
    left: 50%;
    width: 1px;
    height: 14px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth1 > li > div > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#gnrlz-idex ul.depth1 > li ul:before {
    top: 0;
    left: 50%;
    width: 1px;
    height: 10px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth1 > li ul:after {
    top: 10px;
    left: 20px;
    width: calc(50% - 20px);
    height: 1px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth1 > li ul > li:not(:last-of-type):before {
    top: 50px;
    left: 20px;
    width: 20px;
    height: 1px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth1 > li ul > li:not(:last-of-type):after {
    top: 0;
    left: 20px;
    width: 1px;
    height: 100%;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth1 > li ul > li:last-of-type:before {
    top: 50px;
    left: 20px;
    width: 20px;
    height: 1px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth1 > li ul > li:last-of-type:after {
    top: 0;
    left: 20px;
    width: 1px;
    height: 50px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth2 {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 14px;
}
#gnrlz-idex ul.depth2:after {
    display: none;
}
#gnrlz-idex ul.depth2 > li {
    flex-grow: 1;
    vertical-align: top;
}
#gnrlz-idex ul.depth2 > li:before {
    top: 0 !important;
    left: 50% !important;
    width: 1px !important;
    height: 10px !important;
}
#gnrlz-idex ul.depth2 > li:not(:last-of-type):before {
    top: 0;
    left: 50%;
    width: 1px;
    height: 20px;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth2 > li:not(:last-of-type):after {
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #cfcfcf;
}
#gnrlz-idex ul.depth2 > li:first-of-type:not(:only-of-type):after, #gnrlz-idex ul.depth2 > li:last-of-type:not(:only-of-type):after {
    top: 0;
    width: 50%;
    height: 1px;
}
#gnrlz-idex ul.depth2 > li:first-of-type:not(:only-of-type):after {
    left: 50%;
}
#gnrlz-idex ul.depth2 > li:last-of-type:not(:only-of-type):after {
    left: 0;
}
#gnrlz-idex ul.depth2 > li + li:not(:last-of-type):after {
    left: 0 !important;
    width: 100% !important;
    height: 1px !important;
}
#gnrlz-idex ul.depth2 > li > div {
    font-size: 16px;
}
#gnrlz-idex ul.depth3 > li > div {
    font-size: 14px;
}
#gnrlz-idex ul.depth4 {
    display: none;
}
#gnrlz-idex ul.depth4 > li > div {
    font-size: 14px;
}
#gnrlz-idex ul.depth4 > li > div > div span {
    display: none;
}

/* ------------------------------------------------------------------------- */
/* 3-8. 지속가능발전
/* ------------------------------------------------------------------------- */
.sustainable {
    text-align: center;
}
.sustainable .legend {
    display: inline-block;
    height: 38px;
    margin-top: 50px;
    padding: 0 25px;
    border-radius: 19px;
    background: #f5f5f5;
    font-size: 0;
}
.sustainable .legend > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.sustainable .legend li {
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 38px;
    vertical-align: middle;
}
.sustainable .legend li + li {
    margin-left: 68px;
}
.sustainable .legend li span {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
}
.sustainable .legend li.good span {
    background: #0db859;
}
.sustainable .legend li.avg span {
    background: #fdb713;
}
.sustainable .legend li.bad span {
    background: #e32929;
}
.sustainable .legend li.ready span {
    background: #b5b5b5;
}
.sustainable .goal {
    position: relative;
    width: 983px;
    height: 983px;
    margin: 0 auto;
    background: url("../images/gysdg.png") no-repeat top left/100% auto;
}
.sustainable .goal .link a {
    position: absolute;
    top: 50%;
}
.sustainable .goal .val span {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 27px;
    border-radius: 50%;
}
.sustainable .goal .val span.good {
    background: #0db859;
}
.sustainable .goal .val span.avg {
    background: #fdb713;
}
.sustainable .goal .val span.bad {
    background: #e32929;
}
.sustainable .goal .val span.ready {
    background: #b5b5b5;
}
.sustainable .goal .val span.val0 {
    right: 50%;
    margin: -418px -120px 0 0;
}
.sustainable .goal .val span.val1 {
    right: 50%;
    margin: -354px -258px 0 0;
}
.sustainable .goal .val span.val2 {
    right: 50%;
    margin: -246px -362px 0 0;
}
.sustainable .goal .val span.val3 {
    right: 50%;
    margin: -106px -422px 0 0;
}
.sustainable .goal .val span.val4 {
    right: 50%;
    margin: 46px -428px 0 0;
}
.sustainable .goal .val span.val5 {
    right: 50%;
    margin: 194px -378px 0 0;
}
.sustainable .goal .val span.val6 {
    right: 50%;
    margin: 314px -278px 0 0;
}
.sustainable .goal .val span.val7 {
    right: 50%;
    margin: 388px -140px 0 0;
}
.sustainable .goal .val span.val8 {
    left: 50%;
    margin: 408px 0 0 -40px;
}
.sustainable .goal .val span.val9 {
    left: 50%;
    margin: 370px 0 0 -188px;
}
.sustainable .goal .val span.val10 {
    left: 50%;
    margin: 278px 0 0 -316px;
}
.sustainable .goal .val span.val11 {
    left: 50%;
    margin: 144px 0 0 -406px;
}
.sustainable .goal .val span.val12 {
    left: 50%;
    margin: -6px 0 0 -434px;
}
.sustainable .goal .val span.val13 {
    left: 50%;
    margin: -160px 0 0 -408px;
}
.sustainable .goal .val span.val14 {
    left: 50%;
    margin: -290px 0 0 -330px;
}
.sustainable .goal .val span.val15 {
    left: 50%;
    margin: -386px 0 0 -208px;
}
.sustainable .goal .val span.val16 {
    left: 50%;
    margin: -430px 0 0 -62px;
}
.sustainable .explain ul {
    margin-top: -20px;
    text-align: center;
}
.sustainable .explain ul li {
    position: relative;
    margin-top: 20px;
    text-align: left;
}
.sustainable .explain ul li dl {
    margin-left: -15px;
    font-size: 0;
}
.sustainable .explain ul li dl > * {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
.sustainable .explain ul li dl > * {
    height: 72px;
    margin-left: 15px;
    vertical-align: middle;
}
.sustainable .explain ul li dl dt {
    width: 193px;
    padding: 0 25px;
    background: #f5f5f5;
    font-size: 28px;
    font-weight: 700;
    line-height: 72px;
    letter-spacing: -0.05rem;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.sustainable .explain ul li dl dt strong {
    color: #c31f33;
    text-transform: uppercase;
}
.sustainable .explain ul li dl dd {
    width: 180px;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.sustainable .explain ul li dl dd a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px 20px 10px 60px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    word-break: break-word;
}
.sustainable .explain ul li dl dd a strong {
    position: absolute;
    top: 10px;
    left: 25px;
    font-family: "GmarketSans";
    font-size: 28px;
    line-height: 1.2;
}
.sustainable .explain ul li dl dd + dt {
    width: 180px;
    padding: 0 15px;
    letter-spacing: -0.1rem;
}
.sustainable .explain ul li .logo {
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
}
.sustainable .index {
    margin-top: 70px;
    text-align: center;
}
.sustainable .index dl {
    display: flex;
    margin-top: 20px;
    text-align: left;
}
.sustainable .index dl dt {
    position: relative;
    width: 311px;
    padding: 24px 15px 24px 58px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    word-break: keep-all;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.sustainable .index dl dt strong {
    position: absolute;
    top: 17px;
    left: 15px;
    font-family: "GmarketSans";
    font-size: 28px;
    line-height: 1.2;
}
.sustainable .index dl dd {
    flex: 1;
}
.sustainable .index dl dd ul li .item {
    position: relative;
    height: 100%;
    padding: 24px 15px 24px 58px;
    background: #f5f5f5;
    color: #2d2d2d;
    font-size: 16px;
    font-weight: 500;
    word-break: keep-all;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.sustainable .index dl dd ul li .item strong {
    position: absolute;
    top: 24px;
    left: 15px;
    font-family: "GmarketSans";
    font-size: 14px;
}
.sustainable .index dl dd > ul > li {
    display: flex;
}
.sustainable .index dl dd > ul > li + li {
    margin-top: 10px;
}
.sustainable .index dl dd > ul > li > * {
    flex: 1;
    margin-left: 10px;
}
.sustainable .index dl dd > ul > li ul li {
    position: relative;
    padding-right: 58px;
}
.sustainable .index dl dd > ul > li ul li + li {
    margin-top: 10px;
}
.sustainable .index dl dd > ul > li .val {
    flex: none;
    position: absolute;
    top: 50%;
    right: 0;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 1px solid #d7d7d7;
    border-radius: 50%;
    background: #fff;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.sustainable .index dl dd > ul > li .val:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px;
    height: 19px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    transform: translate(-50%, -50%);
}
.sustainable .index dl dd > ul > li .val.up:before {
    background-image: url("../images/i_arrow_top.png");
}
.sustainable .index dl dd > ul > li .val.down:before {
    background-image: url("../images/i_arrow_bottom.png");
}
.sustainable .index dl dd > ul > li .val.equal:before {
    width: 20px;
    height: 3px;
    background-image: url("../images/i_minus.png");
}

@media all and (max-width: 1400px) {
    /* ------------------------------------------------------------------------- */
    /* 1. Global
    /* ------------------------------------------------------------------------- */
    .forPc {
        display: none;
    }
    .forMo {
        display: block;
    }
    h3.subtitle {
        font-size: 2.25rem;
    }
    .mTitle1.typeForMobile h3 {
        padding-right: 50%;
    }
    .mTitle1.typeForMobile h3 .ti {
        text-align: left;
    }
    .mGird1 {
        margin: 10px 0 15px;
        padding: 0;
    }
    .mGird1 .mTitle1 .gRt select {
        min-width: 0;
        width: 100%;
    }
    .mGird1 .mTitle1 .gRt select + select {
        margin: 10px 0 0;
    }

    .mGird1:is(.s, .m, .l, .xl) { height: 30rem;}

    /* ------------------------------------------------------------------------- */
    /* 1-4. tab
    /* ------------------------------------------------------------------------- */
    .mTab1 .dep1 a {
        height: auto;
    }
    .mTab1 .dep1 a.sel {
        height: auto;
    }
    .mTab1 .dep1 .selList {
        display: none;
    }
    .mTab1 .dep1 .selList > a {
        flex: none;
    }
    .mTab1 .dep1.selected .selList {
        display: block;
    }
    .mTab1 .dep2 .selList:before {
        left: calc(50% - 1px);
        z-index: 5;
        background-color: #cfcfcf;
    }
    .mTab1 .dep2 .selList a {
        width: 50%;
        height: auto;
    }
    /* ------------------------------------------------------------------------- */
    /* 1-5. list
    /* ------------------------------------------------------------------------- */
    .mList1 .row .mTitle1.type2 h3 {
        padding-left: 40px;
        background-size: 30px auto;
        background-position: center left;
    }
    .mList1 .row .mTitle1.type2 a {
        margin: 0;
        padding: 0;
    }
    .mList1 .row .mTitle1.type2 .more {
        top: 50%;
        margin-top: -15px;
        background-size: 30px auto;
        background-position: center;
    }
    /* ------------------------------------------------------------------------- */
    /* 1-7. layer
    /* ------------------------------------------------------------------------- */
    .layer_inquiryHow {
        width: 90%;
        margin-left: 0;
    }
    /* ------------------------------------------------------------------------- */
    /* 3. Contents
    /* ------------------------------------------------------------------------- */
    .main_roll_nav {
        bottom: 6%;
    }
    .main_roll_nav:after {
        display: none;
    }
    .main_roll_nav li {
        width: 24%;
        vertical-align: bottom;
    }
    /* ------------------------------------------------------------------------- */
    /* 3-7. 평생학습도시
    /* ------------------------------------------------------------------------- */
    #gnrlz-idex ul.depth2 {
        display: block;
    }
    #gnrlz-idex ul.depth2:after {
        display: block;
        top: 13px !important;
    }
    #gnrlz-idex ul.depth2 > li:before {
        top: 50px !important;
        left: 20px !important;
        width: 20px !important;
        height: 1px !important;
    }
    #gnrlz-idex ul.depth2 > li + li:not(:last-of-type):after {
        left: 20px !important;
        width: 1px !important;
        height: 100% !important;
    }
    #gnrlz-idex ul.depth2 > li:first-of-type:not(:only-of-type):after, #gnrlz-idex ul.depth2 > li:last-of-type:not(:only-of-type):after {
        left: 20px;
        width: 1px;
    }
    #gnrlz-idex ul.depth2 > li:first-of-type:not(:only-of-type):after {
        height: 100%;
    }
    #gnrlz-idex ul.depth2 > li:last-of-type:not(:only-of-type):after {
        height: 50px;
    }
    /* ------------------------------------------------------------------------- */
    /* 3-8. 지속가능발전
    /* ------------------------------------------------------------------------- */
    .sustainable .legend {
        padding: 0 20px;
    }
    .sustainable .legend li {
        padding-left: 15px;
    }
    .sustainable .legend li + li {
        margin-left: 20px;
    }
    .sustainable .legend li span {
        width: 10px;
        height: 10px;
        margin-top: -5px;
    }
    .sustainable .goal {
        width: 360px;
        height: 360px;
        margin: 0 -20px;
        background-image: url("../images/gysdg_m.png");
    }
    .sustainable .goal .val span {
        width: 10px;
        height: 10px;
    }
    .sustainable .goal .val span.val0 {
        margin: -158px -46px 0 0;
    }
    .sustainable .goal .val span.val1 {
        margin: -134px -100px 0 0;
    }
    .sustainable .goal .val span.val2 {
        margin: -94px -138px 0 0;
    }
    .sustainable .goal .val span.val3 {
        margin: -40px -162px 0 0;
    }
    .sustainable .goal .val span.val4 {
        margin: 20px -163px 0 0;
    }
    .sustainable .goal .val span.val5 {
        margin: 72px -145px 0 0;
    }
    .sustainable .goal .val span.val6 {
        margin: 118px -108px 0 0;
    }
    .sustainable .goal .val span.val7 {
        margin: 148px -54px 0 0;
    }
    .sustainable .goal .val span.val8 {
        margin: 156px 0 0 -16px;
    }
    .sustainable .goal .val span.val9 {
        margin: 141px 0 0 -72px;
    }
    .sustainable .goal .val span.val10 {
        margin: 106px 0 0 -122px;
    }
    .sustainable .goal .val span.val11 {
        margin: 58px 0 0 -152px;
    }
    .sustainable .goal .val span.val12 {
        margin: -2px 0 0 -165px;
    }
    .sustainable .goal .val span.val13 {
        margin: -58px 0 0 -156px;
    }
    .sustainable .goal .val span.val14 {
        margin: -111px 0 0 -125px;
    }
    .sustainable .goal .val span.val15 {
        margin: -146px 0 0 -80px;
    }
    .sustainable .goal .val span.val16 {
        margin: -164px 0 0 -20px;
    }
    .sustainable .explain ul {
        margin-top: 0;
    }
    .sustainable .explain ul li {
        margin-top: 28px;
    }
    .sustainable .explain ul li dl {
        margin: -10px 0 0 0;
    }
    .sustainable .explain ul li dl:after {
        display: block;
        clear: both;
        content: "";
    }
    .sustainable .explain ul li dl > * {
        display: block;
        width: 48% !important;
        height: 54px;
        margin: 10px 0 0 0;
    }
    .sustainable .explain ul li dl > *:nth-child(odd) {
        float: left;
    }
    .sustainable .explain ul li dl > *:nth-child(even) {
        float: right;
    }
    .sustainable .explain ul li dl dt {
        padding: 0 15px;
        font-size: 24px;
        line-height: 54px;
    }
    .sustainable .explain ul li dl dd a {
        padding: 8px 15px 8px 55px;
        font-size: 0.917rem;
        line-height: 1.2;
        letter-spacing: -0.05rem;
    }
    .sustainable .explain ul li dl dd a strong {
        left: 15px;
        font-size: 1.667rem;
    }
    .sustainable .explain ul li dl dd + dt {
        margin-top: 28px;
        letter-spacing: -0.11rem;
    }
    .sustainable .explain ul li dl dd + dt + dd {
        margin-top: 28px;
    }
    .sustainable .explain ul li .logo {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 28px;
        transform: translateY(0);
    }
    .sustainable .explain ul li .logo img {
        max-width: 100%;
        height: auto;
    }
    .sustainable .index {
        margin-top: 50px;
    }
    .sustainable .index dl {
        display: block;
        position: relative;
        margin-top: 40px;
        padding-bottom: 30px;
    }
    .sustainable .index dl > * {
        display: block;
    }
    .sustainable .index dl dt {
        width: 100%;
    }
    .sustainable .index dl dd > ul > li {
        display: block;
    }
    .sustainable .index dl dd > ul > li > * {
        margin: 4px 0 0;
    }
    .sustainable .index dl dd > ul > li .val {
        top: auto;
        bottom: -24px;
        margin-top: 0;
    }
    .sustainable .index dl dd > ul > li ul li {
        padding-right: 0;
    }
}
@media all and (max-width: 640px) {
    /* ------------------------------------------------------------------------- */
    /* 1. Global
    /* ------------------------------------------------------------------------- */
    /* ------------------------------------------------------------------------- */
    /* 1-4. tab
    /* ------------------------------------------------------------------------- */
    .mTab1 .dep1 a span,
    .mTab1 .dep2 a span {
        overflow: hidden;
        padding: 0 40px 0 15px;
        font-size: 1rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .mTab1 .dep1 a span:before,
    .mTab1 .dep2 a span:before {
        width: 20px !important;
        height: 20px !important;
        margin-top: -10px !important;
    }
    .mTab1 .dep1 .selList a,
    .mTab1 .dep2 .selList a {
        font-size: 1rem;
    }
}