:root {
    --mc: #A9BA99;
    --mk: #ECE9E2;
    --hp: #443f3e;
    --line: rgba(255, 255, 255, 0.5);
    --strong: #423d39;
    --opacity: rgba(65, 61, 57, 0.61);
    --oapcity02: rgba(65, 61, 57, 0.7);

    --gnb_bg: url(../images/mainvisual.png);
    --title_s: 0 8px 9px #c4b59d, 0px -2px 1px #fff;

    --main01: #A73B59;
    --main02: #97AF8F;
    --main03: #A63232;
    --main04: #61648C;
    --main05: #B22016;
    --main06: #6CA097;
    --main07: #2C5BA9;
    --main08: #21819E;
    --main09: #F4AEAD;
}


.line {
    position: relative;
}

.line::before {
    content: "";
    position: absolute;
    bottom: 90px;
    width: 100%;
    height: 1px;
    background: var(--line);
    z-index: 9999;
}

body {
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    right: 110px;
    width: 1px;
    height: 100%;
    background: var(--line);
    z-index: 9999;
}

body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 110px;
    width: 1px;
    height: 100%;
    background: var(--line);
    z-index: 9999;
}

.noise {
    position: fixed;
    z-index: 99999;
    top: -300%;
    left: -150%;
    height: 600%;
    width: 600%;
    animation: grain 7s steps(10) infinite;
    background-image: url(../images/noise.png);
    background-size: 200px;
    background-repeat: repeat;
    opacity: .25;
    pointer-events: none;
}

@keyframes grain {

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

    10% {
        transform: translate(-5%, -10%);
    }

    20% {
        transform: translate(-15%, 5%);
    }

    30% {
        transform: translate(7%, -25%);
    }

    40% {
        transform: translate(-5%, 25%);
    }

    50% {
        transform: translate(-15%, 10%);
    }

    60% {
        transform: translate(15%);
    }

    70% {
        transform: translateY(15%);
    }

    80% {
        transform: translate(3%, 35%);
    }

    90% {
        transform: translate(-10%, 10%);
    }
}

.loading {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: var(--mk);
    z-index: 10000;
    animation: load 3s 2.5s;
    animation-fill-mode: forwards;
}

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

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.loading .loading_wrap {
    position: relative;
    height: 100vh;
    filter: url('#oog');
}


.loading .circle {
    position: absolute;
    top: 40%;
    left: 43%;
    animation: cir 3s;
    animation-fill-mode: forwards;
}

@keyframes cir {
    0% {
        transform: translateX(500%) rotate(380deg);
    }

    50% {
        transform: translateX(0) rotate(0deg);
    }

    60% {
        transform: scale(0.8) rotate(0deg);
    }

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

}

.loading .circle img {
    width: 200px;
    height: 200px;
}

.circle::before,
.circle::after {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 1;

}

.circle::before {
    top: 0;
    left: 0;
    background: #f59e8e;

    animation: one01 3s infinite;
}

.circle::after {
    top: 0;
    right: 0;
    background: var(--mc);
    animation: one02 3s infinite;
}

@keyframes one01 {
    0% {
        opacity: 0;
    }

    79% {
        opacity: 0;
    }

    80% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate(-230%, 110%);
    }
}

@keyframes one02 {

    0% {
        opacity: 0;
    }

    79% {
        opacity: 0;
    }

    80% {
        transform: translate(0, 0);
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translate(230%, -110%);
    }
}

/* --------------------- */

.section {
    height: 100vh;
    background: var(--mk);
    overflow: hidden;
}

.inner {
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 15px;
}

.header {
    position: fixed;
    top: 15px;
    width: 100%;
    z-index: 9999;
    height: 80px;
    border-bottom: 1px solid var(--line);
    font-family: 'Poller One';
    color: var(--mc);
}

.header.on {
    color: var(--mk);
}

.header_wrap {
    display: flex;
    align-items: center;
    gap: 60px;
    font-size: 33px;
    line-height: 60px;
    letter-spacing: 2px;

    float: right;
    margin-right: 130px;
}

.menu_icon {
    position: fixed;
    top: 18px;
    right: 30px;
    z-index: 9999;
    cursor: pointer;
    display: block;
}


.gnb {
    position: fixed;
    inset: 0 0 0 0;

    z-index: 999;
    background: var(--gnb_bg) center center/cover;

    transition: 0.4s 0.1s;

    visibility: hidden;
    opacity: 0;
}

.gnb.on {
    visibility: visible;
    opacity: 1;

}

.gnb>ul {
    margin-top: 130px;
    text-align: center;

}

.gnb>ul>li {
    position: relative;

    font-size: 50px;
    font-weight: 500;
    padding: 40px 0;

    color: rgba(136, 155, 126, 0.5);
    font-family: 'Poller One';

    letter-spacing: 15px;
}

.gnb>ul>li::before {
    content: "";
    position: absolute;
    top: 48%;
    left: 30%;
    width: 12px;
    height: 12px;
    background: var(--mc);
    border-radius: 50%;
}

.gnb>ul>li:hover {
    letter-spacing: normal;
    color: #f59e8e;
}

.gnb>ul>li:hover::before {
    background: #f59e8e;
}

.gnb .mu01 {
    position: relative;
    transform: scale(2, 0.5);
    opacity: 0;
    transition: 0.3s;
}


.gnb .mu02 {
    position: relative;
    transform: scale(2, 0.5);
    opacity: 0;
    transition: 0.5s;
}

