@charset "UTF-8";
@import url("normalize.css");
@import url("site.css");
@import url("font.css");
@import url("tipuesearch.css");
@import url("list.css");
@import url("common.css");
@import url("animation.css");

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #ebebeb;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #6d6d6d;
}

/* 헤더 */
#header {
    z-index: 99;
    width: 160px;
    height: 100vh;
    position: fixed;
    background-color: #21cf3c;
    border-right: 1px solid #21cf3c;
}

#header .header-inner {
    width: 100%;
    height: 100%;
    padding: 20px 15px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

#header .header-inner .menu-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

#header .header-inner .menu-wrap button {
    width: 50%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .header-inner .menu-wrap button.btn-submenu.on img.close {
    display: block;
}

#header .header-inner .menu-wrap button.btn-submenu.on img.menu {
    display: none;
}

#header .header-inner .menu-wrap button.btn-submenu img.close {
    display: none;
}

#header .header-inner .menu-wrap button img {
    width: 25px;
}

#header .header-inner .menu-wrap .border {
    width: 2px;
    height: 25px;
    background-color: #fff;
    opacity: 0.5;
}

#header .header-inner .logo-wrap .logo {
    width: 100px;
    margin-bottom: 20px;
    display: block;
}

#header .header-inner .logo-wrap p {
    font-size: 14px;
    text-align: center;
    color: #fff;
    line-height: 1.5;
}

#header .header-inner .logo-wrap p b {
    display: block;
    font-size: 150%;
}

#header .header-inner .sns-wrap {
    width: 100%;
}

#header .header-inner .sns-wrap .tit-box {
    text-align: center;
    transform: translateY(-60px);
}

#header .header-inner .sns-wrap .tit-box ul li {
    font-family: "KOROADTrafficLight";
    color: #fff;
    margin-bottom: 15px;
}

#header .header-inner .sns-wrap .tit-box ul li:first-child {
    position: relative;
}

#header .header-inner .sns-wrap .tit-box ul li:first-child::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #ffa5db;
    position: absolute;
    top: -5px;
    right: 20px;
    border-radius: 50%;
    display: none;
}

#header .header-inner .sns-wrap .tit-box .btn-box {
    display: flex;
    align-items: center;
    gap: 15px;
    display: none;
}

#header .header-inner .sns-wrap .tit-box .btn-box .border {
    width: 2px;
    height: 20px;
    background-color: #fff;
    opacity: 0.5;
}

#header .header-inner .sns-wrap .tit-box .btn-box button {
    background: none;
    border: none;
}

#header .header-inner .sns-wrap .tit-box .btn-box .btn-submenu.on img.close {
    display: block;
}

#header .header-inner .sns-wrap .tit-box .btn-box .btn-submenu.on img.menu {
    display: none;
}

#header .header-inner .sns-wrap .tit-box .btn-box .btn-submenu img {
    width: 25px;
}

#header .header-inner .sns-wrap .tit-box .btn-box .btn-submenu img.close {
    display: none;
}

#header .header-inner .sns-wrap .tit-box .btn-box .btn-search img {
    width: 25px;
}

#header .header-inner .sns-wrap .sns-box ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 15px;
}

#header .header-inner .sns-wrap .sns-box ul li {
    width: 25%;
}

#header .header-inner .sns-wrap .logo-box {
    opacity: 70%;
}

#header.white {
    background-color: #fff !important;
    border-right: 1px solid #c5c5c5;
}

#header.white .header-inner .menu-wrap button img {
    filter: grayscale(100%) brightness(0);
}

#header.white .header-inner .menu-wrap .border {
    background-color: #000;
}

#header.white .header-inner .logo-wrap .logo img {
    filter: grayscale(100%) brightness(0);
}

#header.white .header-inner .logo-wrap p {
    color: #000;
}

#header.white .header-inner .sns-wrap .tit-box ul li {
    color: #000;
}

#header.white .header-inner .sns-wrap .tit-box ul:first-child::after {
    content: "";
    background-color: #ffa5db;
}

#header.white .header-inner .sns-wrap .sns-box ul li {
    width: 25%;
}

#header.white .header-inner .sns-wrap .logo-box {
    opacity: 20%;
}

#header.white .header-inner .sns-wrap .logo-box img {
    filter: grayscale(100%) brightness(0);
}

/* 헤더 블랙 */
#header .header-inner.black .menu-wrap button img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}

#header .header-inner.black .menu-wrap .border {
    background-color: #000;
}

#header .header-inner.black .logo-wrap .logo img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}

#header .header-inner.black .logo-wrap p {
    color: #000;
}

#header .header-inner.black .sns-wrap .tit-box ul li {
    color: #000;
}

#header .header-inner.black .sns-wrap .logo-box img {
    -webkit-filter: grayscale(100%) brightness(0);
    filter: grayscale(100%) brightness(0);
}

#header .visual-text {
    width: 100px;
    top: 80px;
    left: 158px;
    position: absolute;
    z-index: 95;
    display: none;
}

#header .visual-text img {
    display: block;
}

#header .visual-text img.pc-visual {
    display: block;
}

#header .visual-text img.mo-visual {
    display: none;
}

/* 서브메뉴 */
#submenu {
    position: fixed;
    top: 0;
    z-index: 98;
}

#submenu .submenu-inner .drop-shadow {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
}

#submenu .submenu-inner .drop-shadow.on {
    display: block;
}

#submenu .submenu-inner .nav {
    position: fixed;
    top: 0;
    left: -760px;
    width: 600px;
    height: 100%;
    background-color: #fff;
    padding: 60px 70px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: 0.7s;
}

#submenu .submenu-inner .nav.on {
    left: 160px;
}

#submenu .submenu-inner .nav .nav-inner {
    width: 100%;
}

#submenu .submenu-inner .nav .nav-inner .btn-box {
    width: 100%;
    display: flex;
    justify-content: end;
    display: none;
}

#submenu .submenu-inner .nav .nav-inner .btn-box button {
    background: none;
    border: none;
}

#submenu .submenu-inner .nav .nav-inner .btn-box button img {
    width: 25px;
    filter: grayscale(100%) brightness(35%);
}

#submenu .submenu-inner .nav .nav-inner .nav-box {
    margin-bottom: 50px;
}

#submenu .submenu-inner .nav .nav-inner .nav-box h3 {
    font-size: 28px;
    color: #21cf3c;
    font-family: "KOROADTrafficLight";
    width: 100%;
    padding-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 30px;
    color: #000;
    background: -webkit-linear-gradient(to top, #21cf3ba2 50%, transparent 20%);
    background: linear-gradient(to top, #21cf3b9f 50%, transparent 20%);
    width: fit-content;
    padding: 0 10px;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .nav-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .nav-list li {
    width: calc(50% - 5px);
    margin-bottom: 20px;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .nav-list li a {
    color: #1a1311;
    font-weight: 500;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .nav-list li a:hover {
    color: #21cf3c;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .btn-wrap a {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border: 1px solid #c5c5c5;
    color: #707070;
    gap: 10px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 15px;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .btn-wrap a:hover {
    background-color: #707070;
    color: #fff;
}

#submenu .submenu-inner .nav .nav-inner .nav-box .btn-wrap a:hover img {
    filter: brightness(0) invert(1);
}

#submenu .submenu-inner .nav .nav-inner .nav-box .btn-wrap a img {
    width: 15px;
}

/* 검색 */
.search-bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 101;
}

.search-bar.on {
    display: block;
}

.search-bar .search-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.search-bar .search-wrap .search-form {
    display: block;
    width: 100%;
}

.search-bar .search-wrap .search-form .input-group {
    position: relative;
    width: 90%;
    max-width: 780px;
    height: auto;
    margin: 0 auto;
    border-radius: 50px;
    transition: all 0.4s ease-in;
    overflow: hidden;
    background-color: #fff;
}

.search-bar .search-wrap .search-form .input-group input[type=text] {
    display: block;
    width: 100%;
    padding: 20px 30px;
    font-size: 20px;
    color: #000;
}

.search-bar .search-wrap .search-form .input-group input[type=text]::-moz-placeholder {
    color: #9d9d9d;
    font-size: 20px;
}

.search-bar .search-wrap .search-form .input-group input[type=text]::placeholder {
    color: #9d9d9d;
    font-size: 20px;
}

.search-bar .search-wrap .search-form .input-group .searchBtn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    margin: 0;
    border-radius: 0;
    border: none;
    cursor: pointer;
    background: none;
}

.search-bar .search-wrap .search-form .input-group .searchBtn img {
    display: block;
    width: 100%;
    filter: grayscale(100%) brightness(50%);
}

/* 플로팅 */
.floating {
    position: fixed;
    right: 60px;
    bottom: 60px;
    z-index: 9;
    display: none;
}

.floating>button {
    display: block;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    border: none;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 3px 3px 15px 2px rgba(0, 0, 0, 0.1);
}

.floating>button span {
    display: inline-block;
}

.floating>button.btn-print {
    background-image: url("../images/common/print_ico.png");
    background-size: 28px;
    background-color: #6a6a6a;
    margin-bottom: 5px;
}

.floating>button.btn-print span {
    text-indent: -9999px;
}

.floating>button.btn-print:hover {
    background-color: #fff;
    background-blend-mode: exclusion;
}

.floating>button.btn-share {
    background-image: url("../images/common/share_ico02.png");
    background-size: 24px;
    background-color: #282828;
    margin-bottom: 5px;
}

.floating>button.btn-share span {
    text-indent: -9999px;
}

.floating>button.btn-share:hover {
    background-color: #fff;
    background-blend-mode: exclusion;
}

.floating>button.btn-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    letter-spacing: 0;
    font-size: 80%;
    border: 1px solid #e1e1e1;
    color: #000;
}

