@charset "UTF-8";

body,
html {
    -webkit-overflow-scrolling: touch;
}

img { width: 100%;
}

.al-c {
    text-align: center !important;
}

.al-c button+button {
    margin-left: 1rem;
}

.al-l {
    text-align: left !important;
}

.al-r {
    text-align: right !important;
}

.d-flex {
    display: flex;
}

.d-flex-bet {
    justify-content: space-between;
}

.d-flex-align-r {
    justify-content: flex-end;
}

.d-flex-align-c,
.align-c {
    align-items: center;
}

.on {
    display: block;
}

.off {
    display: none;
}
.mt0 {
    margin-top: 0;
}
.mb0 {
    margin-bottom: 0;
}
.mt1 {
    margin-top: 1rem;
}
.mb1 {
    margin-bottom: 1rem;
}
/* #wrap {
    overflow-x: hidden;
} */
header {
    width: 100%;
    height: 6.1rem;
    background: #fff;
    border-bottom: .1rem solid #e9e9e9;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

header.up {
    animation: headerOFF .1s ease-in forwards;
}

header.down {
    animation: headerON .2s ease-in forwards;
}

@keyframes headerON {
    0% {
        transform: translateY(-6.1rem);
    }

    100% {
        transform: translateY(0rem);
    }
}

@keyframes headerOFF {
    0% {
        transform: translateY(0rem);
    }

    100% {
        transform: translateY(-6.1rem);
    }
}

header .prev-page {
    width: 1.9rem;
    height: 1.7rem;
    background: url(../images/btn/btn_menu_prev.png) no-repeat 0 0 / 1.9rem 1.7rem;
    position: absolute;
    left: 2.5rem;
    top: 2.3rem;
}

header .home-page {
    width: 2.2rem;
    height: 2rem;
    background: url(../images/icon/icon_home.png) no-repeat 0 0 / 2.2rem 2rem;
    position: absolute;
    left: 2.5rem;
    top: 2.2rem;
}


header .main-type h2 {
    width: 15.2rem;
    margin-left: 2.4rem;
}

header .all-menu {
    width: 2rem;
    height: 1.6rem;
    position: absolute;
    right: 2.4rem;
    top: 2.2rem;

}

header .all-menu::after,
header .all-menu::before {
    width: 100%;
    height: .1rem;
    background: #ee38a7;
    content: '';
    display: block;
    position: absolute;
}

header .all-menu::before {
    left: 0;
    top: 0;
}

header .all-menu::after {
    left: 0;
    bottom: 0;
}

header .all-menu em {
    width: 100%;
    height: .1rem;
    background: #ee38a7;
    display: block;
}

header .close-all-menu {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../images/btn/btn_menu_close.png) no-repeat 0 0 / 1.8rem 1.8rem;
    position: absolute;
    right: 2.5rem;
    top: 2rem;
}

body.lock {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
    touch-action: none;
}

#nav {
    width: 100vw;
    height: calc(100vh - 6.2rem);
    position: fixed;
    right: -100vw;
    top: 6.1rem;
    z-index: 200;
    background-color: #fff;
}

#nav.open {
    right: 0;
    transition: right .2s ease-in-out;
}

#nav.close {
    right: -100vw;
    transition: right .2s ease-in-out;
}

#nav .top {
    height: 6.1rem;
    background: #fff;
    border-bottom: .1rem solid #e9e9e9;
    display: flex;
    position: relative;;
}

#nav .top h3 {
    width: 15.2rem;
    margin: 1.2rem auto 0;
}


#nav .global-menu .global-frist-btn {
    height: 4.75rem;
    display: flex;
    background: #fff;
    align-items: center;
    padding: 0 2.5rem;
    justify-content: center;
    border-bottom: .1rem solid #e9e9e9;
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
}

#nav .global-menu .global-frist-btn::after {
    content: '';
    width: 1.7rem;
    height: 0.9rem;
    background: url(../images/btn/btn_menu_drop.png) no-repeat 0 0 / 1.7rem 0.9rem;
    display: block;
    position: absolute;
    right: 2.5rem;
    top: 2rem;
    transform-origin: center;
    transform: rotate(0deg);
    transition: transform .2s ease-in-out;
}

