.slide_section .sec_wrap {
    width: auto;
    padding: 0 0 0 130px;
}


.sec_promotion .slide_area .swiper-slide {
    width: 660px;
}

.sec_promotion .slide_area .img_area {
    margin-bottom: 40px;
}

.sec_promotion .slide_area .img_area img {
    width: 100%;
}

.sec_promotion .slide_area .info_title_area {
    padding-bottom: 30px;
    position: relative;
}

.sec_promotion .slide_area .info_title_area:after {
    content: "";
    width: 100%;
    height: 1px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
}

.sec_promotion .slide_area .info_title_area .info_sub_title {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 20px;
    opacity: 0.7;
}

.sec_promotion .slide_area .info_title_area .info_title {
    font-size: 32px;
}

.sec_promotion .slide_area .info_list_area {
    padding-top: 30px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.sec_promotion .slide_area .info_list_area li {
    margin-bottom: 20px;
    position: relative;
}

.sec_promotion .slide_area .info_list_area li>a {
    display: flex;
    align-items: center;
}

.sec_promotion .slide_area .info_list_area li>a:hover .detail_icon_area {}

.sec_promotion .slide_area .info_list_area li:last-child {
    margin-bottom: 0;
}

.sec_promotion .slide_area .info_list_area li .list_img {
    width: 170px;
    margin-right: 40px;
}

.sec_promotion .slide_area .info_list_area li .list_img>img {
    width: 100%;
}

.sec_promotion .slide_area .info_list_area li .detail_icon_area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

.sec_promotion .slide_area .info_list_area li .detail_icon_area i {
    font-size: 30px;
    color: #000;
    opacity: 0.5;
}

.detail_icon_area i {
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.sec_promotion .slide_area .info_list_area li>a:hover .detail_icon_area i {
    transform: rotate(360deg);
}

@media(max-width:1024px) {
    .slide_section .sec_wrap {
        padding: 0 0 0 50px;
    }
}

@media(max-width:820px) {
    .sec_cont section.slide_section .sec_wrap {
        width: auto;
        padding: 0 0 0 5vw !important;
    }

    .sec_promotion .slide_area .swiper-slide {
        width: 75%;
    }

    .sec_promotion .slide_area .img_area {
        margin-bottom: 5vw;
    }

    .sec_promotion .slide_area .info_title_area {
        padding-bottom: 3vw;
    }

    .sec_promotion .slide_area .info_title_area:after {
        height: 0.1vw;
    }

    .sec_promotion .slide_area .info_title_area .info_sub_title {
        font-size: 3.5vw;
        margin-bottom: 2vw;
    }

    .sec_promotion .slide_area .info_title_area .info_title {
        font-size: 4.5vw;
    }

    .sec_promotion .slide_area .info_list_area {
        padding-top: 0;
    }

    .sec_promotion .slide_area .info_list_area li {
        margin-bottom: 0;
        padding: 3vw 0;
        border-bottom: 0.1vw dotted rgba(0, 0, 0, .5);
        /*flex-direction:column; align-items:flex-start;*/
    }

    .sec_promotion .slide_area .info_list_area li:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .sec_promotion .slide_area .info_list_area li .list_img {
        margin-right: 0;
        display: none;
    }

    .sec_promotion .slide_area .info_list_area li .list_text_area {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .sec_promotion .slide_area .info_list_area li .list_text_area .list_sub_title {
        font-size: 3.5vw;
        margin-bottom: 2vw;
    }

    .sec_promotion .slide_area .info_list_area li .list_text_area .list_title {
        font-size: 4vw;
    }

    .sec_promotion .slide_area .info_list_area li .list_text_area .list_info {
        font-size: 3.5vw;
    }

    .sec_promotion .slide_area .info_list_area li .detail_icon_area {
        display: none;
        top: 30%;
        right: 1vw;
    }

    .sec_promotion .slide_area .info_list_area li .detail_icon_area i {
        font-size: 3vw;
    }
}



.sec_youtube .list_area .list {
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 2px solid #808080;
}

.sec_youtube .list_area .list:first-child {
    padding-top: 0;
}

.sec_youtube .list_area .list.active {
    padding-bottom: 60px;
}

.sec_youtube .list_area .list .list_title_area {
    display: flex;
    align-items: center;
    min-width: 600px;
}

.sec_youtube .list_area .list .list_title_area .num {
    margin-right: 30px;
}

.sec_youtube .list_area .list.active .list_title_area {
    display: none;
}

.sec_youtube .list_area .list .img_area {
    width: 400px;
    margin-right: 100px;
}

.sec_youtube .list_area .list.active .img_area {
    width: 970px;
}

.sec_youtube .list_area .list .img_area img {
    width: 100%;
}

.sec_youtube .list_area .list .img_area a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sec_youtube .list_area .list .text_area .num {
    display: none;
    margin-bottom: 30px;
}

.sec_youtube .list_area .list.active .text_area .num {
    display: block;
}

.sec_youtube .list_area .list .title {
    flex-direction: column;
}

.sec_youtube .list_area .list .list_title_area .title {
    display: flex;
    font-size: 32px;
}

.sec_youtube .list_area .list .list_title_area .title .btn_area {
    font-size: inherit;
}

.sec_youtube .list_area .list .list_title_area .title .btn_area .btn_text {
    font-size: inherit
}

.sec_youtube .list_area .list.active .list_title_area .title {
    display: none;
}

.sec_youtube .list_area .list .text_area .title {
    display: none;
}

.sec_youtube .list_area .list.active .text_area .title {
    display: flex;
}

.sec_youtube .list_area .list .title .btn_area a {
    justify-content: flex-start;
}

@media(max-width:820px) {
    .sec_youtube .list_area .list {
        align-items: flex-start;
        flex-direction: column;
        padding: 5vw 0;
        border-bottom: 0.1vw solid #808080;
    }

    .sec_youtube .list_area .list:first-child {
        padding-top: 0;
    }

    .sec_youtube .list_area .list.active {
        padding-bottom: 5vw;
    }

    .sec_youtube .list_area .list .list_title_area {
        display: flex;
        align-items: center;
        min-width: 100%;
        width: 100%;
    }

    .sec_youtube .list_area .list .list_title_area .num {
        margin-right: 3vw;
    }

    .sec_youtube .list_area .list.active .list_title_area {
        display: block;
    }

    .sec_youtube .list_area .list .img_area {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5vw;
    }

    .sec_youtube .list_area .list.active .img_area {
        width: 100%;
    }

    .sec_youtube .list_area .list .img_area img {
        width: 100%;
    }

    .sec_youtube .list_area .list .img_area a {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .sec_youtube .list_area .list .text_area .num {
        display: block;
        margin-bottom: 3vw;
        font-size: 8vw;
    }

    .sec_youtube .list_area .list.active .text_area .num {
        display: block;
    }

    .sec_youtube .list_area .list .title {
        flex-direction: column;
    }

    .sec_youtube .list_area .list .list_title_area .title {
        display: flex;
        font-size: 5vw;
    }

    .sec_youtube .list_area .list .list_title_area .title .btn_area {
        font-size: inherit;
    }

    .sec_youtube .list_area .list .list_title_area .title .btn_area .btn_text {
        font-size: inherit
    }

    .sec_youtube .list_area .list .list_title_area {
        display: none !important
    }

    .sec_youtube .list_area .list.active .list_title_area .title {
        display: block;
    }

    .sec_youtube .list_area .list .text_area .title {
        display: block;
        font-size: 6vw;
    }

    .sec_youtube .list_area .list.active .text_area .title {
        display: flex;
    }

    .sec_youtube .list_area .list .title .btn_area a {
        justify-content: center;
    }
}




.sec_reels .slide_area .list {
    width: 310px
}

.sec_reels .slide_area .list .img_area {
    margin-bottom: 15px;
    position: relative;
}

.sec_reels .slide_area .list .list_text_area {
    padding: 0 10px;
}

@media(max-width:820px) {
    .sec_reels .slide_area .list {
        width: 55%
    }

    .sec_reels .slide_area .list .img_area {
        margin-bottom: 3vw;
        position: relative;
    }

    .sec_reels .slide_area .list .list_text_area {
        padding: 0;
    }
}


.sec_story .slide_btn_area {
    display: flex;
    margin-top: 100px;
}

.sec_story .slide_btn_area .pn_btn {
    margin-right: 10px
}

.sec_story .slide_btn_area .pn_btn:last-of-type {
    margin-right: 0
}



/* .sec_story .list_area .list {
    border-right: 1px solid #000;
    width: 7.5%;
    height: 660px;
    overflow: hidden;
    transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    position: relative;
    align-items: center;
    justify-content: center;
    cursor: pointer;
} */

/* .sec_story .list_area .list.active {
    width: 85%;
    padding: 40px 60px 40px 120px;
    cursor: auto;
    display: flex;
}

.sec_story .list_area .list:last-child {
    border-right: 0;
}

.sec_story .list_area .list .flex_box {
    align-items: center;
    width: 180px;
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
}

.sec_story .list_area .list.active .flex_box {
    width: 1200px;
}

.sec_story .list_area .list .text_area {
    margin-right: auto;
    opacity: 0;
}

.sec_story .list_area .list.active .text_area {
    opacity: 1;
}

.sec_story .list_area .hash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    white-space: nowrap;
    display: flex;
}

.sec_story .list_area .list.active .hash {
    display: none;
}

.sec_story .list_area .list .img_area {
    width: 750px;
    opacity: 0;
}

.sec_story .list_area .list .img_area img {
    width: 100%;
}

.sec_story .list_area .list.active .img_area {
    opacity: 1;
}


@media(max-width:820px) {
    .sec_story .slide_btn_area {
        display: flex;
        margin-top: 5vw;
    }

    .sec_story .slide_btn_area .pn_btn {
        margin-right: 3vw
    }

    .sec_story .slide_btn_area .pn_btn:last-of-type {
        margin-right: 0
    }

    .sec_story .list_area {
        border: 0.1vw solid #000;
        display: flex;
    }

    .sec_story .list_area .list {
        border-right: 0.1vw solid #000;
        width: 7.5%;
        height: 130vw;
    }

    .sec_story .list_area .list.active {
        width: 85%;
        padding: 5vw;
    }

    .sec_story .list_area .list:last-child {
        border-right: 0;
    }

    .sec_story .list_area .list .flex_box {
        left: 5vw;
        flex-direction: column;
        align-items: flex-start;
    }

    .sec_story .list_area .list.active .flex_box {
        width: 65vw;
    }

    .sec_story .list_area .list .text_area {
        margin-right: 0;
    }

    .sec_story .list_area .list .text_area .title {
        font-size: 5vw;
    }

    .sec_story .list_area .list .img_area {
        width: 65vw;
        margin-top: 5vw;
    }

    .sec_story .list_area .hash {
        font-size: 3.5vw;
    }
} */



@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.Poppins {
    font-family: 'Poppins', sans-serif;
}


@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Thin.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraLight.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff2') format('woff2'), */
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.woff') format('woff'), */
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Light.ttf') format("truetype"); */
    font-display: swap;
}
/*
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
} */

/* @font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
} */

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff2') format('woff2'), */
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff2') format('woff2'), */
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.woff') format('woff'), */
        /* url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Bold.ttf') format("truetype"); */
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-ExtraBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Black.ttf') format("truetype");
    font-display: swap;
}


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap') .Pretendard {
    font-family: 'Pretendard';
}

.Montserrat {
    font-family: "Montserrat", sans-serif;
}

.en {
    font-family: "Montserrat", sans-serif !important;
}

.en .bold {
    font-weight: bold !important;
}


/*sub_menu*/
@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

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

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

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 990;
    background: transparent;
}

header nav ul li:hover>.sub_menu:first-of-type {
    display: block;
    opacity: 1;
    -webkit-animation: fadeInFromNone 0.3s ease-out;
    -moz-animation: fadeInFromNone 0.3s ease-out;
    -o-animation: fadeInFromNone 0.3s ease-out;
    animation: fadeInFromNone 0.3s ease-out;
}

header .sub_menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    padding: 20px 0;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.12);
    -webkit-box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.12);
    display: none;
    opacity: 0;
    will-change: opacity;
    border-top: 2px solid #000;
    padding: 20px 0 20px 30px
}

header .sub_menu .sub_menu_list li {
    float: none;
}

header .sub_menu .sub_menu_list li a {
    display: flex;
    padding: 10px 80px 10px 0;
    position: relative;
    cursor: pointer
}

header .sub_menu .sub_menu_list li a span {
    position: relative;
    white-space: nowrap;
    font-size: 14px;
    color: #000;
}

header .sub_menu .sub_menu_list li a i {
    margin-left: 10px;
    position: absolute;
    top: 45%;
    right: 45px;
    opacity: 0;
    transform: translateY(-50%);
    color: #000;
    transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease;
    font-size: 15px;
}

header .sub_menu .sub_menu_list li a:hover i {
    opacity: 1;
    right: 35px;
}

header .sub_menu .sub_menu_list .dep_list .dep2 {
    top: -2px;
    transform: none;
}


header .gnb_all {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease, height 0.5s ease;
    margin-left: auto;
}

header .gnb_all a {
    padding: 0 !important;
    display: flex;
}

header .gnb_all .McButton {
    width: 35px;
    height: 22px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    z-index: 9999;
}

header .gnb_all .McButton:hover {
    will-change: transform;
}

header .gnb_all .McButton.active {
    top: 1px;
    left: 1px;
}

header .gnb_all .McButton b {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
    will-change: transform;
}

header .gnb_all .McButton.active b {
    background: #fff;
}

header .gnb_all .McButton b:nth-child(1) {
    top: 0;
}

header .gnb_all .McButton b:nth-child(2) {
    top: calc(50% - 0.5px);
}

header .gnb_all .McButton b:nth-child(3) {
    top: 100%;
}

header .h_util {
    display: flex;
    align-items: center;
    margin-left: 0;
    padding-left: 0
}

header .h_util>ul,
header .h_util>div {
    float: left;
}

header .h_util .h_login {
    margin-left: 15px;
    display: inline-flex;
    align-items: center;
}

header .h_util .h_login li a {
    padding: 10px;
}

header .h_util .h_login li a span {
    display: flex;
    align-items: center;
    font-size: 16px;
    transition: color 1s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    letter-spacing: 0.05em;
}

header .h_util .h_login li a span i {
    margin-right: 5px;
    font-size: 24px;
}

header .h_gnb {
    padding: 0;
    margin: 0 30px 0 auto;
}

header .h_banner {
    transition: height 0.5s cubic-bezier(0.2, 1.4, 0.8, 1.1);
    position: relative;
}

header .h_cont {
    background: transparent;
    height: 120px;
    transition: height 0.5s cubic-bezier(0.2, 1.4, 0.8, 1.1) 0.2s, box-shadow 0.3s ease, background 0.3s ease;
    padding: 0 45px;
    display: flex;
    align-items: center;
    position: relative;
}