.gnb .mu03 {
    position: relative;
    transform: scale(2, 0.5);
    opacity: 0;
    transition: 0.8s;
}

.gnb .mu04 {
    position: relative;
    transform: scale(2, 0.5);
    opacity: 0;
    transition: 0.8s;
}

.gnb .mu05 {
    position: relative;
    transform: scale(2, 0.5);
    opacity: 0;
    transition: 0.8s;
}

.gnb.on .mu01,
.gnb.on .mu02,
.gnb.on .mu03,
.gnb.on .mu04,
.gnb .mu05 {
    transform: scale(1);
    opacity: 1;
}

.gnb .mu05::after {
    position: absolute;
    content: "@Baeksunwoo";
    bottom: -115%;
    left: 45%;
    font-size: 20px;
    letter-spacing: 1.5px;
    color: #fff;
    font-family: normal;
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.intro {
    position: relative;
    overflow: hidden;
}

.gooey {
    filter: url(#goo);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    animation: box infinite 2s;
    overflow: hidden;
}


.intro .itm01 {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 180px auto;
    animation: bing 20s infinite;
}

.intro .itm01::before {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #f59e8e;
    /* box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); */
    animation: before 3s infinite;
    z-index: -5;
}

.intro .itm01::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: var(--mc);
    /* box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); */
    animation: after 5s infinite;
    z-index: -5;
}


@keyframes before {
    0% {
        transform: translate(60%, 10%);
    }

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

@keyframes after {
    0% {
        transform: translate(150%, -50%);
        opacity: 0;
    }

    100% {
        transform: translate(10%, -130%);
        opacity: 1;
    }
}

@keyframes bing {
    0% {}

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


.txt {
    position: absolute;
    bottom: 20px;
    margin-left: 140px;
    font-family: 'Poller One';
    pointer-events: none;
    z-index: 5;
}

.txt h2,
.txt h3 {
    font-size: 40px;
    color: var(--mc);
    letter-spacing: 2px;
}

.intro .title {
    color: #f1ebe5;

    opacity: 0;
    transform: translateY(-50%);
    transition: 0.5s;
    text-align: center;
    pointer-events: none;
}

.section.on .title {
    opacity: 1;
    transform: translateY(0);
}

.intro .title h2 {
    font-size: 80px;
    text-shadow: var(--title_s);
    letter-spacing: -4px;
    font-family: 'Poller One';
    animation: move 2s ease-in-out infinite;
    text-transform: uppercase;

    margin: 0 0 50px 0;
}

.intro .title p {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: #4a5e55;
}


@keyframes move {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }
}

/* -------------- */
.main_visual {
    position: relative;
}

.main_visual .txt {
    position: absolute;
}

.main_visual .txt h2 {
    color: #e4d9c8;
}

.swiper-slide {
    align-items: center;
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 150px;
    gap: 100px;
}

.swiper-slide .left_box {
    position: absolute;
    width: 1200px;
    height: 120vh;
    background: var(--mk);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transform: translate(0, 0) scale(0.3);
    /*  transform: translate(-50%, 0%) scale(0.3); */
    transition: 1.5s;
}

.swiper-slide.on .left_box {
    opacity: 1;
    transform: translate(-30%, 0%);
}

.swiper-slide .center {
    transform: translateY(-20%);
    transition: 0.6s 0.3s;
    opacity: 0;
}

.swiper-slide.on .center {
    transform: none;
    opacity: 1;
}

.swiper-slide .center img {
    border-radius: 20px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.swiper-slide .right_box {
    max-width: 650px;
    transform: translateY(25%);
    opacity: 0;
    transition: 0.8s 0.5s;
    text-align: left;
}

.swiper-slide.on .right_box {
    transform: translateY(0);
    opacity: 1;
}

.swiper-slide .right_box h3 {
    position: relative;
    font-size: 58px;
    font-weight: 700;
    margin: 0 0 80px 0;
    color: var(--hp);
}

.swiper-slide .right_box h3::before {
    content: "";
    position: absolute;
    top: 90px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--main06);
    transition: 0.8s 1s;
}

.swiper-slide.on .right_box h3::before {
    width: 100%;
}

.list_dot {
    margin-bottom: 50px;
}


.list_dot td {
    font-size: 18px;
    color: #797373;
    padding: 5px 0;
}

.list_dot .strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--strong);
}

.list_dot span {
    font-weight: 700;
    font-size: 19px;
}

.btn_box {
    display: flex;
    gap: 10px;
}

.btn_box .btn {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.more_btn {
    display: flex;
    gap: 30px;
}

.more_btn>li {
    color: var(--oapcity02);
    font-size: 23px;
    padding: 10px 20px;
    border-radius: 15px;
    border: 1px solid var(--oapcity02);
}

.more_btn>li:hover {
    color: var(--hp);
    border: 1px solid var(--hp);
}

/*  */
#main01 {
    position: relative;
    height: 100vh;
}

#main01 .left_box {
    background: var(--main01);
}

#main01 .center {
    position: relative;
}

#main01 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    /*  background: url(../images/main01_m.png)no-repeat center center/cover; */
    background: url(../images/main01--m.png)no-repeat top center/cover;
    border-radius: 20px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

#main01 .btn_box .btn01 {
    background: var(--main01);
}

#main01 .btn_box .btn02 {
    background: #C77748;
}

#main01 .btn_box .btn03 {
    background: #6390B9;
}

#main01 .right_box h3::before {
    background: var(--main01);
}

#main02 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#main02 .left_box {
    background: var(--main02);
}