#nav .global-menu .global-frist-btn.on::after {
    transform: rotate(-180deg);
    transition: all .5s ease-in-out;
}

#nav .global-menu ol {
    max-height: 0;
    overflow: hidden;
}

#nav .global-menu ol.on {
    max-height: 50rem;
    transition: all .6s ease-in-out;
}

#nav .global-menu ol.off {
    max-height: 0;
    transition: all .3s ease-in-out;
}

#nav .global-menu ol li {
    height: 4.75rem;
    display: flex;
    background: #f7f7f7;
    align-items: center;
    padding: 0 2.5rem;
    font-size: 1.6rem;
    justify-content: center;
    border-bottom: .1rem solid #e9e9e9;
}

footer {
    width: 100%;
    height: 14.7rem;
    background: #20202d;
    /* position: absolute; */
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3.7rem 0 2rem;
}

footer .footer-list {
    width: 100%;
    justify-content: center;
    display: flex;
    gap: 2.6rem;
}

footer .footer-list a {
    color: #ccc;
    font-size: 1.3rem;
;
}

footer h5 {
    width: 13.45rem;
    margin: 2.9rem auto 0;

}

.page-top {
    width: 4.5rem;
    height: 4.6rem;
    background: url(../images/btn/btn_top_footer.png) no-repeat 0 0 / contain;
    position: fixed;
    right: 1.7rem;
    bottom: 1.7rem;
    z-index: 100;
}

main {
    padding: 6.1rem 0 0;
}


/* MAIN */
.main-notice {
    background: #f7f7fa;
    padding: 4rem 2.4rem;
}

.main-notice .top h4 {
    font-size: 3.1rem;
    line-height: 3.1rem;
    color: #001f60;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2rem;
}

.main-notice .top p {
    text-align: center;
    font-size: 1.5rem;
    color: #777;
    margin-bottom: 3.5rem;
}

.title-type-01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.title-type-01 h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f1f21;
}

.title-type-01 .more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
}

.title-type-01 .more::after {
    content: '';
    width: .7rem;
    height: 1rem;
    background: url(../images/icon/icon_more_notice.png) no-repeat 0 0 / .7rem 1rem;
    display: block;
}

.title-type-01 .more span {
    font-size: 1.4rem;
    color: #777;
}

.main-notice .notice-list {
    border-top: .2rem solid #222;
}

.main-notice .notice-list li {
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border-bottom: .1rem solid #ddd;
    padding: 0 1.6rem;
    position: relative;
}

.main-notice .notice-list li a,
.main-notice .notice-list li span {
    font-size: 1.5rem;
    color: #777;
}

.main-notice .notice-list li span {
    position: absolute;
    right: 1.6rem;
    top: 1.2rem;
}

.main-notice .notice-list li a {
    display: block;
    width: 20rem;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    gap: 1rem;
}

.main-notice .notice-list li.new em {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../images/icon/icon_notice_new.png) no-repeat 0 0 / contain;
    display: block;
}

.main-features .top {
    padding: 4rem 0;
    text-align: center;
}

.main-features .top h6 {
    color: #00a4c7;
    font-size: 1.7rem;
    margin-bottom: 1.5rem;
}

.main-features .top h4 {
    color: #001f60;
    font-weight: 700;
    font-size: 3.1rem;
    margin-bottom: 2rem;
}

.main-features .top p {
    font-size: 1.5rem;
    color: #777;
}

.main-features-swiper .swiper-pagination {
    width: 100%;
    margin: 3rem 0 3.6rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    position: static;
}

.main-features-swiper .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ccc;

}

.main-features-swiper .swiper-pagination-bullet-active {
    background-color: #20202d;
}

.main-features-swiper li a {
    display: block;
    text-align: center;
}

.main-features-swiper li a img {
    max-width: calc(100% - 8rem);
}


.main-service {
    background: #001f60;

}

.main-service .top {
    padding: 4rem 0;
    text-align: center;
}

.main-service .top h6 {
    color: #00a4c7;
    font-size: 1.7rem;
    margin-bottom: 1.5rem;
}

