@font-face {
    font-family: 'NPSfontBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/NPSfontBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'NPSfontExtraBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/NPSfontExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

:root {
    --header-height: 72px;
    --sidepacer: 3.75rem;
    --max-width: 1280px;
    --max-width-main: 1800px;
}

/* Layout */
header {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 200;
    width: 100%
}

header.fix-shadow {
    display: block
}

header.is-shadow {
    display: block;
    border-bottom: 1px solid #ccc
}

header .hamburger {
    display: none
}

header .wrapper {
    min-height: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 var(--sidepacer);
    position: relative
}

header h1 {
    margin-right: 40px
}

header h1 a {
    display: block
}

header .gnb-wrap {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    max-width: 70.625rem
}

header .gnb-wrap .gnb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

header .gnb-wrap .gnb li {
    flex: none;
    height: 3.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

header .gnb-wrap .gnb li a {
    display: block;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    position: relative;
    transition: .2s all
}

header .gnb-wrap .gnb li a::after {
    content: "";
    display: block;
    transition: .2s all;
    position: absolute;
    bottom: -2px;
    height: 2px;
    background-color: #094093;
    width: 0
}

header .gnb-wrap .gnb li a:hover {
    color: #094093
}

header .gnb-wrap .gnb li a:hover::after {
    width: 100%
}

header .gnb-wrap .depth-wrap {
    position: absolute;
    width: 12.5rem;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    display: none
}

header .gnb-wrap .depth-wrap .depth {
    position: relative;
    transform: translateY(1.75rem);
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, .08);
    padding: .625rem 0;
    border: 1px solid #e5e5e5;
    border-radius: .75rem
}

header .gnb-wrap .depth-wrap .depth li {
    width: 100%;
    height: auto;
    padding: 0 10px;
    box-sizing: border-box;
    display: block
}

header .gnb-wrap .depth-wrap .depth li a {
    display: block;
    padding: .5rem 0;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: #999
}

header .gnb-wrap .depth-wrap .depth li a:hover {
    font-weight: 700;
    color: #0055a7
}

header .gnb-wrap .depth-wrap .depth li a:hover::after {
    display: none
}

header .gnb-wrap .depth-wrap .depth li:last-child a {
    border-bottom: 0
}

header .mo-btn {
    display: none
}

header.on .gnb {
    display: flex
}

/* Main Visual */
.section.main-visual {
    /* font-family: Pretendard Variable, Roboto, Malgun Gothic, sans-serif; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: static;
    background-repeat: no-repeat;
    background-position: center bottom;
    overflow: visible;
    padding: calc(5.625rem + var(--header-height)) 0;
}

.section.main-visual.ele {
    background-color: #fff2e1
}
.section.main-visual.mid {
    background-color: #e2ebff
}
.section.main-visual.hi {
    background-color: #e9fff2
}
.section.main-visual.eng {
    background-image: url(/prcenter/img/sub/books_bg_object_eng.svg);
    background-position: center bottom 22%
}

.section.main-visual.math {
    background-image: url(/prcenter/img/sub/books_bg_object_math.svg);
    background-position: center bottom 22%
}

.section.main-visual.math2 {
    background-image: url(/prcenter/img/sub/books_bg_object_math2.svg);
    background-position: center bottom 22%
}

.section.main-visual.society {
    background-image: url(/prcenter/img/sub/books_bg_object_society.svg);
    background-position: center bottom 22%
}

.section.main-visual.music {
    background-image: url(/prcenter/img/sub/books_bg_object_music.svg);
    background-position: center bottom 22%
}

.section.main-visual.music2 {
    background-image: url(/prcenter/img/sub/books_bg_object_music2.svg);
    background-position: center bottom 22%
}

.section.main-visual.pe {
    background-image: url(/prcenter/img/sub/books_bg_object_pe.svg);
    background-position: center bottom 22%
}

.section.main-visual.pe2 {
    background-image: url(/prcenter/img/sub/books_bg_object_pe2.svg);
    background-position: center bottom 22%
}

.section.main-visual.science {
    background-image: url(/prcenter/img/sub/books_bg_object_science.svg);
    background-position: center bottom 22%
}

.section.main-visual.th {
    background-image: url(/prcenter/img/sub/books_bg_object_th.svg);
    background-position: center bottom 22%
}

.section.main-visual.chin {
    background-image: url(/prcenter/img/sub/books_bg_object_chin.svg);
    background-position: center bottom 22%
}

.section.main-visual.health {
    background-image: url(/prcenter/img/sub/books_bg_object_health.svg);
    background-position: center bottom 22%
}

.section.main-visual.job {
    background-image: url(/prcenter/img/sub/books_bg_object_job.svg);
    background-position: center bottom 22%
}

.section.main-visual.info {
    background-image: url(/prcenter/img/sub/books_bg_object_info.svg);
    background-position: center bottom 22%
}
/* // Main Visual */

/* Title Box */
.section.main-visual .title-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    position: relative
}

.section.main-visual .title-box .title {
    font-family: NPSfontBold, Malgun Gothic, sans-serif;
    font-size: 3.5rem;
    color: #666
}

.section.main-visual .title-box .desc {
    font-size: 1.375rem;
    font-weight: 600;
    color: #666
}

.section.main-visual .title-box .textbook-shorts-box {
    position: absolute;
    top: 3.125rem;
    left: calc(50% + 19.375rem);
    width: 8rem;
    height: 6.75rem;
    background: no-repeat center center/contain;
    background-image: url("/prcenter/img/sub/img_shots_title.png")
}

.section.main-visual .title-box .textbook-shorts-box a {
    display: block;
    width: 100%;
    height: 100%
}

.section.main-visual .title-box .textbook-shorts-box a span {
    display: none
}
/* // Title Box */

/* Cover Box */
.section.main-visual .cover-box {
    margin-top: 3.125rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7.5rem
}

.section.main-visual .cover-box .cover-img-group {
    display: flex;
    align-items: center;
    text-align: center;
    gap: 7.5rem
}

.section.main-visual .cover-box .cover-img {
    aspect-ratio: .7696969697;
    display: inline-block;
    width: 100%;
    border-radius: .375rem;
    width: 15.875rem;
    transition: all .2s ease;
    position: relative
}

.section.main-visual .cover-box .cover-img img {
    width: 100%
}

@supports not (aspect-ratio: calc(254 / 330)) {
    .section.main-visual .cover-box .cover-img::before {
        content: "";
        float: left;
        padding-top: 129.9212598425%;
        display: block
    }
}

.section.main-visual .cover-box .cover-img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .4s ease;
    visibility: visible;
    opacity: 1
}