#main02 .center {
    position: relative;
}

#main02 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    /* background: url(../images/main02_mm.png)no-repeat center center/cover; */
    background: url(../images/main02--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main02 .btn_box .btn01 {
    background: var(--main02);
}

#main02 .btn_box .btn02 {
    color: #485948;
    background: #D1D8B7;
}

#main02 .btn_box .btn03 {
    color: #786262;
    background: #E2DCCE;
}

#main02 .right_box h3::before {
    background: var(--main02);
}

/*  */

#main03 {
    position: relative;
    height: 100vh;
}

#main03 .left_box {
    background: var(--main03);
}

#main03 .center {
    position: relative;
}

#main03 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    /*   background: url(../images/main03_m.png)no-repeat center center/cover; */
    background: url(../images/main03--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main03 .btn_box .btn01 {
    background: var(--main03);
}

#main03 .btn_box .btn02 {
    background: #012F63;
}

#main03 .btn_box .btn03 {
    background: #D1A336;
}

#main03 .right_box h3::before {
    background: var(--main03);
}


/*  */
#main04 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#main04 .left_box {
    background: var(--main04);
}

#main04 .center {
    position: relative;
}

#main04 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    /*  background: url(../images/main04_m.png)no-repeat center center/cover; */
    background: url(../images/main04--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main04 .btn_box .btn01 {
    background: var(--main04);
}

#main04 .btn_box .btn02 {
    background: #058F9C;
}

#main04 .btn_box .btn03 {
    background: #12AC8B;
}

#main04 .right_box h3::before {
    background: var(--main04);
}


/*  */
#main05 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#main05 .left_box {
    background: var(--main05);
}

#main05 .center {
    position: relative;
}

#main05 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    /* background: url(../images/main05_m.png)no-repeat center center/cover; */
    background: url(../images/main05--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main05 .btn_box .btn01 {
    background: var(--main05);
}

#main05 .btn_box .btn02 {
    background: #292420;
}

#main05 .btn_box .btn03 {
    background: #DCBA94;
}

#main05 .right_box h3::before {
    background: var(--main05);
}

/*  */
#main06 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#main06 .left_box {
    background: var(--main06);
}

#main06 .center {
    position: relative;
}

#main06 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    /* background: url(../images/main06_m.png)no-repeat center center/cover; */
    background: url(../images/main06--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main06 .btn_box .btn01 {
    background: var(--main06);
}

#main06 .btn_box .btn02 {
    background: #8FAF9C;
}

#main06 .btn_box .btn03 {
    background: #4F6D76;
}

#main06 .right_box h3::before {
    background: var(--main06);
}


/*  */

#main07 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#main07 .left_box {
    background: var(--main07);
}

#main07 .center {
    position: relative;
}

#main07 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    background: url(../images/main07--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main07 .btn_box .btn01 {
    background: var(--main07);
}

#main07 .btn_box .btn02 {
    background: #E80B8C;
}

#main07 .btn_box .btn03 {
    background: #10203A;
}

#main07 .right_box h3::before {
    background: var(--main07);
}


/*  */

#main08 {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#main08 .left_box {
    background: var(--main08);
}

#main08 .center {
    position: relative;
}

#main08 .center::before {
    position: absolute;
    content: "";
    bottom: -30px;
    right: -20px;
    width: 150px;
    height: 300px;
    background: url(../images/main08--m.png)no-repeat top center/cover;
    border-radius: 18px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

#main08 .btn_box .btn01 {
    background: var(--main08);
}

#main08 .btn_box .btn02 {
    background: #73B0BA;
}

#main08 .btn_box .btn03 {
    background: #EAEAE8;
}

#main08 .right_box h3::before {
    background: var(--main08);
}


/*  */
.swiper-button-next {
    position: absolute;
    top: auto;
    bottom: 13%;
    left: 50%;
    width: 80px;
    height: 80px;
    color: rgba(158, 153, 147, 0.3);
    border: 1px solid rgba(158, 153, 147, 0.3);
    border-radius: 50%;
    margin: 0;
    z-index: 10;
    transition: 0.3s;
}


.swiper-button-prev {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 80px;
    height: 80px;


    margin: 0;
    z-index: 10;

    color: rgba(158, 153, 147, 0.3);
    border: 1px solid rgba(158, 153, 147, 0.3);
    border-radius: 50%;
    transition: 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: rgba(110, 100, 89, 0.5);
    border: 1px solid rgba(110, 100, 89, 0.5);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: bootstrap-icons;
    font-size: 30px;
}


.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: '\F284'
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: '\F285'
}

.swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.103);
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #dfc1a1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 9.9%;
}




/* ---------------------------------- */
.main_Traning {
    position: relative;
    align-items: center;
}

.main_Traning .txt {
    position: absolute;
}

.main_Traning .txt h3 {
    color: var(--mc);
}

.tab {}

.tabnav {}

.tabnav li {
    display: inline-block;
    text-align: center;
    border-right: 1px solid #d3d3d3;
}

.tabnav li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.363);
}

.tabnav li a.active:before {
    background: none;
}

.tabnav li a:hover::before {
    background: none;
}

.tabnav li a.active {
    border: none;
}

.tabnav li a {
    position: relative;
    display: block;
    color: var(--mk);
    padding: 0 30px;
    line-height: 50px;
    font-size: 20px;
    letter-spacing: -1.5px;
}

.tabnav li a:hover,
.tabnav li a.active {
    color: #332d28;
    font-weight: 600;
    border-bottom: none;
}

