@charset "UTF-8";
/* @import url("/static/commons/css/common.css"); */
@import url(https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/static/woff2/SUIT.css);
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

.material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

.material-icons-outlined {
    font-family: "Material Icons Outlined"; 
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "liga";
}

/* prettier-ignore */
@font-face {
    font-family: "GmarketSansTTF";
    font-style: normal;
    font-weight: 700;
    src: local("Gmarket Sans Bold"), local("GmarketSans-Bold"), url("/static/font/GmarketSansBold.woff2") format("woff2"), url("/static/font/GmarketSansBold.woff") format("woff");
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: "GmarketSansTTF";
    font-style: normal;
    font-weight: 100 500;
    src: local("Gmarket Sans Medium"), local("GmarketSans-Medium"), url("/static/font/GmarketSansMedium.woff2") format("woff2"), url("/static/font/GmarketSansMedium.woff") format("woff");
}

@font-face {
    font-family: "GmarketSansTTF";
    font-style: normal;
    font-weight: 300;
    src: local("Gmarket Sans Light"), local("GmarketSans-Light"), url("/static/font/GmarketSansLight.woff2") format("woff2"), url("/static/font/GmarketSansLight.woff") format("woff");
}

@font-face {
    font-family: JalnanOTF;
    src: url("/static/font/JalnanOTF00.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

.popwrap2 {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
    overflow: auto;
    display: none;
}

.popwrap2.active {
    display: flex;
}

.popwrap2 > .set {
    position: relative;
    width: calc(100% - 20px);
    max-width: 840px;
    max-height: 95vh;
    border-radius: 20px;
    box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.15);
    border: solid 1px #e0e0e0;
    background-color: #fff;
}

.popwrap2 .parent-close {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 60px;
    height: 60px;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: url(/static/lifeStudy/img/main-lpop-close@2x.png) 0 0 no-repeat;
    background-size: cover;
}

@media (max-width: 749px) {
    .popwrap2 .parent-close {
        width: 40px;
        height: 40px;
        right: 5px;
    }
}

.popwrap2 .popuptitle2 {
    padding: 23px;
    background-color: #ebf4fa;
    font-family: JalnanOTF;
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: -0.85px;
    text-align: center;
    color: #000;
    border-radius: 20px 20px 0 0;
}

@media (max-width: 749px) {
    .popwrap2 .popuptitle2 {
        padding: 10px 60px;
        font-size: 20px;
    }
}

.popwrap2 .popuptitle2 strong {
    color: #e4477a;
}

.popwrap2 .mainpopup dt {
    padding: 23px 60px;
    background-color: #ebf4fa;
    font-family: JalnanOTF;
    font-size: 34px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.35;
    letter-spacing: -0.85px;
    text-align: center;
    color: #000;
    border-radius: 20px 20px 0 0;
}

@media (max-width: 749px) {
    .popwrap2 .mainpopup dt {
        padding: 10px 60px;
        font-size: 20px;
    }
}

.popwrap2 .mainpopup dd {
    padding: 40px 60px;
    
}

@media (max-width: 749px) {
    .popwrap2 .mainpopup dd {
        padding: 15px;
        background-image: none;
    }
}

@media (min-width: 750px) {
    .popwrap2 .mainpopup dd {
        background: url(/static/lifeStudy/img/main-lpop-deco@2x.png) calc(100% - 58px) calc(100% - 50px) no-repeat;
        padding-right: 300px;
        background-position: calc(100% - 30px) calc(100% - 50px);
        background-size: 272px auto;
    }
}

@media (min-width: 1200px) {
    .popwrap2 .mainpopup dd {
        background-position: calc(100% - 58px) calc(100% - 50px);
        background-size: 292px auto;
    }
}

.popwrap2 .mainpopup .t1 {
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.09;
    letter-spacing: -0.55px;
    text-align: left;
    color: #d81856;
}

@media (max-width: 749px) {
    .popwrap2 .mainpopup .t1 {
        font-size: 18px;
    }
}

.popwrap2 .mainpopup .b {
    max-width: 390px;
    margin-top: 15px;
    padding: 18px 28px 18px 29px;
    border-radius: 10px;
    background-color: #e4477a;
    color: #fff;
    letter-spacing: -0.4px;
}

@media (max-width: 749px) {
    .popwrap2 .mainpopup .b {
        padding: 10px;
    }
}

.popwrap2 .mainpopup .b strong {
    font-weight: bold;
}

@media (max-width: 749px) {
    .popwrap2 .popwrap2-body {
        max-height: 95vh;
        overflow-y: auto;
    }
}

.info001 {
    min-height: 261px;
    padding: 20px;
    padding-top: 45px;
}

.info001 p {
    margin-bottom: 20px;
    
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: -0.45px;
}

.info001 p strong {
    color: #e4477a;
}

@media (min-width: 750px) {
    .info001 {
        padding: 50px 0 0 337px;
        background: url(/static/lifeStudy/img/infor0010321.png) 0 0 no-repeat;
    }
}

.btn-line {
    display: inline-block;
    width: 221px;
    height: 53px;
    padding: 18px 0;
    text-align: center;
    border-radius: 10px;
    border: solid 1px #e34679;
    background-color: var(--white);
    
    font-size: 18px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #d81856;
}

[class^=ico-] {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
}

.color-point {
    color: #e4477a !important;
}

.color-red {
    color: #bc2222;
}

a {
    color: inherit;
}

html {
    font-size: 17px;
}

body {
    font-size: 18px;
}

@media (max-width: 749px) {
    body {
        word-break: keep-all;
        line-height: 1.45;
		 font-size: 16px;
    }
}

body.ovh {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

b,
strong {
    font-weight: 800;
}

.a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.global {
    display: none;
    position: relative;
}

@media (min-width: 1200px) {
    .global {
        display: block;
    }
}

.global .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

.global__sitemap {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
}

.global__sitemap .link-portal {
    position: relative;
    display: block;
    height: 49px;
    padding: 18px 41px;
    line-height: 1;
    background-color: #e4477a;
    color: #fff;
    border-radius: 0 10px 0 0;
}

.global__sitemap .link-portal::before {
    content: "";
    background-color: #e4477a;
    position: absolute;
    right: 10px;
    top: 0;
    height: 49px;
    width: 100vw;
    z-index: -1;
}

.global__sitemap > button {
    width: 176px;
    height: 42px;
    border: solid 1px #e8e8e8;
    border-width: 1px 1px 0 0;
    background-color: #fff;
    line-height: 1;
    margin: 0 12px 0 0;
    
    font-size: 15px;
    font-weight: 500;
    color: #616161;
}

.global__sitemap > button::after {
    content: "\e5cf";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    color: #808080;
}

.global__site-list {
    display: none;
    position: absolute;
    left: 0;
    top: 49px;
    padding: 20px 30px;
    grid-template-columns: 230px 150px;
    gap: 20px;
    border-radius: 5px;
    box-shadow: 0px 3px 8px 0 rgba(0, 0, 0, 0.04);
    border: solid 1px #ddd;
    background-color: #fff;
}

.active + .global__site-list {
    display: grid;
    z-index: 200;
}

.global__site-list ul {
    margin-top: 30px;
}

.global__site-list li {
    margin: 3px 0;
}

.global__site-list a {
    display: block;
    position: relative;
    padding-left: 8px;
}

.global__site-list a:before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background-color: #000;
    position: absolute;
    left: 0;
    top: calc(0.5em + 2px);
}

.global__site-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 7.21875 5.78125 L 5.78125 7.21875 L 14.5625 16 L 5.78125 24.78125 L 7.21875 26.21875 L 16 17.4375 L 24.78125 26.21875 L 26.21875 24.78125 L 17.4375 16 L 26.21875 7.21875 L 24.78125 5.78125 L 16 14.5625 Z"/></svg>') center center no-repeat;
    background-size: 16px;
}

.global__site-tit {
    height: 35px;
    border-radius: 5px;
    background-color: #eee;
    
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #151515;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.global__user-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.global__user-nav a {
    height: 48px;
    line-height: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #5c5c5c;
    font-weight: 500;
}

.global__user-nav a strong {
    padding-right: 4px;
    color: #000;
}

.global__user-nav a.point {
    color: #e4477a;
}

.global__user-nav .invalid-name {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    margin-right: 10px;
    background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/invalid-name.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-size: 16px auto;
    background-position: center center;
    background-color: #666;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .global__user-nav .invalid-name {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/invalid-name@2x.png");
    }
}

/* @media (max-width: 1199px) {
    #header {
        border-bottom: 1px solid #dadada;
    }
}

@media (min-width: 1200px) {
    #header {
        height: 98px;
        padding-top: 20px;
        border: 1px solid #dadada;
        border-width: 1px 0;
    }
} */

.container {
    max-width: 1320px;
    padding: 0 20px;
    margin: 0 auto;
}

@media (min-width: 750px) {
    #container {
        margin-top: 45px;
    }
}

@media (min-width: 1100px) {
    #container {
        display: flex;
        justify-content: space-between;
        margin-top: 45px;
        padding-bottom: 60px;
    }
}

@media (min-width: 1100px) and (min-width: 1320px) {
    #container {
        padding-bottom: 80px;
    }
}

@media (min-width: 1100px) {
    #container .lnb {
        flex-basis: 19.5313%;
    }
}

@media (min-width: 1100px) and (min-width: 1320px) {
    #container .lnb {
        flex-basis: 250px;
    }
}

@media (min-width: 1100px) {
    #container #main {
        flex-basis: 75%;
        min-width: 0;
    }
}

@media (min-width: 1100px) and (min-width: 1320px) {
    #container #main {
        flex-basis: 960px;
    }
}

#container.full {
    display: block;
}

#container.full .lnb {
    display: none;
}

#container.full .hgroup {
    text-align: center;
}

#container.wide {
    display: block;
}

#container.wide .lnb {
    display: none;
}

@media (max-width: 1099px) {
    .lnb {
        display: none;
    }
}

.lnb__set {
    border-radius: 20px;
    box-shadow: -2.7px 1.3px 7px 0 rgba(0, 0, 0, 0.15);
    border: solid 1px #e4e8e9;
    background-color: #fff;
}

.lnb__title {
    padding: 49px 0 41px;
    background-color: #429772;
    text-align: center;
    font-family: JalnanOTF;
    font-size: 25px;
    color: #fff;
    line-height: 1.1;
    border-radius: 20px 20px 0 0;
    background-image: url(/static/lifeStudy/img/pattern-01.png), url(/static/lifeStudy/img/pattern-02.png);
    background-position: 18px 21px, calc(100% - 24px) calc(100% - 14px);
    background-repeat: no-repeat, no-repeat;
}

.lnb nav > ul {
    padding: 7px 25px 70px;
}