.floating>button.btn-top span {
    transform: scaleX(0.8);
    font-weight: 900;
}

.floating>button.btn-top::before {
    content: "∧";
    display: inline-block;
    position: relative;
    transform: scaleY(0.6);
    height: 20px;
    margin-top: -6px;
}

.floating>button.btn-top:hover {
    background-color: #282828;
}

.floating>button.btn-top:hover span {
    color: #fff;
    font-weight: 400;
}

.floating>button.btn-top:hover::before {
    color: #fff;
}

/* 푸터 */
#footer .footer-inner {
    width: 100%;
    margin: 0 auto;
    padding: 60px 70px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

#footer .footer-inner .txt-box .logo-box {
    width: 180px;
    margin-bottom: 15px;
}

#footer .footer-inner .txt-box .address {
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

#footer .footer-inner .txt-box .address li {
    color: #6e6e6e;
    font-size: 13px;
    position: relative;
}

#footer .footer-inner .txt-box .address li:last-child::after {
    display: none;
}

#footer .footer-inner .txt-box .address li::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: -12px;
    height: 12px;
    width: 1px;
    background-color: #cdcdcd;
}

#footer .footer-inner .txt-box .copyright {
    font-size: 11px;
    color: #989898;
}

#footer .footer-inner .btn-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

#footer .footer-inner .btn-box a {
    border: 1px solid #c5c5c5;
    background-color: #ececec;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 115px;
    box-sizing: border-box;
    gap: 10px;
    color: #707070;
    border-radius: 5px;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    font-size: 16px;
}

#footer .footer-inner .btn-box a:hover {
    background-color: #c5c5c5;
}

#footer .footer-inner .btn-box a img {
    width: -moz-fit-content;
    width: fit-content;
}

/* 랩탑 */
@media screen and (min-width: 1024px) and (max-width: 1560px) {
    #header .visual-text {
        display: none !important;
    }
}

/* 태블릿(라지) */
@media screen and (max-width: 1024px) {

    /* 헤더 */
    #header {
        top: 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
        top: 0;
        width: 100vw;
        height: auto;
    }

    #header .header-inner {
        flex-direction: column;
        padding: 0;
        padding-top: 20px;
    }

    #header .header-inner .menu-wrap {
        display: none;
    }

    #header .header-inner .sns-wrap {
        padding: 0 20px;
        box-sizing: border-box;
    }

    #header .header-inner .sns-wrap .tit-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        transform: translateY(0);
    }

    #header .header-inner .sns-wrap .tit-box ul {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    #header .header-inner .sns-wrap .tit-box ul li {
        margin-bottom: 0;
    }

    #header .header-inner .sns-wrap .tit-box ul li:first-child::after {
        right: -10px;
    }

    #header .header-inner .sns-wrap .tit-box .btn-box {
        display: flex;
    }

    #header .header-inner .sns-wrap .sns-box {
        display: none;
    }

    #header .header-inner .sns-wrap .logo-box {
        display: none;
    }

    #header .header-inner .logo-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.431372549);
        padding: 0 20px;
        box-sizing: border-box;
    }

    #header .header-inner .logo-wrap p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

    #header .header-inner .logo-wrap p b {
        display: block;
        position: relative;
        font-size: 110%;
    }

    #header .header-inner .logo-wrap p b::after {
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 17px;
        top: 50%;
        right: -17px;
        transform: translate(-50%, -50%);
        background-color: #fff;
        opacity: 0.5;
    }

    #header .header-inner.black .logo-wrap p b::after {
        content: "";
        background-color: #000;
        opacity: 0.5;
    }

    #header .header-inner.black .sns-wrap .tit-box .btn-box .btn-search img {
        -webkit-filter: grayscale(100%) brightness(0);
        filter: grayscale(100%) brightness(0);
    }

    #header .header-inner.black .sns-wrap .tit-box .btn-box .btn-submenu img {
        -webkit-filter: grayscale(100%) brightness(0);
        filter: grayscale(100%) brightness(0);
    }

    #header .header-inner.black .sns-wrap .tit-box .btn-box .border {
        background-color: #000;
    }

    #header .visual-text {
        top: 165px;
        left: unset;
        right: 0;
        width: 50vw;
    }

    #header .visual-text img.pc-visual {
        display: none;
    }

    #header .visual-text img.mo-visual {
        display: block;
    }

    /* 서브메뉴 */
    #submenu {
        width: 100%;
        z-index: 999;
    }

    #submenu .submenu-inner .nav {
        left: unset;
        right: -600px;
    }

    #submenu .submenu-inner .nav.on {
        right: 0;
        left: unset;
    }

    #submenu .submenu-inner .nav .nav-inner .btn-box {
        display: flex;
    }

    /* 푸터 */
    #footer .footer-inner {
        padding: 50px 20px;
        flex-direction: column;
        justify-content: center;
    }

    #footer .footer-inner .txt-box {
        text-align: center;
    }

    #footer .footer-inner .txt-box .logo-box {
        margin: 0 auto;
        margin-bottom: 20px;
    }

    #footer .footer-inner .txt-box .address {
        gap: 5px;
    }

    #footer .footer-inner .txt-box .address li::after {
        display: none;
    }

    #footer .footer-inner .txt-box .copyright {
        font-size: 12px;
    }

    #footer .footer-inner .btn-box a {
        font-size: 14px;
    }

    /* 플로팅 */
    .floating {
        right: 20px;
        bottom: 20px;
    }
}

@media screen and (max-width: 576px) {

    /* 헤더 */
    #header .header-inner .logo-wrap .logo {
        width: 80px;
    }

    #header .visual-text {
        top: 155px;
    }

    /* 서브메뉴 */
    #submenu .submenu-inner .nav {
        width: 100%;
        padding: 50px 20px;
        right: -100%;
    }

    /* 플로팅 */
    .floating {
        right: 10px;
        bottom: 10px;
    }

    .floating button {
        width: 40px;
        height: 40px;
        background-size: 18px !important;
    }

    .floating button.btn-top::before {
        margin-top: -3px !important;
        height: 12px;
    }

    .floating button.btn-top span {
        font-size: 10px !important;
    }
}

.overflow-hidden {
    overflow: hidden;
}

main.main {
    padding-left: 160px;
    box-sizing: border-box;
}

main.main .container {
    width: 100%;
}