.tabnav .name01 {
    background: #e0b7ab;
}

.tabnav .name02 {
    background: #e0c19f;
}

.tabnav .name03 {
    background: #C6CBA6;
}

.tabnav .name04 {
    background: #8ca387;
}

.tabnav .name05 {
    background: #87a39f;
}

.tabcontent {
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    background: #f2f2f2;
}

.tab_box {
    padding: 30px;
    display: flex;
    justify-content: space-evenly;
}

.tabcontent #tab01 {
    border: 30px solid #e0b7ab;
}

.tabcontent #tab02 {
    border: 30px solid #e0c19f;
}

.tabcontent #tab02 .logo {
    width: 15%;
}

.tabcontent #tab03 {
    border: 30px solid #C6CBA6;
}

.tabcontent #tab04 {
    border: 30px solid #8ca387;
}


/* ---------------------------------- */

.traning_wrap .img_box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.traning_wrap .img_box img {
    width: 800px;
    height: auto;
    border-radius: 20px;
}

.traning_wrap .img_box .logo {
    display: flex;
}

.traning_wrap .img_box .logo img {
    width: 100px;
    height: auto;
}

#tab03 .logo img {
    filter: invert(1);
}

#tab03 .logo .svg {
    width: 5%;
    filter: none;
}

.traning_wrap .txt_box {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 30px 0;
}


.traning_wrap .txt_box h3 {
    position: relative;
    font-size: 55px;
    font-weight: 700;
    color: var(--hp);
    z-index: 3;
}

.traning_wrap .txt_box h3::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    z-index: -1;
    background: #97AF8F;
}

.traning_wrap .txt_box ul {
    display: flex;
    gap: 30px;
}

.traning_wrap .txt_box li {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: var(--strong);
}

.traning_wrap .txt_box span {
    border: 1px solid #ddd;
    padding: 15px 25px;
    font-size: 20px;
    border-radius: 12px;
    color: var(--opacity);
    text-align: center;
}

.traning_wrap .txt_box span:hover {
    color: var(--hp);
    border: 1px solid var(--hp);
}


#tab01 .txt_box h3::before {
    top: -40%;
    left: 8%;
    width: 90px;
    height: 90px;
    background: #f1d4b2;
    border-radius: 50%;
}

#tab02 .txt_box h3::before {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: #b96a6a77;
}

#tab03 .txt_box h3::before {
    top: -40%;
    left: 15%;
    width: 100px;
    height: 100px;
    background: #abc2d1;
    border-radius: 50%;
}

#tab04 .txt_box h3::before {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: #e4b19ac2;
}

/* ---------------------------------- */

.main_Design {
    position: relative;
    align-items: center;
}

/*  */


/*  -------------------------------------------------*/

.main_Design img {
    max-height: 350px;
    max-width: 350px;
}

.b_box {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);

    display: flex;
    justify-content: center;
    align-items: center;
}

.b_box .btn {
    position: absolute;
    top: 12%;
    right: 25%;
    width: 100px;
    height: 100px;
    background: url(../images/close_2.png) no-repeat center center/cover;
    font-size: 30px;
    color: rgba(221, 221, 221, 0);
    border: none;
    cursor: pointer;
}

.b_box.on {
    display: none;
}

.b_box img {
    width: 700px;
}

.Design_wrap {
    position: relative;
}

.Design_wrap .swiper-slide {
    display: flex;
    flex-direction: column;
    padding: 100px 0;
}

.Design_wrap .swiper-slide .txt_box {
    text-transform: uppercase;
    color: var(--hp);
    font-size: 20px;
    opacity: 0;
}

.Design_wrap .swiper-slide .txt_box .strong {
    color: var(--strong);
    font-weight: 700;
}

.Design_wrap .swiper-slide .img_box {
    position: relative;
    cursor: pointer;
}

.Design_wrap .swiper-slide .img_box::before {
    position: absolute;
    content: "\F62C";
    bottom: 0;
    right: 15px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    font-size: 20px;
    padding: 13px;
    border-radius: 50%;
    font-family: bootstrap-icons;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    transition: 0.3s;
    opacity: 0;
}

.Design_wrap .swiper-slide .img_box:hover::before {
    bottom: 15px;
    opacity: 1;
}

.Design_wrap .swiper-slide-active .img_box {
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    opacity: 1;
    transition: 0.3s;
}

.Design_wrap .swiper-slide-active .txt_box {
    opacity: 1;
    transform: translateY(100%);
}

.Design_wrap .swiper-slide-active .txt_box td {
    text-align: left;
}

/* ---------------------------------- */

.main_Design .arrows {
    position: absolute;
    bottom: 15%;
    left: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    max-width: 800px;
    width: 100%;
}

.main_Design .arrows i {
    position: absolute;
    top: 0;
    cursor: pointer;
    font-size: 40px;
    color: rgba(158, 153, 147, 0.3);
}

.main_Design .arrows i::before {

    padding: 15px;
    border-radius: 50%;
    border: 1px solid rgba(158, 153, 147, 0.3);
    transition: 0.2s;
}

.main_Design .arrows i:hover {
    color: rgba(110, 100, 89, 0.5);
}

.main_Design .arrows i:hover::before {
    border: 1px solid rgba(110, 100, 89, 0.5);
}

.main_Design .arrows .left {
    left: 15px;
}

.main_Design .arrows .right {
    right: 15px;
}

.main_Design .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--main09);
}

/* ---------------------------------- */

.about {
    position: relative;

}