.lnb__depth1 > a {
    position: relative;
    display: block;
    padding: 12px 25px 9px 5px;
    
    font-size: 18px;
    font-weight: bold;
    color: #484848;
    border-bottom: 1px solid #e0e0e0;
}

.lnb__depth1 > a::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 8px 8px 2px 8px;
    background-color: #eff3f4;
}

.lnb__depth1 > a::before {
    content: "";
    position: absolute;
    top: 19px;
    right: 8px;
    width: 12px;
    height: 8px;
    background: url('data:image/svg+xml;utf8,<svg fill="%23949494"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="8px"><path fill-rule="evenodd"   d="M10.601,0.374 L6.000,4.778 L1.400,0.374 L0.000,1.713 L6.000,7.459 L12.000,1.713 L10.601,0.374 Z"/></svg>') center center no-repeat;
    background-size: 9px auto;
    z-index: 1;
    transform: rotate(-90deg);
    transition: 0.5s;
}

.lnb__depth1.on > a {
    color: #429772;
}

.lnb__depth1.on > a::after {
    background-color: #429772;
}

.lnb__depth1.on > a::before {
    top: 19px;
    right: 8px;
    background: url('data:image/svg+xml;utf8,<svg fill="%23fff"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="8px"><path fill-rule="evenodd"   d="M10.601,0.374 L6.000,4.778 L1.400,0.374 L0.000,1.713 L6.000,7.459 L12.000,1.713 L10.601,0.374 Z"/></svg>') center center no-repeat;
    background-size: 9px auto;
    transform: rotate(0deg);
}

.lnb__depth1.on .dp2 {
    display: block;
}

.lnb .dp2 {
    position: relative;
    display: none;
    padding-left: 10px;
    border-top: 2px solid #429772;
    border-bottom: 2px solid #429772;
    margin-top: -1px;
    overflow: hidden;
    z-index: 1;
}

.lnb .dp2 > li.on .dp3 {
    display: block;
}

.lnb .dp2 > li > a {
    margin-bottom: -1px;
    display: block;
    padding: 11px 0 9px;
    
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px dotted #dadada;
    background: url(/static/lifeStudy/img/lnb-dp2-arr-gray.png) calc(100% - 14px) 16px no-repeat;
}

.lnb .dp2 > li.on > a {
    color: #e4477a;
    background: url(/static/lifeStudy/img/dp2-arr-on.png) calc(100% - 14px) 16px no-repeat;
}

.lnb .dp3 {
    display: none;
    border: 1px solid #dadada;
    border-width: 1px 0;
    margin-bottom: -1px;
}

.lnb .dp3 > li > a {
    display: block;
    padding: 4px 10px;
    
    font-size: 14px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #757575;
}

.lnb .dp3 > li > a::before {
    content: "- ";
}

.lnb .dp3 > li + li > a {
    border-top: 1px dashed #dadada;
}

.lnb .dp3 > li.on > a {
    color: #e4477a;
}

@media (min-width: 750px) {
    .hgroup {
        margin-bottom: 28px;
    }
}

@media (max-width: 749px) {
    .hgroup {
        margin: 26px 0;
    }
}

.content-title {
    padding-top: 6px;
    font-family: JalnanOTF;
    font-size: 30px;
    color: #272626;
    line-height: 1.3;
}

@media (max-width: 749px) {
    .content-title {
        font-size: 18px;
    }
}

.location {
    
    font-size: 15px;
    font-weight: 500;
    color: #808080;
    line-height: 1;
}

.location li.home {
    margin-right: -3px;
}

.location li.home i {
    vertical-align: middle;
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/home-icon.png");
    background-repeat: no-repeat;
    background-size: 13px auto;
    background-position: center 1px;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .location li.home i {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/home-icon@2x.png");
    }
}

.location li.home::before {
    display: none !important;
}

.location li {
    display: inline;
}

.location li::before {
    content: "\e409";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    color: #808080;
}

.location li strong {
    color: #000;
}

.m-nav-open {
    display: none;
    position: relative;
    z-index: 1;
    width: 68px;
    height: 68px;
    border-radius: 6px 0 0 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="21"> <path fill-rule="evenodd" fill="%23FFF" d="M26.499 11.999h-17a1.5 1.5 0 1 1 0-2.999h17a1.5 1.5 0 1 1 0 2.999zm0-8.999H1.5a1.5 1.5 0 0 1 0-3h24.999a1.5 1.5 0 1 1 0 3zm-22 14.999h22a1.5 1.5 0 1 1 0 3.001h-22a1.5 1.5 0 0 1 0-3.001z"/> </svg>') center center no-repeat;
    background-color: #e4477a;
}

@media (max-width: 1199px) {
    .m-nav-open {
        display: block;
    }
}

@media (max-width: 1199px) {
    .gnb {
        display: none;
    }
}

.gnb-m {
    display: none;
}

@media (max-width: 1199px) {
    .gnb-m {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        height: 100vh;
        overflow-y: auto;
        background-color: #fff;
    }

    .gnb-m.active {
        display: block;
    }

    .gnb-m__close {
        position: absolute;
        right: 0;
        top: 0;
        width: 54px;
        height: 58px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .gnb-m__close i.ico-m-nav-close {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/ico-m-nav-close.png");
        background-repeat: no-repeat;
        background-size: 14px auto;
    }
}

@media (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2) {
    .gnb-m__close i.ico-m-nav-close {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/ico-m-nav-close@2x.png");
    }
}

@media (max-width: 1199px) {
    .gnb-m__header {
        background-color: #e4477a;
    }

    .gnb-m__header i.e-7-fd-person {
        width: 16px;
        height: 16px;
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/e-7-fd-person.png");
        background-repeat: no-repeat;
        background-size: 16px auto;
    }
}

@media (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2) {
    .gnb-m__header i.e-7-fd-person {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/e-7-fd-person@2x.png");
    }
}

@media (max-width: 1199px) {
    .gnb-m__header i.ea-77-login {
        width: 17px;
        height: 17px;
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/ea-77-login.png");
        background-repeat: no-repeat;
        background-size: 17px auto;
    }
}

@media (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2) {
    .gnb-m__header i.ea-77-login {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/ea-77-login@2x.png");
    }
}

@media (max-width: 1199px) {
    .gnb-m__header a {
        height: 58px;
        padding: 0 18px;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        
        font-size: 14px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: left;
        color: #fff;
    }

    .gnb-m__header a i {
        display: inline-block;
        margin-right: 8px;
        transform: translateY(-2px);
    }

    .gnb-m__body {
        position: relative;
    }

    .gnb-m .gnb__depth1 {
        --depth1W: 110px;
        width: var(--depth1W);
    }

    .gnb-m .gnb__depth1 > a {
        padding: 20px 10px;
        display: block;
        line-height: 1.27;
        
        font-size: 15px;
        text-align: center;
        word-break: break-all;
        background-color: #f7f7f7;
    }

    .gnb-m .gnb__depth1.on > a,
    .gnb-m .gnb__depth1.active > a {
        font-weight: bold;
        color: #e4477a;
        background-color: #fff;
        border: 1px solid #e2e2e2;
        border-width: 1px 0;
        letter-spacing: 0.5px;
    }

    .gnb-m .gnb__depth1.on > div,
    .gnb-m .gnb__depth1.active > div {
        display: block;
    }

    .gnb-m .gnb__subnav-set {
        display: none;
        position: absolute;
        left: var(--depth1W);
        top: 0;
        background-color: #fff;
        width: calc(100% - var(--depth1W));
    }

    .gnb-m .gnb__subnav dl {
        display: none;
    }

    .gnb-m .gnb__depth2 > a {
        display: block;
        padding: 14px 15px;
        
        font-size: inherit;
        font-weight: inherit;
        color: #000;
        border-bottom: 1px solid #eeeeee;
    }

    .gnb-m .gnb__depth3 {
        background-color: #f7f7f7;
    }

    .gnb-m .gnb__depth3 > li > a {
        display: block;
        margin-left: 15px;
        padding: 10px 5px 3px 8px;
        
        font-size: inherit;
        font-weight: inherit;
        font-stretch: normal;
        color: #000;
        position: relative;
    }

    .gnb-m .gnb__depth3 > li > a::before {
        content: "";
        width: 3px;
        height: 3px;
        border-radius: 3px;
        background-color: #000;
        position: absolute;
        top: 18px;
        left: 0;
    }

    .gnb-m .gnb__depth4 {
        padding-left: 7px;
        background-color: #fff;
    }

    .gnb-m .gnb__depth4 > li > a {
        display: block;
        padding: 4px 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.5;
        color: #000;
        position: relative;
    }

    .gnb-m .gnb__depth4 > li > a::before {
        content: "";
        width: 4px;
        height: 1px;
        background-color: #000;
        position: absolute;
        top: 14px;
        left: 0;
    }

    .gnb-m .gnb .ico-gnb-mypage {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        width: 54px;
        height: 54px;
        border-radius: 54px;
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/ico-gnb-mypage.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-size: contain;
        transform: translateY(-2px);
    }
}

@media (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2) {
    .gnb-m .gnb .ico-gnb-mypage {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/ico-gnb-mypage@2x.png");
    }
}

#content > h2,
.hx > h2,
.bu1 {
    font-size: 1.5rem;
    color: rgb(44, 66, 142);
    line-height: 1.75rem;
    font-weight: 500;
    letter-spacing: -0.52px;
    margin-bottom: 26px;
}

* + #content > h2,
* + .hx > h2,
* + .bu1 {
    margin-top: 40px;
}

#content > h2 > span,
.hx > h2 > span,
.bu1 > span {
    font-size: 16px;
    font-weight: normal;
    font-family: SUIT, "Noto Sans KR", "Noto Sans", "AppleGothic", "맑은 고딕", "돋움", "dotum", Helvetica, Arial, sans-serif;
}

#content > h2 > a,
.hx > h2 > a,
.bu1 > a {
    font-weight: normal;
}

#content > h2.no-bull::before,
.hx > h2.no-bull::before,
.bu1.no-bull::before {
    display: none;
}

.hx > h3,
.bu2 {
    position: relative;
    font-family: JalnanOTF;
    font-size: 20px;
    margin-top: 26px;
    margin-bottom: 10px;
}

.hx > h3:after,
.bu2:after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 3px;
    background-color: #e4477a;
    border-radius: 50%;
    vertical-align: top;
    transform: translateY(5px);
}

.hx > h3 + .n + .list-num,
.hx > h3 + .list-num,
.bu2 + .n + .list-num,
.bu2 + .list-num {
    margin-left: 11px;
}

.hx > h3 > span,
.bu2 > span {
    font-size: 16px;
    font-weight: normal;
    font-family: SUIT, "Noto Sans KR", "Noto Sans", "AppleGothic", "맑은 고딕", "돋움", "dotum", Helvetica, Arial, sans-serif;
}

.hx > h3.point,
.bu2.point {
    color: #e4477a;
}