main.main .container .section {
    overflow-x: hidden;
    /* 섹션01 */
    /* 섹션 배너 */
    /* 섹션02 */
    /* 섹션03 */
    /* 섹션04 */
    /* 섹션05 */
}

main.main .container .section#section01 .section-inner {
    width: 100%;
    height: 100vh;
    background: url(../images/main/s1_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
}

main.main .container .section#section01 .section-inner .tit-wrap {
    color: #fff;
    animation: fade-up 1.5s 0.2s forwards;
    opacity: 0;
    text-align: end;
}

main.main .container .section#section01 .section-inner .tit-wrap p {
    font-size: 25px;
    text-shadow: 1px 2px 10px rgba(0, 0, 0, 0.616);
}

main.main .container .section#section01 .section-inner .scroll-down {
    width: 200px;
    position: absolute;
    bottom: 150px;
    right: 50px;
    animation: fade-in 1.5s 0.2s forwards;
    opacity: 0;
}

main.main .container .section#section01 .section-inner .scroll-down .img-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

main.main .container .section#section01 .section-inner .scroll-down .img-box .arrow-wrap {
    position: absolute;
    animation: rotate_text 10s linear infinite;
}

main.main .container .section#section01 .section-inner .scroll-down .img-box .arrow {
    width: 20px;
}

main.main .container .section#section01 .section-util {
    background-color: #fff;
    border: 1px solid #000;
    width: -moz-fit-content;
    width: fit-content;
    float: right;
    margin-right: 35px;
    padding: 20px 40px;
    box-sizing: border-box;
    border-radius: 30vw;
    transform: translateY(-35px);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    animation: fade-in 1.5s 0.2s forwards;
    opacity: 0;
}

main.main .container .section#section01 .section-util ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

main.main .container .section#section01 .section-util ul li a {
    color: #1a1311;
    font-weight: 600;
}

main.main .container .section#section01 .section-util ul li a:hover {
    color: #21cf3c;
}

main.main .container .section#section01 .section-util ul li:first-child {
    position: relative;
}

main.main .container .section#section01 .section-util ul li:first-child::after {
    content: "";
    height: 15px;
    width: 1px;
    display: block;
    background-color: #999797;
    position: absolute;
    top: 50%;
    left: 115%;
    transform: translate(-50%, -50%);
}

main.main .container .section#section_banner {
    margin: 80px 0;
    margin-top: 0;
}

main.main .container .section#section_banner .section-inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 10px 20px;
    overflow: hidden;
}

main.main .container .section#section_banner .section-inner .banner-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

main.main .container .section#section_banner .section-inner .cont-wrap .banner {
    width: 100%;
    display: block;
}

main.main .container .section#section_banner .section-inner .cont-wrap .banner {
    margin-bottom: 30px;
}

main.main .container .section#section_banner .section-inner .cont-wrap .tit-box {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