.about .txt {
    margin-left: 120px;
}

.about .wrap {
    display: flex;
    gap: 100px;
    justify-content: center;
    align-items: center;

}

.about .block {
    display: flex;
    align-items: center;
}

.about svg {
    width: 50%;
    transition: 0.5s;
}


.about svg:hover {
    transform: scale(1.2);
}

.about path {
    fill: #fff;
    transform: scale(0.9);
    opacity: 1;
    animation: svgani 4.5s infinite
}

.about path:nth-child(2) {
    transform: scale(1);
    opacity: 0.5;
}

.name_box h3 {
    font-size: 30px;
    font-weight: 500;
    color: var(--main02);
    margin-bottom: 20px;
}

.name_box td {
    font-size: 18px;
    color: var(--oapcity02);
    padding: 5px 0;
}

.name_box td span {
    font-size: 20px;
    font-weight: 600;
    color: var(--hp);
}

.name_box .strong {
    font-size: 20px;
    color: var(--strong);
}


.exp_box h3 {
    font-size: 30px;
    font-weight: 500;
    color: var(--main02);
    margin-bottom: 35px;
}

.exp_box td {
    font-size: 18px;
    color: var(--oapcity02);
    padding: 8px 0;
}

.exp_box .strong {
    font-size: 18px;
    color: var(--strong);
}

@keyframes svgani {
    0% {
        d: path("M300 150C300 232.843 232.843 300 150 300C67.1573 300 0 232.843 0 150C0 67.1573 67.1573 0 150 0C180.592 131.743 300 67.1573 300 150Z");
    }

    50% {
        d: path("M300 159.184C300 236.954 232.843 300 150 300C67.1573 300 0 236.954 0 159.184C0 81.413 67.1573 0 150 0C232.843 0 300 81.413 300 159.184Z");
    }

    100% {
        d: path("M300 150C300 232.843 232.843 300 150 300C67.1573 300 0 232.843 0 150C0 67.1573 67.1573 0 150 0C180.592 131.743 300 67.1573 300 150Z");
    }
}

/* 



























*/