.hx > h3.img-rt-top,
.bu2.img-rt-top {
    margin-top: -5px;
    margin-left: 0;
}

.hx > h3 + .list,
.bu2 + .list {
    margin-top: -5px;
}

.hx > h3 em,
.bu2 em {
    color: #e4477a;
}

.hx > h3 .color,
.bu2 .color {
    color: #429772;
}

.hx > h3 .point2,
.bu2 .point2 {
    font-size: 16px;
    font-weight: bold;
    color: #e4477a;
}

.hx > h3--type2::after,
.bu2--type2::after {
    display: none;
}

.bu3 {
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 50px 0 15px;
    font-weight: 900;
}

.list,
.list2,
.list3,
.list-lb {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.list ul,
.list ol,
.list2 ul,
.list2 ol,
.list3 ul,
.list3 ol,
.list-lb ul,
.list-lb ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

dl.list {
    margin: 0;
}

dl.list dt {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="3px" height="3px"> <path fill-rule="evenodd"  fill="rgb(0, 0, 0)" d="M1.500,-0.001 C2.328,-0.001 3.000,0.671 3.000,1.499 C3.000,2.328 2.328,3.000 1.500,3.000 C0.671,3.000 -0.000,2.328 -0.000,1.499 C-0.000,0.671 0.671,-0.001 1.500,-0.001 Z"/> </svg>') 0 12px no-repeat;
    background-size: 5px;
    padding-left: 16px;
}

dl.list dd {
    margin-left: 10px;
    text-indent: -16px;
    padding-left: 16px;
}

dl.list dd:before {
    content: "- ";
}

p + .table {
    margin-top: 0;
}

[class^=point] {
    color: #da0202;
}

[class^=underline] {
    text-decoration: underline;
}

@media (min-width: 750px) {
    .m1 {
        margin-left: 16px;
    }
}

.m2 {
    margin-left: 25px;
}

dl.m1 * {
    margin-bottom: 5px;
}

.list-none {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.list-none ul,
.list-none ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.bu-dot {
    position: relative;
    padding-left: 13px;
}

.bu-dot:before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #939393;
    position: absolute;
    left: 0;
    top: calc(0.5em + 2px);
}

.list-arrow {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left: 20px;
}

.list-arrow ul,
.list-arrow ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

* + .list-arrow {
    margin-top: 10px;
}

.list-arrow li {
    position: relative;
    line-height: 2rem;
}

.list-arrow li::before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 5px;
    height: 11px;
    font-size: 25px;
    color: #2c428e;
    top: 3px;
    left: -25px;
    content: "\e5df";
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

strong.red {
    color: #bc2222;
}


.footer-bottom {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

@media (max-width: 749px) {
    .footer-bottom {
        margin: 15px 0;
        flex-direction: column;
    }
}

.footer-bottom .copyright {
    
    font-size: 16px;
    font-weight: 300;
    line-height: 1.88;
    color: #1c1c1c;
    font-size: 15px;
}

.footer-bottom .copyright address {
    font-style: normal;
}

.footer-bottom .f_qna_link {
    background: #e4477a;
	text-decoration:none;
    padding: 15px 25px;
    border-radius: 5px;
    color: #fff;
}

.footer-bottom .f_qna_link a {
    color: #ffffff;
    font-weight: bold;
    /* text-decoration: underline; */
    display: flex;
    font-size: 17px;
    align-items: center;
}

@media (max-width: 749px) {
    .footer-bottom .mark {
        margin-top: 20px;
        text-align: center;
    }

    .footer-bottom .f_qna_link {
        padding: 12px 20px;
    }

    .footer-bottom .f_qna_link br {
        display: none;
    }

    .footer-bottom .f_qna_link a {
        font-size: 15px
    }
}

@media (min-width: 1200px) {
    .footer-bottom .mark {
        margin-top: -16px;
        margin-left: auto;
    }
}

.footer-bottom .mark img {
    width: 94px;
}

.family-site {
    padding: 29px 0 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 13px;
}

@media (max-width: 749px) {
    .family-site {
        flex-direction: column;
        align-items: stretch;
    }
}

.family-site__item {
    flex-grow: 1;
    display: grid;
    grid-template-columns: auto 54px;
}

.family-site__item select {
    width: 100%;
    height: 43px;
    border: solid 1px #dcdcdc;
    border-right-width: 0;
    background-color: #fff;
    border-radius: 3px;
}

.family-site__item button {
    width: 54px;
    height: 43px;
    background-color: #666;
    border-radius: 0 3px 3px 0;
    
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

.fnav ul {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

@media (max-width: 749px) {
    .fnav ul {
        flex-wrap: wrap;
        gap: 5px 20px;
    }
}

.fnav a {
    display: block;
    padding: 4px 0;
    font-size: 16px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #333;
}

.fnav a strong {
    color: #4ea47e;
    font-weight: bold;
}

.visible {
    display: none;
}

@media (min-width: 1200px) {

    .visible-lg,
    .visible-pc {
        display: block;
    }
}

@media (min-width: 750px) {
    .visible-tablet {
        display: block;
    }
}

@media (max-width: 749px) {
    .visible-mobile {
        display: block;
    }
}

@media (max-width: 749px) {
    .visible-mobile-dib {
        display: inline-block;
    }
}

@media (min-width: max-width) and (max-width: 749px) {
    .visible-sm {
        display: block;
    }
}

@media (max-width: 749px) {
    .hide-sm {
        display: none;
    }
}

br.mobile {
    display: none;
}

@media (max-width: 749px) {
    br.mobile {
        display: inline;
    }
}

br.pc {
    display: none;
}

@media (min-width: 1200px) {
    br.pc {
        display: inline;
    }
}

.align-c {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.align-cc {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

::placeholder {
    color: #666;
}

select,
input,
textarea {
    color: #333;
    background-color: #f7f7f7;
}

input[type=radio] ~ i ~ span,
input[type=checkbox] ~ i ~ span {
    margin-right: 10px;
}

input[type=radio] {
    position: relative;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: -3px;
    border: 1px solid #dadada;
}

input[type=radio]::before {
    content: "";
    position: absolute;
    inset: -1px;
    background-color: #fff;
    border: solid 1px #ddd;
    border-radius: 50px;
}

input[type=radio]::after {
    content: "";
    position: absolute;
    inset: 9px;
    background-color: #e4477a;
    opacity: 0;
    transition: 0.2s;
}

input[type=radio]:checked::before {
    border: solid 1px #e4477a;
}

input[type=radio]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    background-color: #e4477a;
    opacity: 1;
    border-radius: 50px;
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
    transform: translateY(4px);
    position: relative;
}

input[type=checkbox]::before {
    content: "";
    position: absolute;
    inset: 0px;
    background-color: #fff;
    border: solid 1px #ddd;
}

input[type=checkbox]::after {
    content: "";
    position: absolute;
    inset: 9px;
    background-color: #e4477a;
    opacity: 0;
    transition: 0.2s;
}

input[type=checkbox]:checked::before {
    border: solid 1px #e4477a;
}

input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    background-color: #e4477a;
    opacity: 1;
}

button.chk {
    padding: 0;
    background-color: #fff;
    line-height: 1;
    text-align: left;
}

button.chk::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 2px solid #eee;
    display: inline-block;
    vertical-align: text-bottom;
    background-color: #ffffff;
    margin-right: 6px;
}

button.chk.on::before {
    background: url(/static/fss/img/common/radio.png) center center no-repeat;
    background-size: 100%;
    border-width: 0 !important;
}

input[type=email],
input[type=number],
input[type=date],
input[type=text],
input[type=password],
input[type=file],
select,
textarea {
    border: 1px solid #eee;
    padding: 4px 10px;
    line-height: 20px;
    height: 40px;
    vertical-align: middle;
    outline: none;
    border-radius: 0;
    background-color: #fff;
}

input[type=email]:hover,
input[type=email]:focus,
input[type=email]:active,
input[type=number]:hover,
input[type=number]:focus,
input[type=number]:active,
input[type=date]:hover,
input[type=date]:focus,
input[type=date]:active,
input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active,
input[type=password]:hover,
input[type=password]:focus,
input[type=password]:active,
input[type=file]:hover,
input[type=file]:focus,
input[type=file]:active,
select:hover,
select:focus,
select:active,
textarea:hover,
textarea:focus,
textarea:active {
    box-shadow: 0 0 5px #008fd4;
    border-color: #fff;
}

input[type=password] {
    font-family: serif;
}

input.date,
input.month,
input.sdate,
input[type=date],
input.edate {
    background: #f7f7f7 url(/static/lifeStudy/img/ico_calendar@2x.png) calc(100% - 10px) center no-repeat;
    background-size: 16px;
    padding-right: 0;
    text-indent: 0;
    cursor: pointer;
}

::-webkit-calendar-picker-indicator {
    width: 30px;
    margin: 0;
    height: 34px;
    background-position: right center;
}

input[type=time] {
    height: 34px;
    border: 1px solid #eee;
}

input::-ms-clear,
input::-ms-reveal {
    background-color: #fff;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
    background-color: #fff;
}

input[type=text]:disabled {
    background-color: #f5f5f5;
}

select {
    appearance: none;
    padding-right: 27px;
    background: #f7f7f7 url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 17.7"  xml:space="preserve"> <path d="M1.7,0L0,1.7l15.1,15.1l0.9,0.8l0.9-0.8L32,1.7L30.3,0L16,14.3L1.7,0z"/> </svg>') center center no-repeat;
    background-size: 10px 6px;
    background-position-y: center;
    background-position-x: calc(100% - 13px);
    font-size:17px;
}

@media (min-width: 750px) and (max-width: 1199px) {
    select {
        background-position-x: calc(100% - 4px);
    }
}

select::-ms-expand {
    display: none;
}

select.default {
    width: 100%;
}

@media (min-width: 750px) and (max-width: 1199px) {
    select.default {
        width: 300px;
    }
}

textarea {
    width: 100%;
    height: auto;
}

input {
    cursor: auto;
}

.sh input.sdate,
.sh input.edate,
.sh input.date,
.sh input.month {
    width: 154px;
}

.popup .sh input.sdate,
.popup .sh input.edate,
.popup .sh input.date,
.popup .sh input.month {
    width: calc(50% - 55px);
    max-width: 185px;
}

input.sdate + img,
input.edate + img,
input.date + img,
input.month + img {
    margin-left: -33px;
}

input[type=file] {
    height: auto;
    padding: 7px;
}

@media (max-width: 749px) {
    input[type=file] {
        width: 100%;
    }
}

input[type=button] {
    margin: 0 1px;
}

.form-inline input[type=file] {
    display: block;
    width: 100%;
}

input[type=text].phone-number1 {
    width: 86px;
    text-align: center;
}

input[type=text].post-number {
    width: 120px;
}

input[type=text].chars-md {
    width: 150px;
}

input[type=text].number-sm {
    width: 40px;
}

input[type=text].number-md {
    width: 80px;
}

input[type=text].companyCode1 {
    width: 30px;
    text-align: center;
}

input[type=text].companyCode2 {
    width: 20px;
    text-align: center;
}

input[type=text].companyCode3 {
    width: 50px;
    text-align: center;
}

input[type=text].emailId {
    width: calc(100% - 90px);
}

input[type=text].emailAddr {
    width: 100%;
}

@media (max-width: 749px) {
    input[type=text]#emailFull {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (max-width: 749px) {
    input[type=text]#emailCode {
        width: calc(100% - 86px);
    }
}

@media (min-width: 750px) and (max-width: 1199px) {
    input[type=text].emailId {
        width: calc(50% - 90px);
    }

    input[type=text].emailAddr {
        width: calc(50% - 90px);
    }
}

input[readonly] {
    background-color: #eee;
}

input[type=text],
input[type=password],
input[type=date],
input[type=number],
input[type=text] {
    -webkit-appearance: none;
    font-family: SUIT, "Noto Sans KR", "Noto Sans", "AppleGothic", "맑은 고딕", "돋움", "dotum", Helvetica, Arial, sans-serif;
}

@media (max-width: 749px) {
    input[type=text].phone-number1 {
        width: 70px;
    }

    input[type=text] + input[type=text] {
        margin-top: 5px;
    }

    .r-has-btn {
        width: calc(100% - 125px) !important;
    }

    .w100p-m {
        width: 100%;
    }
}

textarea.api {
    border-radius: 0;
    border-color: #eee;
    resize: none;
}

.email-set2 + .email-code {
    margin-top: 10px;
}

.input-word input {
    width: calc(100% - 35px);
    max-width: 230px !important;
}

.idnumber {
    position: relative;
    display: inline-block;
    padding-right: 50px;
    width: 100%;
    max-width: 280px;
}

.login .idnumber {
    padding-right: 0;
}

.idnumber > input {
    width: calc(50% - 11px) !important;
}

@media (min-width: 750px) {
    .login .idnumber > input {
        max-width: 170px;
    }
}

.idnumber .hyphen {
    display: inline-block;
    width: 14px;
    text-align: center;
}

.safari .idnumber .hyphen {
    width: 12px;
}

.idnumber button.b-default {
    margin: 8px 0 0 0;
}

@media (min-width: 750px) {
    .idnumber button.b-default {
        margin: 0 0 0 4px;
    }
}

.idnumber__lastnumber {
    position: relative;
    display: inline-block;
    width: calc(50% - 11px) !important;
}

@media (min-width: 750px) {
    .login .idnumber__lastnumber {
        max-width: 170px;
    }
}

.idnumber__lastnumber input {
    width: 100%;
}

.idnumber-namecheck {
    display: inline-block;
    padding-right: 0;
}

@media (max-width: 749px) {
    .idnumber-namecheck {
        max-width: calc(100% - 100px);
    }
}

.idnumber.idnumber-ok .b-ok {
    min-width: 70px;
    margin-left: 5px;
    padding-left: 0px;
    padding-right: 0px;
}

.keypad-open,
.vKeypadOpen {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 40px;
    background-image: url(/static/commons/img/ico-vkeyboard.png);
    background-repeat: no-repeat;
    background-size: auto auto;
    background-position: center center;
}

.vkeypad-set .pad-label {
    display: block;
}

@media (min-width: 750px) {
    .vkeypad-set .pad-label {
        padding-left: 134px;
        display: block;
        width: auto;
    }
}

.vkeypad-set .vkeypad {
    display: inline-block;
    width: 250px;
}

.vkeypad-set .vkeypad [type=password] {
    margin: 0;
}

.vkeypad {
    position: relative;
}

.sh-pop .vkeypad {
    max-width: 200px;
}

.pop-input .vkeypad {
    float: left;
    width: calc(100% - 10px - 66px);
}

.bd-reg .vkeypad {
    display: inline-block;
    vertical-align: middle;
}

.pw-single .vkeypad {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 90px);
}

@media (min-width: 750px) {
    .pw-single .vkeypad {
        margin-left: 20px;
        width: 200px;
    }
}

@media (max-width: 749px) {
    .pw-single .vkeypad label {
        width: auto;
    }
}

.vkeypad input[type=password] {
    width: calc(100% - 1px);
    padding-right: 50px;
}

.popwrap__body__cont .vkeypad input[type=password] {
    width: calc(100% - 0px) !important;
}

.vkeypad .pad {
    display: block;
    margin-bottom: 10px;
}

.pad-label {
    display: block;
    margin-bottom: 10px;
}

.pad-label span {
    display: inline-block;
    margin-left: 10px;
}

.next-toggle + div {
    display: none;
}

.next-toggle:checked {
    transform: translateY(10px);
}

.next-toggle:checked + .email-set {
    display: inline-block;
}

@media (max-width: 749px) {
    .next-toggle:checked + .email-set {
        margin-top: 10px;
    }
}

@media (min-width: 1200px) {
    .input-label-group {
        display: inline-block;
    }
}

@media (max-width: 749px) {
    .input-label-group {
        display: flex;
        flex-direction: column;
        justify-content: normal;
        align-items: normal;
    }

    .input-label-group label {
        display: block;
    }

    .input-label-group [type=text] {
        width: 100%;
    }
}

@media (min-width: 750px) {
    .md\:ml-6 {
        margin-left: 6px;
    }
}

@media (min-width: 1200px) {
    .lg\:ml-5 {
        margin-left: 5px;
    }

    .lg\:ml-6 {
        margin-left: 6px;
    }
}

@media (min-width: 750px) {
    .sm\:visible {
        display: none;
    }
}

@media (max-width: 749px) {
    .md\:visible {
        display: none;
    }
}

@media (max-width: 1200px) {
    .lg\:visible {
        display: none;
    }
}

@media (max-width: 749px) {
    .sm\:hidden {
        display: none;
    }
}

@media (min-width: 750px) {
    .md\:hidden {
        display: none;
    }
}

@media (min-width: 1200px) {
    .lg\:hidden {
        display: none;
    }
}

@media (max-width: 749px) {
    .sm\:w100p {
        width: 100%;
    }
}

.map-svg {
    width: 451px;
    height: 366px;
}

.map-svg path {
    cursor: pointer;
    fill: #dbdbe1;
    fill-rule: evenodd;
    transition: all 0.5s;
}

.map-svg path.active {
    fill: #e4477a;
}

g {
    transition: all 0.5s;
    /* pointer-events: bounding-box; */
}

path:hover {
    /* background-color:yellow; */
}

.map-nav li > a {
    position: absolute;
}

.map-nav li > a .subject {
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.4px;
    text-align: left;
    color: #666;
    border-radius: 3px;
    padding: 4px 2px 0;
    transition: all 0.5s;
    transition-delay: 0.1s;
    position: relative;
    z-index: 110;
    color: #000;
    text-shadow: -2px -2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 2px 0 #fff;
    font-weight: 700;
}
.map-nav li > a.active .subject {
    font-size: 24px;
}
.map-nav li > a:focus .subject {
    outline: 1px dashed #141414;
}


.map-nav li > a.active + .box {
    display: block;
    animation: fadeleftin 0.5s;
    animation-delay: 1225ms;
    animation-fill-mode: forwards;
}

@media (max-width: 749px) {
    .map-nav li > a.active + .box {
        display: none;
    }
}

.map-nav li > a.active::before {
    content: "";
    /* background-image: url(/static/lifeStudy/img/sprite-main.png); */
    background-position: 0px 0px;
    width: 50px;
    height: 77px;
    position: absolute;
    left: calc(50% - 26px);
    bottom: 7px;
    pointer-events: none;
    z-index: 111;
}

@media (min-width: 750px) {
    .map-nav li > a.active::before {
        animation: fadein 0.5s;
    }
}

@media (max-width: 749px) {
    .map-nav li > a.active::before {
        transform: scale(0.72);
        transform-origin: center bottom;
    }
}

.map-nav .box {
    opacity: 0;
    display: none;
    position: absolute;
    left: 347px;
    top: 149px;
    padding: 16px 20px;
    background-color: #666666;
    color: #fff;
    border-radius: 14px;
    z-index: 100;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
    animation-fill-mode: backwards;
    display:none !important;
}

.map-nav .box__title {
    margin-bottom: 8px;
    
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.48px;
    color: #fff;
}

.map-nav .box .bu {
    padding-left: 12px;
    
    font-size: 16px;
    font-weight: 500;
    line-height: 1.44;
    letter-spacing: -0.4px;
    color: #fff;
    position: relative;
}

.map-nav .box .bu::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 7px;
    background-color: #fff;
    border-radius: 4px;
}