.section.main-visual .cover-box .cover-img img :nth-child(2) {
    display: none;
    top: 70%;
    height: auto
}

.section.main-visual .cover-box .cover-img .cover-hover-box {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: .4s all
}

.section.main-visual .cover-box .cover-img .cover-hover-box img {
    transition: .4s all
}

.section.main-visual .cover-box .cover-img:nth-child(odd) {
    transform: rotate(-2deg) scale(1.45) translateY(5%)
}

.section.main-visual .cover-box .cover-img:nth-child(odd) .main-book {
    animation: motion 1.5s linear 1s infinite alternate
}

.section.main-visual .cover-box .cover-img:nth-child(even) {
    transform: rotate(2deg) scale(1.45) translateY(5%)
}

.section.main-visual .cover-box .cover-img:nth-child(even) .main-book {
    animation: motion 1.5s linear 0s infinite alternate
}

.section.main-visual .cover-box .cover-img:hover .main-book {
    opacity: 0;
    visibility: hidden
}

.section.main-visual .cover-box .cover-img:hover .cover-hover-box {
    opacity: 1;
    visibility: visible
}

.section.main-visual .cover-box .cover-img:hover .cover-hover-box .ov {
    transform: translate(-50%, -50%) scale(1)
}
/* //Cover Box */

/* Tab box */
.section.main-visual .tab-box {
    display: flex;
    justify-content: center;
    margin-top: 12rem;
    margin-bottom: -4rem;
    border-radius: .75rem;
    overflow: hidden;
    max-width: 32.5rem;
    margin-left: auto;
    margin-right: auto
}

.section.main-visual .tab-box .tab-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.25rem;
    height: 4rem;
    background-color: #fff;
    font-family: "NPSfontBold", "Malgun Gothic", sans-serif;
    font-size: 1.4375rem;
    color: #333;
}

.section.main-visual .tab-box .tab-link.current {
    color: #fff
}

.section.main-visual.ele .tab-box .tab-link.current {
    background-color: #ff914d;
}

.section.main-visual.mid .tab-box .tab-link.current {
    background-color: #319fe8;
}

.section.main-visual.hi .tab-box .tab-link.current {
    background-color: #4dcc80;
}

/* Data Wrap */
.section.main-visual .data-wrap {
    border-radius: 2.5rem;
    margin-top: 9.1875rem;
    padding: 2.5rem 2.5rem;
    width: 73.75rem;
    border-width: 1px;
    border-style: solid
}

.section.main-visual .data-wrap .data-box {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 1em 0;
}

.section.main-visual .data-wrap .data-box .item {
    display: flex;
    align-items: center;
    gap: 1rem
}

.section.main-visual .data-wrap .data-box:first-child dt {
    letter-spacing: -1px;
}

.section.main-visual .data-wrap .data-box dt {
    font-family: NPSfontBold, Malgun Gothic, sans-serif;
    width: 14.5rem;
    font-weight: 700;
    font-size: 1.125rem;
    position: relative;
    padding-right: 3.125rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    box-sizing: content-box;
}

.section.main-visual .data-wrap .data-box dt:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .3125rem
}

.section.main-visual .data-wrap .data-box dt:after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    right: 0;
    width: 3.125rem;
    height: .5rem
}

.section.main-visual .data-wrap .data-box dd {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1
}

.section.main-visual .data-wrap .data-box dd a {
    display: flex;
    flex: 1;
    border-radius: .75rem;
    font-weight: 700;
    font-size: 1.125rem;
    color: #333;
    background: #ffbc93;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    box-shadow: 0 2px 0 #000;
    transition: all .2s ease;
    position: relative;
    min-width: calc(25% - 0.8rem);
    max-width: calc(25% - 0.8rem);
}

.section.main-visual .data-wrap .data-box dd a:hover {
    box-shadow: -2px 4px 0 #000;
    transform: translate(2px, -2px)
}

.section.main-visual .data-wrap .data-box dd a:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem
}