@media (max-height:750px) {

    .gnb>ul {
        margin-top: 130px;
        text-align: center;
        /* r */
        margin-top: 90px;
    }

    .gnb>ul>li {
        position: relative;

        font-size: 50px;
        font-weight: 500;
        padding: 40px 0;

        color: rgba(136, 155, 126, 0.5);
        font-family: 'Poller One';

        letter-spacing: 15px;
        /* r */
        font-size: 35px;
    }

    .gnb>ul>li::before {
        content: "";
        position: absolute;
        top: 48%;
        left: 30%;
        width: 12px;
        height: 12px;
        background: var(--mc);
        border-radius: 50%;
        /* w */
        width: 8px;
        height: 8px;
    }


    .gnb .mu05::after {
        position: absolute;
        content: "@Baeksunwoo";
        bottom: -115%;
        left: 45%;
        font-size: 20px;
        letter-spacing: 1.5px;
        color: #fff;
        font-family: normal;
        /* r */
        bottom: -40%;
    }

    .intro .itm01 {
        position: relative;
        width: 600px;
        height: 600px;
        margin: 180px auto;
        animation: bing 20s infinite;
        /* r */
        width: 500px;
        height: 500px;
        margin: 130px auto;
    }

    .intro .itm01::before {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #f59e8e;
        /* box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); */
        animation: before 3s infinite;
        z-index: -5;
        /* r */
        width: 150px;
        height: 150px;
    }

    .intro .itm01::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: var(--mc);
        /* box-shadow: 0 0 60px rgba(0, 0, 0, 0.25); */
        animation: after 5s infinite;
        z-index: -5;
        /* w */
        width: 150px;
        height: 150px;
    }


    .intro .title h2 {
        font-size: 80px;
        text-shadow: var(--title_s);
        letter-spacing: -4px;
        font-family: 'Poller One';
        animation: move 2s ease-in-out infinite;
        text-transform: uppercase;

        margin: 0 0 50px 0;
        /* r */
        font-size: 65px;
    }

    .intro .title p {
        font-size: 20px;
        line-height: 30px;
        font-weight: 500;
        color: #4a5e55;
        /* r */
        font-size: 18px;
    }

    /*  */
    .swiper-button-next {
        position: absolute;
        top: auto;
        bottom: 13%;
        left: 50%;
        width: 80px;
        height: 80px;
        color: rgba(158, 153, 147, 0.3);
        border: 1px solid rgba(158, 153, 147, 0.3);
        border-radius: 50%;
        margin: 0;
        z-index: 10;
        transition: 0.3s;
        /* r */
        left: 48%;
        width: 60px;
        height: 60px;
    }


    .swiper-button-prev {
        position: absolute;
        top: 15%;
        left: 50%;
        width: 80px;
        height: 80px;

        margin: 0;
        z-index: 10;

        color: rgba(158, 153, 147, 0.3);
        border: 1px solid rgba(158, 153, 147, 0.3);
        border-radius: 50%;
        transition: 0.3s;
        /* r */
        left: 48%;
        width: 60px;
        height: 60px;
    }


    .swiper-pagination-progressbar {
        background: rgba(255, 255, 255, 0.103);
    }

    .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: #dfc1a1;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transform-origin: left top;
    }

    .swiper-horizontal>.swiper-pagination-progressbar,
    .swiper-pagination-progressbar.swiper-pagination-horizontal,
    .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
    .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        width: 100%;
        height: var(--swiper-pagination-progressbar-size, 4px);
        left: 0;
        top: 9.9%;
        /* r */
        top: 12%;
    }

    /*  -------------------------------------------------*/


    .main_Traning .tab {
        /* r */
        max-width: 1380px;
        margin: 0 auto;
    }

    .tab_box {
        padding: 30px;
        display: flex;
        justify-content: space-evenly;
        /* r */
        padding: 20px;
    }

    .tabcontent #tab01 {
        border: 20px solid #e0b7ab;
    }

    .tabcontent #tab02 {
        border: 20px solid #e0c19f;
    }

    .tabcontent #tab02 .logo {
        width: 15%;
        /* r */
        width: 20%;
    }

    .tabcontent #tab03 {
        border: 20px solid #C6CBA6;
    }

    .tabcontent #tab04 {
        border: 20px solid #8ca387;
    }


    /* ---------------------------------- */

    .traning_wrap .img_box img {
        width: 800px;
        height: auto;
        border-radius: 20px;
        /* r */
        width: 600px;
    }





    .traning_wrap .txt_box h3 {
        position: relative;
        font-size: 55px;
        font-weight: 700;
        color: var(--hp);
        z-index: 3;
        /* r */
        font-size: 45px;
    }

    #tab01 .txt_box h3::before {
        /* r */
        left: 25%;
        width: 80px;
        height: 80px;
    }

    #tab02 .txt_box h3::before {
        /* r */
        height: 20px;
    }

    #tab03 .txt_box h3::before {
        /* r */
        left: 30%;
        width: 80px;
        height: 80px;
    }

    #tab04 .txt_box h3::before {
        /* r */
        height: 15px;
    }

    /*  -------------------------------------------------*/

    .main_Design img {
        max-height: 350px;
        max-width: 350px;
        /* w */
        max-height: 250px;
        max-width: 250px;
    }

    .b_box {
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.8);

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .b_box .btn {
        position: absolute;
        top: 12%;
        right: 25%;
        width: 100px;
        height: 100px;
        background: url(../images/close_2.png) no-repeat center center/cover;
        font-size: 30px;
        color: rgba(221, 221, 221, 0);
        border: none;
        cursor: pointer;
    }

    .b_box.on {
        display: none;
    }

    .b_box img {
        width: 700px;
        /* w */
        width: 500px;
    }

    .Design_wrap {
        position: relative;
    }

    .Design_wrap .swiper-slide {
        display: flex;
        flex-direction: column;
        padding: 100px 0;
        /* r */
        padding: 50px 0;
    }

    .Design_wrap .swiper-slide .txt_box {
        text-transform: uppercase;
        color: var(--hp);
        font-size: 20px;
        opacity: 0;
    }

    .Design_wrap .swiper-slide .txt_box .strong {
        color: var(--strong);
        font-weight: 700;
    }



    .Design_wrap .swiper-slide-active .img_box {
        transform: scale(1.5);
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        opacity: 1;
        transition: 0.3s;
        /* r */
        transform: scale(1.3);
    }

    .Design_wrap .swiper-slide-active .txt_box {
        opacity: 1;
        transform: translateY(100%);
        /* r */
        transform: translateY(0);
    }

    .Design_wrap .swiper-slide-active .txt_box td {
        text-align: left;
    }

    /* ---------------------------------- */

    .main_Design .arrows {
        position: absolute;
        bottom: 15%;
        left: 50%;
        z-index: 999;
        transform: translate(-50%, -50%);
        max-width: 800px;
        width: 100%;
    }

    .main_Design .arrows i {
        position: absolute;
        top: 0;
        cursor: pointer;
        font-size: 40px;
        color: rgba(158, 153, 147, 0.3);
        /* r */
        font-size: 25px;
    }

    .main_Design .arrows i::before {

        padding: 15px;
        border-radius: 50%;
        border: 1px solid rgba(158, 153, 147, 0.3);
        transition: 0.2s;
    }

    .main_Design .arrows i:hover {
        color: rgba(110, 100, 89, 0.5);
    }

    .main_Design .arrows i:hover::before {
        border: 1px solid rgba(110, 100, 89, 0.5);
    }

    .main_Design .arrows .left {
        left: 15px;
    }

    .main_Design .arrows .right {
        right: 15px;
    }

    .main_Design .swiper-pagination-bullet-active {
        opacity: 1;
        background: var(--main09);
    }

    /* ---------------------------------- */

    .about {
        position: relative;

    }

    .about .wrap {
        display: flex;
        gap: 100px;
        justify-content: center;
        align-items: center;

    }

    .about .block {
        display: flex;
        align-items: center;
    }

    .about svg {
        width: 50%;
        transition: 0.5s;
    }


    .about svg:hover {
        transform: scale(1.2);
    }

    .about path {
        fill: #fff;
        transform: scale(0.9);
        opacity: 1;
        animation: svgani 4.5s infinite
    }

    .about path:nth-child(2) {
        transform: scale(1);
        opacity: 0.5;
    }

    .name_box h3 {
        font-size: 30px;
        font-weight: 500;
        color: var(--main02);
        margin-bottom: 20px;
    }

    .name_box td {
        font-size: 18px;
        color: var(--oapcity02);
        padding: 5px 0;
    }

    .name_box td span {
        font-size: 20px;
        font-weight: 600;
        color: var(--hp);
    }

    .name_box .strong {
        font-size: 20px;
        color: var(--strong);
    }


    .exp_box h3 {
        font-size: 30px;
        font-weight: 500;
        color: var(--main02);
        margin-bottom: 35px;
    }

    .exp_box td {
        font-size: 18px;
        color: var(--oapcity02);
        padding: 8px 0;
    }

    .exp_box .strong {
        font-size: 18px;
        color: var(--strong);
    }

    @keyframes svgani {
        0% {
            d: path("M300 150C300 232.843 232.843 300 150 300C67.1573 300 0 232.843 0 150C0 67.1573 67.1573 0 150 0C180.592 131.743 300 67.1573 300 150Z");
        }

        50% {
            d: path("M300 159.184C300 236.954 232.843 300 150 300C67.1573 300 0 236.954 0 159.184C0 81.413 67.1573 0 150 0C232.843 0 300 81.413 300 159.184Z");
        }

        100% {
            d: path("M300 150C300 232.843 232.843 300 150 300C67.1573 300 0 232.843 0 150C0 67.1573 67.1573 0 150 0C180.592 131.743 300 67.1573 300 150Z");
        }
    }

}