main.main .container .section#section_banner .section-inner .cont-wrap .tit-box h2 {
    font-size: 40px;
    font-family: "KOROADTrafficLight";
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell {
    border: 1px solid #cecece;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    color: #000;
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell:hover .thumb img {
    scale: 1.2;
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell .thumb {
    width: 160px;
    min-width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #737373;
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell hgroup {
    width: calc(100% - 160px);
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell hgroup h6 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 500;
}

main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell hgroup h3 {
    font-size: 20px;
    word-break: keep-all;
    text-wrap: balance;
}

main.main .container .section#section02 .tit-mobile {
    font-size: 50px;
    font-family: "KOROADTrafficLight";
    text-align: center;
    display: none;
}

main.main .container .section#section02 .section-inner {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 80px;
    padding: 170px 0;
    padding-left: 20px;
    box-sizing: border-box;
}

main.main .container .section#section02 .section-inner .tit-box {
    box-sizing: border-box;
    width: 45%;
    display: flex;
    align-items: end;
    justify-content: end;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner {
    max-width: 400px;
    width: 100%;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner h2 {
    font-size: 50px;
    font-family: "KOROADTrafficLight";
    margin-bottom: 50px;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap {
    margin: 0 auto;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap h5 {
    font-size: 32px;
    margin-bottom: 10px;
    font-weight: 500;
    word-break: keep-all;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap p {
    font-size: 20px;
    color: #4d4d4d;
    font-weight: 300;
    margin-bottom: 30px;
    word-break: keep-all;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: -moz-fit-content;
    width: fit-content;
    padding: 15px 25px;
    box-sizing: border-box;
    border: 1px solid #818181;
    color: #4d4d4d;
    gap: 10px;
    border-radius: 30px;
    font-size: 16px;
    transition: 0.2s;
    -webkit-transtion: 0.2s;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap a:hover {
    background-color: #4d4d4d;
    color: #fff;
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap a:hover img {
    filter: brightness(0) invert(1);
}

main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap a img {
    width: 10px;
}

main.main .container .section#section02 .section-inner .thumb-box {
    width: 55%;
    background-color: #e5e5e5;
    border-radius: 30vw 0 0 30vw;
    box-sizing: border-box;
    padding-left: 200px;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper {
    transform: translateY(-80px);
    padding-bottom: 30px;
    box-sizing: border-box;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 500px;
    position: relative;
    display: block;
    color: #fff;
    border-radius: 0 30px 30px 30px;
    overflow: hidden;
    box-sizing: border-box;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide .thumb {
    width: 100%;
    height: 100%;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide .thumb:hover img {
    scale: 1.1;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
    transition: 0.3s;
    -webkit-transition: 0.3s;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide .category {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #db5523;
    padding: 8px 30px;
    box-sizing: border-box;
    border-radius: 30px;
    font-weight: 500;
    font-size: 16px;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide-next::after,
main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide-prev::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.2392156863);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(40px);
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    gap: 20px;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-button {
    position: unset !important;
    margin: 0;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-button::after {
    color: #4d4d4d;
    font-size: 20px;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-pagination {
    position: unset;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-pagination span {
    color: #4d4d4d;
    font-size: 20px;
}

main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-pagination .swiper-pagination-current {
    font-weight: 500;
}

main.main .container .section#section03 .section-inner {
    padding-bottom: 100px;
    box-sizing: border-box;
}

main.main .container .section#section03 .section-inner .tit-box {
    text-align: center;
}

main.main .container .section#section03 .section-inner .tit-box h2 {
    font-size: 50px;
    font-family: "KOROADTrafficLight";
    margin-bottom: 50px;
}

main.main .container .section#section03 .section-inner .swiper {
    margin-left: 100px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide {
    width: 460px;
    color: #000;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide:nth-child(even) {
    width: 350px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide:nth-child(even) .thumb-wrap {
    height: 380px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
    height: 300px;
    position: relative;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap .thumb {
    width: 100%;
    height: 100%;
    position: relative;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap .thumb:hover::after {
    transform: translate(-20%, -20%) scale(1.5);
    opacity: 1;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap .thumb::after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(20%, 20%) scale(1.5);
    opacity: 0;
    transition: opacity 0.35s, transform 0.35s;
    background: linear-gradient(-45deg, #000, 25%, rgba(255, 255, 255, 0.4), 70%, rgba(255, 255, 255, 0.2));
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap .category {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(0%, 0%);
    background-color: #cb8f16;
    color: #fff;
    padding: 8px 30px;
    box-sizing: border-box;
    border-radius: 0 20px 0;
    font-weight: 500;
    font-size: 16px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .tit-wrap {
    margin: 0 auto;
    margin-top: 20px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .tit-wrap h5 {
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 700;
}

main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .tit-wrap p {
    font-weight: 300;
    color: #4d4d4d;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

main.main .container .section#section03 .section-inner .swiper .btn-box {
    width: 100%;
    border-top: 1px solid #c5c5c5;
    margin-top: 30px;
    padding-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

main.main .container .section#section03 .section-inner .swiper .btn-box button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: -moz-fit-content;
    width: fit-content;
    padding: 15px 30px;
    box-sizing: border-box;
    border: 1px solid #818181;
    color: #4d4d4d;
    gap: 10px;
    border-radius: 30px;
    font-size: 16px;
    background: none;
}

main.main .container .section#section03 .section-inner .swiper .btn-box button img {
    width: 15px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-pagination {
    margin-top: 50px;
    position: unset;
}

main.main .container .section#section03 .section-inner .swiper .swiper-pagination span {
    width: 12px;
    height: 12px;
}

main.main .container .section#section03 .section-inner .swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #cb8f16;
}

main.main .container .section#section04 {
    background: url(../images/main/s3_bg.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    z-index: 1;
}

main.main .container .section#section04 .section-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 100px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 50px;
}

main.main .container .section#section04 .section-inner .tit-box {
    width: 300px;
}

main.main .container .section#section04 .section-inner .tit-box h2 {
    font-size: 50px;
    color: #fff;
}

main.main .container .section#section04 .section-inner .swiper-box {
    width: calc(100% - 300px);
    position: relative;
    padding: 0 50px;
    box-sizing: border-box;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper {
    width: 100%;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide {
    position: relative;
    border-radius: 15vw;
    overflow: hidden;
    color: #000;
    transition: 0.2s;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide:hover .thumb img {
    scale: 1.1;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide.color-white {
    color: #fff;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .thumb {
    width: 100%;
    height: 420px;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .thumb img {
    transition: 0.2s;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .tit-wrap {
    position: absolute;
    top: 50px;
    padding: 0 30px;
    box-sizing: border-box;
    text-align: center;
    width: 100%;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .tit-wrap h5 {
    font-size: 16px;
    margin-bottom: 15px;
    word-break: keep-all;
    font-weight: 600;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .tit-wrap p {
    font-size: 20px;
    word-break: keep-all;
    font-weight: 300;
    text-wrap: balance;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-pagination {
    position: unset;
    margin-top: 40px;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-pagination span {
    width: 12px;
    height: 12px;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fff;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper-button {
    margin-top: -50px;
    top: 50%;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper-button.swiper-button-prev {
    left: 0px;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper-button.swiper-button-next {
    right: 0px;
}

main.main .container .section#section04 .section-inner .swiper-box .swiper-button::after {
    color: #fff;
}

main.main .container .section#section05 .section-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

main.main .container .section#section05 .section-inner .banner {
    width: 50%;
    height: 230px;
    position: relative;
    overflow: hidden;
    color: #000;
    margin: 0;
}

main.main .container .section#section05 .section-inner .banner:hover {
    color: #fff;
}

main.main .container .section#section05 .section-inner .banner:hover .thumb::after {
    opacity: 0.5;
}

main.main .container .section#section05 .section-inner .banner.color-white {
    color: #fff;
}

main.main .container .section#section05 .section-inner .banner .thumb {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

main.main .container .section#section05 .section-inner .banner .thumb::after {
    content: "";
    background-color: #000;
    width: 150%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

main.main .container .section#section05 .section-inner .banner .thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

main.main .container .section#section05 .section-inner .banner .tit-wrap {
    position: absolute;
    top: 30px;
    left: 30px;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

main.main .container .section#section05 .section-inner .banner .tit-wrap h5 {
    font-size: 22px;
    margin-bottom: 10px;
}

main.main .container .section#section05 .section-inner .banner .tit-wrap p {
    word-break: keep-all;
    text-wrap: balance;
    font-weight: 400;
}

main.main .container .section#section05 .banner-wrap {
    width: 100%;
}

main.main .container .section#section05 .banner-wrap .banner img {
    width: 100%;
}

/* 랩탑 사이즈 */
@media screen and (max-width: 1400px) {
    main.main {
        padding-left: 160px;
        box-sizing: border-box;
    }

    main.main .container {
        width: 100%;
    }

    main.main .container .section {
        overflow-x: hidden;
        /* 섹션02 */
        /* 섹션03 */
        /* 섹션04 */
    }

    main.main .container .section#section02 .section-inner {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 0;
    }

    main.main .container .section#section02 .section-inner .thumb-box {
        width: 100%;
        background: none;
        padding-left: 0;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper {
        max-width: 100%;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper {
        margin-left: -3%;
        align-items: center;
        height: 600px;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide-active {
        width: 42% !important;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide {
        height: auto;
        border-radius: 0 50px 0 50px;
    }

    main.main .container .section#section02 .section-inner .tit-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner {
        max-width: 600px;
    }

    main.main .container .section#section03 .section-inner {
        padding-left: 20px;
    }

    main.main .container .section#section03 .section-inner .swiper {
        margin-left: 0;
    }

    main.main .container .section#section04 .section-inner {
        padding: 100px 20px;
        flex-direction: column;
    }

    main.main .container .section#section04 .section-inner .swiper-box {
        width: 100%;
        padding: 0;
    }

    main.main .container .section#section04 .section-inner .tit-box {
        width: 100%;
        text-align: center;
    }
}

/* 랩탑 사이즈 */
@media screen and (max-width: 1500px) {
    main.main .container .section#section02 .tit-mobile {
        display: block;
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner h2 {
        display: none;
    }
}

/* 태블릿(아이패드 프로) 사이즈 */
@media screen and (max-width: 1024px) {
    main.main {
        margin-top: 150px;
        padding-left: 0;
    }

    main.main .container .section#section01 .section-inner {
        height: 800px;
        padding: 100px 0;
    }

    main.main .container .section#section01 .section-inner .tit-wrap {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: column;
        display: none;
    }

    main.main .container .section#section01 .section-inner .tit-wrap h1 {
        font-size: 12vw;
    }

    main.main .container .section#section01 .section-inner .tit-wrap p {
        font-size: 3vw;
    }

    main.main .container .section#section01 .section-inner .scroll-down {
        display: none;
    }

    main.main .container .section#section01 .section-util {
        float: unset;
        margin: 0 auto;
        transform: translateY(-120px);
    }

    main.main .container .section#section_banner {
        margin: 80px 0;
        margin-top: 0;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    main.main .container .section#section02 {
        margin-bottom: 50px;
        border-bottom: 15px solid #eee;
        padding-bottom: 50px;
    }

    main.main .container .section#section02 .tit-mobile {
        display: block;
        margin-bottom: 30px;
    }

    main.main .container .section#section02 .section-inner {
        padding: 0;
        padding-left: 0;
    }

    main.main .container .section#section02 .section-inner .thumb-box {
        margin-bottom: 30px;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper {
        transform: translateY(0);
        height: auto;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi {
        transform: translateY(20px);
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner h2 {
        display: none;
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap a {
        display: none;
    }

    main.main .container .section#section04 .section-inner {
        padding: 50px 0;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide {
        border-radius: 30vw;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .thumb {
        height: 500px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper-button.swiper-button-prev {
        left: 10px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper-button.swiper-button-next {
        right: 10px;
    }

    .snow-box {
        left: 10%;
    }
}

/* 태블릿 사이즈 */
@media screen and (max-width: 768px) {
    main.main {
        padding-left: 0;
        margin-top: 130px;
    }

    main.main .container .section {
        /* 섹션03 */
        /* 섹션04 */
        /* 섹션05 */
    }

    main.main .container .section#section01 .section-inner {
        background: url(../images/main/s1_bg_mo.jpg) no-repeat;
        background-size: cover;
        background-position: center center;
    }

    main.main .container .section#section03 {
        padding-bottom: 50px;
    }

    main.main .container .section#section03 .section-inner {
        padding: 0 20px;
    }

    main.main .container .section#section03 .section-inner .swiper {
        overflow: unset;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide {
        width: 100%;
        display: none;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide:nth-child(1),
    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide:nth-child(2) {
        width: 100%;
        display: block !important;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide:nth-child(even) {
        width: 100%;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide.show {
        display: block !important;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap {
        height: 400px !important;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-pagination {
        display: none;
    }

    main.main .container .section#section03 .section-inner .swiper .btn-box {
        display: flex;
    }

    main.main .container .section#section03 .section-inner .swiper .btn-box button {
        display: none;
    }

    main.main .container .section#section03 .section-inner .swiper .btn-box .on {
        display: flex;
    }

    main.main .container .section#section04 .section-inner {
        padding: 50px 0;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide {
        border-radius: 30vw;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .thumb {
        height: 450px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper-button.swiper-button-prev {
        left: 10px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper-button.swiper-button-next {
        right: 10px;
    }

    main.main .container .section#section05 .section-inner {
        flex-direction: column;
    }

    main.main .container .section#section05 .section-inner .banner {
        width: 100%;
    }

    .snow-box {
        left: 80%;
        top: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
    }
}

/* 모바일 사이즈 */
@media screen and (max-width: 576px) {
    main.main .container .section {
        /* 섹션01 */
        /* 섹션배너 */
        /* 섹션02 */
        /* 섹션03 */
        /* 섹션04 */
        /* 섹션05 */
    }

    main.main .container .section#section01 .section-inner {
        height: 500px;
    }

    main.main .container .section#section01 .section-inner .tit-wrap {
        width: 100%;
    }

    main.main .container .section#section01 .section-inner .tit-wrap h1 {
        font-size: 16vw;
    }

    main.main .container .section#section01 .section-inner .tit-wrap p {
        font-size: 4vw;
    }

    main.main .container .section#section01 .section-util {
        padding: 15px 40px;
        transform: translateY(-100px);
    }

    main.main .container .section#section01 .section-util ul li:first-child::after {
        left: 120%;
        height: 12px;
    }

    main.main .container .section#section01 .section-util ul li a {
        font-size: 15px;
    }

    main.main .container .section#section_banner {
        margin: 0;
        margin-bottom: 50px;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .tit-box {
        margin-top: 80px;
        margin-bottom: 40px;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .tit-box h2 {
        font-size: 30px;
        word-break: keep-all;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell {
        padding: 20px;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell .thumb {
        width: 100px;
        min-width: 100px;
        height: 100px;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell hgroup {
        width: calc(100% - 100px);
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell hgroup h6 {
        font-size: 15px;
    }

    main.main .container .section#section_banner .section-inner .cont-wrap .grid-box .grid-cell hgroup h3 {
        font-size: 16px;
    }

    main.main .container .section#section02 .tit-mobile {
        font-size: 35px;
    }

    main.main .container .section#section02 .section-inner .thumb-box {
        margin-bottom: 0;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper {
        height: auto;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper {
        margin-left: -6%;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide-active {
        width: 65% !important;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide {
        height: auto;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-wrapper .swiper-slide .category {
        font-size: 14px;
        padding: 10px 15px;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi {
        transform: translateY(10px);
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-pagination span {
        font-size: 15px;
    }

    main.main .container .section#section02 .section-inner .thumb-box .swiper .swiper-navi .swiper-button {
        margin-top: 2px;
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap {
        width: 80%;
        box-sizing: border-box;
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap h5 {
        font-size: 24px;
    }

    main.main .container .section#section02 .section-inner .tit-box .tit-box-inner .tit-wrap p {
        font-size: 16px;
    }

    main.main .container .section#section03 .section-inner .tit-box h2 {
        font-size: 35px;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap {
        height: 250px !important;
    }

    main.main .container .section#section03 .section-inner .swiper .swiper-wrapper .swiper-slide .thumb-wrap .category {
        font-size: 15px;
    }

    main.main .container .section#section03 .section-inner .swiper .btn-box {
        display: flex;
    }

    main.main .container .section#section03 .section-inner .swiper .btn-box button {
        display: none;
    }

    main.main .container .section#section03 .section-inner .swiper .btn-box .on {
        display: flex;
    }

    main.main .container .section#section04 .section-inner {
        padding: 50px 0;
    }

    main.main .container .section#section04 .section-inner .tit-box h2 {
        font-size: 35px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide {
        border-radius: 30vw;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .thumb {
        height: 360px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .tit-wrap {
        padding: 10px;
    }

    main.main .container .section#section04 .section-inner .swiper-box .swiper .swiper-wrapper .swiper-slide .tit-wrap p {
        font-size: 18px;
    }

    main.main .container .section#section05 .section-inner {
        flex-direction: column;
    }

    main.main .container .section#section05 .section-inner .banner {
        width: 100%;
        height: 180px;
    }

    main.main .container .section#section05 .section-inner .banner .tit-wrap {
        top: 30px;
        left: 20px;
    }

    main.main .container .section#section05 .section-inner .banner .tit-wrap h5 {
        font-size: 20px;
    }

    main.main .container .section#section05 .section-inner .banner .tit-wrap p {
        font-size: 15px;
    }
}

.sub {
    padding-left: 160px;
    box-sizing: border-box;
}

.sub .container {
    width: 100%;
}

.sub .container .section {
    /* 섹션01 */
    /* 섹션01 */
    /*페이지 네이션 */
}

.sub .container .section#section01 {
    height: 520px;
}