header .h_cont>div,
header .h_cont>nav {
    float: left;
    height: 100%;
    display: flex;
    align-items: center;
}

header .h_cont>div a {
    padding: 15px 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


header .h_logo {
    padding-right: 0;
    margin-right: 0;
    width: auto
}

header .h_logo svg {
    transition: all 0.3s ease;
    width: 200px;
    max-width: 100%;
}

header .h_nav>li {
    float: left;
    height: 100%;
    position: relative;
}

header .h_nav>li>a {
    font-size: 16px;
    padding: 15px;
    transition: color 1s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    cursor: pointer;
}

header .h_nav>li>a>.h_title,
header .h_util ul>li>a>span {
    position: relative;
    color: #000;
    line-height: 1;
}

header .h_nav>li>a>.h_title:before,
header .h_util ul>li>a>span:before {
    content: "";
    position: absolute;
    top: 60%;
    left: -10%;
    opacity: 0.15;
    background-position: 0 95%;
    background-repeat: no-repeat;
    transition: width 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    width: 0%;
    height: 40%;
    background: #000;
    z-index: 0;
}

header .h_nav>li>a:hover .h_title:before,
header .h_util ul>li>a:hover span:before {
    width: 120%;
}

header .h_nav>li.hover>a .h_title:before,
header .h_util ul>li.hover>a span:before {
    width: 120%;
}

header .h_nav>li>a>span {
    transition: all 0.3s ease;
    font-size: 16px;
}

header .McButton {
    width: 35px;
    height: 22px;
    transition: width 0.3s ease, height 0.3s ease;
}

header .McButton b {
    height: 3px;
    transition: width 0.3s ease, height 0.3s ease;
}

/*스크롤 내릴시*/
header.scroll_down .h_banner {
    height: 0;
}

header.scroll_down .h_cont {
    height: 100px;
    background: #fff;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.08)
}

header.scroll_down .h_cont:before {
    height: 1px;
}


header.scroll_down .h_logo {
    padding-right: 0;
    width: 200px;
}

header.scroll_down .h_logo img,
header.scroll_down .h_logo svg {
    width: 100%;
}

header.scroll_down .h_nav>li>a>span,
header.scroll_down .h_util .h_login li a span {
    font-size: 15px;
}

header.scroll_down .McButton {
    width: 28px;
    height: 19px;
}

header.scroll_down .h_nav>li>a {
    padding: 24px 20px;
}

header.scroll_down .sub_menu {
    top: calc(100% + 10px);
}

header.scroll_down .h_util .h_login li a span {
    color: #000;
}

header.scroll_down .McButton b {
    height: 2.5px;
    background: #000
}


header .all_menu {
    width: 100%;
    max-width: 580px;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9996;
    background: rgba(0, 0, 0, 0.6);
    padding: 150px 100px 80px 100px;
    transform: translate(100%);
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    will-change: transform;
    overflow-y: auto;
    overflow-x: hidden;
    will-change: transform, opacity;
    backface-visibility: hidden;
    backdrop-filter: saturate(180%) blur(20px);
}

header.scroll_down .all_menu {
    top: 0;
}

header .all_menu_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9995;
    background: rgba(0, 0, 0, 0.15);
    visibility: hidden;
    opacity: 0;
    transition: all 2.6s cubic-bezier(.19, 1, .22, 1) 0.5s;
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    backdrop-filter: blur(3px);
}

header .all_menu ul,
header .all_menu>div {
    margin-bottom: 50px;
}

header .all_menu .list_area ul:last-of-type {
    margin-bottom: 0;
}

header .all_menu ul li {
    float: none;
}

header .all_menu li a {
    color: #fff;
}

header .login_area:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

header .login_area {
    position: relative;
}

header .login_area li {
    float: left;
}

header .login_area .line {
    height: 100%;
    width: 1px;
    background: #fff;
    padding: 0;
}

header .all_menu .login_area li {
    float: left;
}

header .login_area li a {
    font-size: 18px;
    position: relative;
    padding: 0 25px;
    letter-spacing: .5px;
    color: #fff;
    display: block;
}

header .login_area li a span {
    color: #fff;
    ;
    display: flex;
    align-items: center;
}

header .all_menu_mo .login_area li a span {
    color: #000;
}

header .login_area li:first-child a {
    padding-left: 0;
}

header .login_area li a:after {
    content: "";
    width: 1px;
    height: 55%;
    background: #fff;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

header .login_area li:last-child a {
    padding-right: 0;
}

header .login_area li:last-child a:after {
    display: none;
}

header .login_area li:last-child {
    margin-right: 0;
}

header .all_menu .list_area>li {
    margin-bottom: 10px;
}

header .all_menu .list_area>li:last-child {
    margin-bottom: 0;
}

header .all_menu .list_area>li>a {
    font-size: 25px;
    ;
    display: block;
    line-height: normal;
    padding: 7px 0;
    position: relative;
    transition: opacity 2.6s cubic-bezier(.19, 1, .22, 1);
    cursor: pointer;
}

header .all_menu .list_area>li>a:after {
    content: "";
    position: absolute;
    top: 0;
    left: 5px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    -webkit-transition: 300ms;
    transition: 300ms;
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

header .all_menu .list_area>li:hover>a:after {
    opacity: 1;
    -webkit-transform: scale(1) translateX(-50%);
    -ms-transform: scale(1) translateX(-50%);
    transform: scale(1) translateX(-50%);
}



header .all_menu .date_area {
    margin-bottom: 45px;
}

header .all_menu .date_area .list_title {
    font-size: 25px;
    color: #fff;
    margin-bottom: 15px;
}

header .all_menu .date_area li {
    margin-bottom: 15px;
}

header .all_menu .date_area li:last-child {
    margin-bottom: 0;
}

header .all_menu .date_area li a {
    font-size: 20px;
    ;
    color: #ee6c14;
}

header .all_menu .date_area li .day {
    width: 150px;
    position: relative;
    display: inline-block;
    color: #fff;
}

header .all_menu .date_area li.holiday_list {
    margin-top: -10px;
}

header .all_menu .date_area li .day.holiday {
    width: auto;
    color: #ecb849;
    margin-top: -10px;
    font-size: 18px;
}

header .all_menu .date_area li .day span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

header .all_menu .date_area li .day .word_first {
    left: 0;
}

header .all_menu .date_area li .day .word02 {
    left: 50%;
    transform: translate(-50%, -50%);
}

header .all_menu .date_area li .day .word_last {
    right: 0
}

header .all_menu .date_area li .day.four_word .word02 {
    left: 50%;
    transform: translate(-100%, -50%);
}

header .all_menu .date_area li .day.four_word .word03 {
    left: 75%;
    transform: translate(-100%, -50%);
}

header .all_menu .date_area li .time {
    color: #fff;
}

header .all_menu .tel_area {
    font-size: 25px;
    color: #fff;
}

header .all_menu .tel_area .list_title {
    margin-right: 70px;
}

header .all_menu .event_area li a {
    font-size: 35px;
    display: block;
    line-height: 35px;
    padding: 10px 0;
    ;
    transition: all .5s;
}

header .all_menu .event_area .point a {
    color: #fff;
}

header .all_menu .event_area li a {
    transition: opacity 2.6s cubic-bezier(.19, 1, .22, 1);
    will-change: opacity;
}

header .all_menu .event_area li a .branch_text {
    font-size: 20px;
    color: inherit;
}

header .all_menu_mo {
    display: none;
}

.header_blank {
    height: 70px;
    transition: height 0.5s cubic-bezier(0.2, 1.4, 0.8, 1.1);
    background: #f4f3ec;
}

.header_blank.active {
    height: 70px !important;
}



header .all_menu .list_area>li {
    margin-bottom: 15px;
    position: relative;
    width: 100%;
    transition: opacity 2.6s cubic-bezier(.19, 1, .22, 1);
}

header .all_menu .list_area>li:last-child {
    margin-bottom: 0;
}

header .all_menu .list_area .detail_icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    transition: transform 0.5s ease;
    will-change: transform;
}

header .all_menu .list_area .detail_icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}

header .all_menu .list_area .detail_icon .width {
    width: 15px;
    height: 2px;
}

header .all_menu .list_area .detail_icon .height {
    width: 2px;
    height: 15px;
}

header .all_menu .list_area .active .detail_icon {
    transform: translateY(-50%) rotate(180deg);
}

header .all_menu .list_area .active .height {
    opacity: 0;
}

header .all_menu .list_area_sub {
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    /*top:15px;*/
    top: 10px;
    transition: height 1s cubic-bezier(.77, 0, .175, 1) 0.2s;
    position: relative;
}

header .all_menu .list_area_sub li {
    margin-bottom: 10px;
    float: none;
}

header .all_menu .list_area_sub li:last-child {
    margin-bottom: 0;
}

header .all_menu .list_area_sub li a {
    display: block;
    padding-left: 5px;
    color: #fff;
    font-weight: 400;
    transition: all 0.3s ease;
    font-size: 20px;
}

header .all_menu .list_area>li.on {
    opacity: 1 !important;
}

header .all_menu .list_area>li.off {
    opacity: 0.5 !important;
}

header .all_menu .list_area>li.on>a:after {
    opacity: 1;
    transform: scale(1) translateX(-50%);
}

header .all_menu .list_area>li.off>a:after {
    display: none;
}


header .all_menu .sns_area ul {
    display: flex;
}

header .all_menu .sns_area li {
    margin-right: 20px;
}

header .all_menu .sns_area li:last-child {
    margin-right: 0;
}

header .all_menu .sns_area li a i {
    font-size: 25px;
    color: #fff;
}

@media(max-width:1750px) {

    header .h_cont {
        padding: 0 30px;
    }

}

@media(max-width:1500px) {
    header .h_util .h_login {
        display: none;
    }

    header .gnb_all {
        margin-left: 0;
    }

    header .gnb_all .McButton {
        margin-right: 0;
    }
}

@media(max-width:1366px) {

    .header_blank {
        height: 60px;
    }

    header .h_banner,
    header .h_banner .slick-slide {
        height: 60px;
    }

    .h_banner .slick-slide .left_area .h_banner_title {
        font-size: 25px;
    }

    header .h_gnb {
        margin: 0 auto;
    }

    header .ham-lang {
        margin-right: 20px;
    }

    .header_blank.active {
        height: 60px !important;
    }
}