.map-nav a.p1 {
    left: 276px;
    top: 184px;
}

.map-nav a.p2 {
    left: 284px;
    top: 62px;
}

.map-nav a.p3 {
    left: 222px;
    top: 56px;
}

.map-nav a.p4 {
    left: 236px;
    top: 121px;
}

.map-nav a.p5 {
    left: 307px;
    top: 113px;
}

.map-nav a.p6 {
    left: 200px;
    top: 238px;
}

.map-nav a.p7 {
    left: 279px;
    top: 232px;
}

.map-nav a.p8 {
    left: 74px;
    top: 299px;
}

.map-nav a.p9 {
    left: 184px;
    top: 200px;
}

.map-nav a.p10 {
    left: 261px;
    top: 268px;
}

.map-nav a.p11 {
    left: 234px;
    top: 318px;
}

.map-nav a.p12 {
    left: 62px;
    top: 149px;
}

.map-nav a.p13 {
    left: 117px;
    top: 198px;
}

.map-nav a.p14 {
    left: -4px;
    top: 155px;
}

.map-nav a.p15 {
    left: 80px;
    top: 219px;
}

.map-nav a.p16 {
    left: 29px;
    top: 91px;
}

.map-nav a.p17 {
    left: 90px;
    top: 258px;
}

.map-nav a.p18 {
    left: 25px;
    top: 230px;
}

