/* #content */
section .main_title {letter-spacing: -0.02em; line-height: 56px; margin-bottom: 32px;}
section .main_title.on {display: none;}
section .sub_text {letter-spacing: -0.02em;}

.viewer.mo_ver {display: none;}
.viewer.pc_ver .inner {padding: 0 16.66% 100px;}
.viewer.pc_ver .inner > p {font-weight: 500; font-size: 32px; line-height: 42px; letter-spacing: -0.02em; margin-bottom: 20px; color: #29203B;}
.viewer.pc_ver .inner .viewer_box {display: flex; gap: 20px; margin-bottom: 20px;}
.viewer.pc_ver .inner .viewer_box .img_box {width: 60%; position: relative; overflow: hidden;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-wrapper .swiper-slide {display: flex; border-radius: 16px; overflow: hidden;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-wrapper .swiper-slide div {width: 50%; object-fit: fill;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-wrapper .swiper-slide div img {width: 100%; height: 100%;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-wrapper .swiper-slide div:first-of-type img {border-radius: 16px 0 0 16px;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-wrapper .swiper-slide div:last-of-type img {border-radius: 0 16px 16px 0;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-button-prev, .viewer.pc_ver .inner .viewer_box .img_box .swiper-button-next {width: 40px; height: 40px;
    background-position: center; background-repeat: no-repeat; background-size: contain;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-button-prev::after, .viewer.pc_ver .inner .viewer_box .img_box .swiper-button-next::after {font-size: 0;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-button-prev {background-image: url(../images/sub04_02_btn_prev.png); left: 3%;}
.viewer.pc_ver .inner .viewer_box .img_box .swiper-button-next {background-image: url(../images/sub04_02_btn_next.png); right: 3%;}
.viewer.pc_ver .inner .viewer_box .img_box .kg_box::after {content: ''; display: block; width: 160px; height: 160px; background: rgba(255, 255, 255, 0.3); border-radius: 50%;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
.viewer.pc_ver .inner .viewer_box .img_box .kg_box p {width: 140px; height: 140px; background: #8556E3; border-radius: 50%;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; text-align: center; font-weight: 700;  font-size: 18px; line-height: 26px; letter-spacing: -0.02em;}
.viewer.pc_ver .inner .viewer_box .img_box .kg_box p strong {display: block; font-size: 32px; line-height: 42px;}
.viewer.pc_ver .inner .viewer_box .img_box .kg_box p strong span {font-size: 24px; line-height: 32px;}

.viewer.pc_ver .inner .viewer_box .text_box {width: 40%; background: #FCFCFC; box-sizing: border-box; border: 1px solid #E4E4E4; border-radius: 16px; padding: 52px 3%; position: relative;}
.viewer.pc_ver .inner .viewer_box .text_box table {width: 100%;}
.viewer.pc_ver .inner .viewer_box .text_box table tr {color: #29203B; font-size: 22px; line-height: 32px; letter-spacing: -0.02em;}
.viewer.pc_ver .inner .viewer_box .text_box table tr:not(:last-of-type) {border-bottom: 14px solid rgba(255, 255, 255, 0);}
.viewer.pc_ver .inner .viewer_box .text_box table tr th {text-align: left; font-weight: 700; min-width: 170px;}
.viewer.pc_ver .inner .viewer_box .text_box table tr td {font-weight: 300;}
.viewer.pc_ver .inner .viewer_box .text_box table tr td.purple {font-weight: 700;}
.viewer.pc_ver .inner .viewer_box .text_box table tr td .hash_tag {display: inline-block; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; 
    color: #8556E3; background: #fff; padding: 6px 12px; border: 1px solid #D4C4F5; border-radius: 8px; margin-right: 4px;}
.viewer.pc_ver .inner .viewer_box .text_box .move_next {position: absolute; bottom: 24px; right: calc(100% + 12px); z-index: 10; white-space: nowrap;}
.viewer.pc_ver .inner .viewer_box .text_box .move_next a {display: inline-block; background: #FFFFFF; border: 2px solid #D2B7FF; box-sizing: border-box; vertical-align: middle;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); backdrop-filter: blur(58px); border-radius: 5px; color: #7435FF; font-size: 13px; padding: 11px 12px;}
.viewer.pc_ver .inner .viewer_box .text_box .move_next a span {display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;
    background: url(../images/sub04_02_icon_smile.png) center no-repeat; background-size: contain;}

.viewer.pc_ver .inner .bottom {display: flex; justify-content: space-between;}
.viewer.pc_ver .inner .bottom .btn_box {width: calc(60% - 10px);}
.viewer.pc_ver .inner .bottom .btn_box ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; 
    border: 1px solid #E4E4E4; border-radius: 8px; overflow: hidden; margin-bottom: 18px;}
.viewer.pc_ver .inner .bottom .btn_box ul li {text-align: center; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; background: #F6F6F6;}
.viewer.pc_ver .inner .bottom .btn_box ul li.on {background: #E8DCFF;}
.viewer.pc_ver .inner .bottom .btn_box ul li a {display: block; color: #8556E3; padding: 8px 0;}
.viewer.pc_ver .inner .bottom .after_kg {text-align: right; font-weight: 700; font-size: 20px; letter-spacing: -0.02em;}
.viewer.pc_ver .inner .bottom .after_kg span {color: #29203B; position: relative;}
.viewer.pc_ver .inner .bottom .after_kg span::after {content: ''; display: block; width: 100%; height: 2px; background: #8556E3; 
    position: absolute; bottom: 9px; left: 0; z-index: 2;}
.viewer.pc_ver .inner .bottom .after_kg p {color: #47346B;}
.viewer.pc_ver .inner .bottom .after_kg p strong {font-size: 36px; line-height: 44px;}


.gragh {background: #F5F5F5;}
.gragh .inner {padding: 100px 16.66%;}
.gragh .inner ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;}
.gragh .inner ul li {text-align: center; background: #FFFFFF; border: 1px solid #D4C4F5; border-radius: 16px; overflow: hidden; padding: 30px 0 20px;}
.gragh .inner ul li dl dt {font-weight: 500; font-size: 22px; line-height: 32px; letter-spacing: -0.02em;}
.gragh .inner ul li dl dd {color: #7435FF; font-weight: 700; font-size: 36px; line-height: 35px; margin-bottom: 10px;}
.gragh .inner ul li dl dd span {font-size: 16px;}


.other .inner {padding: 100px 16.66%;}
.other .inner ul {display: flex; justify-content: space-between; font-weight: 500; font-size: 22px; line-height: 36px; letter-spacing: -0.02em; color: #29203B;
    padding: 16px 0; border-top: 1px solid #B7B7B7; border-bottom: 1px solid #B7B7B7; margin-bottom: 20px;}

/*
.other .inner ul li a {color: #29203B; display: inline-block; vertical-align: middle;}
.other .inner ul li a span {display: inline-block; width: 20px; height: 20px; 
    background: url(../images/sub04_02_icon_arrow_right.png) center no-repeat; background-size: contain; }
*/

.other .inner ul li a {color: #29203B; display: inline-block; position: relative;}
.other .inner ul li a span {display: inline-block; width: 20px; height: 20px; position: relative; top: 50%; margin-top: -5px; right: 0;
    background: url(../images/sub04_02_icon_arrow_right.png) center no-repeat; background-size: contain; vertical-align: middle;}

.other .inner p {font-size: 20px; line-height: 28px; letter-spacing: -0.02em;}
.other .inner p:not(:last-of-type) {margin-bottom: 8.5px;}
.other .inner p .purple {font-weight: 500;}
.other .inner p a {font-weight: 300; color: #29203B; display: inline-block; margin-left: 8px;}


.btns {padding: 0 16.66% 100px;}
.btns ul {display: flex; justify-content: flex-end; gap: 16px;}
/*.btns ul li button {background: #8556E3; color: #FFFFFF; border: none; border-radius: 8px; padding: 11px 32px; cursor: pointer; white-space: nowrap;
    font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em;}
*/
.btns ul li a {display: block; background: #8556E3; color: #FFFFFF; border: none; border-radius: 8px; padding: 11px 32px; cursor: pointer; white-space: nowrap;
    font-family: 'Spoqa Han Sans Neo'; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em;}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .viewer.pc_ver .inner {padding: 0 12% 100px;}
    .gragh .inner {padding: 100px 12%;}
    .other .inner {padding: 100px 12% 208px;}
    .btns {padding: 0 12% 100px;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .viewer.pc_ver .inner {padding: 0 8% 100px;}
    .gragh .inner {padding: 100px 8%;}
    .other .inner {padding: 100px 8%;}
    .btns {padding: 0 8% 100px;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .viewer.pc_ver .inner {padding: 0 6% 100px;}
    .gragh .inner {padding: 100px 6%;}
    .other .inner {padding: 100px 6%;}
    .btns {padding: 0 6% 100px;}
}


/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    section .main_title {font-size: 28px; margin-bottom: 16px; line-height: 36px;}
    section .main_title i {display: block;}
    #content .line_map {padding: 36px 5% 0;}

    .viewer.pc_ver {display: none;}
    .viewer.mo_ver {display: block;}
    .viewer.mo_ver > .inner {padding: 0 5% 28px;}
    .viewer.mo_ver > .inner > p {font-weight: 500; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; margin-bottom: 16px; color: #29203B;}
    .viewer.mo_ver > .inner .img_box {width: 100%; position: relative; overflow: hidden;}
    .viewer.mo_ver > .inner .img_box .swiper-wrapper .swiper-slide {display: flex; border-radius: 16px; overflow: hidden;}
    .viewer.mo_ver > .inner .img_box .swiper-wrapper .swiper-slide div {width: 50%; object-fit: fill;}
    .viewer.mo_ver > .inner .img_box .swiper-wrapper .swiper-slide div img {width: 100%; height: 100%;}
    .viewer.mo_ver > .inner .img_box .swiper-wrapper .swiper-slide div:first-of-type img {border-radius: 16px 0 0 16px;}
    .viewer.mo_ver > .inner .img_box .swiper-wrapper .swiper-slide div:last-of-type img {border-radius: 0 16px 16px 0;}
    .viewer.mo_ver > .inner .img_box .swiper-button-prev, .viewer.mo_ver .inner .img_box .swiper-button-next {width: 34px; height: 34px;
        background-position: center; background-repeat: no-repeat; background-size: contain;}
    .viewer.mo_ver > .inner .img_box .swiper-button-prev::after, .viewer.mo_ver .inner .img_box .swiper-button-next::after {font-size: 0;}
    .viewer.mo_ver > .inner .img_box .swiper-button-prev {background-image: url(../images/sub04_02_btn_prev.png); left: 3%;}
    .viewer.mo_ver > .inner .img_box .swiper-button-next {background-image: url(../images/sub04_02_btn_next.png); right: 3%;}
    .viewer.mo_ver > .inner .img_box .kg_box::after {content: ''; display: block; width: 140px; height: 140px; background: rgba(255, 255, 255, 0.3); border-radius: 50%;
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;}
    .viewer.mo_ver > .inner .img_box .kg_box p {width: 120px; height: 120px; background: #8556E3; border-radius: 50%;
        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
        color: #fff; text-align: center; font-weight: 700; font-size: 18px; line-height: 26px; letter-spacing: -0.02em;}
    .viewer.mo_ver > .inner .img_box .kg_box p strong {display: block; font-size: 32px; line-height: 42px;}
    .viewer.mo_ver > .inner .img_box .kg_box p strong span {font-size: 24px; line-height: 32px;}

    .viewer.mo_ver .inner .btn_box {position: relative;}
    .viewer.mo_ver .inner .btn_box ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; 
        border: 1px solid #E4E4E4; border-radius: 8px; overflow: hidden; margin: 16px 0;}
    .viewer.mo_ver .inner .btn_box ul li {text-align: center; font-weight: 500; font-size: 16px; line-height: 28px; letter-spacing: -0.02em; background: #F6F6F6;}
    .viewer.mo_ver .inner .btn_box ul li.on {background: #E8DCFF;}
    .viewer.mo_ver .inner .btn_box ul li a {display: block; color: #8556E3; padding: 8px 0;}
    .viewer.mo_ver .inner .btn_box .move_next {position: absolute; top: -80px; right: -12px; z-index: 10; white-space: nowrap;}
    .viewer.mo_ver .inner .btn_box .move_next a {display: inline-block; background: #FFFFFF; border: 2px solid #D2B7FF; box-sizing: border-box; vertical-align: middle;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); backdrop-filter: blur(58px); border-radius: 5px; color: #7435FF; font-size: 13px; padding: 11px 12px;}
    .viewer.mo_ver .inner .btn_box .move_next a span {display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;
        background: url(../images/sub04_02_icon_smile.png) center no-repeat; background-size: contain;}

    .viewer.mo_ver .inner .text_box {display: flex;}
    .viewer.mo_ver .inner .text_box > .inner {width: 65%; background: #FCFCFC; box-sizing: border-box; border: 1px solid #E4E4E4; border-radius: 8px; padding: 32px 3%; position: relative;}
    .viewer.mo_ver .inner .text_box > .inner table {width: 100%;}
    .viewer.mo_ver .inner .text_box > .inner table tr {color: #29203B; font-size: 16px; line-height: 22px; letter-spacing: -0.02em;}
    .viewer.mo_ver .inner .text_box > .inner table tr:not(:last-of-type) {border-bottom: 7px solid rgba(255, 255, 255, 0);}
    .viewer.mo_ver .inner .text_box > .inner table tr th {text-align: left; font-weight: 700;}
    .viewer.mo_ver .inner .text_box > .inner table tr td {font-weight: 300;}
    .viewer.mo_ver .inner .text_box > .inner table tr td.purple {font-weight: 700;}
    .viewer.mo_ver .inner .text_box > .inner table tr td .hash_tag {display: inline-block; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; 
        color: #8556E3; background: #fff; padding: 4px 12px; border: 1px solid #D4C4F5; border-radius: 8px; margin-right: 4px;}
    .viewer.mo_ver .inner .text_box .after_kg {width: 35%; text-align: right; font-weight: 700; font-size: 14px; letter-spacing: -0.02em; 
        background: #FCFCFC; box-sizing: border-box; border: 1px solid #E4E4E4; border-radius: 8px; position: relative;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner {position: absolute; bottom: 32px; right: 32px;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner span {color: #29203B; position: relative;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner span::after {content: ''; display: block; width: 100%; height: 2px; background: #8556E3; 
        position: absolute; bottom: 9px; left: 0; z-index: 2;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner p {color: #47346B;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner p strong {font-size: 28px; line-height: 36px;}
    .viewer.mo_ver .inner > .move_next {display: none;}


    .gragh .inner {padding: 80px 5%;}
    .gragh .inner ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;}
    .gragh .inner ul li {text-align: center; background: #FFFFFF; border: 1px solid #D4C4F5; border-radius: 16px; overflow: hidden; padding: 16px 0;}
    .gragh .inner ul li dl dt {font-weight: 400; font-size:16px; line-height: 32px; letter-spacing: -0.04em;}
    .gragh .inner ul li dl dt span {display: none;}
    .gragh .inner ul li dl dd {color: #7435FF; font-weight: 700; font-size: 28px; line-height: 36px; margin-bottom: 6px;}
    .gragh .inner ul li dl dd span {font-size: 12px;}
    

    .other .inner {padding: 80px 5%;}
    .other .inner ul {font-size: 18px; padding: 12px 0; margin-bottom: 12px;}
    .other .inner p {font-size: 18px; line-height: 26px;}
    .other .inner p:not(:last-of-type) {margin-bottom: 4px;}


    .btns {display: none;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    /* content */
    .viewer.mo_ver > .inner > p {font-weight: 700; font-size: 22px; line-height: 32px; margin: 0; padding: 60px 0 24px;}
    .viewer.mo_ver > .inner .img_box {width: 100%; position: relative; overflow: hidden;}
    .viewer.mo_ver > .inner .img_box .swiper-button-prev, .viewer.mo_ver .inner .img_box .swiper-button-next {display: none;}
    .viewer.mo_ver > .inner .img_box .kg_box::after {display: none;}
    .viewer.mo_ver > .inner .img_box .kg_box p {width: 64px; height: 64px; border: 1px solid #7435FF; font-weight: 300; font-size: 8px; line-height: 10px; letter-spacing: 0;}
    .viewer.mo_ver > .inner .img_box .kg_box p strong {font-size: 18px; line-height: 23px;}
    .viewer.mo_ver > .inner .img_box .kg_box p strong span {font-size: 12px; line-height: 15px;}

    .viewer.mo_ver .inner .btn_box .move_next {display: none;}

    .viewer.mo_ver .inner .text_box {display: flex; flex-direction: column; background: #FCFCFC; box-sizing: border-box; border: 1px solid #E4E4E4; border-radius: 8px; padding: 32px 3%;}
    .viewer.mo_ver .inner .text_box > .inner {width: 100%; border: none; border-bottom: 1px solid #8556E3; border-radius: 0; padding: 0 0 16px 0;}
    .viewer.mo_ver .inner .text_box > .inner table {width: 100%;}
    .viewer.mo_ver .inner .text_box .after_kg {width: 100%; border: none; border-radius: 0; padding-top: 16px;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner {position: relative; bottom: 0; right: 0;}
    .viewer.mo_ver .inner .text_box .after_kg > .inner p strong {font-size: 32px; line-height: 42px;}
    .viewer.mo_ver .inner > .move_next {display: none;}

    .viewer.mo_ver .inner > .move_next {display: block; white-space: nowrap; margin-top: 16px;}
    .viewer.mo_ver .inner > .move_next a {display: block; background: #FFFFFF; border: 1px solid #D4C4F5; box-sizing: border-box; text-align: center;
        border-radius: 8px; color: #7435FF; font-size: 16px; padding: 16px 0;}


    .gragh .inner {padding: 60px 5%;}
    .gragh .inner .main_title {margin-bottom: 32px; text-align: center;}
    .gragh .inner ul {display: grid; grid-template-columns: repeat(2, 2fr); column-gap: 25px; row-gap: 42px; padding: 32px 3%;
        background: #fff; border: 1px solid #D4C4F5; border-radius: 16px; overflow: hidden; position: relative;}
    .gragh .inner ul::before {content: ''; display: block; width: 1px; height: 90%; background: #D4C4F5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .gragh .inner ul::after {content: ''; display: block; width: 94%; height: 1px; background: #D4C4F5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .gragh .inner ul li {border: none; border-radius: 0; padding: 0;}
    .gragh .inner ul li dl dt {font-weight: 400; font-size:16px; line-height: 32px; letter-spacing: -0.04em;}
    .gragh .inner ul li dl dt span {display: none;}
    .gragh .inner ul li dl dd {color: #7435FF; font-weight: 700; font-size: 28px; line-height: 36px; margin-bottom: 6px;}
    .gragh .inner ul li dl dd span {font-size: 12px;}


    .other .inner {padding: 60px 5%;}
    .other .inner ul {font-size: 14px; padding: 8px 0; margin-bottom: 8px;}
    .other .inner p {font-size: 16px; line-height: 22px;}
}


/*KJS 차트 배경 그리드*/
.chartbox {background: repeating-linear-gradient(#E4E4E4, #E4E4E4 1px, #FFFFFF 0, #FFFFFF 20px); background-position-y: -40px; background-repeat:no-repeat;}