@media(max-width:1024px) {

    .header_blank {
        height: 25vw;
    }

    header .h_banner,
    header .h_banner .slick-slide {
        height: 10vw;
    }

    header .h_banner.active,
    header .h_banner.active .slick-slide {
        height: 0px;
    }

    header .h_cont:before {
        height: 0.2vw;
        width: 100% !important;
        display: none;
    }

    header.scroll_down .h_logo img,
    header.scroll_down .h_logo svg {
        width: 100%;
    }

    header .h_banner .slick-slide .left_area .h_banner_title {
        font-size: 30px;
    }

    header .h_banner .slick-slide .right_area .h_banner_btn {
        font-size: 20px;
    }

    header .h_logo {
        width: auto;
    }

    header .h_logo svg {
        width: 33.8vw !important;
    }

    header .h_cont {
        padding: 0 5vw !important;
        height: 15vw !important;
        background: #fff;
        flex-wrap: nowrap;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    }

    header .h_gnb {
        display: none !important;
    }

    header .h_util {
        margin-left: auto;
        width: auto !important;
        padding: 0 !important;
        border: none !important;
        margin-right: 0;
    }

    header .h_util .gnb_all {
        width: auto;
        margin-top: -0.5vw;
    }

    header .h_util .quick_counseling {
        display: inline-flex;
        width: auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-right: 5vw;
    }

    header .h_util .quick_counseling .icon_area {
        margin-bottom: 0;
        width: 5vw;
    }

    header .h_util .quick_counseling .icon_area img {
        width: 100%;
    }

    header .h_util .quick_counseling .icon_text {
        font-size: 2.5vw;
    }

    header .gnb_all {
        margin-left: 30px;
    }

    header .all_menu {
        display: none !important;
    }

    header .all_menu_bg {
        display: none !important;
    }

    header .gnb_all {
        height: 15px;
        top: 0 !important;
    }

    header .McButton b {
        width: 25px;
        background: #000 !important;
        transition: background 2.6s cubic-bezier(0.19, 1, 0.22, 1) 0.2s !important;
        height: 3px !important;
    }

    header .McButton {
        width: 25px !important;
        height: 15px !important;
        top: 0;
        will-change: transform;
        transition: none !important;
    }

    header .h_cont .h_logo {
        min-height: 1px;
        margin-right: auto;
        width: 25vw;
        border: none;
    }

    header .all_menu_mo {
        width: 60vw;
        height: 100vh;
        background: #fff;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9998;
        transform: translateX(100%);
        will-change: transform;
        display: block;
    }

    header .all_menu_mo .scroll_area>ul>li>a {
        color: #000;
        font-size: 30px;
        font-weight: bold;
        line-height: normal;
        display: block;
        position: relative;
        cursor: pointer;
        font-weight: bold;
        transition: opacity 2.6s cubic-bezier(.19, 1, .22, 1);
        will-change: opacity;
    }

    header .all_menu_mo_bg {
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9997;
        visibility: hidden;
        opacity: 0;
        display: block
    }

    header .all_menu_mo .login_area {
        padding: 10px 20px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    header .all_menu_mo .login_area li:first-child a {
        padding-left: 0;
    }

    header .all_menu_mo .login_area li a {
        padding: 0 15px;
        font-size: 30px;
        letter-spacing: .5px;
        color: #000;
        font-weight: bold;
    }

    header .all_menu_mo .login_area li a:after {
        background: #a0a0a0;
        height: 50%;
    }

    header .all_menu_mo .scroll_area {
        height: calc(100vh - 133px);
        overflow: auto;
        -ms-overflow-style: none;
    }

    header .all_menu_mo .scroll_area::-webkit-scrollbar {
        display: none;
    }

    header .all_menu_mo .scroll_area>ul,
    header .all_menu_mo .scroll_area>div {
        padding: 10px 65px 10px 20px
    }

    header .all_menu_mo .scroll_area .list_area {
        margin-bottom: 10px;
        /* height:calc(100vh - 366px); overflow:auto;*/
        padding-top: 0;
    }

    header .all_menu_mo .scroll_area .list_area>li {
        margin-bottom: 30px;
        position: relative;
        width: 100%;
    }

    header .all_menu_mo .scroll_area .list_area>li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        transition: transform 0.5s ease;
        will-change: transform;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #999;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon .width {
        width: 20px;
        height: 3px;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon .height {
        width: 3px;
        height: 20px;
    }

    header .all_menu_mo .scroll_area .list_area .active .detail_icon {
        transform: translateY(-50%) rotate(180deg);
    }

    header .all_menu_mo .scroll_area .list_area .active .height {
        opacity: 0;
    }

    header .all_menu_mo .scroll_area .list_area_sub {
        padding-top: 0px;
        height: 0;
        overflow: hidden;
        /*top:15px;*/
        top: 2.5vw;
        transition: height 1s cubic-bezier(.77, 0, .175, 1) 0.2s;
        position: relative;
    }

    header .all_menu_mo .scroll_area .list_area_sub li {
        margin-bottom: 15px;
        float: none;
    }

    header .all_menu_mo .scroll_area .list_area_sub li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .list_area_sub li a {
        display: block;
        padding-left: 5px;
        color: #999;
        font-weight: 400;
        transition: color 0.3s ease;
        font-size: 25px;
        color: inherit;
    }

    header .all_menu_mo .scroll_area .list_area_sub li a:hover {
        color: #222;
    }

    header .all_menu_mo .scroll_area .time_area .title {
        color: #000;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 30px;
        display: flex;
        align-items: center;
    }

    header .all_menu_mo .scroll_area .time_area .title i {
        font-size: 30px;
        position: relative;
        /*top:2px;*/
        margin-left: 5px;
    }

    header .all_menu_mo .scroll_area .time_area ul li {
        color: #999;
        font-size: 25px;
        font-weight: 400;
        float: none;
        margin-bottom: 15px;
    }

    header .all_menu_mo .scroll_area .time_area ul li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .time_area ul li .day {
        display: inline-flex;
        margin-right: auto;
        width: 15vw;
    }

    header .all_menu_mo .scroll_area .time_area ul li.holiday_list {
        margin-top: 2vw
    }

    header .all_menu_mo .scroll_area .time_area ul li .day.holiday {
        width: auto;
    }

    header .all_menu_mo .scroll_area .family_area {
        padding-bottom: 106px;
    }

    header .all_menu_mo .scroll_area .family_area li {
        float: none;
        margin-bottom: 5px;
    }

    header .all_menu_mo .scroll_area .family_area li .branch_text {
        font-size: 12px;
    }

    header .all_menu_mo .scroll_area .family_area li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .family_area li a {
        font-size: 30px;
        letter-spacing: .5px;
        position: relative;
    }

    header .all_menu_mo .scroll_area .banner_area {
        padding: 10px;
    }

    header .all_menu_mo .scroll_area .banner_area img {
        max-width: 100%;
    }

    header .all_menu_mo .scroll_area .sns_area:after {
        content: "";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }

    header .all_menu_mo .scroll_area .sns_area li {
        float: left;
        margin-right: 25px;
    }

    header .all_menu_mo .scroll_area .sns_area li:last-child {
        margin-right: 0;
    }

    header .all_menu_mo .scroll_area .sns_area li a {
        font-size: 22px;
        color: #000;
    }

    header .gnb_all .McButton {
        margin-right: 0;
    }

    header .h_cont .h_util .gnb_all .McButton b {
        background: #000 !important;
    }

    header .h_util .h_login {
        margin-right: 5vw;
        display: none;
    }

    header .h_util .h_login li {
        width: 5.4vw;
        margin-right: 1.3vw;
        border-radius: 100%;
        overflow: hidden;
    }

    header .h_util .h_login li:last-child {
        margin-right: 0;
    }


}





.ham-lang {
    background: transparent;

    position: relative;
    margin-right: 0;

}

header.scroll_down .h_cont .ham-lang {
    background: #fff;
}

header.scroll_down .h_cont .ham-lang-list.active li {
    background: #fff;
}



.ham-lang .ham-lang-btn {


    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 7px 15px;
    color: #000;
    cursor: pointer;
}

.ham-lang .ham-lang-btn span {
    font-weight: 500;
}


.ham-lang-icon {
    margin-left: 10px;
}

.ham-lang-btn i {
    display: flex;
    flex-direction: column;
}

.ham-lang .ham-lang-btn i {
    color: #000;
}



.ham-lang a {

    font-weight: 500;
    font-size: 13px !important;
    text-align: center;
    display: block;
    padding: 10px 0;
    color: #000;
    background: #fff;
}

.ham-lang-list {
    z-index: 104;
    position: absolute;
    display: none;
    width: 100%;
    border: 1px solid #000;
}

.ham-lang-list.active {
    display: block;
}

.ham-lang .ham-lang-btn,
.ham-lang-list.active li {
    float: none !important;
}

.ham-lang a {
    padding: 10px 20px !important;
    justify-content: flex-start;
}

header .login_area {
    z-index: 999;
}



.ham-lang .ham-lang-btn span,
.ham-lang a {
    line-height: 1;
}

.lyrGetConsult {
    position: fixed;
    bottom: 180px;
    right: 55px;
    z-index: 990;
    height: auto;
    width: 60px;
}


header .ham-lang a .icon {
    width: 20px;
    margin-right: 5px;
}

header .ham-lang a .text {
    width: 20px;
}

header .ham-lang a .icon.jp {
    border: 1px solid #dfdfdf;
    border-radius: 100%;
    box-sizing: content-box;
}


@media(max-width:1024px) {
    header .ham-lang a .icon {
        width: 3vw;
        margin-right: 1vw;
    }

    .ham-lang .ham-lang-btn {
        font-size: 3vw;
    }

    header .McButton {
        width: 50px !important;
        height: 30px !important;
    }

    .ham-lang a {
        font-size: 2vw !important
    }
}

@media(max-width:800px) {









    header .all_menu_mo {
        width: 60vw;
        height: 100vh;
        background: #fff;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9998;
        transform: translateX(100%);
        will-change: transform;
        display: block;
    }

    header .all_menu_mo .scroll_area>ul>li>a {
        color: #000;
        font-size: 16px;
        font-weight: bold;
        line-height: normal;
        display: block;
        position: relative;
        cursor: pointer;
        font-weight: bold;
        transition: opacity 2.6s cubic-bezier(.19, 1, .22, 1);
        will-change: opacity;
    }

    header .all_menu_mo_bg {
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9997;
        visibility: hidden;
        opacity: 0;
        display: block
    }

    header .all_menu_mo .login_area {
        padding: 10px 20px;
        margin-top: 50px;
        margin-bottom: 20px;
    }

    header .all_menu_mo .login_area li:first-child a {
        padding-left: 0;
    }

    header .all_menu_mo .login_area li a {
        padding: 0 15px;
        font-size: 16px;
        letter-spacing: .5px;
        color: #000;
        font-weight: bold;
    }

    header .all_menu_mo .login_area li a:after {
        background: #a0a0a0;
        height: 50%;
    }

    header .all_menu_mo .scroll_area {
        height: calc(100vh - 133px);
        overflow: auto;
        -ms-overflow-style: none;
    }

    header .all_menu_mo .scroll_area::-webkit-scrollbar {
        display: none;
    }

    header .all_menu_mo .scroll_area>ul,
    header .all_menu_mo .scroll_area>div {
        padding: 10px 20px;
    }

    header .all_menu_mo .scroll_area .list_area {
        margin-bottom: 10px;
        /* height:calc(100vh - 366px); overflow:auto;*/
        padding-top: 0;
    }

    header .all_menu_mo .scroll_area .list_area>li {
        margin-bottom: 15px;
        position: relative;
        width: 100%;
    }

    header .all_menu_mo .scroll_area .list_area>li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        transition: transform 0.5s ease;
        will-change: transform;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #999;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon .width {
        width: 8px;
        height: 1px;
    }

    header .all_menu_mo .scroll_area .list_area .detail_icon .height {
        width: 1px;
        height: 8px;
    }

    header .all_menu_mo .scroll_area .list_area .active .detail_icon {
        transform: translateY(-50%) rotate(180deg);
    }

    header .all_menu_mo .scroll_area .list_area .active .height {
        opacity: 0;
    }

    header .all_menu_mo .scroll_area .list_area_sub {
        padding-top: 0px;
        height: 0;
        overflow: hidden;
        /*top:15px;*/
        top: 2.5vw;
        transition: height 1s cubic-bezier(.77, 0, .175, 1) 0.2s;
        position: relative;
    }

    header .all_menu_mo .scroll_area .list_area_sub li {
        margin-bottom: 15px;
        float: none;
    }

    header .all_menu_mo .scroll_area .list_area_sub li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .list_area_sub li a {
        display: block;
        padding-left: 5px;
        color: #999;
        font-weight: 400;
        transition: color 0.3s ease;
        font-size: 13px;
        color: inherit;
    }

    header .all_menu_mo .scroll_area .list_area_sub li a:hover {
        color: #222;
    }

    header .all_menu_mo .scroll_area .time_area .title {
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    header .all_menu_mo .scroll_area .time_area .title i {
        font-size: 16px;
        position: relative;
        /*top:2px;*/
        margin-left: 5px;
    }

    header .all_menu_mo .scroll_area .time_area ul li {
        color: #999;
        font-size: 12px;
        font-weight: 400;
        float: none;
        margin-bottom: 2px;
    }

    header .all_menu_mo .scroll_area .time_area ul li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .time_area ul li .day {
        display: inline-flex;
        margin-right: auto;
        width: 15vw;
    }

    header .all_menu_mo .scroll_area .time_area ul li.holiday_list {
        margin-top: 2vw
    }

    header .all_menu_mo .scroll_area .time_area ul li .day.holiday {
        width: auto;
    }

    header .all_menu_mo .scroll_area .family_area {
        padding-bottom: 106px;
    }

    header .all_menu_mo .scroll_area .family_area li {
        float: none;
        margin-bottom: 5px;
    }

    header .all_menu_mo .scroll_area .family_area li .branch_text {
        font-size: 12px;
    }

    header .all_menu_mo .scroll_area .family_area li:last-child {
        margin-bottom: 0;
    }

    header .all_menu_mo .scroll_area .family_area li a {
        font-size: 15px;
        letter-spacing: .5px;
        position: relative;
    }

    header .all_menu_mo .scroll_area .banner_area {
        padding: 10px;
    }

    header .all_menu_mo .scroll_area .banner_area img {
        max-width: 100%;
    }

    header .all_menu_mo .scroll_area .sns_area:after {
        content: "";
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }

    header .all_menu_mo .scroll_area .sns_area li {
        float: left;
        margin-right: 25px;
    }

    header .all_menu_mo .scroll_area .sns_area li:last-child {
        margin-right: 0;
    }

    header .all_menu_mo .scroll_area .sns_area li a {
        font-size: 22px;
        color: #000;
    }

    header .gnb_all .McButton {
        margin-right: 0;
    }

    header .h_cont .h_util .gnb_all .McButton b {
        background: #000 !important;
    }

    header .h_util .h_login {
        margin-right: 5vw;
        display: none;
    }

    header .h_util .h_login li {
        width: 5.4vw;
        margin-right: 1.3vw;
        border-radius: 100%;
        overflow: hidden;
    }

    header .h_util .h_login li:last-child {
        margin-right: 0;
    }

    header .McButton {
        width: 25px !important;
        height: 15px !important;
        top: 0;
        will-change: transform;
        transition: none !important;
    }

    header .gnb_all {
        margin-left: 0;
    }

    header .ham-lang {
        margin-left: 0;
        margin-top: 0;
        margin-right: 5vw;
        border-width: 0.2vw;
        display: flex;
    }

    .ham-lang-list {
        border-width: 0.2vw;
        top: 7vw;
    }




    header.scroll_down .h_cont .ham-lang-list li {
        background: #fff;
    }

    .ham-lang .ham-lang-btn {
        font-size: 3.5vw;
        margin-right: 0;
        display: inline-flex;
        padding: 1vw 2vw
    }

    .ham-lang-btn .ham-lang-icon {
        margin-left: 1vw;
        font-size: 4vw;
    }

    .ham-lang a {
        font-size: 3vw !important;
        padding: 2vw 0 !important;
        background: #fff;
    }

    .ham-lang .ham-lang-btn i {
        font-size: 4vw;
    }

    .ham-lang .ham-lang-btn i+i {
        margin-top: -1vw;
    }

    header .ham-lang a .icon {
        width: 4vw;
        margin-right: 1vw;
    }

    header .ham-lang a .icon.jp {
        border-width: 0.1vw;
    }
}


/*------------유튜브 라이트박스 CSS 연동 시작------------*/

body .mfp-image-holder .mfp-close,
body .mfp-iframe-holder .mfp-close {
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    -o-transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s, -webkit-transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    color: #fff;
    width: 40px;
    height: 40px;
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.2);
    border: 2px solid #fff;
    opacity: 1;
    display: inline-block;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 5px;
    top: -15px;
    right: -15px;
}

body .mfp-iframe-holder .mfp-close i {
    pointer-events: none;
}

.mfp-arrow-left {
    left: 400px !important;
}

.mfp-arrow-right {
    right: 400px !important;
}


.mfp-arrow:before,
.mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a {
    display: none !important;
}

button.mfp-arrow {
    margin-top: 0 !important;
    height: 50px !important;
    ;
}

button.mfp-arrow span {
    display: block;
}

button.mfp-close span,
button.mfp-arrow span {
    color: #fff;
    font-size: 15px;
    pointer-events: none;
}

button.mfp-arrow span i {
    color: inherit;
    font-size: inherit;
    margin: 0 10px
}



/*클릭시 나오는 유튜브*/
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

body .mfp-iframe-holder .mfp-close i {
    color: #fff;
}