@keyframes fadein {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    1% {
        display: block;
        opacity: 0;
    }

    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes fadeleftin {
    0% {
        opacity: 0;
        transform: translateX(-8px);
    }

    1% {
        display: block;
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

#canvas {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1111;
}

.map-panel {
    display: none;
}

.map-panel.active {
    display: block;
}

.map-list {
    display: none;
    margin-top: 20px;
}

.map-list.active {
    display: block;
}

@media (max-width: 749px) {
    .map-list {
        margin: 0 20px;
    }
}

.map-list__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 1199px) {
    .map-list__nav {
        gap: 10px;
    }
}

.map-list__nav button {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: solid 1px #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    color: rgb(58, 58, 58);
    background-color: rgb(244, 245, 249);
}

@media (max-width: 1199px) {
    .map-list__nav button {
        height: 42px;
    }
}

.map-list__nav button.active {
    border: solid 1px #30aa74;
    background-color: #fff;
}

.map-list__panel {
    display: none;
}

.map-list__panel.active {
    display: block;
}

.map-list__nav2 {
    display: flex;
    margin-top: 15px;
    gap: 10px;
    flex-wrap:wrap;
}
.map-list__nav2 li {
width: calc((100% - 10px) / 2);
}

@media (max-width: 749px) {
    .map-list__nav2 {
        grid-template-columns: repeat(2, 1fr);
        word-break: break-all;
    }
}

.map-list__nav2 button {
    width: 100%;
    border-radius: 10px;
    background-color: rgb(244, 245, 249);
    line-height: 1.125;
    font-size:16px;
    word-break: break-all;
    padding: 10px;
    height: 100%;
    
}

@media (max-width: 749px) {
    .map-list__nav2 button {
        height: 100%;
        padding: 4px;
    }
}

.map-list__nav2 button.active {
    border: solid 1px #30aa74;
    background-color: #fff;
}

.ico-linkservice1 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -205px -167px;
    width: 39px;
    height: 32px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice1 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice2 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -49px -343px;
    width: 29px;
    height: 32px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice2 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice3 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: 0px -343px;
    width: 29px;
    height: 38px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice3 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice4 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -402px -57px;
    width: 22px;
    height: 33px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice4 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice5 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -207px -123px;
    width: 35px;
    height: 24px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice5 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice6 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -402px 0px;
    width: 22px;
    height: 37px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice6 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice7 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -110px -288px;
    width: 35px;
    height: 33px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice7 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.ico-linkservice8 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -165px -288px;
    width: 37px;
    height: 28px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .ico-linkservice8 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.map-plus {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -344px -212px;
    width: 35px;
    height: 35px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .map-plus {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.more-btn {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: 0px -288px;
    width: 35px;
    height: 35px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .more-btn {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.notice-more {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -55px -288px;
    width: 35px;
    height: 35px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .notice-more {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico1 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -74px -167px;
    width: 47px;
    height: 38px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico1 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico2 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -207px -60px;
    width: 49px;
    height: 43px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico2 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico3 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: 0px -225px;
    width: 48px;
    height: 43px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico3 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico4 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -268px -225px;
    width: 46px;
    height: 39px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico4 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico5 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -141px -167px;
    width: 44px;
    height: 37px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico5 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico6 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -68px -225px;
    width: 48px;
    height: 43px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico6 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico7 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: 0px -167px;
    width: 54px;
    height: 38px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico7 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.section1-ico8 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -280px -130px;
    width: 44px;
    height: 42px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .section1-ico8 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico1 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -201px -225px;
    width: 47px;
    height: 40px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico1 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico2 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -207px 0px;
    width: 53px;
    height: 40px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico2 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico3 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -344px -67px;
    width: 37px;
    height: 48px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico3 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico4 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -136px -225px;
    width: 45px;
    height: 42px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico4 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico5 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -138px 0px;
    width: 49px;
    height: 49px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico5 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico6 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -344px -135px;
    width: 29px;
    height: 57px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico6 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel3-ico7 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -70px 0px;
    width: 48px;
    height: 61px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel3-ico7 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel4-ico1 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -344px 0px;
    width: 38px;
    height: 47px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel4-ico1 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel4-ico2 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -280px 0px;
    width: 44px;
    height: 47px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel4-ico2 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel4-ico3 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -280px -67px;
    width: 43px;
    height: 43px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel4-ico3 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel4-ico4 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: 0px -97px;
    width: 47px;
    height: 50px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel4-ico4 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel4-ico5 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -67px -97px;
    width: 49px;
    height: 47px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel4-ico5 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.service1-panel4-ico6 {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: -136px -97px;
    width: 45px;
    height: 46px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .service1-panel4-ico6 {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.waypoint {
    background-image: url(/static/lifeStudy/img/sprite-main.png);
    background-position: 0px 0px;
    width: 50px;
    height: 77px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .waypoint {
        background-image: url(/static/lifeStudy/img/sprite-main@2x.png);
        background-size: 424px 381px;
    }
}

.container {
    margin: 0 auto;
    max-width: 1320px;
}

@media (min-width: 1200px) {
    .container {
        padding: 0 20px;
    }
}

body {
    overflow-x: hidden;
}

@media (min-width: 750px) {
    .section1 {
        padding: 20px 0 50px;
    }
}

@media (min-width: 1200px) {
    .section1 {
        padding: 30px 0 60px;
    }
}

@media (min-width: 750px) {
    .section1-set {
        display: grid;
        grid-template-columns: 320px auto;
        gap: 18px;
    }
}

@media (min-width: 1200px) {
    .section1-set {
        display: grid;
        grid-template-columns: 39.0625% 58.984375%;
        justify-content: space-between;
    }
}

@media (max-width: 749px) {
    .visual {
        width: 100%;
        margin-top: 20px;
    }

    .visual .swiper-slide img {
        width: 100%;
    }
}

.section1-visual {
    position: relative;
}

.section1-visual .swiper-slide a img {
    vertical-align: top;
    width: 100%;
    aspect-ratio: 500/397;
    border-radius: 20px;
}

.section1-visual__ctrl {
    position: absolute;
    left: 40px;
    bottom: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    z-index: 1;
}

.section1-visual .section1-visual-nums em {
    font-weight: 800;
}

.section1-visual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 9px;
}

.section1-visual .btns {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section1-visual .btns button {
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 24px;
}

.section1-visual__swiper-button-prev {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.69" height="19" viewBox="0 0 10.69 19"><path fill="%23000" d="M1437.49,1629.01l0.71,0.68-10,9.65-0.71-.68Zm0.71,18.3-0.71.69-10-9.66,0.71-.68Z" transform="translate(-1427.5 -1629)"/></svg>') center center no-repeat;
}

.section1-visual__swiper-button-stop {
    background: url('data:image/svg+xml;utf8,<svg fill="%23000" xmlns="http://www.w3.org/2000/svg" width="10" height="16.35" viewBox="0 0 10 16.35"><path d="M1454.84,1630.86h1v16.33h-1v-16.33Zm9,0h1v16.33h-1v-16.33Z" transform="translate(-1454.84 -1630.84)"/> </svg>') center center no-repeat;
}

.section1-visual__swiper-button-next {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.69" height="19" viewBox="0 0 10.69 19"><path fill="%23000" d="M1480.2,1648l-0.71-.69,10-9.65,0.71,0.68Zm-0.71-18.31,0.71-.68,10,9.65-0.71.68Z" transform="translate(-1479.5 -1629)" /> </svg>') center center no-repeat;
}

.tab {
    position: relative;
}

.tab .tab-toggle {
    display: none;
}

@media (max-width: 749px) {
    .tab .tab-toggle {
        display: block;
        position: relative;
        width: 100%;
        height: 36px;
        border-radius: 12px;
        color: #333;
        
        font-size: 16px;
        text-align: center;
        line-height: 1;
        padding-top: 3px;
        color: #fff;
        background-color: #30aa74;
    }

    .tab .tab-toggle::after {
        position: absolute;
        content: "";
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #30aa74;
        bottom: -8px;
        left: calc(50% - 8px);
    }
}

@media (max-width: 749px) {
    .tab .active + nav {
        display: flex;
        z-index: 1;
    }
}

@media (max-width: 749px) {
    .tab nav {
        display: none;
        position: absolute;
        top: 44px;
        width: 100%;
        padding: 5px;
        border-radius: 12px;
        background-color: #fff;
        border: 1px solid #dadada;
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
    }

    .tab nav button {
        padding: 4px 0;
    }
}

@media (min-width: 750px) {
    .tab nav {
       /*  display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0px; */
    }
}

.tab nav > button {
    position: relative;
}

@media (max-width: 749px) {
    .tab nav > button {
        width: 100%;
    }
}

@media (min-width: 750px) {
    .tab nav > button {
        height: 36px;
        border-radius: 12px;
        color: #333;
        
        font-size: 16px;
        text-align: center;
        line-height: 1;
        padding-top: 3px;
    }

    .tab nav > button:first-child::before {
        display: none;
    }

    .tab nav > button::before {
        content: "";
        width: 3px;
        height: 3px;
        border-radius: 3px;
        background-color: #b0b0b0;
        position: absolute;
        left: 0;
        top: 17px;
    }

    .tab nav > button.active {
        color: #fff;
        background-color: #30aa74;
    }

    .tab nav > button.active::after {
        position: absolute;
        content: "";
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #30aa74;
        bottom: -8px;
        left: calc(50% - 8px);
    }

    .tab nav > button.active::before,
    .tab nav > button.active + *::before {
        display: none;
    }
}

.service1 {
    background-color: rgb(228, 244, 237);
    border-radius: 20px;
    height: 250px;
}

@media (min-width: 1200px) {
    .service1 {
        padding: 17px 24px 27px;
    }
}

@media (max-width: 749px) {
    .service1 {
        margin-top: 10px;
    }
}

@media (max-width: 1199px) {
    .service1 {
        padding: 18px 10px;
    }
}

@media (min-width: 1200px) {
    .service1 {
        border-radius: 30px;
        height: 397px;
    }
}

.service1 .tab-panel {
    display: none;
    margin: 25px 12px 0;
}

.service1 .tab-panel.active {
    display: block;
}

.service1 .tab-panel-ico ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 20px;
}

@media (max-width: 1199px) {
    .service1 .tab-panel-ico ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px 10px;
    }
}

.service1 .tab-panel-ico .icon {
    width: 82px;
    height: 82px;
    margin: 0 auto;
    background-color: rgb(243, 245, 249);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 82px;
}

@media (max-width: 1199px) {
    .service1 .tab-panel-ico .icon {
        display: none;
    }
}

.service1 .tab-panel-ico .txt {
    display: block;
    
    line-height: 1;
}

@media (min-width: 1200px) {
    .service1 .tab-panel-ico .txt {
        margin-top: 10px;
    }
}

.service1 .tab-panel-ico a {
    display: block;
    text-align: center;
    border-radius: 15px;
    background-color: rgb(255, 255, 255);
}

@media (max-width: 1199px) {
    .service1 .tab-panel-ico a {
        height: 34px;
        line-height: 1.2;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }
}

@media (min-width: 1200px) {
    .service1 .tab-panel-ico a {
        height: 141px;
        padding: 15px;
    }
}

.service1 .tab-panel-ico--row ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
}

@media (max-width: 1199px) {
    .service1 .tab-panel-ico--row ul {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.service1 .tab-panel-ico--row a {
    display: flex;
}

@media (min-width: 1200px) {
    .service1 .tab-panel-ico--row a {
        justify-content: flex-start;
        align-items: center;
        padding: 30px 17px;
        gap: 10px;
    }
}

@media (max-width: 1199px) {
    .service1 .tab-panel-ico--row a {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 10px;
    }

    .service1 .tab-panel-ico--row a br {
        display: none;
    }
}

.service1 .tab-panel-ico--row a .icon {
    margin: 0;
}

.service1 .tab-panel-ico--row a .txt {
    line-height: 1.33;
}

@media (min-width: 1200px) {
    .service1 .tab-panel-ico--row a .txt {
        margin-top: 0;
        font-size: 18px;
        text-align: left;
    }
}

.service1 .service1-panel2 {
    position: relative;
}

.service1 .service1-panel2 ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 1199px) {
    .service1 .service1-panel2 ul {
        gap: 10px;
    }
}

.service1 .service1-panel2 dt.active button {
    color: #30aa74;
    border-color: rgb(48, 170, 116);
}

.service1 .service1-panel2 dt.active + dd {
    display: grid;
}

.service1 .service1-panel2 button {
    width: 100%;
    height: 54px;
    border-radius: 10px;
    border: solid 1px #fff;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    font-size: 18px;
    font-weight: bold;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    color: rgb(58, 58, 58);
}

@media (max-width: 1199px) {
    .service1 .service1-panel2 button {
        height: 42px;
    }
}

@media (max-width: 749px) {
    .service1 .service1-panel2 button {
        height: 34px;
    }
}

.service1 .service1-panel2 dd {
    display: none;
    position: absolute;
    top: 69px;
    left: 0;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1199px) {
    .service1 .service1-panel2 dd {
        top: 54px;
    }
}

@media (max-width: 749px) {
    .service1 .service1-panel2 dd {
        top: 45px;
    }
}

@media (min-width: 750px) {
    .service1 .service1-panel2 dd {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 749px) {
    .service1 .service1-panel2 dd.line-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service1 .service1-panel2 a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: solid 1px #fff;
    background-color: rgb(255, 255, 255);
}

@media (min-width: 750px) {
    .service1 .service1-panel2 a {
        height: 44px;
    }
}

@media (max-width: 749px) {
    .service1 .service1-panel2 a {
        height: 34px;
    }
}

.service1 .service1-panel2 a:hover,
.service1 .service1-panel2 a:focus {
    color: #30aa74;
    border-color: rgb(48, 170, 116);
}

.service1 .service1-panel2 .deco {
    display: none;
    position: absolute;
    top: 155px;
    left: 0;
    width: 100%;
    height: 120px;
    
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    color: #0b8d53;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: url(/static/lifeStudy/img/main/paneldeco.png) calc(100% - 60px) 0 no-repeat, url(/static/lifeStudy/img/main/paneldeco.png) 83px bottom no-repeat;
}

@media (min-width: 1200px) {
    .service1 .service1-panel2 .deco {
        display: flex;
    }
}

.section2 {
    position: relative;
    border-radius: 30px;
    background-color: rgb(235, 244, 250);
}

@media (max-width: 749px) {
    .section2 {
        padding: 10px;
    }
}

@media (min-width: 750px) {
    .section2 {
        padding: 40px;
    }
}

.section2__hgroup {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 19px;
}

@media (max-width: 749px) {
    .section2__hgroup {
        padding: 9px 0 0 9px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.section2__hgroup h2 {
    font-family: JalnanOTF;
    font-size: 25px;
    font-weight: normal;
    color: rgb(71, 139, 207);
    letter-spacing: normal;
    line-height: 1;
}

@media (max-width: 749px) {
    .section2__hgroup h2 {
        line-height: 1.2;
    }
}

.section2__hgroup p {
    line-height: 1;
}

.section2__body {
    background-color: #fff;
    position: relative;
}

@media (max-width: 1199px) {
    .section2__body {
        border-radius: 20px;
        margin-top: 20px;
    }
}

@media (min-width: 1200px) {
    .section2__body {
        border-radius: 30px;
        margin-top: 28px;
        display: grid;
        justify-content: space-between;
        grid-template-columns: 53.25% auto 46.6%;
    }
}

.section2__more-btn {
    position: absolute;
    right: 50px;
    top: 33px;
}

@media (max-width: 749px) {
    .section2__more-btn {
        top: 23px;
        right: 20px;
    }
}

.section2__more-btn i {
    display: block;
}

.s2-left {
    position: relative;
    padding: 40px 50px;
}

@media (min-width: 750px) {
    .s2-left {
        min-height: 470px;
    }
}

@media (max-width: 749px) {
    .s2-left {
        padding: 0;
        height: auto;
    }
}

.s2-left__head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

@media (max-width: 749px) {
    .s2-left__head {
        padding: 20px;
    }
}

.s2-left__ctrl {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.s2-left__ctrl button {
    width: 144px;
    height: 44px;
    border-radius: 22px;
    border: solid 1px #ccc;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media (max-width: 749px) {
    .s2-left__ctrl button {
        width: 128px;
    }
}

.s2-left__ctrl button.active {
    color: #fff;
    padding: 15px 8px;
    border-radius: 22px;
    border-color: rgb(71, 139, 207);
    background-color: rgb(71, 139, 207);
}

.s2-left__plus {
    display: none;
}

@media (max-width: 749px) {
    .s2-left__plus {
        position: absolute;
        right: 10px;
        bottom: 0;
        display: block;
        width: 35px;
        height: 35px;
        border-radius: 35px;
        z-index: 10;
    }

    .s2-left__plus i {
        display: block;
    }
}

.s2-left__map {
    position: relative;
}

@media (max-width: 520px) {
    .s2-left__map {
        overflow-x: auto;
        padding-left: 10px;
    }

    .s2-left__map .s {
        position: relative;
        transform: scale(0.75);
        transform-origin: left;
    }

    .s2-left__map .s.active {
        transform: scale(1);
    }

    .s2-left__map canvas {
        display: none;
    }
}

.s2-vline {
    position: relative;
}

.s2-vline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 35px;
    bottom: 15px;
    border-left: 1px solid #efefef;
}

.s2-right {
    position: relative;
    padding: 44px 50px 0 28px;
}

@media (max-width: 749px) {
    .s2-right {
        padding: 20px;
    }
}

.s2-right__title {
    height: 22px;
    font-family: JalnanOTF;
    font-size: 22px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: rgb(48, 48, 48);
}

.s2-right__more {
    position: absolute;
    right: 50px;
    top: 36px;
    background-image: url("/static/lifeStudy/ico-main-more.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 111px;
    height: 37px;
    padding: 12px 0 0 19px;
    
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    color: #303030;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .s2-right__more {
        background-image: url("/static/lifeStudy/ico-main-more@2x.png");
    }
}

@media (max-width: 749px) {
    .s2-right__more {
        position: static;
        display: block;
        margin: 20px auto 0px;
    }
}

.class-list {
    margin-top: 23px;
}

@media (max-width: 749px) {
    .class-list {
        margin-top: 0;
    }
}

.class-list li {
    padding: 9px 0;
}

@media (min-width: 750px) {
    .class-list li {
        padding: 15px 0;
    }
}

@media (min-width: 750px) {
    .class-list li + * {
        border-top: 1px dotted #dadada;
    }
}

.class-list li > a {
    font-family: "GmarketSansTTF";
    font-size: 16px;
}

@media (max-width: 749px) {
    .class-list li > a {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}

@media (min-width: 750px) {
    .class-list li > a {
        display: grid;
        grid-template-columns: auto 83px;
        justify-content: space-between;
        gap: 10px;
        padding-left: 13px;
        position: relative;
    }

    .class-list li > a::before {
        content: "";
        width: 3px;
        height: 3px;
        position: absolute;
        left: 0;
        top: 0.8em;
        background-color: #666;
        border-radius: 3px;
    }
}

.class-list li > a .tit {
    padding-top: 3px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #757575;
}

@media (max-width: 749px) {
    .class-list li > a .tit {
        display: block;
        width: 100%;
        order: 2;
        flex-grow: 1;
    }
}

.class-list li > a [class^=class-status-],
.class-list li > a .cate {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 26px;
    line-height: 1;
    border-radius: 5px;
    background-color: #6db897;
    color: #fff;
    font-weight: 500;
}

@media (max-width: 749px) {

    .class-list li > a [class^=class-status-],
    .class-list li > a .cate {
        min-width: 82px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 750px) {

    .class-list li > a [class^=class-status-],
    .class-list li > a .cate {
        padding-top: 4px;
    }
}

.class-list li > a [class^=class-status-].class-status-ing {
    background-color: #e4477a;
}

.class-list li > a [class^=class-status-].class-status-end {
    background-color: #666;
}

@media (max-width: 749px) {
    .class-list li > a.type-2 {
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 4px;
    }
}

@media (min-width: 750px) {
    .class-list li > a.type-2 {
        grid-template-columns: auto 120px 83px;
        justify-content: inherit;
    }
}

.class-list li > a.type-2 .cate span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.3;
}

.class-list__more {
    margin: 14px auto 0;
    padding-top: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 145px;
    height: 40px;
    border-radius: 19.5px;
    border: solid 1px #272727;
    background-color: #fff;
    
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #201f1f;
}

.class-list__more::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 14px;
    margin-left: 8px;
    vertical-align: middle;
    background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/main/more-arr.png");
    background-repeat: no-repeat;
    background-size: 11px 14px;
    transform: translateY(-2px);
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .class-list__more::after {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/main/more-arr@2x.png");
    }
}

.section-notice {
    margin-top: 45px;
}

@media (min-width: 750px) and (max-width: 1199px) {
    .section-notice {
        display: grid;
        grid-template-columns: auto 390px;
        gap: 24px;
    }
}

@media (min-width: 1200px) {
    .section-notice {
        margin-top: 49px;
        display: grid;
        grid-template-columns: 67.65625% 30.46875%;
        gap: 24px;
    }
}

.section-notice__title {
    font-family: JalnanOTF;
    font-size: 22px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    color: rgb(48, 48, 48);
}

.section-notice__head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1199px) {
    .section-notice__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.section-notice .l {
    position: relative;
}

.notice-list {
    display: none;
}

@media (min-width: 1200px) {
    .notice-list {
        margin-top: 20px;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 30px;
    }
}

.notice-list.active {
    display: grid;
}

.notice-list.active + a {
    display: block;
}

@media (max-width: 1199px) {

    .notice-list li:nth-child(3),
    .notice-list li:nth-child(4) {
        display: none;
    }
}

.notice-list a {
    display: block;
    color: rgb(117, 117, 117);
    line-height: 1.57;
    
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 1199px) {
    .notice-list a {
        margin-top: 20px;
    }
}

.notice-list a .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    font-size: 18px;
    
    font-weight: 500;
    line-height: 1.5;
    color: #383838;
}

.ie .notice-list a .title {
    display: block;
    height: 27px;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .notice-list a .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 49px;
        line-height: 1.3;
    }

    .ie .notice-list a .title {
        display: block;
        height: 54px;
        overflow: hidden;
    }
}

.notice-list a .txt {
    display: none;
}

@media (min-width: 1200px) {
    .notice-list a .txt {
        margin-top: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 46px;
    }

    .ie .notice-list a .txt {
        display: block;
        height: 66px;
        overflow: hidden;
    }
}

.notice-list a .date {
    display: block;
}

@media (min-width: 1200px) {
    .notice-list a .date {
        margin-top: 5px;
    }
}

@media (max-width: 1199px) {
    .notice-tab nav {
        margin-top: 16px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
    }
}

@media (min-width: 1200px) {
    .notice-tab nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr) 35px;
        gap: 4px;
        box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.03);
        border-radius: 100px;
    }
}

.notice-tab__more {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}

.notice-tab__more i {
    display: block;
}

.notice-tab button {
    
    line-height: 1;
    font-weight: 500;
    font-size: 16px;
}

@media (max-width: 1199px) {
    .notice-tab button {
        border-bottom: 2px solid #fff;
    }

    .notice-tab button.active {
        border-bottom: 2px solid #e4477a;
        color: #e4477a;
    }
}

@media (min-width: 1200px) {
    .notice-tab button {
        position: relative;
        width: 140px;
        height: 35px;
        border-radius: 35px;
        color: #2b2b2b;
        text-align: center;
        padding-top: 3px;
    }

    .notice-tab button.active {
        color: #fff;
        background-color: #666666;
    }

    .notice-tab button.active::after {
        position: absolute;
        content: "";
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 8px solid #666666;
        bottom: -8px;
        left: calc(50% - 8px);
    }
}

.notice-tab button.active::before,
.notice-tab button.active + *::before {
    display: none;
}

.main-sh {
    margin: 0 auto;
    max-width: 1280px;
}

@media (max-width: 749px) {
    .main-sh {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
}

@media (max-width: 1199px) {
    .main-sh {
        margin-bottom: 40px;
    }
}

@media (min-width: 750px) {
    .main-sh {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (min-width: 1200px) {
    .main-sh {
        margin: 0 auto 81px;
        display: grid;
        grid-template-columns: 86px 184px 184px auto;
        gap: 10px;
    }
}

.main-sh select,
.main-sh input {
    width: 100%;
    height: 60px;
    border-radius: 6px;
    border: solid 2px rgb(192, 192, 192);
    background-color: #fff;
}

.main-sh select .Rectangle-4,
.main-sh input .Rectangle-4 {
    width: 773px;
    margin: 50px 1px 3px 10px;
    padding: 0 0 0 28px;
    background-color: rgb(255, 255, 255);
}

.main-sh .inp input {
    border-right-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.main-sh__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: JalnanOTF;
    font-size: 19px;
    line-height: 1;
    font-weight: normal;
    color: rgb(48, 48, 48);
}

@media (min-width: 750px) {
    .main-sh__title {
        height: 60px;
    }
}

@media (max-width: 749px) {
    .main-sh__title {
        margin-bottom: 10px;
    }
}

@media (min-width: 750px) and (max-width: 1199px) {
    .main-sh__title {
        grid-area: 1/1/1/3;
    }
}

.main-sh .group {
    display: grid;
    grid-template-columns: auto 63px;
    gap: 0;
    position: relative;
}

@media (min-width: 750px) and (max-width: 1199px) {
    .main-sh .group {
        grid-area: 3/1/3/3;
    }
}

.main-sh__submit {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    height: 60px;
    background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/search-btn.png");
    background-repeat: no-repeat;
    background-size: 19px auto;
    background-color: #e4477a;
    background-position: center;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    .main-sh__submit {
        background-image: url("https://lifestudy.yangcheon.go.kr/static/lifeStudy/img/search-btn@2x.png");
    }
}

.main-sh__submit button {
    height: 60px;
    width: 100%;
}

.main-sh__keyword {
    
}

@media (min-width: 1200px) {
    .main-sh__keyword {
        position: absolute;
        top: 70px;
        left: -8px;
        margin-top: 10px;
    }
}

@media (max-width: 1199px) {
    .main-sh__keyword {
        grid-area: 2/1/2/3;
        margin-top: 10px;
    }
}

.main-sh__keyword dl {
    display: grid;
    grid-template-columns: 107px auto;
    gap: 30px;
}

@media (max-width: 749px) {
    .main-sh__keyword dl {
        gap: 18px;
    }
}

.main-sh__keyword dt {
    position: relative;
    width: 107px;
    height: 31px;
    margin-right: 18px;
    border-radius: 15.5px;
    background-color: #e4477a;
    font-style: italic;
    font-weight: 400;
    color: #fff;
    text-align: center;
    line-height: 35px;
}

.main-sh__keyword dt::before {
    content: "";
    position: absolute;
    left: 19px;
    top: -7px;
    width: 9px;
    height: 10px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="10"><path fill-rule="evenodd" fill="%23e4477a" d="M0 7.998S2.955 2.771 8.999.1c0 0-6.715 9.387 0 9.899L0 7.998z"/></svg>') 0 0 no-repeat;
}

.main-sh__keyword button {
    padding: 0 4px;
    color: #757575;
}

@media (min-width: 750px) {
    .main-sh__keyword button {
        line-height: 35px;
    }
}

.section-linkservice {
    margin-top: 37px;
}

@media (min-width: 750px) {
    .section-linkservice .container {
        display: grid;
        grid-template-columns: 250px auto;
    }
}

@media (min-width: 750px) and (max-width: 1199px) {
    .section-linkservice .container {
        padding-top: 10px;
        overflow-x: auto;
    }
}

.section-linkservice__title {
    padding-top: 32px;
    line-height: 1;
}

.section-linkservice__title strong {
    display: block;
    font-family: JalnanOTF;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: normal;
    color: #303030;
}

.section-linkservice__title span {
    margin-top: 15px;
    display: block;
    
    font-size: 16px;
    font-weight: 500;
    color: #6d6d6d;
    line-height: 1.56;
}

/* .section-linkservice__link {
display: flex;
flex-direction: row;
justify-content: space-between;
} */
.section-linkservice__link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 70px;
    margin-top: 30px;
}

@media (max-width: 749px) {
    .section-linkservice__link {
        padding-top: 16px;
        overflow-x: auto;
    }
}

.section-linkservice__link a {
    display: block;
    padding: 0 10px;
}

.section-linkservice__link a .ico {
    position: relative;
    margin: 0 auto;
    width: 78px;
    height: 78px;
    background-color: #f4f5f9;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 78px;
    transition: 0.5s;
}

.section-linkservice__link a .ico i {
    transition: 0.5s;
}

.section-linkservice__link a .ico .c {
    position: absolute;
    left: 29px;
    top: -10px;
    height: 22px;
    
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    color: #414141;
    padding: 2px 7px 5px;
    border-radius: 11px;
    background-color: #d2dff4;
}

.section-linkservice__link a > span:last-child {
    margin-top: 12px;
    display: block;
    border-bottom: 2px solid #fff;
    text-align: center;
    
    font-size: 16px;
    font-weight: 500;
    color: #333;
    transition: 0.5s;
}

.section-linkservice__link a:hover .ico,
.section-linkservice__link a:focus .ico {
    background-color: #e4477a;
}

.section-linkservice__link a:hover .ico i,
.section-linkservice__link a:focus .ico i {
    transform: scale(1.06);
}

.section-linkservice__link a:hover > span:last-child,
.section-linkservice__link a:focus > span:last-child {
    color: #e4477a;
    border-bottom: 2px solid #e4477a;
}

.cultur-program {
    position: relative;
    margin-top: 38px;
    background-color: #fffdeb;
}

@media (max-width: 749px) {
    .cultur-program {
        margin-left: -20px;
        margin-right: -20px;
        margin-bottom: 50px;
        padding: 30px 0 24px;
        border-radius: 0;
    }
}

@media (min-width: 750px) and (max-width: 1199px) {
    .cultur-program {
        padding: 30px 0;
        margin-left: -20px;
        margin-right: -20px;
    }
}

@media (min-width: 1200px) {
    .cultur-program {
        padding: 39px 54px;
        border-radius: 30px;
    }
}

.cultur-program__title {
    font-family: JalnanOTF;
    font-size: 25px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #c07118;
}

@media (max-width: 749px) {
    .cultur-program__title {
        margin-left: 20px;
    }
}

@media (min-width: 750px) and (max-width: 1199px) {
    .cultur-program__title {
        padding-left: 30px;
    }
}

.cultur-program-swiper {
    margin: 31px 27px 0;
}

@media (max-width: 1199px) {
    .cultur-program-swiper {
        margin-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        overflow: auto !important;
    }

    .cultur-program-swiper .swiper-wrapper {
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 26px;
    }
}

@media (max-width: 1199px) and (min-width: 750px) and (max-width: 1199px) {
    .cultur-program-swiper .swiper-wrapper {
        padding-left: 30px;
    }
}

@media (max-width: 1199px) {
    .cultur-program-swiper .swiper-wrapper .swiper-slide {
        width: auto;
    }

    .cultur-program-swiper .swiper-wrapper::after {
        content: ".";
        width: 1px;
        color: transparent;
    }
}

.cultur-program-swiper a {
    display: block;
    position: relative;
}

@media (max-width: 1199px) {
    .cultur-program-swiper a {
        width: 203px;
    }
}

.cultur-program-swiper a .img {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    aspect-ratio: 203/281;
    border-radius: 15px;
    overflow: hidden;
}

.cultur-program-swiper a .img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cultur-program-swiper a:hover,
.cultur-program-swiper a:focus {
    outline: none;
}

.cultur-program-swiper a:hover .set,
.cultur-program-swiper a:focus .set {
    display: block;
    outline: 1px dashed #fff;
    outline-offset: -2px;
}

.cultur-program-swiper a .set {
    display: none;
    padding: 35px 25px;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    
    font-size: 15px;
    font-weight: 500;
    line-height: 1.47;
    color: rgb(255, 255, 255);
    border-radius: 15px;
}

.cultur-program-swiper a .set .status,
.cultur-program-swiper a .set .cate {
    font-size: 14px;
    padding: 2px 7px 0;
    height: 21px;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    line-height: 1;
    color: #fff;
}

.cultur-program-swiper a .set .status {
    background-color: #e4477a;
}

.cultur-program-swiper a .set .cate {
    background-color: #478bcf;
}

.cultur-program-swiper a .set .title {
    display: block;
    margin: 16px 0;
}

.cultur-program-swiper a .set .date {
    font-size: 13px;
}

.cultur-program-swiper__ctrl {
    position: absolute;
    right: 51px;
    top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199px) {
    .cultur-program-swiper__ctrl {
        top: 24px;
        right: 20px;
    }
}

.cultur-program-swiper__ctrl button {
    display: inline-block;
    vertical-align: middle;
    width: 26px;
    height: 35px;
}

@media (max-width: 1199px) {
    .cultur-program-swiper__ctrl button {
        display: none;
    }
}

.cultur-program-swiper__swiper-button-prev {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.69" height="19" viewBox="0 0 10.69 19"><path fill="%23000" d="M1437.49,1629.01l0.71,0.68-10,9.65-0.71-.68Zm0.71,18.3-0.71.69-10-9.66,0.71-.68Z" transform="translate(-1427.5 -1629)"/></svg>') center center no-repeat;
}

.cultur-program-swiper__swiper-button-stop {
    background: url('data:image/svg+xml;utf8,<svg fill="%23000" xmlns="http://www.w3.org/2000/svg" width="10" height="16.35" viewBox="0 0 10 16.35"><path d="M1454.84,1630.86h1v16.33h-1v-16.33Zm9,0h1v16.33h-1v-16.33Z" transform="translate(-1454.84 -1630.84)"/> </svg>') center center no-repeat;
}

.cultur-program-swiper__swiper-button-next {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.69" height="19" viewBox="0 0 10.69 19"><path fill="%23000" d="M1480.2,1648l-0.71-.69,10-9.65,0.71,0.68Zm-0.71-18.31,0.71-.68,10,9.65-0.71.68Z" transform="translate(-1479.5 -1629)" /> </svg>') center center no-repeat;
}

.cultur-program-swiper__more {
    display: inline-block;
    width: 35px;
    height: 35px;
}

.cultur-program-swiper__more .cls-1 {
    fill: #de9441;
}

.cultur-program-swiper__more .cls-2 {
    fill: #fff;
    fill-rule: evenodd;
}

.notice-ad {
    position: relative;
}

@media (max-width: 749px) {
    .notice-ad {
        margin-top: 25px;
    }
}

.notice-ad .ctrl {
    padding: 0 4px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    z-index: 1;
    border-radius: 17.5px;
    background-color: rgba(255, 255, 255, 0.75);
}

.notice-ad .ctrl button {
    width: 27px;
    height: 35px;
}

.notice-ad__swiper-button-prev {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.69" height="19" viewBox="0 0 10.69 19"><path fill="%23000" d="M1437.49,1629.01l0.71,0.68-10,9.65-0.71-.68Zm0.71,18.3-0.71.69-10-9.66,0.71-.68Z" transform="translate(-1427.5 -1629)"/></svg>') center center no-repeat;
}

.notice-ad__swiper-button-stop {
    background: url('data:image/svg+xml;utf8,<svg fill="%23000" xmlns="http://www.w3.org/2000/svg" width="10" height="16.35" viewBox="0 0 10 16.35"><path d="M1454.84,1630.86h1v16.33h-1v-16.33Zm9,0h1v16.33h-1v-16.33Z" transform="translate(-1454.84 -1630.84)"/> </svg>') center center no-repeat;
}

.notice-ad__swiper-button-play {
    width: 24px;
    background-position: -26px 0;
    display: none;
}

.notice-ad__swiper-button-next {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.69" height="19" viewBox="0 0 10.69 19"><path fill="%23000" d="M1480.2,1648l-0.71-.69,10-9.65,0.71,0.68Zm-0.71-18.31,0.71-.68,10,9.65-0.71.68Z" transform="translate(-1479.5 -1629)" /> </svg>') center center no-repeat;
}

.notice-ad .swiper-slide a {
    display: block;
    position: relative;
}

.notice-ad .swiper-slide a img {
    vertical-align: top;
}

/*# sourceMappingURL=main.css.map */


/* 강좌목록 */

.course_card_wrap.main {
	display:block;
}

.course_card_wrap.main .slick-list {
margin-left:-10px;
margin-right:-10px;
}

.course_card_wrap.main .courbox {padding:0 15px;}
.course_card_wrap.main .course_card {
	position: relative;
	border: 1px solid #aaa;
	border-radius: 9px;
	background: #fff;
	/* box-shadow: 0 3px 10px rgba(0,0,0,0.05); */
	transition: all 0.3s ease;
	padding-bottom: 40px;
	height:100%;
	overflow:hidden;
}

.course_card_wrap.main .course_card .boxs {
	padding: 15px;
	height: 100%;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
}

.course_card_wrap.main .course_card:hover {
	/* transform: translateY(-5px); */
	/* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); */
}

.course_card_wrap.main .course_card .course_header {
	display: flex;
	align-items: center;
	 justify-content: space-between; 
	gap: 10px;
	margin-bottom: 4px;
}

.course_card_wrap.main .course_card .course_num {
	font-size: var(--size-sm);
	font-weight: 700;
	color: #777;
	order:2;
}

.course_card_wrap.main .course_card .course_institute {
	font-size: var(--size-sm);
	/* color: #000; */
	font-weight: bold;
}

.course_card_wrap.main .course_card .teg_order_list {
	/* margin-top: auto; */
}

.course_card_wrap.main .course_card .teg_order_list span {
	display: inline-block;
	background-color: #eaeef3;
	line-height: 1;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: var(--size-sm);
}

.course_card_wrap.main .course_card .teg_order_list span.point {
	color:var(--point-pink);
    background: #ffecf2;
    font-weight: bold;
}
/* 태그를 제목 위로 이동 */
.course_card_wrap.main .course_card .teg_box .course_tag {
	display: inline-block;
	margin-top: 6px;
	margin-bottom: 4px;
	font-size: var(--size-sm);
	font-weight: bold;
	border-radius: 6px;
	padding: 5px 5px;
	line-height: 1;
	align-self: flex-start;
	background: #eaf7ef;
	color: #198754;
	border: 1px solid #aec4ba;
}

.course_card_wrap.main .course_card .course_info li .course_hit {
	display: inline-block;
	/* margin-top: 6px; */
	margin-bottom: 4px;
	font-size: var(--size-sm);
	font-weight: bold;
	border-radius: 6px;
	padding: 3px 5px;
	margin-top: 5px;
	line-height: 1;
	align-self: flex-start;
	color: var(--point-pink);
	border: 1px solid var(--point-pink);
}
.course_card_wrap.main .course_card.done .course_info li .course_hit {
border-color:#666;
color:#666;
}
.course_card_wrap.main .course_card .course_title {
	font-size: 18px;
	font-weight: bold;
	color: #222;
	margin: 6px 0 10px;
	line-height: 1.4;
	word-break: break-all;
}

.course_card_wrap.main .course_card .course_title:hover {
	text-decoration: underline;
}

.course_card_wrap.main .course_card .course_info {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--size-sm);
	/* color: #666; */
	margin-bottom: 15px;
}

.course_card_wrap.main .course_card .course_info li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.course_card_wrap.main .course_card .course_info strong {
	/* color: #666; */
	display:block;
	font-weight: bold;
	min-width: 70px;
	font-size: var(--size-sm);
}

/* 상태 영역 */
.course_card_wrap.main .course_card .course_status {
	margin-top: auto;
	padding: 7px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	position: absolute;
	justify-content: center;
	bottom: 0;
	left: 0;
	width: 100%;
}

.course_card_wrap.main .course_card .course_status .status_label {
	display: inline-block;
	border-radius: 6px;
}

.course_card_wrap.main .course_card .course_status .status_period {
	color: #fff;
}

/* 상태별 색상 */
.course_card_wrap.main .course_card .course_status.ongoing {
	background: var(--point-pink);
	color: #fff;
}

.course_card_wrap.main .course_card .course_status.ongoing .status_label {
	background: var(--point-pink);
	color: #fff;
}

.course_card_wrap.main .course_card .course_status.done {
	background: #777;
	color: #fff;
}

.course_card_wrap.main .course_card .course_status.done .status_label {
	background: #777;
	color: #fff;
}

.course_card_wrap.main .course_card .course_status.wait {
	background: var(--point-gre);
	color: #fff;
}

.course_card_wrap.main .course_card .course_status.wait .status_label {
	background: var(--point-gre);
	color: #fff;
}
.course_controls {display:flex;
    justify-content: center;
    gap: 20px;
    margin: 25px 0 0 0;}
.course_controls i {font-size:21px;}
.course_controls .paging{line-height:21px;}
.course_controls .paging span {font-size:18px;display:inline-block;width:10px;}
.course_controls .paging span.current {font-weight:bold;text-decoration:underline;}
/* 반응형 */
/* @media (max-width: 1280px) {
	.course_card_wrap.main .course_card {
		flex: 1 1 calc(33.333% - 24px);
	}
}

@media (max-width: 900px) {
	.course_card_wrap.main .course_card {
		flex: 1 1 calc(50% - 20px);
	}
}
 */
@media (max-width: 640px) {
  .course_card_wrap.main {gap:10px;}
  .course_card_wrap.main .course_card {
    flex: 1 1 calc(50% - 10px);
  }
	.course_card_wrap.main .course_card .course_title {
		font-size: 17px;
	}
  .course_card_wrap.main .course_card .boxs {padding:10px;}
	.course_card_wrap.main .course_card .teg_order_list span,
	.course_card_wrap.main .course_card .course_info strong,
	.course_card_wrap.main .course_card .course_info li .course_hit,
	.course_card_wrap.main .course_card .course_info,
	.course_card_wrap.main .course_card .course_institute,
	.course_card_wrap.main .course_card .teg_box .course_tag {
		font-size: 15px;
	}
  .course_card_wrap.main .course_card .course_info {
    margin-bottom: 10px;
  }
  .course_card_wrap.main .course_card .teg_box .course_tag {
    margin-bottom: 0;
    margin-top: 3px;
  }
  .course_card_wrap.main .course_card .course_status {
    font-size: 16px;
  }
}
@media (max-width: 500px) {
	.course_card_wrap.main .course_card {
		flex: 1 1 100%;
		padding-bottom: 40px;
	}

	.course_card_wrap.main {
		gap: 16px;
		padding: 0;
	}

	/* .course_card_wrap.main .course_card { padding: 17px; } */
	.course_title {
		font-size: 17px;
	}

	.course_institute {
		font-size: var(--size-sm);
	}
}




@media (max-width: 320px) {

	.course_card_wrap.main .course_card .course_title {
		font-size: 16px;
	}
  .course_card_wrap.main .course_card .teg_order_list span, .course_card_wrap.main .course_card .course_info strong, .course_card_wrap.main .course_card .course_info li .course_hit, .course_card_wrap.main .course_card .course_info, .course_card_wrap.main .course_card .course_institute, .course_card_wrap.main .course_card .teg_box .course_tag,.course_card_wrap.main .course_card .course_status {
    font-size: 14px;
  }
}