.sub .container .section#section01 .section-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.sub .container .section#section01 .section-inner .bg-box {
    width: 100%;
    height: 100%;
}

.sub .container .section#section01 .section-inner .bg-box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.sub .container .section#section01 .section-inner .tit-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    color: #fff;
    word-break: keep-all;
}

.sub .container .section#section01 .section-inner .tit-box.color-black {
    color: #000;
}

.sub .container .section#section01 .section-inner .tit-box.color-black h6 {
    border: 1px solid #000;
}

.sub .container .section#section01 .section-inner .tit-box h6 {
    border: 1px solid #fff;
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px 20px;
    box-sizing: border-box;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 35px;
}

.sub .container .section#section01 .section-inner .tit-box h1 {
    line-height: 1.2;
    font-size: 50px;
}

.sub .container .section#section01 .section-inner .tit-box h1 span {
    font-weight: 300;
}

.sub .container .section#section01 .section-inner .tit-box h3 {
    margin-top: 20px;
    font-size: 25px;
    font-weight: 500;
}

.sub .container .section#section01 .writer-box {
    max-width: 1280px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 40px 60px;
    box-sizing: border-box;
    border-radius: 30px;
    background-color: #f2f2f2;
    transform: translateY(-60%);
}

.sub .container .section#section01 .writer-box p {
    font-size: 19px;
    color: #352f27;
}

.sub .container .section#section01 .writer-box p.slogan {
    font-weight: 300;
    margin-bottom: 8px;
}

.sub .container .section#section01 .writer-box p.writer {
    font-weight: 700;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sub .container .section#section02 {
    border-bottom: 1px solid #c5c5c5;
    padding-bottom: 50px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 150px;
}

.sub .container .section#section02 .section-inner {
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

.sub .container .section#section02 .section-inner .text-box {
    margin-bottom: 100px;
    /* 텍스트 */
    /* 이미지 */
    /* 그리드 */
    /* 박스 */
    /* 테이븛 */
    /* 비디오 */
    /* 리스트 */
    /* 슬라이드 */
}

.sub .container .section#section02 .section-inner .text-box h1,
.sub .container .section#section02 .section-inner .text-box h2,
.sub .container .section#section02 .section-inner .text-box h3,
.sub .container .section#section02 .section-inner .text-box h4,
.sub .container .section#section02 .section-inner .text-box h5,
.sub .container .section#section02 .section-inner .text-box h6 {
    word-break: keep-all;
}

.sub .container .section#section02 .section-inner .text-box h1 {
    font-size: 36px;
}

.sub .container .section#section02 .section-inner .text-box h2 {
    font-size: 32px;
}

.sub .container .section#section02 .section-inner .text-box h3 {
    font-size: 28px;
}

.sub .container .section#section02 .section-inner .text-box h4 {
    font-size: 24px;
}

.sub .container .section#section02 .section-inner .text-box h5 {
    font-size: 22px;
}

.sub .container .section#section02 .section-inner .text-box h6 {
    font-size: 20px;
}

.sub .container .section#section02 .section-inner .text-box sup {
    font-weight: 700;
    color: #536EC4;
}