.main-service .top h4 {
    color: #fff;
    font-weight: 700;
    font-size: 3.1rem;
    margin-bottom: 2rem;
}

.main-service .top p {
    font-size: 1.5rem;
    color: #bbb;
}

.main-service-swiper .swiper-pagination {
    width: 100%;
    margin: 3rem 0 3.6rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    position: static;
}

.main-service-swiper .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ccc;

}

.main-service-swiper .swiper-pagination-bullet-active {
    background-color: #20202d;
}

.main-service-swiper {
    width: 100vw;
    overflow: hidden;
}

.main-service .swiper-pagination-total,
.main-service-swiper .swiper-pagination-fraction {
    color: #ccc;
}

.main-service-swiper .swiper-pagination-current {
    color: #0094cb;
}



.main-service-swiper li a {
    display: block;

    text-align: center;
}

.main-service-swiper li a img {

    /* max-width: calc(100% - 8rem); */
}



.main-banner {
    position: relative;
}

.main-banner .swiper-slide a {
    width: 87.5%;
    height: 4.5rem;
    display: flex;
    border: .1rem solid #ee41aa;
    background: #fff;
    border-radius: 10rem;
    align-items: center;
    justify-content: center;
    color: #ee41aa;
    font-weight: 700;
    gap: 1rem;
    font-size: 1.6rem;
    line-height: 1.6rem;
    position: absolute;
    left: 50%;
    bottom: 7.6rem;
    transform: translateX(-50%);
}

.main-banner .swiper-slide a::after {
    content: '';
    width: .7rem;
    height: 1.1rem;
    display: block;
    background: url(../images/icon/icon_main_btn.png) no-repeat 0 0 / .7rem 1.1rem;
}

.main-banner .swiper-pagination {
    position: static;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.main-banner .slide-control-button-group {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 3.5rem;
    display: flex !important;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.main-banner .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ccc;
}

.main-banner .swiper-pagination-bullet-active {
    background-color: #ee38a7;
}

.main-banner .slide-button-pause {
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/icon/icon_stop.png) no-repeat 0 0 / 1.2rem 1.2rem;
    z-index: 10;
}

.main-banner .slide-button-start span,
.main-banner .slide-button-pause span {
    display: none;
}

.main-banner .slide-button-start {
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/icon/icon_play.png) no-repeat 0 0 / 1.2rem 1.2rem;
    z-index: 10;
}

/* MAIN */

.page-top-area {
    padding: 3.8rem 2.4rem 0;
    margin-bottom: 4.5rem;;
}
.page-top-area .page-tit-txt h3 {
    font-size: 2.4rem; color: #222;
    line-height: 2.4rem; padding: 0 0 1.7rem;
    border-bottom: .1rem solid #ddd;
    font-weight: 700;
}
.page-top-area .page-tab {
    margin-top: 2.1rem;
}
.page-top-area .page-tab ul {
    display: flex; gap: 1rem;
    align-items: stretch; justify-content: center;
}
.page-top-area .page-tab ul li {
    flex: 1; height: auto;
}
.page-top-area .page-tab ul li button {
    width: 100%; height: 100%;
    font-size: 1.5rem; border: .1rem solid #bbb;
    border-radius: 1rem; font-weight: 500;
    text-align: center; line-height: 2.1rem;
    padding: 1.3rem 0;
}
.page-top-area .page-tab ul li.on button {
    border: .1rem solid #3750cd; color: #3750cd;
}
.page-top-area .page-sub-txt {
    font-size: 1.5rem; line-height: 2.3rem;
    font-weight: 500; margin-top: 2.8rem;
}
.tab {
    padding: 0 2.3rem 2.5rem;
}
.tabTarget {
    display: none;
}
.tabTarget.on {
    display: block;
}


.color-01 {
    color: #ff0000;
}

.intro-101-banner {

    overflow: hidden;
}

.intro-101-banner .swiper-pagination {
    width: 100%;
    margin: 3rem 0 3.6rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    position: static;
}

.intro-101-banner .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ccc;

}