@media(max-width:1024px) {
    .mfp-iframe-holder .mfp-content {
        width: 95% !important;
    }

    body .mfp-image-holder .mfp-close,
    body .mfp-iframe-holder .mfp-close {
        width: 30px;
        height: 30px;
        border-radius: 3px;
        top: -10px;
        right: -10px;
    }

    body .mfp-iframe-holder .mfp-close i {
        font-size: 20px;
    }

    .mfp-arrow:before,
    .mfp-arrow:after,
    .mfp-arrow .mfp-b,
    .mfp-arrow .mfp-a {
        display: none !important;
    }

    button.mfp-arrow {
        margin-top: 0 !important;
        height: 50px !important;
        ;
    }

    button.mfp-arrow span {
        display: block;
    }

    button.mfp-close span,
    button.mfp-arrow span {
        color: #fff;
        font-size: 15px;
        pointer-events: none;
    }

    .mfp-arrow-left {
        left: 15px !important;
    }

    .mfp-arrow-right {
        right: 15px !important;
    }

    .mfp-arrow-left i {
        margin-right: 10px;
    }

    .mfp-arrow-right i {
        margin-left: 10px;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {
    body .mfp-container {
        padding: 40px;
    }

    body button.mfp-arrow {
        margin-top: 20px !important;
        width: auto;
    }

    button.mfp-arrow span {
        font-size: 20px;
    }

    body .mfp-arrow-left {
        margin-left: 40px;
    }

    body .mfp-arrow-right {
        margin-right: 40px;
    }

    body .mfp-image-holder .mfp-close,
    body .mfp-iframe-holder .mfp-close {
        width: 50px;
        height: 50px;
        top: -20px;
        right: -20px;
    }

    body .mfp-iframe-holder .mfp-close i {
        font-size: 25px;
    }
}

/*------------유튜브 라이트박스 CSS 연동 종료------------*/


.swal2-icon .swal2-icon-content {
    color: inherit !important;
    font-weight: 300;
}

.swal2-title i {
    margin-right: 10px;
}


/*sweet 얼럿창*/
.swal2-popup {
    font-size: 18px;
}

.swal2-container {
    z-index: 9999;
    font-size: 18px;
}

.swal2-title {
    line-height: 1.2em;
    align-items: center;
    justify-content: center;
    color: #20211f !important;
    font-weight: 500 !important;
    display: block !important;
}

.swal2-title i {
    margin-right: 5px;
    font-size: 1.2em;
    position: relative;
    top: 1px;
}

.swal2-icon {
    font-size: 15px;
}

.swal2-icon>div {
    font-size: inherit;
}

.swal2-container button {
    font-size: 50px;
}

.swal2-icon .swal2-icon-content {
    color: inherit;
}

.swal2-content {
    white-space: pre-line;
    color: #20211f !important;
    font-weight: 400 !important;
}

.swal2-actions {
    font-size: 18px;
}

.swal2-actions button {
    transition: all 0.3s ease 0s;
    outline: none;
    border: none;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 8px 8px rgba(0, 0, 0, 0.05), 0px 16px 16px rgba(0, 0, 0, 0.05);
}

.swal2-image {
    margin: 1.2em auto 2.25em
}

.swal2-footer a {
    color: #20211f;
    margin-left: 10px;
}

body .swal2-title {
    font-size: 20px;
    line-height: normal;
}

body .swal2-title.popup-title {
    font-size: 30px;
    font-weight: bold !important;
}

body .swal2-icon .swal2-icon-content {
    font-size: 40px;
}

.swal2-html-container {
    font-size: 16px;
    margin-top: 10px;
}

.swal2-popup button a {
    display: block;
    width: 100%;
    height: 100%;
}



@media(max-width:1024px) {

    /*sweet 얼럿창*/
    .swal2-image {
        margin: .5em 0 1.5em 0 !important;
    }

    .swal2-icon {
        border: .3em solid transparent
    }

    .swal2-title {
        font-size: 1.2em;
    }

    .swal2-header {
        padding: 0 10px !important;
    }

    .swal2-popup {
        width: 85%;
        padding: 0.8em !important;
    }

    .swal2-content {
        font-size: 0.8em !important;
        padding: 0 !important;
    }

    .swal2-footer {
        font-size: 12px !important;
    }

    .swal2-styled {
        padding: .5em 1.5em !important;
    }

    .swal2-image {
        margin: .5em 0 1.5em 0 !important;
    }

}


@media(max-width:820px) {
    body .swal2-title {
        font-size: 4vw;
    }

    body .swal2-title.popup-title {
        font-size: 5vw;
        font-weight: bold !important;
    }

    body .swal2-icon {
        font-size: 2.5vw;
    }

    body .swal2-icon .swal2-icon-content {
        font-size: 7vw;
    }

    .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen)>.swal2-modal {
        padding: 5vw;
    }

    .swal2-title {
        font-size: 7vw;
        flex-direction: column;
        color: #000;
    }

    .swal2-title i {
        margin-right: 0;
        margin-bottom: 2vw;
    }

    #swal2-content {
        font-size: 5vw;
        line-height: 1.41;
    }

    .swal2-actions {
        font-size: 4vw;
        margin: 3vw auto 0;
    }

}











/** text input **/
.input_area {
    width: 100%;
}

/*.input_type1 label, .input_type1 input, .input_type1 span{font-family: 'SpoqaHanSansNeo-Regular';}*/
.input_type1 label,
.input_type1 input,
.input_type1 span {
    font-family: inherit;
}

.input_type1 label {
    align-items: center;
    cursor: text;
    height: 50px;
    background: none;
    border: 1px solid #000;
    display: inline-flex;
    transition: all 0.3s ease, border 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    width: 100%;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.input_type1 label.input_focus {
    border: 1px solid #fdc13a !important;
}

.input_type1 label input {
    outline: none;
    border: none;
    width: 100%;
    height: 30px;
    padding: 0 15px;
    position: relative;
    top: 9px;
    background: transparent;
    font-size: 13px;
    transition: all 0.3s ease 0s;
}

.input_type1 label .label {
    position: absolute;
    top: calc(50% - 8px);
    left: 15px;
    font-size: 13px;
    line-height: normal;
    color: #000;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    pointer-events: none;
    font-weight: 400;
}

.input_type1 label input:not(:placeholder-shown)+span {
    color: #000;
    transform: translateY(-9px) scale(0.75);
}

.input_type1 label input:not(:-ms-input-placeholder)+span {
    color: #000;
    transform: translateY(-9px) scale(0.75)
}

.input_type1 label input:focus+span {
    color: #000 !important;
    transform: translateY(-9px) scale(0.75);
    transition-delay: 0.1s;
}

.input_type1 label input:-webkit-autofill,
.write label input:-webkit-autofill:hover,
.write label input:-webkit-autofill:focus,
.write label input:-webkit-autofill:active {
    box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #09130b;
}

.input_type1 label input:-webkit-autofill+span {
    transition: none !important;
}

input:-webkit-autofill::first-line {
    font-family: 'SpoqaHanSansNeo-Regular';
    color: #09130b;
    font-weight: 500;
}

/*input_type1 add_info*/
.input_type1.add_info {
    display: inline-flex;
    align-items: center;
}

.input_type1.add_info:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.input_type1.add_info>label,
.input_type1.add_info>div {
    float: left;
}

.input_type1.add_info .add_info {
    margin-left: 15px;
    font-size: 15px;
    color: #000;
    font-weight: 400;
}


.write {
    margin-bottom: 10px;
    display: flex;
}

.write:last-of-type {
    margin-bottom: 0;
}

.write .tit {
    height: 50px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
}

.write>label:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.chk_boxArea .write>label:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.write>label>div {
    float: left;
    margin-right: 10px
}

.write>label>div:last-of-type {
    margin-right: 0;
}

.write>label {
    display: flex;
    align-items: center;
}


/** Custom check_box **/
.hidden {
    margin: 0;
    padding: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    opacity: 0;
}

.hidden_input {
    opacity: 0 !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden;
    pointer-events: none;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    min-width: 0 !important;
}

label {
    cursor: pointer;
}

.chk_boxArea {
    display: inline-block;
}

.chk_boxArea:last-child {
    margin-right: 0;
}

.chk_boxArea .item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.chk_boxArea .item .chk_true1 {
    border: 1px solid #000 !important
}

.chk_boxArea .item .chk_true2 {
    color: #000 !important;
}

.chk_boxArea .item .cbx {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #d5dae7;
    box-sizing: border-box;
    transition: all 0.3s ease;
    cursor: pointer;
    background: #d3d3d3;
}

.chk_boxArea .item .cbx svg {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.chk_boxArea .item .cbx svg polyline {
    stroke-width: 3;
    stroke: #fff;
    /*#18CDA6;*/
}

/*체크모션*/
.chk_boxArea .item .cbx:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: #a0a0a0;
    transform: scale(0)
}

.chk_boxArea .item .cbx:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    box-shadow: 0 -18px 0 #000, 12px -12px 0 #000, 18px 0 0 #000, 12px 12px 0 #000, 0 18px 0 #000, -12px 12px 0 #000, -18px 0 0 #000, -12px -12px 0 #000;
    transform: translate(-50%) scale(0);
}

/*퍼지는모션*/
.chk_boxArea .item .cbx-lbl {
    position: relative;
    cursor: pointer;
    transition: color .3s ease;
    font-size: 15px;
    margin-bottom: 0;
    margin-left: 3px;
    color: #000;
}

/*텍스트 영역*/
.chk_boxArea .item .cbx-lbl:after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 1px;
    background: #a0a0a0;
    display: none
}

/*밑줄*/
.chk_boxArea .item input[type="checkbox"]:checked+.cbx {
    border: 1px solid #fff;
    background: #000;
}

.chk_boxArea .item input[type="checkbox"]:checked+.cbx polyline {
    border: 1px solid #fff;
    background: #000;
    stroke: #fff;
}

.chk_boxArea .item input:checked~.cbx-lbl {
    color: #000
}

.chk_boxArea .item input:checked+.cbx:before {
    transform: scale(1);
    opacity: 0;
    transition: all .3s ease;
}

.chk_boxArea .item input:checked+.cbx:after {
    transform: translate(-50%) scale(1);
    opacity: 0;
    transition: all .6s ease;
}

.chk_boxArea .item input:checked~.cbx-lbl:after {
    width: 100%;
    transition: all .4s ease
}

.chk_focus {
    border: 1px solid #fdc13a !important;
}

.chk_type2:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.chk_type2 .chk_boxArea {
    float: left;
    width: auto;
    margin-right: 50px;
}

.chk_type2 .chk_boxArea:last-of-type {
    margin-right: 0;
}

.chk_type2 .chk_boxArea .cbx-lbl {
    margin-left: 5px;
}

.chk_type2 .chk_boxArea .info_area:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.chk_write .chk_detail_btn {
    font-size: 15px;
    margin-left: 5px;
    background: #000;
    color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
    cursor: pointer;
}




/** custom select **/
select {
    box-sizing: border-box;
}

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    user-select: none;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.custom-select-wrapper select {
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

/*셀렉트창*/
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.custom-select-trigger {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 16px;
    font-weight: inherit;
    ;
    color: #000;
    line-height: normal;
    background-color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 13px
}

.custom-select-trigger:before {
    position: absolute;
    display: block;
    content: "";
    width: 1px;
    height: 80%;
    top: 50%;
    transform: translateY(-50%);
    right: 40px;
    border-right: 1px solid #000;
    transition: all 0.35s ease-out;
    transform-origin: 50% 0;
}

.custom-select-trigger:after {
    position: absolute;
    display: block;
    content: "";
    width: 6px;
    height: 6px;
    top: 50%;
    right: 16px;
    margin-top: -3px;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg) translateY(-50%);
    transition: all 0.35s ease-out;
    transform-origin: 50% 0;
}

.custom-select.opened .custom-select-trigger:after {
    margin-top: 3px;
    transform: rotate(-135deg) translateY(-50%);
}

.custom-options {
    position: absolute;
    display: block;
    top: auto;
    bottom: 60%;
    left: 0%;
    right: 0;
    width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
    background: #fff;
    transition: all 0.2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-15px);
    border: 0;
    max-height: 200px;
    overflow: auto;
}

.custom-options::-webkit-scrollbar {
    background-color: #e5e5e5;
    height: 4vw;
}

.custom-options:::-webkit-scrollbar-track {
    background-color: #e5e5e5;
}

.custom-options::-webkit-scrollbar-thumb {
    background-color: #313131;
    ;
}

.custom-select.opened .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(-11px);
    -webkit-box-shadow: 0px 10px 50px 0px rgba(43, 111, 246, 0.1);
    box-shadow: 0px 10px 50px 0px rgba(43, 111, 246, 0.1);
}

.custom-option {
    position: relative;
    display: block;
    padding: 10px 15px;
    color: #000;
    line-height: normal;
    cursor: pointer;
    transition: all 0.05s ease-in-out;
    font-size: 13px;
}

.custom-option:first-of-type {
    border-radius: 5px 5px 0 0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.custom-option:last-of-type {
    border-bottom: 0;
    border-radius: 0 0 5px 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.custom-option:hover {
    color: #000;
    background-color: rgba(0, 0, 0, .04);
}

.custom-option.selection {
    color: #000;
    background-color: #dcfaf7;
}

.select_box_area {
    min-width: 207px;
    width: 100%;
    margin-right: 15px;
    text-align: left;
    position: relative;
    display: flex;
    height: 100%;
}

.select_box_area:last-of-type {
    margin-right: 0;
}

.select_box_area .select_box {
    width: 100%;
}

.select_box select {
    width: 100%;
    /* height: 65px; */

    line-height: normal;
    font-family: inherit;
    border: 0;
    opacity: 1;
    filter: alpha(opacity=0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 15px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 13px;
    color: #000;
    /* font-weight: bold; */
    -webkit-appearance: none;
    /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #acbdbf;
    transition: all 0.3s ease;
    background: #f6f7fa;
    outline: none;
    line-height: normal;
}

.select_box option {
    font-size: 13px;
  }

.select_box.open {
    z-index: 3
}

.select_box label {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    color: #626262;
    z-index: -1;
    display: flex;
    align-items: center;
    padding-left: 15px;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 15px;
    font-weight: bold;
    border: 2px solid #eaeaea;
    border-radius: 5px;
    background: #f6f7fa;
    transition: all 0.3s ease 0s;
}




.select_box .select_focus {
    border: 1px solid #fdc13a !important;
    outline: none;
}

/** password **/
.password_area {
    padding: 0;
    position: relative;
    display: inline-block;
}

.write .password_icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.write .password_icon i {
    color: #000;
    opacity: 0.7;
}

/** email **/
.email_type .write {
    margin-bottom: 0;
}

.email_type:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.email_type>div {
    float: left;
}

.email_type .email_at {
    padding: 0 10px;
    font-size: 15px;
    color: #000;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.email_type .custom-select-trigger {
    border: 1px solid #d2d2d2;
}

.select_box_direct {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease-in-out;
    border: 1px solid #d2d2d2;
    background: #fff;
    padding: 15px;
    outline: none;
    padding: 0 15px;
    font-size: 13px;
    color: #000;
}

.box_shadow_area .inner_wrap {
    height: 100%;
    box-shadow: 0px 3px 9px 0px rgba(13, 13, 13, 0.1);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.box_shadow_area:hover .inner_wrap {
    box-shadow: none
}

.uppercase {
    text-transform: uppercase !important;
}

.swal2-html-container.scroll-text {
    max-height: 400px;
}

@media(max-width:820px) {
    .input_area textarea {
        height: 20vw;
        padding: 3vw;
        border: 0.3vw solid #d2d2d2;
        font-size: 3vw;
    }


    .chk_boxArea .item .cbx-lbl {
        font-size: 3.5vw;
    }

    .chk_write {
        flex-direction: column;
        align-items: flex-start;
    }

    .chk_write .chk_detail_btn {
        font-size: 3vw;
        margin-left: 1vw;
        padding: 0.5vw 1vw;
        border-radius: 0;
    }



    .input_type1 {
        height: 100%;
    }

    .input_type1 label {
        height: 8vw;
    }

    .input_type1 label .label {
        font-size: 3vw;
        left: 3vw;
        top: 2vw;
    }

    .input_type1 label input {
        top: 0;
        padding: 0 3vw;
        height: 100%;
        font-size: 3vw;
    }

    .input_type1 label input:not(:placeholder-shown)+span {
        transform: translateY(-1.5vw) scale(0.5);
        display: none;
    }

    .input_type1 label input:focus+span {
        transform: translateY(-1.5vw) scale(0.5);
        display: none;
    }

    .custom-options {
        height: 40vw;
        margin: 1vw 0;
    }

    .custom-option {
        padding: 2vw 3vw;
        font-size: 3vw;
    }


    .custom-select-trigger,
    .input_area textarea,
    .input_area textarea::placeholder {
        font-size: 3vw;
    }

    .custom-select-trigger {
        padding: 2vw 3vw;
    }

    .custom-select-trigger:after {
        width: 1vw;
        height: 1vw;
        right: 3vw;
        border-width: 0.3vw;
        margin-top: -0.5vw;
    }

    .custom-select-trigger:before {
        height: 50%;
        width: 0.2vw;
        right: 8vw;
        border-right: 0.3vw solid #c7d1d6;
    }

    .select_box_direct {
        padding: 0 3vw;
        width: calc(100% + 0.6vw);
        border: 0.3vw solid #d2d2d2;
    }

    .select_box_direct:focus {
        border: 0.3vw solid #000000;
    }

    .input_area label:hover,
    .custom-select-trigger:hover,
    .custom-select.opened .custom-select-trigger,
    .chk_boxArea .item:hover .cbx,
    .input_area textarea:hover {
        border: 0.3vw solid #000000;
    }


    body .sec_cont .chk_boxArea .item .cbx {
        width: 4vw;
        height: 4vw;
        border-width: 0.1vw;
        margin-right: 1vw;
    }

    body .sec_cont .chk_boxArea .item .cbx svg {
        width: 70%;
        height: 70%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    body .sec_cont .chk_boxArea .item .cbx svg polyline {
        stroke-width: 2;
    }

    .swal2-html-container.scroll-text {
        max-height: 50vw;
    }
}







/*btn*/
.btn {
    overflow: hidden;
    position: relative;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 30px;
    width: 100%;
    box-shadow: 0px 8px 15px 0px rgb(105 138 141 / 30%);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.btn:hover {
    box-shadow: none;
}

.btn .button_on_circle {
    background-color: #000;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    pointer-events: none;
    animation-timing-function: ease-in-out;
}

.btn .btn_inner {
    display: block;
    background: #000;
    color: #fff;
    font-size: 16px;
    letter-spacing: 1px;
    transition: 0.4s;
    padding: 15px 40px;
    text-align: center;
}

.btn .btn_txt_area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn .explode-circle {
    animation: explode 0.5s forwards;
}

.btn .desplode-circle {
    animation: desplode 0.5s forwards;
}

.btn a {
    cursor: pointer;
}

.btn a i {
    margin-left: 10px;
    font-size: inherit;
    font-size: 18px;
    position: relative;
}

.btn.search_btn a i {
    top: -1px;
}


.btn_area .btn {
    width: auto;
    margin-top: 0;
}


.btn_type2 {
    display: flex;
    justify-content: center;
    padding-top: 40px;
    border-top: 1px solid #dde2e6;
}

.btn_type2 .btn_area {
    float: left;
    margin-right: 20px;
}

.btn_type2 .btn_area:last-of-type {
    margin-right: 0;
}

.btn_focus {
    border: 1px solid #20211f !important;
}

@keyframes explode {
    0% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(0, 0, 0, 0.15);
    }

    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(0, 0, 0, 0.15);
    }
}

@keyframes desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: rgba(0, 0, 0, 0.15);
    }

    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(0, 0, 0, 0.15);
    }
}



/*flip btn*/
.flip_btn {
    height: 40px;
    perspective: 500px;
    position: relative;
    left: -20px;
    transition: left 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    margin: 20px 0 0 0;
    border-radius: 5px;
    overflow: hidden;
}

.flip_btn:hover {
    left: 0;
}

.flip_btn a {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-25px);
    transition: transform 0.3s;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 1px;
}