.sub .container .section#section02 .section-inner .text-box p {
    margin-bottom: 40px;
    text-align: justify;
    line-height: 1.6;
    color: #352f27;
    word-break: break-all;
}

.sub .container .section#section02 .section-inner .text-box p small {
    font-size: 90%;
    line-height: 1.3;
}

.sub .container .section#section02 .section-inner .text-box .tit {
    margin-bottom: 20px;
}

.sub .container .section#section02 .section-inner .text-box .tit-num {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.sub .container .section#section02 .section-inner .text-box .tit-num .num {
    display: block;
    font-weight: 300;
    font-size: 120%;
    margin-top: -4px;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico .ico {
    width: -moz-fit-content;
    width: fit-content;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico .ico img {
    width: 100%;
    display: block;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico02 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico02 span {
    width: calc(100% - 60px);
    display: block;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico02 .ico {
    width: 60px;
}

.sub .container .section#section02 .section-inner .text-box .tit-ico02 .ico img {
    width: 100%;
    display: block;
}

.sub .container .section#section02 .section-inner .text-box .txt-ico {
    display: flex;
    margin-bottom: 0;
}

.sub .container .section#section02 .section-inner .text-box .txt-ico .ico {
    width: 25px;
    display: block;
    margin-right: 5px;
}

.sub .container .section#section02 .section-inner .text-box .txt-num {
    display: flex;
    margin-bottom: 0;
    gap: 5px;
}

.sub .container .section#section02 .section-inner .text-box .txt-num .num {
    display: block;
    font-size: 120%;
    margin-top: -4px;
}

.sub .container .section#section02 .section-inner .text-box .tit-q {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

.sub .container .section#section02 .section-inner .text-box .txt-a {
    display: flex;
    gap: 5px;
    margin-bottom: 30px;
}

.sub .container .section#section02 .section-inner .text-box .color-blue {
    color: #536ec4;
}

.sub .container .section#section02 .section-inner .text-box .color-green {
    color: #6fa98d;
}

.sub .container .section#section02 .section-inner .text-box .under-line {
    background: linear-gradient(to top, #fff3c4 50%, transparent 30%);
}

.sub .container .section#section02 .section-inner .text-box .tag {
    margin-bottom: 30px;
    box-sizing: border-box;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-weight: 600;
    display: block;
    word-break: keep-all;
}

.sub .container .section#section02 .section-inner .text-box .tag.cycle {
    background-color: #1b1311;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.sub .container .section#section02 .section-inner .text-box .tag.type01 {
    background-color: #1b1311;
    color: #fff;
    padding: 8px 25px;
    border-radius: 30px;
}

.sub .container .section#section02 .section-inner .text-box .tag.type02 {
    background-color: #ebebeb;
    color: #000;
    padding: 8px 25px;
    border-radius: 30px;
}

.sub .container .section#section02 .section-inner .text-box .tag.type03 {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 8px 25px;
}

.sub .container .section#section02 .section-inner .text-box .tag.type04 {
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
    padding: 5px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

.sub .container .section#section02 .section-inner .text-box .tag.type04 .num {
    font-size: 150%;
    font-weight: 300;
    display: block;
    margin-right: 10px;
}

.sub .container .section#section02 .section-inner .text-box .tag.type05 {
    color: #000;
    padding: 10px 25px;
    width: 100%;
    text-align: start;
    background-color: #edf2fa;
    border-radius: 30px;
    font-weight: 600;
}

.sub .container .section#section02 .section-inner .text-box .tag.type05 b {
    color: #536ec4;
}

.sub .container .section#section02 .section-inner .text-box .tag.type06 {
    color: #fff;
    padding: 8px 20px;
    width: 100%;
    font-weight: 600;
    background-color: #000;
    width: fit-content;
}

.sub .container .section#section02 .section-inner .text-box .tag.type07 {
    color: #d48365;
    padding: 10px 20px;
    font-weight: 600;
    background-color: #fff;
    width: fit-content;
    border-radius: 30px;
    border: 2px solid #b68973;
    box-shadow: 0px 3px 5px 0px rgba(181, 181, 181, 0.5);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(181, 181, 181, 0.5);
    -moz-box-shadow: 0px 3px 5px 0px rgba(181, 181, 181, 0.5);
}

.sub .container .section#section02 .section-inner .text-box .ep {
    font-family: "MaruBuri";
    text-align: center;
    word-break: keep-all;
    text-wrap: balance;
    margin-bottom: 40px;
    font-weight: 400;
    color: #4178c5;
}

.sub .container .section#section02 .section-inner .text-box .ep.bold {
    font-weight: 600;
}

.sub .container .section#section02 .section-inner .text-box .ep .quote {
    width: 25px;
    display: block;
    margin: 0 auto;
}

.sub .container .section#section02 .section-inner .text-box .ep .quote:first-child {
    margin-bottom: 20px;
}

.sub .container .section#section02 .section-inner .text-box .ep .quote:last-child {
    margin-top: 20px;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap {
    margin-bottom: 50px;
    width: 100%;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .img-box {
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .img-box img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .img-box.print {
    position: relative;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .img-box.print .print-ico {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 50px;
    left: 50px;
    transform: translate(-50%, -50%);
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .img-box.print .print-txt {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #fff;
    background-color: #2b2a2ac4;
    position: absolute;
    top: 10px;
    right: 10px;
    transform: translate(0%, 0%);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .img-box.print .print-txt img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .caption {
    font-size: 16px;
    text-align: center;
    margin-top: 10px;
    width: 100%;
    line-height: 1.5;
    word-break: keep-all;
    font-weight: 100;
}

.sub .container .section#section02 .section-inner .text-box .img-wrap .caption b {
    font-weight: 800;
}

.sub .container .section#section02 .section-inner .text-box .img-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sub .container .section#section02 .section-inner .text-box .img-flex.gap50 {
    gap: 50px;
}

.sub .container .section#section02 .section-inner .text-box .img-flex .img-box {
    width: 50%;
}

.sub .container .section#section02 .section-inner .text-box .img-flex.img-flex02 .img-box {
    width: auto;
}

.sub .container .section#section02 .section-inner .text-box .grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sub .container .section#section02 .section-inner .text-box .grid-box.grid-box02 {
    grid-template-columns: 1fr 1fr 1fr;
}

.sub .container .section#section02 .section-inner .text-box .grid-box .grid-cell .caption {
    font-size: 14px;
    margin-top: 10px;
    display: block;
    text-align: center;
}

.sub .container .section#section02 .section-inner .text-box .grid-box .grid-cell .img-box {
    width: 100%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.sub .container .section#section02 .section-inner .text-box .grid-box .grid-cell .img-box img {
    width: 100%;
    display: block;
}

.sub .container .section#section02 .section-inner .text-box .box {
    padding: 50px 30px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.sub .container .section#section02 .section-inner .text-box .box.border-box {
    border: 1px solid #ccc;
}

.sub .container .section#section02 .section-inner .text-box .box.type02 {
    background-color: #edf2fa;
}

.sub .container .section#section02 .section-inner .text-box .box.type03 {
    padding: 30px;
}

.sub .container .section#section02 .section-inner .text-box .table-box {
    width: 100%;
    margin-bottom: 40px;
}

.sub .container .section#section02 .section-inner .text-box .table-box.type01 table th,
.sub .container .section#section02 .section-inner .text-box .table-box.type01 table td {
    width: 50%;
    word-break: keep-all;
}

.sub .container .section#section02 .section-inner .text-box .table-box.type01 table td:last-child {
    text-align: center;
}

.sub .container .section#section02 .section-inner .text-box .table-box table,
.sub .container .section#section02 .section-inner .text-box .table-box th,
.sub .container .section#section02 .section-inner .text-box .table-box td {
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-left: none;
    border-right: none;
}

.sub .container .section#section02 .section-inner .text-box .table-box table {
    width: 100%;
}

.sub .container .section#section02 .section-inner .text-box .table-box table th,
.sub .container .section#section02 .section-inner .text-box .table-box table td {
    padding: 10px 20px;
    box-sizing: border-box;
    border-right: 1px solid #ccc;
}