.section.main-visual .data-wrap .data-box dd a.caseA:before {
    background: url('/prcenter/img/sub/ico_button_book.svg') no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseB:before {
    background: url('/prcenter/img/sub/ico_button_math.svg') no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseC:before {
    background: url('/prcenter/img/sub/ico_button_gdcap.svg') no-repeat center center/contain;
    margin-right: .125rem
}

.section.main-visual .data-wrap .data-box dd a.caseD:before {
    background: url('/prcenter/img/sub/ico_button_paper.svg') no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseE:before {
    background: url('/prcenter/img/sub/ico_button_monitor.svg') no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseF:before {
    background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='14' height='16' rx='2' fill='white'/%3E%3Cpath d='M8.5 4.44C8.5 3.93595 8.5 3.68393 8.59537 3.49141C8.67926 3.32206 8.81312 3.18438 8.97776 3.09809C9.16493 3 9.40995 3 9.9 3H14.1C14.59 3 14.8351 3 15.0222 3.09809C15.1869 3.18438 15.3207 3.32206 15.4046 3.49141C15.5 3.68393 15.5 3.93595 15.5 4.44V5.16C15.5 5.66405 15.5 5.91607 15.4046 6.10859C15.3207 6.27794 15.1869 6.41562 15.0222 6.50191C14.8351 6.6 14.59 6.6 14.1 6.6H9.9C9.40995 6.6 9.16493 6.6 8.97776 6.50191C8.81312 6.41562 8.67926 6.27794 8.59537 6.10859C8.5 5.91607 8.5 5.66405 8.5 5.16V4.44Z' fill='%23F8CE00'/%3E%3Cpath d='M15.5 4.8C16.3137 4.8 16.7206 4.8 17.0544 4.892C17.9603 5.14166 18.6678 5.86944 18.9106 6.80119C19 7.14454 19 7.56303 19 8.4V16.68C19 18.1921 19 18.9482 18.7139 19.5258C18.4622 20.0338 18.0607 20.4469 17.5667 20.7057C17.0052 21 16.2701 21 14.8 21H9.2C7.72986 21 6.99479 21 6.43327 20.7057C5.93935 20.4469 5.53778 20.0338 5.28611 19.5258C5 18.9482 5 18.1921 5 16.68V8.4C5 7.56303 5 7.14454 5.08944 6.80119C5.33217 5.86944 6.03973 5.14166 6.9456 4.892C7.27941 4.8 7.68627 4.8 8.5 4.8M9.375 14.7L11.125 16.5L15.0625 12.45M9.9 6.6H14.1C14.59 6.6 14.8351 6.6 15.0222 6.50191C15.1869 6.41562 15.3207 6.27794 15.4046 6.10859C15.5 5.91607 15.5 5.66405 15.5 5.16V4.44C15.5 3.93595 15.5 3.68393 15.4046 3.49141C15.3207 3.32206 15.1869 3.18438 15.0222 3.09809C14.8351 3 14.59 3 14.1 3H9.9C9.40995 3 9.16493 3 8.97776 3.09809C8.81312 3.18438 8.67926 3.32206 8.59537 3.49141C8.5 3.68393 8.5 3.93595 8.5 4.44V5.16C8.5 5.66405 8.5 5.91607 8.59537 6.10859C8.67926 6.27794 8.81312 6.41562 8.97776 6.50191C9.16493 6.6 9.40995 6.6 9.9 6.6Z' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseG:before {
    background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 7.32C6 5.80786 6 5.05179 6.28611 4.47423C6.53778 3.96619 6.93935 3.55314 7.43327 3.29428C7.99479 3 8.72986 3 10.2 3H13.0103C13.6524 3 13.9734 3 14.2755 3.0746C14.5433 3.14074 14.7994 3.24983 15.0342 3.39787C15.2992 3.56484 15.5262 3.79833 15.9802 4.2653L18.7698 7.1347C19.2238 7.60167 19.4508 7.83516 19.6132 8.10763C19.7571 8.34921 19.8632 8.61258 19.9275 8.88807C20 9.19881 20 9.52901 20 10.1894V16.68C20 18.1921 20 18.9482 19.7139 19.5258C19.4622 20.0338 19.0607 20.4469 18.5667 20.7057C18.0052 21 17.2701 21 15.8 21H10.2C8.72986 21 7.99479 21 7.43327 20.7057C6.93935 20.4469 6.53778 20.0338 6.28611 19.5258C6 18.9482 6 18.1921 6 16.68V7.32Z' fill='white'/%3E%3Cpath d='M15 8V3.5L19.5 8H15Z' fill='%23F8CE00'/%3E%3Cpath d='M14.75 3.24258V6.96007C14.75 7.46411 14.75 7.71613 14.8454 7.90866C14.9293 8.078 15.0631 8.21568 15.2278 8.30197C15.4149 8.40006 15.66 8.40006 16.15 8.40006H19.7642M14.75 16.5H9.5M16.5 12.9H9.5M20 10.1894V16.68C20 18.1921 20 18.9482 19.7139 19.5258C19.4622 20.0338 19.0607 20.4469 18.5667 20.7057C18.0052 21 17.2701 21 15.8 21H10.2C8.72986 21 7.99479 21 7.43327 20.7057C6.93935 20.4469 6.53778 20.0338 6.28611 19.5258C6 18.9482 6 18.1921 6 16.68V7.32C6 5.80786 6 5.05179 6.28611 4.47423C6.53778 3.96619 6.93935 3.55314 7.43327 3.29428C7.99479 3 8.72986 3 10.2 3H13.0103C13.6524 3 13.9734 3 14.2755 3.0746C14.5433 3.14074 14.7994 3.24983 15.0342 3.39787C15.2992 3.56484 15.5262 3.79833 15.9802 4.2653L18.7698 7.1347C19.2238 7.60167 19.4508 7.83516 19.6132 8.10763C19.7571 8.34921 19.8632 8.61258 19.9275 8.88807C20 9.19881 20 9.52901 20 10.1894Z' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseH:before {
    background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='17' width='4' height='5' rx='2' fill='white'/%3E%3Ccircle cx='12' cy='12' r='6' fill='%23F8CE00'/%3E%3Cpath d='M10.125 17.6586V20C10.125 21.1046 11.0204 22 12.125 22C13.2296 22 14.125 21.1046 14.125 20V17.6586M12.125 2V3M3.125 12H2.125M5.625 5.5L5.0249 4.8999M18.625 5.5L19.2252 4.8999M22.125 12H21.125M18.125 12C18.125 15.3137 15.4387 18 12.125 18C8.81129 18 6.125 15.3137 6.125 12C6.125 8.68629 8.81129 6 12.125 6C15.4387 6 18.125 8.68629 18.125 12Z' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center/contain
}

.section.main-visual .data-wrap .data-box dd a.caseI:before {
    background: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7C12 5.34315 13.3431 4 15 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H13C12.4477 20 12 19.5523 12 19V7Z' fill='white'/%3E%3Cpath d='M2 6C2 4.89543 2.89543 4 4 4H9C10.6569 4 12 5.34315 12 7V19C12 19.5523 11.5523 20 11 20H4C2.89543 20 2 19.1046 2 18V6Z' fill='%23F8CE00'/%3E%3Cpath d='M12 20H5.2C4.07989 20 3.51984 20 3.09202 19.782C2.71569 19.5903 2.40973 19.2843 2.21799 18.908C2 18.4802 2 17.9201 2 16.8V7.2C2 6.07989 2 5.51984 2.21799 5.09202C2.40973 4.71569 2.71569 4.40973 3.09202 4.21799C3.51984 4 4.07989 4 5.2 4H5.6C7.84021 4 8.96031 4 9.81596 4.43597C10.5686 4.81947 11.1805 5.43139 11.564 6.18404C12 7.03968 12 8.15979 12 10.4M12 20V10.4M12 20H18.8C19.9201 20 20.4802 20 20.908 19.782C21.2843 19.5903 21.5903 19.2843 21.782 18.908C22 18.4802 22 17.9201 22 16.8V7.2C22 6.07989 22 5.51984 21.782 5.09202C21.5903 4.71569 21.2843 4.40973 20.908 4.21799C20.4802 4 19.9201 4 18.8 4H18.4C16.1598 4 15.0397 4 14.184 4.43597C13.4314 4.81947 12.8195 5.43139 12.436 6.18404C12 7.03968 12 8.15979 12 10.4' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center/contain
}

.section.main-visual.ele .data-wrap,
.ele .section.main-visual .data-wrap {
    background-color: #ffdcc7;
    border-color: #d96a26
}

.section.main-visual.ele .data-wrap .data-box dd a,
.ele .section.main-visual .data-wrap .data-box dd a {
    background-color: #ffbc93
}

.section.main-visual.ele .data-wrap .data-box dd a:hover,
.ele .section.main-visual .data-wrap .data-box dd a:hover {
    background: #ff914d
}

.section.main-visual.ele .data-wrap .data-box dt:before,
.ele .section.main-visual .data-wrap .data-box dt:before {
    background: url("/prcenter/book/ele/ico_pencle.svg") no-repeat center center/contain
}

.section.main-visual.ele .data-wrap .data-box dt:after,
.ele .section.main-visual .data-wrap .data-box dt:after {
    background: url("/prcenter/book/ele/ico_relation_line.svg") no-repeat center center
}

.section.main-visual.ele .data-wrap .download-box,
.ele .section.main-visual .data-wrap .download-box {
    border-color: #f0ae86
}

.section.main-visual.ele .data-wrap .download-box .contour,
.ele .section.main-visual .data-wrap .download-box .contour {
    background-color: #f0ae86
}


.section.main-visual.mid .data-wrap,
.mid .section.main-visual .data-wrap {
    background-color: #c7daff;
    border-color: #006eb7
}

.section.main-visual.mid .data-wrap .data-box.ty2 dd a {
    background-color: #5196FF
}

.section.main-visual.mid .data-wrap .data-box.ty2 dd a.point {
    background-color: #3DB5FF
}

.section.main-visual.mid .data-wrap .data-box dd a,
.mid .section.main-visual .data-wrap .data-box dd a {
    background-color: #92bdff
}

.section.main-visual.mid .data-wrap .data-box dd a:hover,
.mid .section.main-visual .data-wrap .data-box dd a:hover {
    background: #319fe8
}
.section.main-visual.mid .data-wrap .data-box.ty2 dt:before {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3110_2719)'%3E%3Cpath d='M24.6382 11.9551L28.5638 18.5775C29.9589 20.931 29.086 24.0225 26.6205 25.484L22.164 28.1257C19.6948 29.5894 16.5653 28.8657 15.1722 26.5157L11.2466 19.8933L24.6382 11.9551Z' fill='%23319fe8' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.242 9.71147L13.4702 8.39062L17.9355 15.9234L11.2397 19.8925L9.34244 16.6919C7.92428 14.2995 8.77278 11.1752 11.242 9.71147Z' fill='%23319fe8' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.7058 7.07016C18.175 5.60646 21.3237 6.36257 22.7404 8.75249L24.6386 11.9546L17.9428 15.9238L13.4776 8.39101L15.7058 7.07016Z' fill='%23319fe8' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.7805 18.9175L20.516 17.8887C21.0186 17.5908 21.2168 16.9926 20.9577 16.5556L17.8854 11.3728C17.6264 10.9358 17.0065 10.8226 16.5039 11.1205L14.7684 12.1492C14.2659 12.4471 14.0677 13.0453 14.3267 13.4823L17.399 18.6652C17.6522 19.1056 18.2721 19.2188 18.7805 18.9175Z' fill='white' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4708 8.39137L10.789 3.86719C10.176 2.83309 8.86913 2.46984 7.86927 3.06253L7.56682 3.24182C6.57052 3.83241 6.2562 5.15168 6.87139 6.18947L7.0728 6.52924C7.68579 7.56334 7.37723 8.88419 6.37737 9.47689C5.38106 10.0675 4.07283 9.71003 3.45764 8.67224L0.999809 4.46507' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3110_2719'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.section.main-visual.mid .data-wrap .data-box dt:before,
.mid .section.main-visual .data-wrap .data-box dt:before {
    background: url("/prcenter/book/mid/ico_pencle.svg") no-repeat center center/contain
}

.section.main-visual.mid .data-wrap .data-box dt:after,
.mid .section.main-visual .data-wrap .data-box dt:after {
    background: url("/prcenter/book/mid/ico_relation_line.svg") no-repeat center center
}

.section.main-visual.mid .data-wrap .data-box.ty2 {
    border-bottom-color: #77afe2;
}

.section.main-visual.mid .data-wrap .download-box,
.mid .section.main-visual .data-wrap .download-box {
    border-color: #77afe2
}

.section.main-visual.mid .data-wrap .download-box .contour,
.mid .section.main-visual .data-wrap .download-box .contour {
    background-color: #77afe2
}

.section.main-visual.hi .data-wrap,
.hi .section.main-visual .data-wrap {
    background-color: #b9f8d2;
    border-color: #159c4b
}

.section.main-visual.hi .data-wrap .data-box.ty2 dd a,
.hi .section.main-visual .data-wrap .data-box.ty2 dd a {
    background-color: #38CC73;
}

.section.main-visual.hi .data-wrap .data-box.ty2 dd a.point,
.hi .section.main-visual .data-wrap .data-box.ty2 dd a.point {
    background-color: #78C01F;
}

.section.main-visual.hi .data-wrap .data-box dd a,
.hi .section.main-visual .data-wrap .data-box dd a {
    background-color: #6eeba0
}

.section.main-visual.hi .data-wrap .data-box dd a:hover,
.hi .section.main-visual .data-wrap .data-box dd a:hover {
    background: #4dcc80
}

.section.main-visual.hi .data-wrap .data-box.ty2 dt:before {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3110_2719)'%3E%3Cpath d='M24.6382 11.9551L28.5638 18.5775C29.9589 20.931 29.086 24.0225 26.6205 25.484L22.164 28.1257C19.6948 29.5894 16.5653 28.8657 15.1722 26.5157L11.2466 19.8933L24.6382 11.9551Z' fill='%234dcc80' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.242 9.71147L13.4702 8.39062L17.9355 15.9234L11.2397 19.8925L9.34244 16.6919C7.92428 14.2995 8.77278 11.1752 11.242 9.71147Z' fill='%234dcc80' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.7058 7.07016C18.175 5.60646 21.3237 6.36257 22.7404 8.75249L24.6386 11.9546L17.9428 15.9238L13.4776 8.39101L15.7058 7.07016Z' fill='%234dcc80' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.7805 18.9175L20.516 17.8887C21.0186 17.5908 21.2168 16.9926 20.9577 16.5556L17.8854 11.3728C17.6264 10.9358 17.0065 10.8226 16.5039 11.1205L14.7684 12.1492C14.2659 12.4471 14.0677 13.0453 14.3267 13.4823L17.399 18.6652C17.6522 19.1056 18.2721 19.2188 18.7805 18.9175Z' fill='white' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4708 8.39137L10.789 3.86719C10.176 2.83309 8.86913 2.46984 7.86927 3.06253L7.56682 3.24182C6.57052 3.83241 6.2562 5.15168 6.87139 6.18947L7.0728 6.52924C7.68579 7.56334 7.37723 8.88419 6.37737 9.47689C5.38106 10.0675 4.07283 9.71003 3.45764 8.67224L0.999809 4.46507' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3110_2719'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.section.main-visual.hi .data-wrap .data-box dt:before,
.hi .section.main-visual .data-wrap .data-box dt:before {
    background: url("/prcenter/book/hi/ico_pencle.svg") no-repeat center center/contain
}

.section.main-visual.hi .data-wrap .data-box dt:after,
.hi .section.main-visual .data-wrap .data-box dt:after {
    background: url("/prcenter/book/hi/ico_relation_line.svg") no-repeat center center
}


.section.main-visual.hi .data-wrap .data-box.ty2 {
    border-bottom-color: #77d39c;
}

.section.main-visual.hi .data-wrap .download-box,
.hi .section.main-visual .data-wrap .download-box {
    border-color: #77d39c
}

.section.main-visual.hi .data-wrap .download-box .contour,
.hi .section.main-visual .data-wrap .download-box .contour {
    background-color: #77d39c
}

/* Icons */
.section.main-visual.ele .btn.primary,
.ele .section.main-visual .btn.primary {
    background-color: #ff914d
}

.section.main-visual.ele .btn.primary:hover,
.ele .section.main-visual .btn.primary:hover {
    background-color: #d96a26
}

.section.main-visual.ele .btn .btns,
.ele .section.main-visual .btn .btns {
    transition: all .3s ease
}

.section.main-visual.ele .btn .btns:hover,
.ele .section.main-visual .btn .btns:hover {
    background: #fff;
    border-color: #ffbc93
}

.section.main-visual.ele i,
.ele .section.main-visual i {
    display: inline-block
}

.section.main-visual.ele i.download,
.ele .section.main-visual i.download {
    width: 1.25rem;
    height: 1.25rem;
    background: url("/prcenter/book/ele/ico_download.svg") no-repeat center/contain
}

.section.main-visual.ele i.view,
.ele .section.main-visual i.view {
    width: 1.4375rem;
    height: 1.4375rem;
    background: url("/prcenter/book/ele/ico_sub_book_view.svg") no-repeat center/contain
}

.section.main-visual.ele i.search,
.ele .section.main-visual i.search {
    width: 1.3325rem;
    height: 1.3325rem;
    background: url("/prcenter/book/ele/ico_search.svg") no-repeat center/cover
}

.section.main-visual.ele i.warning,
.ele .section.main-visual i.warning {
    width: 1.1875rem;
    height: 1.1875rem;
    background: url("/prcenter/img/sub/ico_warning.svg") no-repeat center/cover
}

.section.main-visual.mid i.download,
.mid .section.main-visual i.download {
    width: 1.25rem;
    height: 1.25rem;
    background: url("/prcenter/book/mid/ico_download.svg") no-repeat center/contain
}

.section.main-visual.mid i.view,
.mid .section.main-visual i.view {
    width: 1.4375rem;
    height: 1.4375rem;
    background: url("/prcenter/book/mid/ico_sub_book_view.svg") no-repeat center/contain
}

.section.main-visual.mid i.search,
.mid .section.main-visual i.search {
    width: 1.3325rem;
    height: 1.3325rem;
    background: url("/prcenter/book/mid/ico_search.svg") no-repeat center/cover
}

.section.main-visual.mid i.warning,
.mid .section.main-visual i.warning {
    width: 1.1875rem;
    height: 1.1875rem;
    background: url("/prcenter/img/sub/ico_warning.svg") no-repeat center/cover
}

.section.main-visual.hi i.download,
.hi .section.main-visual i.download {
    width: 1.25rem;
    height: 1.25rem;
    background: url("/prcenter/book/hi/ico_download.svg") no-repeat center/contain
}

.section.main-visual.hi i.view,
.hi .section.main-visual i.view {
    width: 1.4375rem;
    height: 1.4375rem;
    background: url("/prcenter/book/hi/ico_sub_book_view.svg") no-repeat center/contain
}

.section.main-visual.hi i.search,
.hi .section.main-visual i.search {
    width: 1.3325rem;
    height: 1.3325rem;
    background: url("/prcenter/book/hi/ico_search.svg") no-repeat center/cover
}

.section.main-visual.hi i.warning,
.hi .section.main-visual i.warning {
    width: 1.1875rem;
    height: 1.1875rem;
    background: url("/prcenter/img/sub/ico_warning.svg") no-repeat center/cover
}

.section.main-visual .card_content {
    width: min(720px, 90%);
    overflow: hidden;
    margin: 60px auto 0;
    border-radius: 20px;
}

.section.main-visual .card_content .img {
    position: relative;
    width: 100%;
    height: auto;
    line-height: 0
}

.section.main-visual .card_content .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.section.main-visual .data-wrap .data-box.ty2 {
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #f0ae86;
}
.section.main-visual .data-wrap .data-box.ty2 dt {
    display: flex;
    margin-bottom: 26px;
    white-space: wrap;
    word-break: keep-all;
}
.section.main-visual .data-wrap .data-box.ty2 dt::before {
    flex: none;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3110_2719)'%3E%3Cpath d='M24.6382 11.9551L28.5638 18.5775C29.9589 20.931 29.086 24.0225 26.6205 25.484L22.164 28.1257C19.6948 29.5894 16.5653 28.8657 15.1722 26.5157L11.2466 19.8933L24.6382 11.9551Z' fill='%23FF914D' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.242 9.71147L13.4702 8.39062L17.9355 15.9234L11.2397 19.8925L9.34244 16.6919C7.92428 14.2995 8.77278 11.1752 11.242 9.71147Z' fill='%23FF914D' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.7058 7.07016C18.175 5.60646 21.3237 6.36257 22.7404 8.75249L24.6386 11.9546L17.9428 15.9238L13.4776 8.39101L15.7058 7.07016Z' fill='%23FF914D' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.7805 18.9175L20.516 17.8887C21.0186 17.5908 21.2168 16.9926 20.9577 16.5556L17.8854 11.3728C17.6264 10.9358 17.0065 10.8226 16.5039 11.1205L14.7684 12.1492C14.2659 12.4471 14.0677 13.0453 14.3267 13.4823L17.399 18.6652C17.6522 19.1056 18.2721 19.2188 18.7805 18.9175Z' fill='white' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.4708 8.39137L10.789 3.86719C10.176 2.83309 8.86913 2.46984 7.86927 3.06253L7.56682 3.24182C6.57052 3.83241 6.2562 5.15168 6.87139 6.18947L7.0728 6.52924C7.68579 7.56334 7.37723 8.88419 6.37737 9.47689C5.38106 10.0675 4.07283 9.71003 3.45764 8.67224L0.999809 4.46507' stroke='%23333333' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3110_2719'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.section.main-visual .data-wrap .data-box.ty2 .guide-desc {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: -6px;
}
.section.main-visual .data-wrap .data-box.ty2 .guide-desc p {
    position: relative;
    padding-left: 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #666;
}
.section.main-visual .data-wrap .data-box.ty2 .guide-desc p::before {
    content:'';
    position: absolute;
    left: 0;
    top: 8px;
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #000;
}
.section.main-visual .data-wrap .data-box.ty2 .guide-desc p strong {
    font-weight: 500;
    color: #000;
}
.section.main-visual .data-wrap .data-box.ty2 dd a {
    color: #fff;
    background-color: #FF914D;
}

.section.main-visual .data-wrap .data-box.ty2 dd a.point {
    background-color: #FF624D;
}

.section.main-visual .data-wrap .data-box.ty2 dd a::before {
    display: none;
}
.section.main-visual .data-wrap .data-box.ty2 dd a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 4px;
    background: no-repeat center center / contain;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.75 6.75001L15.75 2.25001M15.75 2.25001H11.25M15.75 2.25001L9 9M7.5 2.25H5.85C4.58988 2.25 3.95982 2.25 3.47852 2.49524C3.05516 2.71095 2.71095 3.05516 2.49524 3.47852C2.25 3.95982 2.25 4.58988 2.25 5.85V12.15C2.25 13.4101 2.25 14.0402 2.49524 14.5215C2.71095 14.9448 3.05516 15.289 3.47852 15.5048C3.95982 15.75 4.58988 15.75 5.85 15.75H12.15C13.4101 15.75 14.0402 15.75 14.5215 15.5048C14.9448 15.289 15.289 14.9448 15.5048 14.5215C15.75 14.0402 15.75 13.4101 15.75 12.15V10.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

@media(max-width: 1480px) {
    /* Main Visual */
    .section.main-visual {
        padding-left: 1.875rem;
        padding-right: 1.875rem
    }

    /* Cover Box */
    .section.main-visual .cover-box {
        gap: 6.5rem;
        transform: scale(0.7)
    }

    .section.main-visual .cover-box .cover-img-group {
        gap: 6.5rem
    }

    .section.main-visual .cover-box .cover-img {
        width: 13.75rem
    }

    .section.main-visual .cover-box .cover-img:nth-child(odd) {
        transform: rotate(-2deg) scale(1.45) translateY(-8%)
    }

    .section.main-visual .cover-box .cover-img:nth-child(even) {
        transform: rotate(2deg) scale(1.45) translateY(-8%)
    }

    /* Tab Box */
    .section.main-visual .tab-box {
        margin-top: 3.75rem;
        margin-bottom: 2.25rem
    }

    /* Data Wrap */
    .section.main-visual .data-wrap {
        margin-top: 1.875rem;
        width: 100%;
        max-width: 1020px;
    }
    .section.main-visual .data-wrap .data-box dd {
        gap: 0.5rem;
    }
    .section.main-visual .data-wrap .data-box dd a {
        font-size: 1rem;        
        max-width: calc(25% - 0.5rem);
    }
    .section.main-visual .data-wrap .data-box.ty2 dt {
        margin-bottom: 28px;
    }
    .section.main-visual .data-wrap .data-box.ty2 .guide-desc {
        margin-top: 0px;
    }

    .section.main-visual.hi .data-wrap .data-box dd a,
    .hi .section.main-visual .data-wrap .data-box dd a {
        font-size: 0.9rem;
    }
    .section.main-visual.hi .data-wrap .data-box.ty2 dd a::after,
    .hi .section.main-visual .data-wrap .data-box dd a::after {
        width: 1.2rem;
        height: 1.2rem;
    }
}
@media(max-width: 1280px) {
    .section.main-visual .cover-box {
        transform: scale(1);
        gap: 6rem
    }

    .section.main-visual .cover-box .cover-img-group {
        display: flex;
        gap: 6rem
    }

    .section.main-visual .cover-box .cover-img {
        width: 12rem
    }

    .section.main-visual.hi .data-wrap .data-box dd a,
    .hi .section.main-visual .data-wrap .data-box dd a {
        font-size: 1rem;
    }
    .section.main-visual.hi .data-wrap .data-box.ty2 dd a::after,
    .hi .section.main-visual .data-wrap .data-box dd a::after {
        width: 1.5rem;
        height: 1.5rem;
    }
}
@media(max-width: 1023px) {
    /* Layout */
    header .wrapper {
        justify-content: center;
        min-height: var(--header-height);
        justify-content: flex-start;
        padding: 0 20px;
        min-width: 0
    }

    header .hamburger {
        display: block;
        position: absolute;
        right: 12px;
        width: 56px;
        height: 56px;
        z-index: 101
    }

    header .hamburger input {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        cursor: pointer;
        opacity: 0;
        z-index: 2
    }

    header .hamburger .bar {
        position: absolute;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 24px;
        height: 18px
    }

    header .hamburger .bar span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 4px;
        transition: transform .5s cubic-bezier(0.77, 0.2, 0.05, 1), background .5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity .55s ease
    }

    header .hamburger .bar span:nth-of-type(1) {
        top: 0
    }

    header .hamburger .bar span:nth-of-type(2) {
        top: 8px
    }

    header .hamburger .bar span:nth-of-type(3) {
        bottom: 0
    }

    header .hamburger input:checked~.bar span {
        background-color: #000
    }

    header .hamburger input:checked~.bar span:nth-of-type(1) {
        transform: translateY(6px) rotate(-45deg)
    }

    header .hamburger input:checked~.bar span:nth-of-type(2) {
        opacity: 0
    }

    header .hamburger input:checked~.bar span:nth-of-type(3) {
        transform: translateY(-10px) rotate(45deg)
    }

    header .hamburger input:checked~.header-menu-box {
        display: none
    }

    header .mo-btn {
        display: block;
        background: url('prcenter/img/ico_mo_btn_close.svg') no-repeat center/contain;
        width: 56px;
        height: 56px
    }

    header .gnb-wrap {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100% - var(--header-height));
        max-width: 100%;
        align-items: flex-start;
        overflow: auto;
        pointer-events: none
    }

    header .gnb-wrap::before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0;
        transition: all .2s ease
    }

    header .gnb-wrap .gnb {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        min-height: 100%;
        padding: 0 20px;
        background: #fff;
        transform: translateY(calc(-100% - 100px));
        padding-bottom: 30px;
        transition: .2s all
    }

    header .gnb-wrap .gnb li {
        display: block;
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-bottom: 1px solid #eaeaea
    }

    header .gnb-wrap .gnb li a {
        display: block;
        font-size: 18px;
        line-height: 28px;
        padding: 20px 0px;
        box-sizing: border-box;
        text-align: left
    }

    header .gnb-wrap .gnb li a:hover,
    header .gnb-wrap .gnb li a:focus {
        border: 0;
        background-color: #fff
    }

    header .gnb-wrap .gnb li a:hover::after,
    header .gnb-wrap .gnb li a:focus::after {
        display: none
    }

    header .gnb-wrap .gnb>li:has(.depth-wrap) {
        position: relative
    }

    header .gnb-wrap .gnb>li:has(.depth-wrap)::after {
        content: "";
        position: absolute;
        top: 24px;
        right: 0;
        display: block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/contain;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23959595' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
    }

    header .gnb-wrap .gnb>li:has(.depth-wrap).is-active {
        border-bottom: 0
    }

    header .gnb-wrap .gnb>li:has(.depth-wrap).is-active>a {
        color: #0055a7
    }

    header .gnb-wrap .gnb>li:has(.depth-wrap).is-active::after {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 12.5L10 7.5L5 12.5' stroke='%230055A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
    }

    header .gnb-wrap .depth-wrap {
        position: static;
        transform: none;
        width: 100%;
        height: auto !important
    }

    header .gnb-wrap .depth-wrap .depth {
        transform: none;
        border: 0;
        box-shadow: none;
        background-color: #f6f6f6
    }

    header .gnb-wrap .depth-wrap li {
        padding: 0;
        border: 0
    }

    header .gnb-wrap .depth-wrap li a {
        padding: 10px 20px;
        text-align: left;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        border-bottom: 0;
        padding: 0
    }

    header .gnb-wrap .depth-wrap li a:hover {
        background-color: rgba(0, 0, 0, 0)
    }

    header .gnb-wrap .depth-wrap li a br {
        display: none
    }

    header .gnb-wrap.active {
        pointer-events: auto
    }

    header .gnb-wrap.active::before {
        opacity: .6
    }

    header .gnb-wrap.active .gnb {
        transform: translateY(0)
    }

    header h1 a {
        max-width: 80%
    }

    /* Main visual */
    .section.main-visual {
        height: auto;
        padding: 1.875rem;
        padding-top: calc(1.875rem + var(--header-height));
    }

    /* Cover Box */
    .section.main-visual .cover-box {
        transform: scale(1);
        gap: 4rem
    }

    .section.main-visual .cover-box .cover-img-group {
        gap: 4rem
    }

    .section.main-visual .cover-box .cover-img {
        width: 10rem
    }

    /* Title Box */
    .section.main-visual .title-box {
        gap: 17px;
    }
    .section.main-visual .title-box .title {
        font-size: 32px;
    }

    .section.main-visual .title-box .desc {
        font-size: 1.1875rem;
        font-weight: 600
    }

    .section.main-visual .title-box .textbook-shorts-box {
        top: 45px;
        left: calc(50% + 170px);
        width: 8rem;
        height: 6.75rem
    }

    .section.main-visual .title-box>img {
        scale: .8
    }

    /* Data Wrap */
    .section.main-visual .data-wrap {
        padding: 1.25rem 3.125rem
    }

    .section.main-visual .data-wrap .data-box {
        gap: 1rem
    }

    .section.main-visual .data-wrap .data-box .item {
        flex-direction: column;
        align-items: inherit;
        gap: .5rem
    }
    .section.main-visual .data-wrap .data-box.ty2 dt,
    .section.main-visual .data-wrap .data-box dt {
        width: 100%;
        font-weight: 600;
        padding-right: 0
    }

    .section.main-visual .data-wrap .data-box dt:before {
        position: relative;
        top: -1px;
    }
    .section.main-visual .data-wrap .data-box dt:after {
        width: 0
    }

    .section.main-visual .download-box {
        margin-top: 2.1875rem
    }
    .section.main-visual .download-box .btn {
        gap: 2rem;
    }
    .section.main-visual .download-box .box {
        width: auto;
    }

    .section.main-visual .card_content {
        margin-bottom: 40px;
    }

    .section.main-visual .data-wrap .data-box.ty2 dt {
        margin-bottom: 0;
    }
}

@media(max-width: 719px) {
    /* Main Visual */
    .section.main-visual {
        display: block
    }

    /* Title Box */
    .section.main-visual .title-box {
        word-break: keep-all
    }

    .section.main-visual .title-box .desc {
        font-weight: 600
    }

    .section.main-visual .title-box .textbook-shorts-box {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: 42px;
        border-radius: 12px;
        background: #ffdcc7;
        border: 1px solid #eac6b0
    }

    .section.main-visual .title-box .textbook-shorts-box a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%
    }

    .section.main-visual .title-box .textbook-shorts-box a span {
        position: relative;
        display: block;
        align-items: center;
        gap: 6px;
        width: 212px;
        height: 20px;
        background: url("/prcenter/img/sub/img_shots_title_mo.png") no-repeat center center/contain;
        color: #333;
        font-size: 0
    }

    .section.main-visual .title-box .textbook-shorts-box a span::before {
        content: "";
        display: block;
        position: relative;
        left: -19px;
        top: -19px;
        width: 22px;
        height: 22px;
        background: no-repeat center center/contain;
        background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3239_10880)'%3E%3Cpath d='M21.5064 13.6441L18.3282 14.8775L12.0312 2.4959L17.2426 0.478516L21.5064 13.6441Z' fill='%23FEDB01' stroke='black' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.1391 18.6061L13.5205 21.5222L0.492188 15.9385L3.14719 11.1484L15.1391 18.6061Z' fill='%23FEDB01' stroke='black' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3239_10880'%3E%3Crect width='22' height='22' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")
    }

    .section.main-visual .title-box .textbook-shorts-box a span::after {
        content: "";
        position: absolute;
        top: calc(50% - 10px);
        left: calc(100% + 6px);
        display: block;
        width: 20px;
        height: 20px;
        background: no-repeat center center/contain;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23FF914D' stroke='black'/%3E%3Cpath d='M14.4265 9.12584L8.48564 5.82536C7.81911 5.45506 7 5.93703 7 6.69951V13.3005C7 14.063 7.81911 14.5449 8.48564 14.1746L14.4265 10.8742C15.1123 10.4932 15.1123 9.50685 14.4265 9.12584Z' fill='white' stroke='black'/%3E%3C/svg%3E%0A")
    }

    .section.main-visual .title-box>img {
        scale: .8
    }

    /* Cover Box */
    .section.main-visual .cover-box {
        display: block;
        transform: none;
        margin-top: 20px
    }

    .section.main-visual .cover-box .cover-img-group {
        justify-content: center;
        gap: 0
    }

    .section.main-visual .cover-box .cover-img-group .cover-img {
        width: 100%
    }

    .section.main-visual .cover-box .cover-img-group .cover-img:nth-child(odd) {
        transform: rotate(-2deg) scale(1) translateY(-8%)
    }

    .section.main-visual .cover-box .cover-img-group .cover-img:nth-child(even) {
        transform: rotate(2deg) scale(1) translateY(-8%)
    }

    /* Tab Box */
    .section.main-visual .tab-box {
        margin-top: 2.5rem;
        margin-bottom: 3.125rem
    }

    .section.main-visual .tab-box .tab-link {
        height: 48px;
        font-size: 16px
    }

    /* Data Box */
    .section.main-visual .data-wrap {
        margin-top: 0rem;
        width: 100%;
        padding: .625rem 1.25rem 1.25rem 1.25rem;
        border-radius: .9375rem
    }

    .section.main-visual .data-wrap .data-box {
        gap: 1rem
    }

    .section.main-visual .data-wrap .data-box .item {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem
    }

    .section.main-visual .data-wrap .data-box dt {
        font-weight: 600;
        text-align: left;
        width: 100%
    }

    .section.main-visual .data-wrap .data-box dt:after {
        width: 0
    }

    .section.main-visual .data-wrap .data-box dd {
        flex-wrap: wrap;
        width: 100%
    }

    .section.main-visual .data-wrap .data-box dd a {
        min-width: calc(50% - 0.25rem);
        max-width: calc(50% - 0.25rem);
    }

    .section.main-visual .data-wrap .download-box {
        align-items: flex-start;
        gap: 1.25rem
    }

    .section.main-visual .data-wrap .download-box::before {
        flex: none;
        content:'체험하기';
        display: block;
        margin-left: auto;
        text-align: right;
        font-weight: 500;
        font-size: 13px;
        line-height: 27px;
        color: #000;
    }

    .section.main-visual .data-wrap .download-box .contour {
        display: none;
    }

    .section.main-visual .data-wrap .download-box .btn {
        flex-wrap: nowrap;
        justify-content: flex-end;
        width: calc(106px - 0.25rem);
        max-width: 50%;
        font-size: 0;
        white-space: nowrap;
    }

    .section.main-visual .data-wrap .download-box .box {
        margin-left: auto;
        font-size: 13px;
    }

    .section.main-visual .data-wrap .download-box .lt-box .contour {
        display: block
    }

    .section.main-visual .data-wrap .download-box .rt-box {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .5rem;
        width: 100%;
    }

}