.intro-101-banner .swiper-pagination-bullet-active {
    background-color: #20202d;
}

.contents-wrap {
    padding: 0 2.5rem 2.5rem;
}

.title-round-type-01 {
    padding: 1.1rem 3.2rem;
    font-size: 1.6rem;
    line-height: 2rem;
    color: #001f60;
    font-weight: 600;
    margin: 0 auto 2.5rem;
    background-color: #eff2fe;
    border-radius: 20rem;
    display: inline-block;
    text-align: center;
}



/* TABLE */
.table-type-06 th {
    color: #fff;
    text-align: center;
    background-color: #001f60;
    font-size: 1.5rem;
    border-bottom: .1rem solid #fff;
}

.table-type-06 td {

    word-break: keep-all;
    font-size: 1.5rem;
    padding: 1.6rem;
    text-align: left;
    border-bottom: .1rem solid #ddd;
    background-color: #f7f7f7;
    line-height: 2.2rem;
}

.table-type-06 td p {
    margin-bottom: 1rem;
}

.ui-slide {
    width: 100vw;
    overflow-x: hidden;
}

.gray-cont {
    max-width: 90%;
    margin: 0 auto;
    padding: 2.3rem 1.5rem;
    background: #f7f7f7;
    text-align: center;

}

.gray-cont p {
    font-size: 15px;
    color: #444;
    line-height: 2.3rem;
    word-break: keep-all;
}


.gray-cont button {
    margin: 1.5rem auto 0;
}


.btn {
    display: inline-block;
    vertical-align: middle;
    border: .1rem solid #bbb;
    border-radius: 0.6rem;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}

.btn.icon {
    display: flex;
    align-items: center;
}

.btn.icon::after {
    content: '';
    display: flex;
    flex: 1;
    margin-left: .4rem;
}

.btn.btn-linear {
    padding: 1rem 1.1rem;
    font-size: 1.4rem;
    line-height: 1.4rem;
    background: #fff;
}

.btn.gray-arrow::after {
    width: 0;
    height: 0;
    border-left: .5rem solid #777;
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
}

/*API guide*/
.guide-wrap {
    padding: 0 2.3rem 4rem
}

.guide-wrap * {
    color: #222;
}

.guide-wrap h2 {
    font-size: 2.3rem;
    font-weight: 700;
    margin-top: 3.5rem
}

.guide-wrap h4 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 4.5rem;
    margin-bottom: 2.2rem
}

.guide-wrap .sub-title {
    font-size: 1.6rem;
    margin: 1.7rem 0;
}

.guide-wrap .sub-title::before {
    content: '';
    display: inline-block;
    width: 0.6rem;
    height: 1.05rem;
    background: url('../images/icon/icon_play.png')no-repeat center / 0.6rem 1.05rem;
    margin-right: 0.5rem
}

.guide-wrap .select-btn {
    display: flex;
    border: solid #dddddd;
    border-width: 2px 0 1px 0;
    padding: 1.2rem 0;
    margin-top: 1.5rem;
}

.guide-wrap .select-btn strong {
    flex: 1 1 20%;
    display: block;
    height: 3rem;
    font-size: 1.4rem;
    background: #a3acbc;
    color: #fff;
    padding: 0.5rem;
    margin-right: 1.5rem;
    border-radius: 1.5rem;
    text-align: center;
    font-weight: 300;
    box-sizing: border-box;
}

.guide-wrap .select-btn a {
    flex: 1 1 80%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 0.4rem;
}

.guide-wrap .select-btn a::after {
    content: '';
    display: inline-block;
    width: 3.2rem;
    height: 2.5rem;
    background: url('../images/icon/icon_arrow.png') center/1.2rem no-repeat;
    margin-left: 4rem;
}

.guide-wrap .select-btn a>p {
    font-size: 1.8rem;
    line-height: 2.3rem;
}

.guide-wrap .select-btn span {
    font-size: 1.2rem;
    color: #777;
    margin-left: 0.5rem;
}

.guide-wrap .auth-wrap {
    display: flex;
    align-items: center;
    margin-top: 2rem
}