.sub .container .section#section02 .section-inner .text-box .table-box table th:last-child,
.sub .container .section#section02 .section-inner .text-box .table-box table td:last-child {
    border-right: none;
}

.sub .container .section#section02 .section-inner .text-box .table-box table th {
    font-size: 105%;
    color: #fff;
    background-color: #6fa98d;
}

.sub .container .section#section02 .section-inner .text-box .table-box .caption02 {
    text-align: end;
    margin-bottom: 10px;
    font-size: 15px;
    color: #282828;
}

.sub .container .section#section02 .section-inner .text-box .video-box iframe {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.sub .container .section#section02 .section-inner .text-box .list-box.list-box-row {
    flex-direction: row !important;
}

.sub .container .section#section02 .section-inner .text-box .list-box.list-box-flex {
    display: flex;
}

.sub .container .section#section02 .section-inner .text-box .list-box.list-box-flex li {
    margin-right: 10px;
}

.sub .container .section#section02 .section-inner .text-box .list-box.list-box-flex li:last-child {
    margin-right: 0;
}

.sub .container .section#section02 .section-inner .text-box .list-box li {
    margin-bottom: 10px;
    display: flex;
    gap: 5px;
}

.sub .container .section#section02 .section-inner .text-box .list-box li:last-child {
    margin-bottom: 0;
}

.sub .container .section#section02 .section-inner .text-box .slide-box {
    position: relative;
    padding: 0 100px;
    box-sizing: border-box;
}

.sub .container .section#section02 .section-inner .text-box .slide-box .swiper {
    padding-bottom: 50px;
}

.sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    border-radius: 50%;
}

.sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button img {
    width: 30px;
}

.sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button::after {
    display: none;
}

.sub .container .section#section02 .section-inner .text-box .slide-box .swiper-pagination span {
    width: 12px;
    height: 12px;
}

.sub .container .section#section02 .section-inner .text-box .slide-box .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #6ea98d;
}

.sub .container .section .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    max-width: 768px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.sub .container .section .pagination a {
    width: 29%;
}

.sub .container .section .pagination a span {
    width: 100%;
    display: block;
    text-align: center;
    border: 1px solid #c5c5c5;
    color: #5b5b5b;
    padding: 15px 20px;
    box-sizing: border-box;
    font-size: 16px;
    transition: 0.2s;
    -webkit-transition: 0.2s;
}

.sub .container .section .pagination a span:hover {
    background-color: #5b5b5b;
    color: #fff;
}

.sub .container .section .pagination a.present span {
    background: linear-gradient(45deg, #5673bf, #6da591);
    color: #fff;
    border: none;
    padding: 16px 20px;
}

.sub .container .section .pagination .prev {
    position: relative;
}

.sub .container .section .pagination .prev::before {
    content: "";
    display: block;
    width: 20px;
    height: 24px;
    background-image: url(../images/common/prev_arrow.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left center;
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.sub .container .section .pagination .next {
    position: relative;
}

.sub .container .section .pagination .next::before {
    content: "";
    display: block;
    width: 20px;
    height: 24px;
    background-image: url(../images/common/next_arrow.png);
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: left center;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translate(50%, -50%);
}

/* 태블릿(아이패드 프로) 사이즈 */
@media screen and (max-width: 1024px) {
    .sub {
        margin-top: 168px;
        padding-left: 0;
    }

    .sub .container .section#section01 .section-inner .tit-box {
        padding: 0 60px;
    }
}

/* 태블릿 사이즈 */
@media screen and (max-width: 768px) {
    .sub .container .section {
        /*페이지 네이션 */
    }

    .sub .container .section#section01 {
        height: 650px;
    }

    .sub .container .section#section01 .section-inner {
        height: 100%;
    }

    .sub .container .section#section01 .section-inner .tit-box {
        top: 200px;
    }

    .sub .container .section#section01 .writer-box {
        border-radius: 0;
    }

    .sub .container .section#section02 .section-inner .text-box .tit-ico02 {
        flex-direction: column;
        align-items: start;
    }

    .sub .container .section#section02 .section-inner .text-box .tit-ico02 span {
        width: 100%;
    }

    .sub .container .section#section02 .section-inner .text-box .txt-a {
        flex-direction: column;
    }

    .sub .container .section#section02 .section-inner .text-box .img-wrap .img-box {
        width: 100% !important;
    }

    .sub .container .section#section02 .section-inner .text-box .img-wrap .img-flex {
        flex-direction: column;
    }

    .sub .container .section#section02 .section-inner .text-box .img-wrap .img-flex.gap50 {
        gap: 20px;
    }

    .sub .container .section#section02 .section-inner .text-box .grid-box {
        grid-template-columns: 1fr;
    }

    .sub .container .section#section02 .section-inner .text-box .grid-box.grid-box02 {
        grid-template-columns: 1fr;
    }

    .sub .container .section#section02 .section-inner .text-box .list-box {
        flex-direction: column;
    }

    .sub .container .section#section02 .section-inner .text-box .list-box.list-box-flex li {
        margin-right: 10px;
        width: 100% !important;
    }

    .sub .container .section#section02 .section-inner .text-box .list-box.list-box-flex li:last-child {
        margin-right: 0;
    }

    .sub .container .section .pagination a.prev {
        width: 25%;
    }

    .sub .container .section .pagination a.prev::before {
        left: 0;
    }

    .sub .container .section .pagination a.prev span {
        display: none;
    }

    .sub .container .section .pagination a.next {
        width: 25%;
    }

    .sub .container .section .pagination a.next::before {
        right: 0;
    }

    .sub .container .section .pagination a.next span {
        display: none;
    }

    .sub .container .section .pagination a.present {
        width: 95%;
    }
}

/* 태블릿 사이즈 */
@media screen and (max-width: 576px) {
    .sub {
        margin-top: 158px;
    }

    .sub .container .section#section01 {
        height: 500px;
    }

    .sub .container .section#section01 .section-inner {
        height: 100%;
    }

    .sub .container .section#section01 .section-inner .tit-box {
        top: 150px;
        padding: 30px;
    }

    .sub .container .section#section01 .section-inner .tit-box hgroup h1 {
        font-size: 30px;
    }

    .sub .container .section#section01 .section-inner .tit-box hgroup h6 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .sub .container .section#section01 .section-inner .tit-box hgroup h3 {
        font-size: 20px;
    }

    .sub .container .section#section01 .writer-box {
        padding: 20px;
    }

    .sub .container .section#section01 .writer-box p {
        font-size: 15px;
    }

    .sub .container .section#section01 .writer-box p.writer {
        gap: 5px;
    }

    .sub .container .section#section02 {
        margin-top: 30%;
    }

    .sub .container .section#section02 .section-inner .text-box {
        margin-bottom: 40px;
    }

    .sub .container .section#section02 .section-inner .text-box h1,
    .sub .container .section#section02 .section-inner .text-box h2,
    .sub .container .section#section02 .section-inner .text-box h3,
    .sub .container .section#section02 .section-inner .text-box h4,
    .sub .container .section#section02 .section-inner .text-box h5,
    .sub .container .section#section02 .section-inner .text-box h6 {
        word-break: keep-all;
    }

    .sub .container .section#section02 .section-inner .text-box h1 {
        font-size: 30px;
    }

    .sub .container .section#section02 .section-inner .text-box h2 {
        font-size: 26px;
    }

    .sub .container .section#section02 .section-inner .text-box h3 {
        font-size: 20px;
    }

    .sub .container .section#section02 .section-inner .text-box h4 {
        font-size: 19px;
    }

    .sub .container .section#section02 .section-inner .text-box h5 {
        font-size: 18px;
    }

    .sub .container .section#section02 .section-inner .text-box h6 {
        font-size: 17px;
    }

    .sub .container .section#section02 .section-inner .text-box p {
        margin-bottom: 40px;
    }

    .sub .container .section#section02 .section-inner .text-box .img-wrap .img-box {
        width: 100% !important;
    }

    .sub .container .section#section02 .section-inner .text-box .img-wrap .img-flex {
        flex-direction: column;
        gap: 20px;
    }

    .sub .container .section#section02 .section-inner .text-box .img-wrap .caption {
        font-size: 14px;
    }

    .sub .container .section#section02 .section-inner .text-box .box {
        padding: 30px 15px;
    }

    .sub .container .section#section02 .section-inner .text-box .box.type03 {
        padding: 15px;
    }

    .sub .container .section#section02 .section-inner .text-box .slide-box {
        padding: 0;
    }

    .sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button {
        width: 45px;
        height: 45px;
        top: 45%;
        border: none;
    }

    .sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button.swiper-button-next {
        right: -15px;
    }

    .sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button.swiper-button-prev {
        left: -15px;
    }

    .sub .container .section#section02 .section-inner .text-box .slide-box .btn-wrap .swiper-button img {
        width: 30px;
    }

    .sub .container .section#section02 .section-inner .text-box .table-box.type01 table th,
    .sub .container .section#section02 .section-inner .text-box .table-box.type01 table td {
        width: 70%;
    }

    .sub .container .section#section02 .section-inner .text-box .table-box.type01 table th:last-child {
        width: 30%;
    }
}