@media (max-width: 480px){
    /* Title Box */
    .section.main-visual .title-box .title {
        font-size: 2.5rem
    }

    .section.main-visual .title-box .title span {
        font-size: 1.875rem
    }

    .section.main-visual .title-box .desc {
        width: calc(100% - 40px)
    }

    .section.main-visual .title-box>img {
        scale: .7
    }
    .section.main-visual .data-wrap .download-box .btn {
        flex-wrap: nowrap;
        justify-content: flex-end;
        width: calc(106px - 0.25rem);
        white-space: nowrap;
    }

    .section.main-visual .data-wrap .download-box .box {
        margin-left: auto;
    }

    .section.main-visual .data-wrap .download-box .lt-box .contour {
        display: block
    }

    .section.main-visual .data-wrap .download-box .rt-box {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .5rem;
        width: 100%;
    }

}

/* 비디오팝업 */
.videoShotsPopup,
.videoPopup {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    height: 100%;
    display: none
}

.videoShotsPopup .overlay,
.videoPopup .overlay {
    position: fixed;
    top: 0;
    left: 0;
    opacity: .5;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #000
}

.videoShotsPopup .inn,
.videoPopup .inn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.videoShotsPopup .video-wrap,
.videoPopup .video-wrap {
    aspect-ratio: 1.7777777778;
    display: inline-block;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    max-width: 80%;
    z-index: 700;
}