.guide-wrap .auth-wrap .auth-label {
    font-size: 1.7rem;
    color: #1e75d6;
    border: 1px solid #1e75d6;
    border-radius: 0.6rem;
    padding: 0.5rem 1.25rem;
    font-weight: 400;
}

.guide-wrap .auth-wrap .auth-label+p {
    font-size: 2rem;
    margin-left: 1.3rem
}

.guide-wrap .info-box {
    font-size: 1.5rem;
    line-height: 2rem;
    background: #e3e9ff;
    border-left: 4px solid #6f81da;
    padding: 1.8rem 1.5rem;
    margin-bottom: 1.8rem
}

.guide-wrap .tbl-wrap table {
    table-layout: fixed;
    min-width: 100%;
    border-collapse: collapse;
}

.guide-wrap .tbl-wrap th,
.guide-wrap .tbl-wrap td {
    font-size: 1.5rem;
    border: 1px solid #ddd;
    word-break: break-all;
    background: #fff;
    padding: 1.8rem 1.5rem;
}

.guide-wrap .tbl-wrap th {
    background: #f7f7f7;
    text-align: center;
}

.guide-wrap .tbl-wrap th:first-child,
.guide-wrap .tbl-wrap td:first-child {
    border-left: 0;
}
.guide-wrap .tbl-wrap th:last-child,
.guide-wrap .tbl-wrap td:last-child {
    border-right: 0;
}
.guide-wrap .tbl-scroll-wrap {
    width: 100%;
    overflow-x: auto
}

.guide-wrap .tbl-scroll-wrap .fixed-scroll {
    background: #fff;
}

.guide-wrap .tbl-scroll-wrap .fixed-item {
    position: sticky;
    left: 0; z-index: 2;
}

/* .guide-wrap .tbl-scroll-wrap .fixed-item::after {
    content: ''; display: block;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    box-shadow: 6px 0 4.5px -3.8px rgb(0 0 0 / 5%);
    border-right: 1px solid #ddd;
} */


.tab .util-wrap  {padding:0}
.mt0 {margin-top: 0px !important;}
.mb0 {margin-bottom: 0px !important;}
.util-wrap  {padding: 3.6rem 2.4rem;}
.util-wrap .main-tit {font-size:2rem;font-weight: 700; margin:2.5rem 0;letter-spacing: -0.2rem;}
.util-wrap .sub-tit {font-size:1.8rem;font-weight: 700;margin:3.5rem 0 2.5rem 0;}
.util-wrap .sub-cont {font-size:1.5rem;line-height: 2.4rem;margin: 1.6rem 0;word-break: keep-all;}