.flip_btn a i {
    margin-left: 10px
}

.flip_btn a .front,
.flip_btn a .back {
    margin: 0;

    height: 40px;
    line-height: 40px;
    position: absolute;
    padding: 0 20px;

}

.flip_btn a .front {
    background-color: transparent;
    color: #20211f;
    transform: rotateY(0) translateZ(14px);
}

.flip_btn a .back {
    background-color: rgba(255, 255, 255, 0);
    color: rgba(51, 51, 51, 0);
    transform: rotateX(90deg) translateZ(14px);
    overflow: hidden;
}

.flip_btn a .back:after {
    content: '';
    position: absolute;
    top: -32%;
    left: -10%;
    width: 120%;
    height: 50%;
    background: #f4f8f8;
    transform: rotate(8deg);
    transition: all 0.5s ease;
    transition-delay: 0.15s;
}

.flip_btn a:hover {
    transform: translateZ(-24px) rotateX(-90deg);

}

.flip_btn a:hover .front {
    background: #000;
    transition: all 0.8s ease;
}

.flip_btn a:hover .back {
    color: #fff;
    transition: color 0.4s linear;
    background: #000;
}

.flip_btn a:hover .back:after {
    transform: rotate(6deg) translate(100px, -18px);
}

/*말줄임표*/
.ellip,
.ellip-line {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.ellip {
    display: block;
    /*height: 100%;*/
}

.ellip-line {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}




@media(max-width:1024px) {


    /*link_motion*/
    .link_motion>svg {
        width: 45px;
        height: 45px;
        transform: translate(-50%, 2px) translateZ(0);
    }

    .link_motion:hover svg {
        transform: translate(-50%, 0) translateZ(0);
    }

}





/**button**/
.bano_button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: none;
    -webkit-clip-path: circle(100% at 50% 50%);
    clip-path: circle(100% at 50% 50%);
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2a2a;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
}

.bano_button>a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.bano_button>a>span {
    font-size: 13px;
    line-height: 1;
    font-family: 'SpoqaHanSansNeo-Regular';
    font-weight: bold;
}

.bano_button .arrow {
    margin-left: 15px;
    transition: left 1s cubic-bezier(.23, 1, .32, 1);
    position: relative;
}

.bano_button .arrow i {
    color: #2a2a2a
}

.bano_button .progress {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.bano_button:hover .progress {
    transform: scale3d(1.1, 1.1, 1);
}

.bano_button:hover .arrow {
    animation: bano_btn_arrow 0.8s ease infinite reverse
}

.bano_button .progress__circle {
    fill: none;
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 0.5px;
}

/*마우스오버전 동그라미*/
.bano_button:focus-visible .progress__circle {
    fill: #2a2a2a;
}

.bano_button .progress__path {
    fill: none;
    stroke-width: 0.5px;
    stroke: #2a2a2a;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s cubic-bezier(0.7, 0, 0.3, 1);
}

/*마우스오버시 동그라미*/
.bano_button:hover .progress__path {
    stroke-dashoffset: 0;
}


@media(max-width:800px) {
    .bano_button {
        width: 20vw;
        height: 20vw;
    }

    .bano_button .arrow {
        left: -2.5vw;
        animation: none !important;
        display: none;
    }

    .bano_button .arrow img {
        width: 7.6vw;
    }

    .bano_button .progress {
        top: 0;
        left: 0
    }

    .bano_button>span {
        font-size: 2.5vw;
        line-height: 1;
        letter-spacing: 0;
    }

}

.white .bano_button {
    color: #fff;
}

.white .bano_button .progress__circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4);
}

/*마우스오버전*/
.white .bano_button:focus-visible .progress__circle {
    fill: rgba(255, 255, 255, 0.4);
}

/*마우스오버전*/
.white .bano_button .progress__path {
    fill: none;
    stroke: #fff;
}

/*마우스오버시*/
.white .bano_button>span {
    color: #fff;
}

.white .bano_button .arrow i {
    color: #fff;
}






.view_btn {
    width: 120px;
    height: 120px;
    border-radius: 100%;
    z-index: 4;
}

.view_btn .btn_border_shape {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    background: transparent;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 2;
    border-radius: 100%;
    pointer-events: none;
}

.view_btn a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent;
    border-radius: 100%;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 500;
}


@media(max-width:1024px) {
    .title_lr_area .btn_area {
        white-space: nowrap
    }
}


@media(max-width:820px) {
    .magnetic_btn {
        transform: none !important;
    }

    .view_btn {
        width: 18vw;
        height: 18vw;
        transform: none !important
    }

    .view_btn .btn_border_shape {
        border: 0.1vw solid #000;
        top: 1vw;
        left: 1vw;
    }
}



.plane_button_area {
    width: 100%;
    height: 70px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.plane_button_area .btn_txt {
    color: #fff;
    position: absolute;
}

.plane_button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    --primary: #000000;
    --primary2: #f6f8ff;
    --primary-dark: #232942;
    --primary-dark2: #d1d6ee;
    --primary-darkest: #232942;
    --primary-darkest2: #8a91b4;
    /*--shadow: rgba(0, 0, 0, .2);*/
    --text: #362a89;
    --text-opacity: 1;
    --success: #eeecff;
    --success-x: -12;
    --success-stroke: 14;
    --success-opacity: 0;
    /* --border-radius: 7;*/
    --overflow: hidden;
    --x: 0;
    --y: 0;
    --rotate: 0;
    --plane-x: 0;
    --plane-y: 0;
    --plane-opacity: 1;
    --trails: rgba(255, 255, 255, .15);
    --trails-stroke: 57;
    --left-wing-background: var(--primary);
    --left-wing-first-x: 0;
    --left-wing-first-y: 0;
    --left-wing-second-x: 50;
    --left-wing-second-y: 0;
    --left-wing-third-x: 0;
    --left-wing-third-y: 100;
    --left-body-background: var(--primary);
    --left-body-first-x: 50;
    --left-body-first-y: 0;
    --left-body-second-x: 50;
    --left-body-second-y: 100;
    --left-body-third-x: 0;
    --left-body-third-y: 100;
    --right-wing-background: var(--primary);
    --right-wing-first-x: 50;
    --right-wing-first-y: 0;
    --right-wing-second-x: 100;
    --right-wing-second-y: 0;
    --right-wing-third-x: 100;
    --right-wing-third-y: 100;
    --right-body-background: var(--primary);
    --right-body-first-x: 50;
    --right-body-first-y: 0;
    --right-body-second-x: 50;
    --right-body-second-y: 100;
    --right-body-third-x: 100;
    --right-body-third-y: 100;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
    border: 0;
    padding: 0;
    min-width: 100px;
    text-align: center;
    margin: 0;
    line-height: 1;
    font-family: inherit;
    font-weight: inherit;
    font-size: 15px;
    background: none;
    outline: none;
    color: var(--text);
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.plane_button .plane,
.plane_button .trails {
    pointer-events: none;
    position: absolute;
}

.plane_button .plane {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    -webkit-filter: drop-shadow(0 3px 6px var(--shadow));
    filter: drop-shadow(0 3px 6px var(--shadow));
    -webkit-transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--rotate) * 1deg)) translateZ(0);
    transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) rotate(calc(var(--rotate) * 1deg)) translateZ(0);
}

.plane_button .plane .left,
.plane_button .plane .right {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: var(--plane-opacity);
    -webkit-transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);
    transform: translate(calc(var(--plane-x) * 1px), calc(var(--plane-y) * 1px)) translateZ(0);
}

.plane_button .plane .left:before,
.plane_button .plane .right:before,
.plane_button .plane .left:after,
.plane_button .plane .right:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: calc(var(--border-radius) * 1px);
    -webkit-transform: translate(var(--part-x, 0.4%), var(--part-y, 0)) translateZ(0);
    transform: translate(var(--part-x, 0.4%), var(--part-y, 0)) translateZ(0);
    z-index: var(--z-index, 2);
    background: var(--background, var(--left-wing-background));
    -webkit-clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%));
    clip-path: polygon(calc(var(--first-x, var(--left-wing-first-x)) * 1%) calc(var(--first-y, var(--left-wing-first-y)) * 1%), calc(var(--second-x, var(--left-wing-second-x)) * 1%) calc(var(--second-y, var(--left-wing-second-y)) * 1%), calc(var(--third-x, var(--left-wing-third-x)) * 1%) calc(var(--third-y, var(--left-wing-third-y)) * 1%));
}

.plane_button .plane .left:after {
    --part-x: 0;
    --z-index: 1;
    --background: var(--left-body-background);
    --first-x: var(--left-body-first-x);
    --first-y: var(--left-body-first-y);
    --second-x: var(--left-body-second-x);
    --second-y: var(--left-body-second-y);
    --third-x: var(--left-body-third-x);
    --third-y: var(--left-body-third-y);
}

.plane_button .plane .right:before {
    --part-x: -0.4%;
    --z-index: 2;
    --background: var(--right-wing-background);
    --first-x: var(--right-wing-first-x);
    --first-y: var(--right-wing-first-y);
    --second-x: var(--right-wing-second-x);
    --second-y: var(--right-wing-second-y);
    --third-x: var(--right-wing-third-x);
    --third-y: var(--right-wing-third-y);
}

.plane_button .plane .right:after {
    --part-x: 0;
    --z-index: 1;
    --background: var(--right-body-background);
    --first-x: var(--right-body-first-x);
    --first-y: var(--right-body-first-y);
    --second-x: var(--right-body-second-x);
    --second-y: var(--right-body-second-y);
    --third-x: var(--right-body-third-x);
    --third-y: var(--right-body-third-y);
}

.plane_button .trails {
    display: block;
    width: 33px;
    height: 64px;
    top: -4px;
    left: 16px;
    fill: none;
    stroke: var(--trails);
    stroke-linecap: round;
    stroke-width: 2;
    stroke-dasharray: 57px;
    stroke-dashoffset: calc(var(--trails-stroke) * 1px);
    -webkit-transform: rotate(68deg) translateZ(0);
    transform: rotate(68deg) translateZ(0);
}

.plane_button span {
    color: #fff;
    display: block;
    position: relative;
    z-index: 4;
    opacity: var(--text-opacity);
    font-size: inherit;
    font-weight: 500;
}

.plane_button i {
    color: #fff;
    font-size: 17px;
    line-height: 1;
    position: relative;
    top: -1px;
    margin-left: auto;
}

.plane_button span.default {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plane_button span.success {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    left: -50px;
    right: 0;
    top: 12px;
    -webkit-transform: translateX(calc(var(--success-x) * 1px)) translateZ(0);
    transform: translateX(calc(var(--success-x) * 1px)) translateZ(0);
    opacity: var(--success-opacity);
    color: var(--success);
    white-space: nowrap;
}

.plane_button span.success svg {
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    margin: -1px 8px 0 0;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14px;
    stroke: var(--success);
    stroke-dashoffset: calc(var(--success-stroke) * 1px);
}

@media(max-width:800px) {
    .plane_button_area {
        height: 11vw;
    }

    .plane_button {
        border-radius: 2vw;
    }

    .plane_button .plane .left:before,
    .plane_button .plane .right:before,
    .plane_button .plane .left:after,
    .plane_button .plane .right:after {
        border-radius: 2vw;
    }

    .plane_button span {
        font-size: 3.5vw;
    }

    .plane_button span.success {
        left: -4vw
    }
}





@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}


@keyframes flip_out {
    0% {
        transform: translateY(0) translateZ(0) rotateX(0);
        transform-origin: 50% 0%;
    }

    100% {
        transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
        transform-origin: 50% 100%;
    }
}