.videoShotsPopup .video-wrap img,
.videoPopup .video-wrap img {
    width: 100%
}

@supports not (aspect-ratio: calc(1280 / 720)) {

    .videoShotsPopup .video-wrap::before,
    .videoPopup .video-wrap::before {
        content: "";
        float: left;
        padding-top: 56.25%;
        display: block
    }
}

.videoShotsPopup .video-area,
.videoPopup .video-area {
    position: relative;
    max-width: 100%;
    height: 100%;
    z-index: 220
}

.videoShotsPopup video,
.videoPopup video {
    width: 100%;
    height: 100%
}

.videoShotsPopup .video-close,
.videoPopup .video-close {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin: -10px
}

.videoShotsPopup .video-close::after,
.videoPopup .video-close::after {
    content: "";
    display: block;
    flex: none;
    width: 200%;
    height: 200%;
    background: no-repeat center center/contain;
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='24' fill='transparent'/%3E%3Cpath d='M29 19L19 29M19 19L29 29' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
}

@media screen and (orientation: portrait) {

    .videoShotsPopup .video-close,
    .videoPopup .video-close {
        bottom: calc(100% + 10px);
        right: 0;
        left: auto;
        top: auto
    }
}

.videoShotsPopup .video-wrap {
    flex-direction: column;
    align-items: center;
    padding: 20px;
    height: 100%;
    max-width: 400px;
    max-height: 800px
}