.util-wrap .sub-cont .gray_bg {font-size:1.5rem; background:#e1e1e1}
.util-wrap .sub-cont.list,
.util-wrap .sub-cont.bullet {
    padding-left: 1.4rem;text-indent: -1.5rem;
}
.util-wrap .sub-cont.bullet::before {
    content:''; display:inline-block;
    width:0.4rem; height:0.4rem;
    background:#222; margin-right: 0.8rem;
    vertical-align: middle; margin-bottom: 2px;
}
.util-wrap .list-bullet li {
    font-size:1.5rem; line-height: 2.4rem;
    margin-bottom:0.6rem; word-break: keep-all;
    padding-left: 1.4rem;text-indent: -1.2rem;
}
.util-wrap .list-bullet li::before {
    content:''; display:inline-block;
    width:0.4rem; height:0.4rem;
    background:#222; margin-right: 0.8rem;
    vertical-align: middle; margin-bottom: 2px;
}
.util-wrap .list-bullet.notice li {
    padding-left: 3.2rem;text-indent: -3.2rem;
}
.util-wrap .list-bullet.notice li::before {
    width: 2.5rem; height:2.5rem;
    background: url('../images/temp/icon_notice.png') center/2.5rem no-repeat;
}
.util-wrap .tbl-wrap table {
    table-layout: fixed; border-collapse: collapse;
}
.util-wrap .tbl-wrap th,
.util-wrap .tbl-wrap td {
    font-size: 1.5rem;border: 1px solid #ddd;
    word-break: break-all;background: #fff;
    padding: 1.8rem 1.5rem;
}
.util-wrap .tbl-wrap thead th {
    background: #222222; color:#fff;
    text-align: center;
}
.util-wrap .tbl-wrap tbody th {
    background: #f7f7f7;  text-align: center;
}

/*임시*/
.util-wrap .temp-box {
    background:#011627;
    /*padding: 0 2rem 2rem;*/
    /*text-align: center;*/
    margin:1.6rem 0;
    border-radius: 1rem;
}
.util-wrap .temp-box .top {
    display: flex; height: 4.9rem;
    align-items: center;
    justify-content: space-between;
}
.util-wrap .temp-box .top h3 {
    font-size: 1.4rem; font-weight: 700;
    color: #fff;
}
.util-wrap .temp-box .top .copy {
    width: 1.8rem; height: 1.8rem;
    background: url(../images/btn/btn_copy.png) no-repeat 0 0 / cover;
}
.util-wrap .temp-box .bottom {
    padding: 2rem;
}

/* 2025.04.29 : 시작하기 스타일영역 */
.install-wrap h3 {
    font-size:2.0rem;
}
.install-wrap,
.install-wrap * {
    color:#222;
    word-break:keep-all;
}
.install-wrap .top-basics > p {
    margin-top:2.35rem;
    font-size:1.5rem;
    line-height:2.3rem;
}

.install-way {
    margin-top:3.85rem;
}
.install-way h4 {
    font-size:1.8rem;
}

[class*="way-list-group"] {
    margin-top:2.4rem;
}
[class*="way-list-group"] li,
.gray-bx,
.gray-bx * {
    font-size:1.5rem;
    line-height:2.3rem;
}
[class*="way-list-group"] > li {
    padding-left:1.3rem;
    text-indent:-1.3rem;
}
[class*="way-list-group"] > li+li {
    margin-top:2.5rem;
}
[class*="way-list-group"] > li > figure {
    margin-top:1.7rem;
}
[class*="way-list-group"] > li > figure+figure {
    margin-top:2.1rem;
}

[class*="way-list-group"] .detail-listnum {
    margin-top:1.5rem;
}
.interests-wrap .sub-txt-01 + .way-list-group02 {
    margin-top:2.1rem;
}
.way-list-group02 > li+li {
    margin-top:0.5rem;
}

.detail-listnum li+li {
    margin-top:1.9rem;
}

.detail-listnum li figure {
    margin-top:1.9rem;
}

.interests-wrap {
    padding:0rem 0 0.9rem;
    word-break:keep-all;
}
.interests-wrap,
.interests-wrap * {color:#222;}
.interests-wrap h3.cont-title01 {
    display:block;
    position:relative;
    padding-bottom:1.5rem;
    font-size:2.4rem;
}
.interests-wrap h3.cont-title01:before {
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0.2rem;
    background-color:#ddd;
}

.top-area-bx,
[class*="inter-subbx"] {
    padding-left:2.4rem;
    padding-right:2.4rem;
}
.page-top-area + .top-area-bx {
    margin-top: -2rem;
}
.top-area-bx {
    padding-bottom:3.6rem;
}
.top-area-bx > p {
    margin-top:2.4rem;
}
.interests-wrap .sub-txt-01,
.interests-wrap .sub-list-type01,
.interests-wrap .sub-list-type01 * {
    font-size:1.5rem;
    line-height:2.3rem;
}

[class*="inter-subbx"] {
    position:relative;
    padding-top:4.4rem;
    padding-bottom:3.6rem;
}
[class*="inter-subbx"] .sub-txt-01 {margin-top:2.3rem;}
.inter-subbx-01:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:0.8rem;
    background-color:#e7e7e7;
}
[class*="inter-subbx"] h4 {
    font-size:2.0rem; font-weight: 700;
}
[class*="inter-subbx"] h5 {
    font-size:1.8rem;   font-weight: 700;
    line-height:2.6rem;
}
[class*="inter-subbx"] h5 {
    margin-top:3.5rem;
}



.sub-list-type01 {
    margin-top:2.1rem;
}
.sub-list-type01 > li {
    position:relative;
    padding-left:1.2rem;
}
.sub-list-type01 > li:before {
    content:"";
    display:block;
    position:absolute;
    top:1.0rem;
    left:0;
    width:0.4rem;
    height:0.4rem;
    background-color:#222;
}
[class*="sub-list-type"] li+li {
    margin-top:0.5rem;
}

.sub-list-type02 {
    margin-top:0.5rem;
}
.sub-list-type02 > li {
    position:relative;
    padding-left:1.2rem;
}
.sub-list-type02 > li:before {
    content:"";
    display:block;
    position:absolute;
    top:1.0rem;
    left:0;
    width:0.5rem;
    height:0.5rem;
    background-color:#222;
    border-radius:100%;
}

.sub-list-type01+.sub-txt-01 {
    margin-top:2.1rem;
}

.inter-subbx-02 h3.cont-title02 {
    font-size:2.0rem;
}

.gray-bx {
    position:relative;
    margin-top:2.7rem;
    padding:1.6rem 2.1rem;
    word-break:keep-all;
    background-color:#f0f0f0;;
}
.gray-bx:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0.4rem;
    height:100%;
    background-color:#d6d6d6;
}
.gray-bx dl > dd {
    margin-top:1.1rem;
}
.gray-bx dl + .sub-list-type01 {
    margin-top:1.1rem;
}
.gray-bx + h5 {
    margin-top:4.0rem;
}