/* 



























*/


@media (max-width:768px) {
    .loading .circle {
        /* r */
        top: 38%;
        left: 25%;
    }


    .line::before {
        /* r */
        bottom: 70px;
    }

    body::before {
        /* r */
        display: none;
    }

    body::after {
        /* r */
        display: none;
    }

    .header {
        /* r */
        top: 5px;
        height: 60px;
    }

    .header_wrap {
        /* r */
        font-size: 25px;
        margin-right: 60px;
    }

    .menu_icon {
        /* r */
        width: 30px;
        right: 15px;
    }

    .gnb>ul {
        /* r */
        margin-top: 100px;
    }

    .gnb>ul>li {
        /* r */
        font-size: 30px;
        padding: 30px 0;
        letter-spacing: 10px;
    }

    .gnb>ul>li::before {
        /* r */
        display: none;
    }

    .gnb .mu05::after {
        /* r */
        bottom: -100%;
        left: 33%;
    }

    .intro .itm01 {
        /* r */
        width: 350px;
        height: 350px;
        margin: 150px auto;
    }

    .intro .itm01::before {
        /* r */
        width: 100px;
        height: 100px;
    }

    .intro .itm01::after {
        /* r */
        width: 100px;
        height: 100px;
        animation: after 2.5s infinite;
    }

    @keyframes before {
        0% {
            transform: translate(60%, 20%)
        }

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

    @keyframes after {
        0% {
            transform: translate(70%, -100%);
            opacity: 0;
        }

        100% {
            transform: translate(-60%, -200%);
            opacity: 1;
        }
    }

    @keyframes bing {
        0% {}

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


    .txt {
        /* r */
        margin-left: 180px;
    }

    .txt h2,
    .txt h3 {
        /* r */
        font-size: 28px;
    }

    .intro .title h2 {
        /* r */

        font-size: 35px;
        letter-spacing: -1px;
        margin: 0 0 30px 0;
    }

    .intro .title p {
        /* r */
        font-size: 16px;
    }

    /* -------------- */


    .main_visual .txt h2 {
        /* r */
        margin-left: 15px;
    }

    .swiper-slide {
        /* r */
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 0 15px;
    }

    .swiper-slide .left_box {
        /* r */
        width: 0;
    }

    .swiper-slide .center {
        /* r */
        margin-top: 100px;
    }

    .swiper-slide .center img {
        /* r */
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    .swiper-slide .right_box {
        /* r */
        max-width: auto;
    }

    .swiper-slide .right_box h3 {
        /* r */
        font-size: 30px;
        margin: 0 0 30px 0;
    }

    .swiper-slide .right_box h3::before {
        /* r */
        top: 45px;
    }


    .list_dot {
        margin-bottom: 15px;
    }


    .list_dot td {
        /* r */
        font-size: 16px;
        padding: 3px 0;
    }

    .list_dot .strong {
        /* r */
        font-size: 16px;
    }

    .list_dot span {
        font-size: 17px;
    }

    .btn_box .btn {
        /* r */
        width: 18px;
        height: 18px;
    }

    .more_btn {
        display: flex;
        gap: 10px;

    }

    .more_btn>li {
        /* r */
        font-size: 16px;
        padding: 5px 15px;
        border-radius: 5px;
    }

    .more_btn .ori {
        display: none;
    }

    /*  */

    #main01 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main02 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main03 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main04 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main05 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main06 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main07 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    #main08 .center::before {
        /* r */
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }

    /*  #main09 .center::before {
        /* r */
    /* 
        bottom: -10px;
        right: 0;
        width: 90px;
        height: 150px;
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    }
 */

    /*  */

    .swiper-button-prev {
        /* r */
        top: auto;
        bottom: 18%;
        left: 60%;
        width: 50px;
        height: 50px;
    }

    .swiper-button-next {
        /* r */
        bottom: 18%;
        left: 80%;
        width: 50px;
        height: 50px;
    }


    .swiper-button-next::before {
        content: "";
        position: absolute;
        bottom: -30px;
        left: 10px;
        width: 50px;
        height: 50px;
        background: url(../images/cursors.png) no-repeat center center/cover;
        animation: cursor 2.5s infinite;
    }

    @keyframes cursor {
        0% {
            opacity: 0;
            transform: translateY(0);
        }

        100% {
            transform: translateY(-10%);
            opacity: 0.5;
        }
    }

    .swiper-horizontal>.swiper-pagination-progressbar,
    .swiper-pagination-progressbar.swiper-pagination-horizontal,
    .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
    .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
        width: 100%;
        height: var(--swiper-pagination-progressbar-size, 4px);
        left: 0;
        top: 9%;
    }


    /* ---------------------------------- */

    .tabnav li a {
        /* r */
        font-size: 13px;
        padding: 0 8px;
        line-height: 40px;
    }

    .tab_box {
        /* r */
        flex-direction: column-reverse;
        padding: 15px;
    }

    .tabcontent #tab01 {
        border: 10px solid #e0b7ab;
    }

    .tabcontent #tab02 {
        border: 10px solid #e0c19f;
    }

    .tabcontent #tab02 .logo {
        width: 15%;
    }

    .tabcontent #tab03 {
        border: 10px solid #C6CBA6;
    }

    .tabcontent #tab04 {
        border: 10px solid #8ca387;
    }


    /* ---------------------------------- */

    .traning_wrap .txt_box {
        /* r */
        text-align: left;
        gap: 30px;
    }

    .traning_wrap .txt_box h3 {
        /* r */
        font-size: 25px;
        font-weight: 500;
    }

    .traning_wrap .txt_box h3::before {
        /* r */
        display: none;
    }

    .traning_wrap .txt_box ul {
        /* r */
        gap: 10px;
        white-space: nowrap;
    }

    .traning_wrap .txt_box li {
        /* r */
        font-size: 13px;
        line-height: 20px;
    }

    .traning_wrap .txt_box span {
        /* r */
        padding: 15px;
        font-size: 15px;
    }

    /* ---------------------------------- */
    .main_Design {
        position: relative;
        align-items: center;
    }

    .main_Design h3 {
        margin-left: -160px;
        white-space: nowrap;
    }

    .main_Design img {
        max-height: 350px;
        max-width: 350px;
        /* r */
        max-height: 230px;
        max-width: 230px;
    }


    .b_box .btn {
        /* r */
        top: 10%;
        right: 0;
        width: 80px;
        height: 80px;
    }

    .Design_wrap {
        position: relative;
    }

    .Design_wrap .swiper-slide {
        display: flex;
        flex-direction: column;
        padding: 100px 0;
        /* r */
    }

    .Design_wrap .swiper-slide .txt_box {
        text-transform: uppercase;
        color: var(--hp);
        font-size: 20px;
        opacity: 0;
        /* r */
        font-size: 16px;
    }

    .Design_wrap .swiper-slide .txt_box .strong {
        color: var(--strong);
        font-weight: 700;
    }


    .Design_wrap .swiper-slide .img_box::before {
        position: absolute;
        content: "\F62C";
        bottom: 0;
        right: 15px;
        color: #fff;
        background: rgba(0, 0, 0, 0.6);
        font-size: 20px;
        padding: 13px;
        border-radius: 50%;
        font-family: bootstrap-icons;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        transition: 0.3s;
        opacity: 0;
        /* r */
        bottom: 10px;
        right: 10px;
        opacity: 1;
        font-size: 15px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.4);
    }

    .Design_wrap .swiper-slide .img_box:hover::before {
        bottom: 15px;
        opacity: 1;
        /* r */
        bottom: 10px;
    }


    .Design_wrap .swiper-slide-active .img_box {
        transform: scale(1.5);
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        opacity: 1;
        transition: 0.3s;
    }

    .Design_wrap .swiper-slide-active .txt_box {
        opacity: 1;
        transform: translateY(100%);
    }

    .Design_wrap .swiper-slide-active .txt_box td {
        text-align: left;
    }


    /* ---------------------------------- */

    .main_Design .arrows {
        position: absolute;
        bottom: 15%;
        left: 50%;
        z-index: 999;
        transform: translate(-50%, -50%);
        max-width: 800px;
        width: 100%;
        /* r */
        display: none;
    }

    /* ---------------------------------- */

    .about .txt {
        /* r */
        bottom: 20px;
        margin-left: 145px;
    }

    .about .txt h3 {
        /* r */
        font-size: 28px;
    }

    .about .wrap {
        /* r */
        gap: 30px;
        flex-direction: column;
    }

    .about svg {
        /* r */
        display: none;
    }


    .name_box h3 {
        /* r */
        font-size: 25px;
        margin-bottom: 15px;
    }

    .name_box td {
        /* r */
        font-size: 15px;
        padding: 5px 0;
    }

    .name_box td span {
        /* r */
        font-size: 18px;
    }

    .name_box .strong {
        /* r */
        font-size: 18px;
    }

    .exp_box h3 {
        /* r */
        font-size: 25px;
        margin-bottom: 15px;
    }

    .exp_box td {
        /* r */
        font-size: 15px;
        padding: 5px 0;
    }

    .exp_box .strong {
        /* r */
        width: 120px;
        font-size: 16px;
    }



    /* ------------------------------------------------ */

    #fp-nav ul li,
    .fp-slidesNav ul li {
        /* r */
        margin: 20px;
        display: none;
    }

    #fp-nav ul li a.active span,
    #fp-nav ul li:hover a.active span,
    .fp-slidesNav ul li a.active span,
    .fp-slidesNav ul li:hover a.active span {
        /* r */
        height: 13px;
        width: 13px;
    }

    #fp-nav ul li a span,
    .fp-slidesNav ul li a span {
        /* r */
        left: 200%;
        height: 13px;
        width: 13px;
    }

    #fp-nav ul li:hover a span,
    .fp-slidesNav ul li:hover a span {

        /*  */
        height: 13px;
        width: 13px;
    }


}