.videoShotsPopup .video-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    max-height: 100%
}

.videoShotsPopup .video-area video {
    height: calc(100% - 130px)
}

.videoShotsPopup .video-shorts-box {
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    padding: 12px;
    background-color: #ffdcc7;
    border-radius: 12px
}

.videoShotsPopup .video-shorts-box .video-shorts-list {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
}

.videoShotsPopup .video-shorts-box .video-shorts-list a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #333;
    background-color: #ffbc93;
    color: #333;
    font-weight: 700
}

.videoShotsPopup .video-shorts-box .video-shorts-list .is-active a {
    background-color: #ff914d
}

@media screen and (orientation: portrait) {
    .videoShotsPopup .video-close {
        top: 0;
        left: calc(100% + 10px);
        top: 0;
        right: auto;
        bottom: auto
    }
}

@media(max-width: 1023px) {
    .videoShotsPopup .video-area video {
        height: calc(100% - 115px)
    }

    .videoShotsPopup .video-shorts-box .video-shorts-list {
        gap: 8px
    }

    .videoShotsPopup .video-shorts-box .video-shorts-list a {
        height: 32px;
        font-size: 14px;
        line-height: 20px
    }
}

@media screen and (max-width: 480px) {
    .videoShotsPopup .video-wrap {
        padding-top: 40px
    }

    .videoShotsPopup .video-wrap .video-area video {
        height: auto;
        max-height: calc(100% - 115px)
    }

    .videoShotsPopup .video-close {
        bottom: calc(100% + 5px);
        right: 0;
        left: auto;
        top: auto
    }
}