.body-fix {
    overflow: hidden;
}
#dimm {
    width: 100vw; height: 100vh;
    position: fixed; left: 0; top: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 100;
}
.lay-pop {
    width: 95vw; height: calc(var(--vh, 1vh) * 100);
    background: #fff;
    position: absolute;
    left: 2.5vw; top: 50%;
    transform:translateY(-50%);
    z-index: 110;
}
.lay-pop .top-con {
    height: 5.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: .1rem solid #ddd;
}
.lay-pop .top-tab {
    display: flex;
    gap: .5rem;
}
.lay-pop .top-tab li button {
    height: 3.7rem; display: block;
    font-size: 1.6rem; font-weight: 600;
    padding: 0 1.7rem;
    background-color: #f1f1f1;
    border-radius: 2rem;
    color: #888;
}
.lay-pop .top-tab li.on button {
    color: #fff;
    background-color: #6f81da;
}
.lay-pop .close-pop {
    width: 1.8rem; height: 1.8rem;
    background: url(../images/btn/btn_menu_close.png) no-repeat 0 0 / cover;
    position: absolute;
    right: 1.5rem; top: 1.7rem;
}

.lay-pop .lay-fix-con {
    height: 80vh;
    display: grid;
    grid-template-columns: 12.3rem 1fr;
}
.lay-pop .lay-fix-con .lay-con-left {
    height: 100%;
    background: #f5f5f5;
    overflow-y: auto;
}
.lay-pop .lay-fix-con .lay-con-left ol {
    height: 100%;

}
.lay-pop .lay-fix-con .lay-con-left li {
    text-align: center;
    padding: 1.3rem 0;
}
.lay-pop .lay-fix-con .lay-con-left li.active {
    background: #fff;
}
.lay-pop .lay-fix-con .lay-con-left li.active button {
    font-weight: 700;
}
.lay-pop .lay-fix-con .lay-con-left li button {
    font-size: 1.5rem; line-height: 1.5rem;
}
.lay-pop .lay-fix-con .lay-con-right {
    height: 100%; overflow-y: auto;
}
.lay-pop .lay-fix-con .lay-con-right ul {
    padding: 0 2rem;
}
.lay-pop .lay-fix-con .lay-con-right li {
    padding: 1.2rem 0; line-height: 2.1rem;
    border-bottom: .1rem solid #f2f2f2;
}
.lay-pop .lay-fix-con .lay-con-right li.active p {
    color: #3750cd;
    font-weight: 700;
}
.lay-pop .lay-fix-con .lay-con-right li p {
    font-size: 1.5rem; display: inline;
}
.lay-pop .lay-fix-con .lay-con-right li span {
    font-size: 1.1rem; color: #999;
}