/* 설문조사 */
.survey ul li {
    border-bottom: 1px solid #ccc;
    border-style: dashed;
    border-top: none;
    border-left: none;
    border-right: none;
}

.survey ul li fieldset {
    border: none;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.survey ul li fieldset input {
    width: 20px;
    min-width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    transform: translateY(1px);
    accent-color: #ee4645;
}

.survey ul {
    margin-bottom: 20px;
}

.survey .btn-submit {
    background-color: #727272;
    padding: 15px 30px;
    border: none;
    margin: 50px auto;
    display: block;
    color: #fff;
    border-radius: 30px;
    font-size: 20px;
    transition: 0.2s;
    cursor: pointer;
}


.survey .btn-submit:hover {
    background-color: #000;
}

.survey .result {
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
    border-radius: 50px;
    display: none;
}

.survey .result p {
    font-size: 18px;
    text-align: center !important;
    margin-bottom: 0 !important;
}

.survey .result01 {
    background-color: #e9f3ff;
}

.survey .result02 {
    background-color: #fff8ce;
}

.survey .result03 {
    background-color: #fee9e8;
}


/* leaf animations */
.ani-max {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.leaves {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.leaves i {
    position: absolute;
    display: block;
    width: 30px;
    height: 23px;
    top: -50px;
    background: linear-gradient(to bottom right, #309900, #005600);
    transform: rotate(180deg);
    border-radius: 5% 40% 70%;
    box-shadow: inset 0px 0px 1px #222;
    border: 1px solid #333;
    opacity: 0.7;
    animation: falling 5s ease-in-out infinite;
}

.leaves i:nth-of-type(2n) {
    -webkit-animation: falling2 5s 0s infinite;
}

.leaves i:nth-of-type(3n) {
    -webkit-animation: falling3 5s 0s infinite;
}

.leaves i:nth-of-type(n) {
    height: 23px;
    width: 30px;
}

.leaves i:nth-of-type(n):before {
    width: 7px;
    height: 5px;
    top: 17px;
    right: 1px;
}

.leaves i:nth-of-type(n):after {
    width: 2px;
    height: 17px;
    left: 12px;
    top: 0px;
}

.leaves i:nth-of-type(2n+1) {
    height: 11px;
    width: 16px;
}

.leaves i:nth-of-type(2n+1):before {
    width: 4px;
    height: 3px;
    top: 7px;
    right: 0px;
}

.leaves i:nth-of-type(2n+1):after {
    width: 2px;
    height: 6px;
    left: 5px;
    top: 1px;
}

.leaves i:nth-of-type(3n+2) {
    height: 17px;
    width: 23px;
}

.leaves i:nth-of-type(3n+2):before {
    height: 4px;
    width: 4px;
    top: 12px;
    right: 1px;
}

.leaves i:nth-of-type(3n+2):after {
    height: 10px;
    width: 2px;
    top: 1px;
    left: 8px;
}

.leaves i:nth-of-type(n) {
    -webkit-animation-delay: 1.9s;
}

.leaves i:nth-of-type(2n) {
    -webkit-animation-delay: 3.9s;
}

.leaves i:nth-of-type(3n) {
    -webkit-animation-delay: 2.3s;
}

.leaves i:nth-of-type(4n) {
    -webkit-animation-delay: 4.4s;
}

.leaves i:nth-of-type(5n) {
    -webkit-animation-delay: 5s;
}

.leaves i:nth-of-type(6n) {
    -webkit-animation-delay: 3.5s;
}

.leaves i:nth-of-type(7n) {
    -webkit-animation-delay: 2.8s;
}

.leaves i:nth-of-type(8n) {
    -webkit-animation-delay: 1.5s;
}

.leaves i:nth-of-type(9n) {
    -webkit-animation-delay: 3.3s;
}

.leaves i:nth-of-type(10n) {
    -webkit-animation-delay: 2.5s;
}

.leaves i:nth-of-type(11n) {
    -webkit-animation-delay: 1.2s;
}

.leaves i:nth-of-type(12n) {
    -webkit-animation-delay: 4.1s;
}

.leaves i:nth-of-type(13n) {
    -webkit-animation-delay: 1s;
}

.leaves i:nth-of-type(14n) {
    -webkit-animation-delay: 4.7s;
}

.leaves i:nth-of-type(15n) {
    -webkit-animation-delay: 3s;
}

.leaves i:nth-of-type(n) {
    background: linear-gradient(to bottom right, #309900, #005600);
}

.leaves i:nth-of-type(2n+2) {
    background: linear-gradient(to bottom right, #5e9900, #2b5600);
}

.leaves i:nth-of-type(4n+1) {
    background: linear-gradient(to bottom right, #990, #564500);
}

.leaves i:nth-of-type(n) {
    opacity: .7;
}

.leaves i:nth-of-type(3n+1) {
    opacity: .5;
}

.leaves i:nth-of-type(3n+2) {
    opacity: .3;
}

.leaves i:nth-of-type(n) {
    transform: rotate(180deg);
}


.leaves i:nth-of-type(n) {
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes falling {
    0% {
        -webkit-transform:
            translate3d(-300px, 0, 0) rotate(0deg);
    }

    100% {
        -webkit-transform:
            translate3d(900px, 1000px, 0)
            /* 더 사선 */
            rotate(90deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling2 {
    0% {
        -webkit-transform:
            translate3d(0, 0, 0) rotate(90deg);
    }

    100% {
        -webkit-transform:
            translate3d(800px, 1000px, 0) rotate(0deg);
        opacity: 0;
    }
}

@-webkit-keyframes falling3 {
    0% {
        -webkit-transform:
            translate3d(0, 0, 0) rotate(-20deg);
    }

    100% {
        -webkit-transform:
            translate3d(700px, 1000px, 0) rotate(-70deg);
        opacity: 0;
    }
}



.ani-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.falling-leaf {
    position: absolute;
    width: 40px;
    height: 40px;
    background-size: cover;
    opacity: 0.8;
}

.falling-leaf img {
    width: 100%;
}

@keyframes fall {
    0% {
        top: -50px;
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        top: 100vh;
        opacity: 0;
        transform: translateX(500px);
    }
}

@keyframes sway {

    0% {
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        transform: translateX(300px);
        opacity: 0;
    }
}


@media screen and (max-width: 576px) {
    .falling-leaf {
        width: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        animation-duration: 7s !important;
    }

    .ani-box {
        left: -30%;
    }

    @keyframes fall {
        0% {
            top: -50px;
            opacity: 1;
            transform: translateX(0);
        }

        100% {
            top: 100vh;
            opacity: 0;
            transform: translateX(300px);
        }
    }

    @keyframes sway {

        0% {
            transform: translateX(0);
            opacity: 1;
        }

        100% {
            transform: translateX(300px);
            opacity: 0;
        }
    }
}