@keyframes flip_in {
    0% {
        transform: translateY(0) translateZ(0) rotateX(0);
        transform-origin: 50% 100%;
    }

    100% {
        transform: translateY(100%) translateZ(100px) rotateX(180deg);
        transform-origin: 50% 0%;
    }
}


/***** animation *****/

@keyframes youtube_jello {
    0% {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.15, 0.75, 1);
    }

    40% {
        transform: scale3d(0.65, 1.25, 1);
    }

    50% {
        transform: scale3d(1.05, 0.85, 1);
    }

    65% {
        transform: scale3d(0.85, 1.05, 1);
    }

    75% {
        transform: scale3d(0.95, 0.95, 1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}













@keyframes slide-in-bottom {
    0% {
        transform: translate3D(0, -100%, 0)
    }

    100% {
        transform: translate3D(0, 0, 0);
    }
}

@keyframes slide-out-bottom {
    0% {
        transform: translate3D(0, 0, 0);
    }

    100% {
        transform: translate3D(0, 100%, 0)
    }
}



@keyframes slide-in-right {
    0% {
        transform: translate3D(-100%, 0, 0);
    }

    100% {
        transform: translate3D(0, 0, 0);
    }
}

@keyframes slide-out-right {
    0% {
        transform: translate3D(0, 0, 0);
    }

    100% {
        transform: translate3D(100%, 0, 0);
    }
}

@keyframes slide-in-left {
    0% {
        transform: translate3D(100%, 0, 0);
    }

    100% {
        transform: translate3D(0, 0, 0);
    }
}

@keyframes slide-out-left {
    0% {
        transform: translate3D(0, 0, 0);
    }

    100% {
        transform: translate3D(-100%, 0, 0);
    }
}

@keyframes scale-in-down {
    0% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes link_arrow {
    0% {
        right: 0;
    }

    50% {
        right: 40%;
    }

    100% {
        right: 0;
    }
}

@keyframes link_arrow_type2 {
    0% {
        right: 0;
    }

    50% {
        right: 3%;
    }

    100% {
        right: 0;
    }
}

@keyframes typing {
    from {
        width: 0
    }
}

@keyframes typing_blink {
    50% {
        border-color: transparent
    }
}


@keyframes typing_opacity {
    to {
        opacity: 1;
    }
}

@keyframes typing_border {
    to {
        border: 0;
    }
}


@keyframes marquee_revert {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

@keyframes marquee {
    0% {
        transform: translate(-100%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}


@keyframes blink_motion {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.7);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}


@keyframes jello_motion {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.15, 0.75, 1);
        transform: scale3d(1.15, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.65, 1.25, 1);
        transform: scale3d(0.65, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 0.85, 1);
        transform: scale3d(1.05, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.85, 1.05, 1);
        transform: scale3d(0.85, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(0.95, 0.95, 1);
        transform: scale3d(0.95, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}



/***** 공통적용 reset *****/
body {
    word-break: keep-all;
    background: #f6f6f6;
}

a {
    text-decoration: none;
    height: 100%;
}

i {
    font-size: inherit;
}

img {
    vertical-align: top;
    max-width: 100%;
}

address {
    font-style: normal;
}

body {
    overflow-x: hidden;
    padding: 0 !important
}

img {
    max-width: 100%;
}

ul:after,
.float_wrap:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

p,
span,
a,
high,
b {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: inherit;
}

button {
    background: inherit;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
    cursor: pointer
}

address {
    font-style: normal;
}

section {
    position: relative;
}

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    img {
        min-height: 1px
    }
}

.float_wrap:after {
    content: "";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.float_wrap>div,
.float_wrap>li {
    float: left;
}





/***** swiper 버전 별로 CSS 제대로 적용되지 않는 문제 해결 *****/
.swiper-container {
    overflow: hidden;
}

.swiper-container-vertical .swiper-wrapper {
    flex-direction: column;
}

body .swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

body .swiper-pagination-bullet {
    background: #fff;
}

body .swiper-pagination-bullet-active {
    background: #fff;
}

@media(max-width:1024px) {
    .swiper-pagination-bullet {
        width: 1.5vw;
        height: 1.5vw;
        margin-right: 1vw
    }

    .swiper-pagination-bullet:last-of-type {
        margin-right: 0;
    }
}

@media(max-width:820px) {
    .swiper-pagination-bullet {
        width: 1vw;
        height: 1vw;
        margin-right: 1vw
    }

    .swiper-pagination-bullet:last-of-type {
        margin-right: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #fff;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 8vw !important;
    }
}

/***** 자체 커스텀 *****/
.img_text_area {
    display: flex;
}

.pc {
    display: inherit;
}

.mo {
    display: none;
}

br {
    display: block
}

br.mo {
    display: none
}

img.pc {
    display: inline-block
}

img.mo {
    display: none
}

.sec_cont {
    overflow: hidden;
    /*max-width:2000px;*/
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.sec_cont .list_area {
    position: relative;
}

.sec_cont .slide_area {
    position: relative;
}

.bold {
    font-weight: bold !important;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.flex_box {
    display: flex;
}

.flex_box>div:first-of-type {
    margin-right: auto;
}

.flex_box.horizental {
    flex-direction: row;
}

.flex_box.horizental.reverse {
    flex-direction: row-reverse
}

.flex_box.vertical {
    flex-direction: column;
}

.flex_box.vertical>div {
    margin-right: 0;
}

.flex_box.box-2>div,
.flex_box.box-2>li {
    flex: 1 1 50%;
}

.flex_box.gap5 {
    gap: 5px;
}

.flex_box.gap10 {
    gap: 10px;
}

.flex_box.gap15 {
    gap: 15px;
}

.flex_box.gap20 {
    gap: 20px;
}

.flex_box.center {
    align-items: center;
    justify-content: center;
}

.flex_box>.title_area {
    margin-bottom: 0;
}







.bg_reset {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.bg_reset .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover !important;
    background-position: 50% 50% !important;
    background-position: 50% 50% !important;
}

.sec_motion_area .bg {
    width: 100%;
    height: 100%;
    transform: scale(1.08);
    opacity: 0.8;
    transition: transform 3.5s, opacity 3.5s;
    will-change: transform, opacity;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.sec_motion_area .sec_wrap {
    position: relative;
    z-index: 2;
}

.sec_motion_area.active .bg {
    transform: scale(1);
    opacity: 1;
}


.sec_cont section.padding {
    padding: 70px 0;
}




@media(max-width:820px) {

    .pc {
        display: none !important;
    }

    .mo {
        display: inherit;
    }

    br {
        display: none
    }

    br.mo {
        display: block
    }

    img.pc {
        display: none
    }

    img.mo {
        display: inline-block
    }

    .sec_cont {
        width: 100%;
        margin: 0;
    }

    body .sec_wrap {
        width: 100%;
        margin: 0;
        position: relative;
        z-index: 2;
        padding: 0 5vw;
    }

    .flex_box {
        flex-direction: column;
    }

    .flex_box.horizental {
        flex-direction: column;
    }

    .flex_box.box-2>div,
    .flex_box.box-2>li {
        flex: 100%;
    }

    .flex_box>div:first-of-type {
        margin-right: 0;
    }

}



/*****홈페이지별 바꿔야하는 커스텀*****/

* {
    margin: 0;
    padding: 0;
    font-family: 'Pretendard';
    font-size: 24px;
    letter-spacing: -0.06em;
    color: #000;
    font-weight: 400;
    line-height: 1.34;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.info {
    line-height: 1.41;
}

::selection {
    background: #145cef;
    color: #fff;
}

body {
    background: #fff;
}

.sec_cont section {
    margin-bottom: 150px;
}



.sec_wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 100%;
    position: relative;
    padding: 0 130px;
}

.sec_motion_area {
    overflow: hidden;
}

section .title {
    font-size: 70px;
}

section .info {
    font-size: 24px;
    line-height: 1.5;
    margin-top: 20px;
}

section .sub_title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 15px;
}

section .sec_wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 130px
}

section .title_area {
    margin-bottom: 40px;
}

.radius {
    border-radius: 20px;
    overflow: hidden;
}

.box_shadow {
    box-shadow: 0px 6px 21px 0px rgba(0, 0, 0, 0.2);
}

.under_line {
    position: relative;
}

.under_line:after {
    content: "";
    width: 0;
    height: 1px;
    background: inherit;
    position: absolute;
    bottom: -3px;
    left: 0;
    background: #000;
    transition: width 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.under_line.active:after {
    width: 100%;
}

li:nth-child(2) .under_line:after {
    transition: width 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.3s;
}

li:nth-child(3) .under_line:after {
    transition: width 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.6s;
}

.line_em {
    position: relative;
}

.line_em:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    background-position: 0 95%;
    background-repeat: no-repeat;
    width: 105%;
    height: 40%;
    z-index: -1;
    background: #fff1bc;
    transform: translateX(-50%)
}

.box_em {
    background: #92b3b5;
    color: #fff;
    font-weight: 500;
    padding: 4px 6px 6px 6px;
    display: inline-block;
    line-height: 1;
}

.point_color {
    color: #145cef !important;
}

.line_motion_area a {
    position: relative;
}

.line_motion_area a:after {
    content: "";
    width: 0;
    height: 1px;
    background: inherit;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #20211f;
    transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.line_motion_area a:hover:after {
    width: 100%;
}

.black .under_line:after,
.black .line_motion_area a:after {
    background: #fff !important;
}


@media(max-width:1366px) {
    .sec_cont {
        max-width: 100%;
    }

    .sec_wrap {
        max-width: 100%;
        padding: 0 70px;
    }

    .slide_section .sec_wrap {
        padding: 0 0 0 70px;
    }

    section .sec_wrap {
        padding: 0 70px
    }

}

@media(max-width:1024px) {
    .sec_cont {
        max-width: 100%;
    }

    .sec_wrap {
        max-width: 100%;
        padding: 0 5vw;
    }

    .slide_section .sec_wrap {
        padding: 0 0 0 5vw;
    }

    section .sec_wrap {
        padding: 0 5vw
    }

    .sec_cont section {
        margin-bottom: 10vw;
    }


}



@media(max-width:820px) {
    .sec_cont section {
        margin-bottom: 20vw;
    }

    .sec_cont section.padding {
        padding: 10vw 0;
    }

    .sec_cont section .sec_wrap {
        padding: 0 5vw;
    }

    .sec_cont section .title_area {
        margin-bottom: 10vw
    }

    .sec_cont section .title {
        font-size: 7vw;
    }

    .sec_cont section .info {
        font-size: 3.5vw;
        margin-top: 2vw;
    }

    .sec_cont section .sub_title {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .sec_cont section .sub_title.en {
        font-size: 5vw;
    }

    .radius {
        border-radius: 4vw
    }


    .sec_cont section.slide_section .list_area .swiper-slide {
        width: 65%
    }

    /*슬라이드 커스텀*/
    .sec_cont .pn_btn {
        width: 8vw;
        height: 8vw;
        top: 35%;
        left: 0;
        transform: translateY(-50%);
    }

    .sec_cont .pn_btn i {
        font-size: 3vw;
    }

    .sec_cont .line_motion_area a:after {
        height: 0.1vw;
        bottom: -0.1vw;
    }
}


.white_section p,
.white_section span,
.white_section a {
    color: #fff;
}

.white_section i {
    color: inherit !important;
}

.white_section .info {
    font-weight: 400;
}

.white_section.slide_section .list_area .pn_btn {
    border-color: #fff;
}

.white_section.slide_section .list_area .pn_btn i {
    color: #000 !important;
}

.white_section .under_line:after {
    background: #fff;
}

.white_section .btn_area .link_area {
    border-color: rgba(254, 254, 254, 0.5)
}

.white_section .btn_area .link_area:before {
    background: #fff;
}

.white_section .btn_area .link_area:hover,
.white_section .btn_area .link_area:hover span,
.white_section .btn_area .link_area:hover i {
    color: #000;
}

.white_section .btn_area .link_area:hover {
    border-color: rgba(0, 0, 0, 0.2)
}

.white_section .btn_area .btn_icon {
    background: #fff;
}

.white_section .btn_area .btn_text:after {
    background: #fff;
}

.white_section .pn_btn i {
    color: #000 !important;
}

.white_section.slide_section .list_area .pn_btn {
    border-color: #fff !important;
}

.white_section .pn_btn {
    background: #fff;
    box-shadow: 6px 5px 15px 0px rgba(0, 0, 0, 0.3);
    border: none;
}



@media(max-width:820px) {

    .white_section .btn_area .link_area,
    .white_section .btn_area .link_area span,
    .white_section .btn_area .link_area i {
        color: #000;
    }

    .white_section .btn_area .link_area:hover {
        border-color: rgba(0, 0, 0, 0.2)
    }

    .pn_btn {
        border-width: 0.1vw;
    }

    .white_section .list_area .list .list_info {
        color: #fff;
    }
}





/*슬라이드 커스텀*/
.pn_btn {
    position: absolute;
    transform: translateY(-50%);
    border-radius: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: transparent;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 1px solid #000;
}

.pn_btn>a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.pn_btn i {
    font-size: 15px;
    font-weight: bold;
}

.type2 .pn_btn {
    box-shadow: none;
    border: 1px solid rgba(103, 103, 103, 0.4);
    background: transparent;
    position: relative;
    transform: none;
}

.slide_btn_area {
    display: flex;
}

.slide_btn_area .pn_btn {
    position: relative;
    transform: none;
}

.slide_btn_area .pn_btn.prev_btn {
    margin-right: 20px;
}

@media(max-width:820px) {
    .slide_btn_area .pn_btn.prev_btn {
        margin-right: 3vw;
    }
}

/*reveal_box*/



.reveal_box {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.reveal_box_inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate3D(-100%, 0, 0)
}

.reveal_box_inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    transform: translate3D(0, 0, 0);
    border-radius: 20px;
}

/*모션시 reveal 색상*/
.reveal_animate .reveal_box_inner {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-right;
    animation-play-state: running !important;
}

.reveal_animate .reveal_box_inner::after {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.4s both paused slide-out-right;
    animation-play-state: running !important;
}

.reveal_animate .reveal_box_image {
    animation: 1.5s cubic-bezier(0.76, 0, 0.24, 1) 0.2s both paused scale-in-down;
    animation-play-state: running !important;
    width: 100%;
    transition: opacity 0.4s linear;
    border-radius: 20px;
}

.reveal_animate .reveal_box_inner a {
    position: relative;
    display: block;
}

.reveal_box.right.reveal_animate .reveal_box_inner {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-right;
}

.reveal_box.right.reveal_animate .reveal_box_inner::after {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.4s both paused slide-out-right;
}

.reveal_box.left.reveal_animate .reveal_box_inner {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-left;
}

.reveal_box.left.reveal_animate .reveal_box_inner::after {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.4s both paused slide-out-left;
}

.reveal_box.bottom.reveal_animate .reveal_box_inner {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s both paused slide-in-bottom;
}

.reveal_box.bottom.reveal_animate .reveal_box_inner::after {
    animation: 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.4s both paused slide-out-bottom;
}



/*img_motion*/
.img_motion>img {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-transition: clip-path 3s cubic-bezier(.19, 1, .22, 1), -webkit-clip-path 3s cubic-bezier(.19, 1, .22, 1);
    transition: clip-path 3s cubic-bezier(.19, 1, .22, 1), -webkit-clip-path 3s cubic-bezier(.19, 1, .22, 1);
}


.img_motion.reverse>img {
    -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);

}




.img_motion.vertical>img {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
}

.img_motion.vertical.reverse>img {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
}


.img_motion.active>img {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


.img_motion.reverse.active>img {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);

}


.img_motion.vertical.active>img {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.img_motion.vertical.reverse.active>img {
    -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
}



.img_motion {
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    -webkit-transition: clip-path 3s cubic-bezier(.19, 1, .22, 1), -webkit-clip-path 3s cubic-bezier(.19, 1, .22, 1);
    transition: clip-path 3s cubic-bezier(.19, 1, .22, 1), -webkit-clip-path 3s cubic-bezier(.19, 1, .22, 1);
}


.img_motion.reverse {
    -webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);

}




.img_motion.vertical {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0)
}

.img_motion.vertical.reverse {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%)
}


.img_motion.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}


.img_motion.reverse.active {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 100%);

}


.img_motion.vertical.active {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.img_motion.vertical.reverse.active {
    -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
    clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%);
}




/*타이핑 모션*/
.typing {
    animation: typing 2s steps(22), typing_blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 5px solid;
    width: 100%;
    padding-right: 20px;
}





.typing.typing01 {
    animation: typing 2s steps(22), typing_blink .5s step-end infinite alternate, typing_border 0s forwards 2s;
}

.typing.typing02 {
    opacity: 0;
    animation: typing 2s steps(22), typing_blink .5s step-end infinite alternate, typing_opacity 0s forwards;
    animation-delay: 2s;
}



@media(max-width:820px) {
    .typing {
        border-right: 0.5vw solid;
        padding-right: 2vw;
    }

    .type2 .pn_btn {
        border-width: 0.1vw;
    }

}





/*marquee motion*/
.loop_text_group {
    white-space: nowrap;
    cursor: pointer;
    margin-bottom: 100px;
    position: relative;
    z-index: 2;
}

.loop_text_group .loop_text {
    animation: marquee_revert 50s linear 0s infinite;
    position: relative;
    display: inline-block;
    width: max-content;
    height: auto;
    white-space: nowrap;
}

.loop_text_group .loop_text>span {
    font-family: 'Poppins', sans-serif;
    font-size: 200px;
    line-height: 1;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
}

.loop_text_group .loop_text>span>img {
    margin: 0 30px;
}

@media(max-width:820px) {

    .loop_text_group {
        margin-bottom: 10vw;
    }

    .loop_text_group .loop_text>span {
        font-size: 15vw;
    }

    .loop_text_group .loop_text>span>img {
        margin: 0 5vw;
    }
}




.slide_btn_area.type01 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.slide_btn_area.type01>.pn_btn>a {
    cursor: pointer;
    font-size: 30px;
}

.slide_btn_area.type01 .slide_pagination {
    font-size: 12px;
    padding: 20px 0;
    display: flex;
    align-items: flex-end;
}

.slide_btn_area.type01 .slide_pagination>span {
    letter-spacing: -0.08em;
    line-height: 1;
}

.slide_btn_area.type01 .slide_pagination>.swiper-pagination-current {
    font-size: 20px;
    margin-right: 6px;
    position: relative;
    top: 2px;
}

.slide_btn_area.type01 .slide_pagination>.swiper-pagination-total {
    margin-left: 3px;
}


@media(max-width:820px) {
    .slide_btn_area.type01 {
        flex-direction: row;
        align-items: center;
    }

    .slide_btn_area.type01>.pn_btn>a {
        font-size: 6vw;
    }

    .slide_btn_area.type01 .slide_pagination {
        font-size: 4vw;
        padding: 2vw 2vw;
        width: auto;
        display: inline-flex;
        align-items: flex-end;
        gap: 1vw;
    }

    .slide_btn_area.type01 .slide_pagination>span {
        letter-spacing: -0.08em;
        line-height: 1;
    }

    .slide_btn_area.type01 .slide_pagination>.swiper-pagination-current {
        font-size: 6vw;
        margin-right: 0.1vw;
        position: relative;
        top: 0.1vw;
    }

    .slide_btn_area.type01 .slide_pagination>.swiper-pagination-total {
        margin-left: 0.3vw;
    }
}



.go-youtube>svg {
    width: 55px;
    height: 55px;
    position: absolute;
    left: 50%;
    bottom: -50%;
    transform: translate(-50%, 7px) translateZ(0);
    fill: none;
    stroke: var(--stroke, var(--line));
    stroke-linecap: round;
    stroke-width: 2px;
    stroke-dasharray: var(--offset, 69px) 278px;
    stroke-dashoffset: 361px;
    transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;
    --line: #42c0bf;
    --line-active: #42c0bf;
}

.go-youtube:hover svg {
    transform: translate(-50%, 5px) translateZ(0);
}


.img_area .list_hash {
    position: absolute;
    left: -30px;
    bottom: 10px;
    transform: rotate(-90deg);
    transform-origin: bottom left;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login_dim_area {
    position: relative;
}

.login_dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.login_dim a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.login_dim .icon_area {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.login_dim .icon_area i {
    font-size: 32px;
    margin-right: 5px;
}

.sec_bna .login_dim .dim_text {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase
}


.swiper-scrollbar {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #deddd3;
}

.swiper-scrollbar-drag {
    height: 100%;
    background: #000;
    border-radius: 3px
}

@media(max-width:820px) {
    .swiper-scrollbar {
        height: 1.3vw;
        border-radius: 0.6vw;
    }
}


.title_area>.btn_area {
    margin-top: 40px;
}

.title_area>.btn_area .link_area {
    margin-right: 30px;
}

.title_area>.btn_area .link_area:last-of-type {
    margin-right: 0;
}

.btn_area .link_area {
    position: relative;
    overflow: hidden;
    z-index: 2;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    height: auto;
    white-space: nowrap;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 50px;
}

.btn_area .link_area a {
    display: inline-flex;
    align-items: center;
    padding: 20px;
    font-size: 15px;
    line-height: 1;
}

.btn_area .link_area:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    position: absolute;
    z-index: -1;
    top: 0;
    left: -10%;
    transition: all 1.2s cubic-bezier(0.2, 1.4, 0.8, 1.1);
    transform: skewX(-10deg);
}

.btn_area .link_area i {
    margin-left: 80px;
    position: relative;
    top: -2px;
}

.btn_area .link_area:hover {
    color: #fff;
}

.btn_area .link_area:hover:before {
    width: 120%;
}

.btn_area .link_area:hover i {
    color: #fff;
    animation: link_arrow_type2 0.7s infinite;
}

@media(max-width:820px) {
    .title_area .btn_area {
        margin-top: 5vw;
    }

    .title_area .btn_area .link_area {
        margin-right: 3vw;
    }

    .title_area .btn_area .link_area:last-of-type {
        margin-right: 0;
    }

    .btn_area .link_area a {
        padding: 3vw 5vw;
        font-size: 3vw;
    }

    .btn_area .link_area a i {
        margin-left: 5vw;
    }

    .btn_area .link_area {
        color: #fff;
        font-size: 3vw;
    }

    .btn_area .link_area:before {
        width: 120% !important;
    }

    .btn_area .link_area i {
        color: #fff;
        margin-left: 4vw;
        top: 0;
        animation: none !important;
        ;
        font-size: inherit;
    }
}


.img_text_area {
    display: flex;
    align-items: center;
}

.img_text_area>.text_area {
    margin-right: auto;
    white-space: nowrap;
}



.detail_btn_area {
    display: flex;
    justify-content: flex-end;
}

.detail_btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.detail_btn i {
    font-size: 18px;
}


.btn_title_area {
    display: flex;
    align-items: center;
    margin-bottom: 70px;
}

.btn_title_area>.title_area {
    margin-bottom: 0;
}

.btn_title_area .detail_btn {
    margin-left: auto;
}

.btn_title_area>.title_area .sub_title {
    font-size: 32px;
    line-height: 1.25;
    margin-bottom: 10px
}

.btn_title_area>.title_area .title {
    font-size: 42px;
    line-height: 1.25;
    font-weight: 700;
}



.list .text_area .sub_title {
    font-size: 18px;
    opacity: 0.7;
}

.list .text_area .title {
    margin-bottom: 20px;
    font-size: 32px;
}

.list .text_area .btn_area {
    font-size: inherit;
}

.list .text_area .btn_area .btn_text {
    font-size: 20px;
}

.list .text_area .num {
    font-size: 58px;
    opacity: 0.5;
}

@media(max-width:1024px) {
    .list .text_area .btn_area .btn_text {
        font-size: 3vw;
    }
}

@media(max-width:820px) {
    .img_text_area {
        align-items: center;
    }

    .img_text_area>.text_area {
        margin-right: 0;
        align-items: flex-start;
        white-space: normal;
        margin-bottom: 10vw;
    }

    /*
        .img_text_area > .text_area .sub_title, .sec_wrap > .title_area .sub_title{font-size:6vw;  margin-bottom:5vw}
   .img_text_area > .text_area .title, .sec_wrap > .title_area .title{font-size:6vw;}
   .img_text_area > .text_area .info, .sec_wrap > .title_area .info{font-size:4vw;  margin-top:5vw;}

    */


    .detail_btn {
        width: 8vw;
        height: 8vw;
        border: 0.1vw solid #000;
    }

    .detail_btn i {
        font-size: 4vw;
    }


    .btn_title_area {
        margin-bottom: 10vw;
        flex-direction: column;
        align-items: flex-start;
    }


    .btn_title_area>.title_area .sub_title {
        font-size: 6vw;
        margin-bottom: 5vw
    }

    .btn_title_area>.title_area .title {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .list .text_area .title {
        font-size: 7vw;
        margin-bottom: 3vw;
    }

    .list .text_area .btn_area .btn_text {
        font-size: 4vw
    }
}





.title_lr_area {
    align-items: flex-end;
    margin-bottom: 50px;
    display: flex;
}

.title_lr_area.inline {
    display: inline-flex;
}

.title_lr_area .title_area {
    margin-bottom: 0;
    min-width: 400px;
}

.title_lr_area .title_area .info {
    margin-top: 40px;
}

.title_lr_area .btn_area {}

.title_lr_area .title_btn_area {
    margin-left: 100px;
    margin-bottom: 5px;
}


.btn_area {
    position: relative;
    display: inline-block;
}

.btn_area a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_area .btn_text {
    font-size: 20px;
    margin-right: 20px;
    position: relative;
    letter-spacing: 0;
}

.btn_area .btn_text:after {
    content: "";
    width: 0;
    height: 1px;
    background: inherit;
    position: absolute;
    bottom: -2px;
    left: 0;
    background: #20211f;
    transition: width 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.btn_area a:hover .btn_text:after {
    width: 100%;
}


.btn_area .btn_icon {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
}

.btn_area .btn_icon i {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
}

.btn_area .btn_icon>a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.btn_area .btn_icon>a>i {
    color: #fff;
    font-size: 10px;
}


.btn_area.white .btn_icon {
    background: #fff;
    border: 1px solid #ddd;
}

.btn_area.white .btn_icon i {
    color: #000;
}






.point_area {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    border-radius: 20px;
    padding: 25px 25px 25px 15px;
    background: rgba(254, 254, 254, 0.6)
}

.point_area .btn_area {
    margin-right: 25px;
    position: relative !important;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
}

.point_area .point_text_area .point_title {
    font-size: 20px;
    letter-spacing: -0.05em;
    font-weight: bold;
    margin-bottom: 10px;
    opacity: 0.8
}

.point_area .point_text_area .point_info {
    font-size: 18px;
    letter-spacing: -0.05em;
    line-height: 1.42;
    opacity: 0.8
}

.point_area.grey {
    background: #f4f4f4;
}



.point_area .btn_area:after,
.point_area .btn_area:before {
    content: "";
    border: 1px solid #c5c4c4;
    position: absolute;
    top: 51%;
    left: 51%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    opacity: 0.8;
    transition: border 0.3s ease;
    pointer-events: none;
}

.point_area .btn_area:after {
    animation: pulse 2s .5s ease-out infinite;
}

.point_area .btn_area:before {
    animation: pulse 2s ease-out infinite;
}

.point_area .point_text_area {
    margin-top: 15px;
}


.title_area .point_area {
    position: relative;
    margin-top: 30px;
}

.title_btn_area {
    display: flex;
}

.point_area .img_area {
    margin-top: 30px;
}

.flex_box .point_area {
    position: relative;
}

.flex_box .img_area .point_area {
    position: absolute;
}

.center .point_area {
    text-align: left;
}

@media(max-width:1024px) {
    .title_lr_area {
        margin-bottom: 5vw;
    }

    .sec_cont .slide_section .title_lr_area {
        padding-left: 0;
        padding-right: 5vw;
    }

    .btn_area .btn_text {
        font-size: 3vw;
    }

    .sec_cont .btn_area .btn_icon {
        width: 3vw;
        height: 3vw;
    }

    .sec_cont .btn_area .btn_icon i {
        font-size: 2vw;
    }

    .sec_cont .btn_area .btn_icon>a>i {
        font-size: 2vw;
    }
}


@media(max-width:820px) {

    .sec_cont .title_lr_area {
        align-items: center;
        flex-direction: column;
        margin-bottom: 7vw
    }

    .sec_cont .slide_section .title_lr_area {
        padding-left: 0;
        padding-right: 5vw;
    }

    .sec_cont .title_lr_area .title_btn_area {
        margin-left: 0;
        margin-bottom: 0;
    }

    .sec_cont .title_lr_area.inline {
        display: flex;
    }

    .sec_cont .title_lr_area .title_area {
        margin-bottom: 3vw;
        text-align: center;
        min-width: auto;
        width: auto;
    }

    .sec_cont .title_lr_area .title_area .info {
        margin-top: 3vw;
    }

    .sec_cont .title_lr_area .btn_area {
        margin-bottom: 0;
        margin-left: 0;
        margin-top: 0;
    }

    .sec_cont .flex_wrap {
        flex-direction: column;
    }

    .sec_cont .btn_area {
        position: relative;
        display: inline-block;
    }

    .sec_cont .btn_area a {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sec_cont .btn_area .btn_text {
        font-weight: bold;
        font-size: 3.5vw !important;
        text-transform: uppercase;
        margin-right: 3vw;
        position: relative;
    }

    .sec_cont .btn_area .btn_text:after {
        height: 0.1vw;
        bottom: -0.2vw;
    }

    .sec_cont .btn_area a:hover .btn_text:after {
        width: 100%;
    }


    .sec_cont .btn_area .btn_icon {
        width: 5vw;
        height: 5vw;
    }

    .sec_cont .btn_area .btn_icon i {
        font-size: 3vw;
    }

    .sec_cont .btn_area .btn_icon>a>i {
        font-size: 3vw;
    }


    .sec_cont .btn_area.white .btn_icon {
        border: 0.1vw solid #ddd;
    }





    .sec_cont .title_area .point_area {
        margin-top: 3vw;
        display: inline-flex;
        width: auto;
        justify-content: center;
    }

    .sec_cont .point_area {
        border-radius: 3vw;
        padding: 3vw
    }

    .sec_cont .point_area .btn_area {
        margin-right: 3vw;
    }

    .sec_cont .point_area .point_text_area {
        margin-top: 2vw;
    }

    .sec_cont .point_area .point_text_area .point_title {
        font-size: 3.5vw;
        margin-bottom: 1vw;
    }

    .sec_cont .point_area .point_text_area .point_info {
        font-size: 3vw
    }



    .sec_cont .point_area .btn_area:after,
    .sec_cont .point_area .btn_area:before {
        border: 0.1vw solid #c5c4c4;
        width: 10vw;
        height: 10vw;
    }






    .sec_cont .title_btn_area {
        flex-direction: column;
        align-items: center;
    }


    .sec_cont .img_area .point_area {
        position: absolute !important;
    }

    .sec_cont .center .point_area {
        text-align: center;
    }

}

/*820px*/








/*공통 추가*/

.sec_wrap .title_area>.title {
    font-size: 45px;
}

.img_text_area>.text_area .title {
    font-size: 70px;
    font-weight: bold;
}

.sec_wrap .title_area>.sub_title {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.sec_wrap .title_area>.info,
.img_text_area>.text_area .info,
.img_text_area>.text_area .info_title {
    line-height: 1.5;
    font-size: 24px;
}

.img_text_area>.text_area .info_title {
    margin-top: 35px;
}

.img_text_area>.text_area .info {
    margin-top: 20px;
}

.list_text_area {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.list_text_area .list_sub_title {
    font-size: 20px;
    margin-bottom: 10px;
}

.list_text_area .list_title {
    font-size: 24px;
}

@media(max-width:1024px) {
    .sec_wrap .title_area>.title {
        font-size: 5vw;
    }

}

@media(max-width:820px) {
    .sec_cont .img_text_area>.text_area {
        text-align: center;
    }

    .sec_cont .sec_wrap .title_area>.title {
        font-size: 6vw;
    }

    .sec_cont .img_text_area>.text_area .title {
        font-size: 6vw;
        margin-bottom: 2vw;
    }

    .sec_cont .sec_wrap .title_area>.sub_title {
        font-size: 5vw;
        margin-bottom: 2vw;
    }

    .sec_wrap .title_area>.info,
    .img_text_area>.text_area .info,
    .img_text_area>.text_area .info_title {
        line-height: 1.5;
        font-size: 3.5vw;
    }

    .sec_cont .img_text_area>.text_area .info_title {
        margin-top: 1vw;
    }

    .sec_cont .img_text_area>.text_area .info {
        margin-top: 1vw;
    }


    .sec_cont .list_text_area .list_sub_title {
        font-size: 3vw;
        margin-bottom: 3vw;
    }

    .sec_cont .list_text_area .list_title {
        font-size: 4.5vw;
    }


}



.line_btn_area {
    padding: 5px 0;
    display: inline-flex;
}

.line_btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: auto;
    animation: line_motion 1s cubic-bezier(.2, 0, .1, 1) both;
    animation-delay: 500ms;
    will-change: transform;
}

.line_btn span {

    font-weight: 300;
    font-size: 23px;
    letter-spacing: 0;
    display: inline-block;
    overflow: hidden;
    height: 25px;

}

.line_btn b {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    display: block;
    color: #000;
    font-size: inherit;
    line-height: 1;
    font-weight: 500;
}

.line_btn:hover b {
    -webkit-transform: translateY(-26px);
    -ms-transform: translateY(-26px);
    transform: translateY(-26px);
    -webkit-transition: all 500ms;
    transition: all 500ms;
}

.line_btn i {
    display: inline-block;
    color: #000;
    margin-left: 10px;
    font-size: 15px;
    position: relative;
    font-weight: inherit;
}

.line_btn:before,
.line_btn:after {
    content: '';
    display: block;
    position: absolute;
    height: 1px;
    width: 0;
    background: #000;
}

.line_btn:before {
    transition: width 0s ease, background 0.4s ease;
    left: 0;
    right: 0;
    bottom: -2px;
}

.line_btn:after {
    right: 2.2%;
    bottom: -2px;
    background: #000;
    transition: width 0.4s ease;
}

.line_btn:hover:before {
    width: 100%;
    background: #000;
    transition: width 0.4s ease;
}

.line_btn:hover:after {
    width: 100%;
    background: 0 0;
    transition: all 0s ease;
}





@media(max-width:1024px) {
    .line_btn_area {
        margin-top: 5vw
    }

    .line_btn span {
        font-size: 4vw;
        height: 4vw;
    }
}


@media(max-width:820px) {

    .line_btn_area {
        padding: 0;
    }

    .line_btn:after {
        width: 100% !important;
    }

    .line_btn {
        margin-top: 0;
        padding-bottom: 0;
        transform: none !important;
    }

    .line_btn span {

        font-size: 3.5vw !important;
        height: 3.5vw !important;

    }


    .line_btn i {
        margin-left: 2vw;
        font-size: 3vw;
    }

    .line_btn b {
        font-size: inherit;
        transform: none !important;
    }

    .line_btn:before {
        width: 100% !important;
        display: none;
    }
}


.type2 .active_line {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 100%;
}

.type2 .active_line svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
}

.type2 .active_line .bg {
    fill: none;
    stroke-width: 1px;
    stroke: transparent;
}

.type2 .active_line .progress {
    fill: none;
    stroke-width: 1px;
    stroke: rgba(0, 0, 0, 1);
    stroke-linecap: round;
    stroke-dasharray: 360;
    stroke-dashoffset: 60;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dashoffset: 360;
    transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}



.type2 .pn_btn:hover .progress {
    stroke-dashoffset: 0;
}


/*공간 추가*/

.gradient_motion {
    position: relative;
    overflow: hidden;
}

.gradient_motion:after {
    content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.8) 100%);
    display: block;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    transform: translateY(200px);
    opacity: 0;
    pointer-events: none;
}

.gradient_motion:hover:after {
    opacity: 1;
    transform: translateY(0);
}

.youtube_icon {
    z-index: 3;
    transition: all 0.3s ease;
    position: absolute;
    width: 50px;
}

a:hover .youtube_icon {
    animation: youtube_jello .9s both;
}



.slide_section .list_area .swiper-slide {
    width: auto;
}


@media(max-width:1366px) {
    .slide_section .sec_wrap>.title_area {
        padding-right: 70px;
    }
}

@media(max-width:820px) {
    .slide_section .sec_wrap {
        width: auto;
        padding: 0 0 0 5vw !important;
    }

    .slide_section .sec_wrap>.title_area {
        padding-right: 5vw;
    }

    .sec_cont .slide_section .list_area .pn_btn.next_btn {
        right: 3vw;
        left: auto;
    }

    .slide_section .list_area .swiper-slide {
        width: 70%
    }
}










.list_area .list .list_sub_title {
    font-size: 25px;
    margin-bottom: 10px;
}

.list_area .list .list_title {
    font-size: 32px;
    line-height: 1.34
}

.list_area .list .list_info {
    font-size: 18px;
    line-height: 1.44;
    margin-top: 20px;
}

.list_area .list .list_info {
    color: #999b9f;
}

.list_area .list .line_btn_area {
    margin-top: 25px;
}

.line_btn_area.point_color .line_btn b {
    color: #145cef;
}

.line_btn_area.point_color .line_btn i {
    color: #145cef !important;
}

.line_btn_area.point_color .line_btn:before,
.line_btn_area.point_color .line_btn:after {
    background: #145cef;
}

.line_btn_area.point_color .line_btn span {
    font-size: 18px;
    height: 18px;
}

.line_btn_area.point_color .line_btn:hover b {
    transform: translateY(-18px);
}


@media(max-width:1024px) {
    .list_area .list .list_title {
        font-size: 4vw;
    }

    .list_area .list .list_info {
        font-size: 2.5vw;
        margin-top: 2vw;
        ;
    }

    .line_btn_area.point_color .line_btn span {
        font-size: 2.5vw;
        height: 2.5vw;
    }
}

@media(max-width:820px) {
    .list_area .list .list_sub_title {
        font-size: 4vw;
        margin-bottom: 2vw;
    }

    .list_area .list .list_title {
        font-size: 5vw;
    }

    .list_area .list .list_info {
        font-size: 3.5vw;
        margin-top: 2vw;
    }

    .list_area .list .line_btn_area {
        margin-top: 3vw;
    }

}




.swiper-scrollbar {
    background: rgba(0, 0, 0, 0.3);
    position: relative;
    margin-left: 20px;
    opacity: 0.6;
    width: 100%;
    height: 5px;
}

.swiper-scrollbar.vertical {
    width: 5px;
    height: 80%;
}

.swiper-scrollbar .swiper-scrollbar-drag {
    background: #000;
    height: 100%;
    width: 100px;
}

.white_section .swiper-scrollbar {
    background: rgba(254, 254, 254, 0.3);
}

.white_section .swiper-scrollbar .swiper-scrollbar-drag {
    background: #fff;
}


.swiper-scrollbar.vertical .swiper-scrollbar-drag {
    width: 100%;
    height: 100px;
}



@media(max-width:820px) {
    .swiper-scrollbar.vertical {
        width: 100%;
        height: 1vw;
        margin-left: 0;
    }

    .swiper-scrollbar.vertical .swiper-scrollbar-drag {
        height: 100%;
        width: 3vw;
    }
}




.sec_cont .top-title{font-size:70px;}
.sec_cont .top-sub-text{font-size:26px;}
.sec_cont .top-wrap .right-area{margin-left:100px; padding-right:0;}
.top-wrap .top-title-area > p{margin-bottom:30px;}
.top-wrap .top-title-area > h1{margin-bottom:30px;}
.top-wrap .top-title-area > .top-sub-text{margin-bottom:0;}
.gap .flex-area li .sub-text{margin-top:15px; font-size:20px;}



.point .title-area .left-area{white-space:nowrap; }
.point .title-area .right-area .sub-title{padding-right:100px;}
.recommend .cont-area{margin:40px 0 60px!important;}

@media(max-width:1700px){
section.point{padding-left:100px;}
.top-wrap .right-area{width:50%;}
}

@media(max-width:1366px){
body .container{padding:0 70px;}
body section.point{padding:0 70px;}
body .effect .flex-area li{padding:10px; text-align:center;}
body .sub-title{font-size:30px;}
body .sec_cont .top-wrap .right-area{margin-left:50px;}
}
@media(max-width:1024px){
.swiper-wrap{height:120vw;}
body .sub-title{font-size:6vw!important;}
body .s-text{font-size:4vw!important; margin-top:2vw;}
body .sub-text{font-size:4vw!important;}
body .section-flex .cont-text p{font-size:4vw!important;}
body .photo .text-area p{font-size:6vw!important;}
body .top-wrap .left-area{width:100%; margin-bottom:5vw;}
body .top-wrap .right-area .top-img-area{width:100%; margin-top:10vw;}
.sec_cont section{flex-direction:column; max-width:100%; display:flex; margin-bottom:20vw;}
.sec_cont .top-title{font-size:8vw;}
body .top-wrap .top-title-area{padding:7.9861vw 0 0 0}
body .sub-text-area, .mySwiper{padding-left:0;}
.sec_cont .top-wrap{flex-direction:column; padding:10vw 5vw 0;}
body .sec_cont .top-wrap .right-area{margin-left:0;}
.sec_cont .top-wrap .right-area{padding-right:0; margin-left:0; width:100%;}
.sec_cont .circle-img{display:none;}
.sec_cont .cont-area .bg-img img{width:150%; max-width:150%;}
.sec_cont .container{padding:0; width:90%;}
.sec_cont .photo .swiper-pagination{max-width:90%; width:90%; left:5%; margin:0;}
body .top-wrap .top-title-area{width:100%;}
body .top-wrap .top-img-area{width:100%;}
.top-wrap .top-title-area > p, .top-wrap .top-title-area > h1{margin-bottom:3vw;}
.blue{font-size:4vw!important;}
.sec_cont .top-sub-text, .sec_cont .top-wrap .s-text{font-size:4.5vw!important;}

body .region .flex-area{justify-content:center; text-align:center;}
body .effect .flex-area{flex-wrap:wrap;justify-content:center; padding:0 5vw; margin-bottom:-5vw;}
body .effect .flex-area li{ margin:0; width:48%; padding:5vw; margin-right:2vw; margin-bottom:5vw;}
body .effect .flex-area li:nth-child(2n){margin-right:0;}

body .effect .flex-area{padding:0!important;}
body section.point{padding:0 5vw!important;}
body .recommend .cont-area{width:100%!important; margin:5vw auto 7vw!important;}
body .section-flex{padding:0!important;}
body section > .section-flex{padding:0 5vw!important;}
body section.point .section-flex{padding:0!important;}
body .point .title-area .left-area, body .point .title-area .right-area .sub-title{padding:0!important;}
body .sec_cont .container{width:100%!important; max-width:100%!important;padding:0 5vw!important;}
body .c-999b9f{color:#000!important;}
body .gap .flex-area{justify-content:center; margin-bottom:-5vw;}
body .gap .flex-area li{margin:0 2vw 5vw 0; width:48.5%;}
body .gap .flex-area li:nth-child(2n){margin-right:0;}
body .gap .flex-area li .sub-text{margin-top:2vw!important;}
body .sec_cont .gap .mid-cont{margin:5vw 0!important;}
body .recommend .right-area p{padding:1vw 2vw!important; border-radius:0!important; margin-top:1vw!important;}
body .recommend .flex-area{flex-direction:column!important; align-items:flex-start!important;}
body .recommend .right-area{width:auto!important;}
body .secret .list-area{width:100%!important; margin-bottom:10vw;}
body .secret .list-area:last-of-type{margin-bottom:0;}
body .secret .sub-recommend-text{font-size:8vw; margin-bottom:3vw;}
body .point .title-area{justify-content:center; align-items:center; text-align:center;}
body .point .title-area .title{margin-bottom:2vw}
body .point .section-flex .left-area{margin-right:0;}
body .recommend .title-area{text-align:center;}
body .faq ul li .text-area{text-align:center;}
body .sec_cont section.swiper2{margin-bottom:35vw;}
body .swiper2 .swiper-container{width:100%;}
body .swiper2 .swiper-slide{width:75%;}
body .swiper2 .swiper-button-next, body .swiper2 .swiper-button-prev{bottom:-15vw!important;;}
body .gap .bt-cont{flex-wrap:nowrap;}
body .gap .bt-cont > img{width:48%; margin:0 2vw 0 0;}
body .gap .bt-cont > img:nth-of-type(2n){margin-right:0;}
}