@charset "utf-8";

:root {
    --white:#FFFFFF;
    --black:#000000;
    --primary-10: #CFE6FD;
    --primary: #369BFF;
    --sec-padding: 170px;
}

/* 공통 */
.container {overflow-x:hidden}
.wrapper {width:100%;max-width:1540px;padding:0 30px;margin:0 auto}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn {display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;border-radius:10px;padding:20px 30px;transition:all .2s}
.btn_primary {color:var(--white);background:var(--primary)}
.btn_primary:hover {background:#1c8eff}
.btn_gra {color:var(--white);background:linear-gradient(to right, #7BCEFF, #007BFF)}
.btn_white {background:var(--white);border:solid 1px #D9D9D9}
.btn_white:hover {border-color:var(--primary);color:var(--primary)}
.blue {color:var(--primary)}
.sec {overflow:hidden}

.scroll_custom::-webkit-scrollbar {width:6px}
.scroll_custom::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:#535353;border-radius:50px}
.scroll_custom::-webkit-scrollbar-track {background-color:#2E2E2E;border-radius:50px}

.title_box {text-align:center;margin-bottom:74px}
.title_box.left {text-align:left}
.title_box .sub {display:inline-flex;align-items:center;justify-content:center;background:#E1F0FF;border-radius:40px;font-size:24px;font-weight:600;color:#37A2DB;padding:6px 14px;margin-bottom:20px}
.title_box .sub.blue {padding:0;color:#4DA6FF;background:0}
.title_box .tit {font-size:44px;font-weight:700;line-height:1.4}
.title_box p {font-size:20px;color:#787878;margin-top:24px}

/* 텍스트 그라데이션 */
.gra_01 {background:linear-gradient(120deg, #DC03EF, #039CE2);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* 헤더 */
.header {width:100%;background:rgba(255,255,255,.6);position:fixed;top:0;left:0;z-index:99;transition:background .2s}
.header .wrapper {display:flex;align-items:center;max-width:1640px;height:90px}
.header .logo {width:167px}
.header .menu_wrap {display:flex;align-items:center;margin-left:auto}
.header .menu_wrap .menu_head {display:none}
.header .menu_open {display:none}
.header .right_menu {display:flex;align-items:center;gap:0 14px}
.header .right_menu a:first-child {color:#343434;gap:0 4px;margin-right:20px}
.header .right_menu a:first-child path {transition:all .2s}
.header .right_menu a:first-child:hover {color:var(--primary)}
.header .right_menu a:first-child:hover path {fill:var(--primary)}
.header .right_menu .btn {font-size:17px;padding:18px 14px}
.header .right_menu .btn_gra svg {display:none}

/* 푸터 */
.footer {font-size:14px;line-height:1.7;color:#787878;padding:50px 0}
.footer .wrapper {display:flex;align-items:flex-start;justify-content:space-between}
.footer .float_btn {display:flex;align-items:center;background:var(--white);border-radius:10px;box-shadow:4px 4px 18px rgba(125,126,166,.32);position:fixed;bottom:30px;right:30px;padding:12px 20px;z-index:12}
.footer .float_btn img {width:44px}
.footer .float_btn .tit {font-size:20px}
.footer .float_btn .btn_primary {gap:0 4px;font-size:15px;border-radius:5px;padding:9px 10px 8px;margin-left:24px}
.footer .float_btn .btn_primary svg {display:block;margin-top:-2px}
.footer .num {display:flex;align-items:center;gap:0 10px;font-size:24px;font-weight:600;color:var(--primary)}
.footer .left {width:50%}
.footer .left .info {margin-top:24px;}
.footer .left .info > div {display:flex;align-items:flex-start}
.footer .left .info > div + div {margin-top:12px}
.footer .left .info > div .tit {flex:130px 0 0;font-weight:600;color:#3F3F3F}
.footer .right {text-align:right;font-weight:300}
.footer .right .copyright {display:block;color:#C1C1C1;margin-top:10px}

/* 인덱스 */
.index .sec_01 {height:992px;max-height:100vh;position:relative}
.index .sec_01 .img_wrap {width:100%;height:100%;overflow:hidden}
.index .sec_01 .img_wrap img {width:100%;height:100%;object-fit:cover;animation:zoom-in 10s alternate both linear}
.index .sec_01 .wrapper {position:absolute;top:30%;left:50%;transform:translateX(-50%)}
.index .sec_01 .txt_wrap {display:flex;flex-direction:column;align-items:flex-start}
.index .sec_01 .txt_wrap .sub {font-size:20px;font-weight:700;color:var(--primary);background:var(--primary-10);border-radius:50px;padding:10px 14px}
.index .sec_01 .txt_wrap h1 {font-size:70px;font-weight:700;margin-top:14px}
.index .sec_01 .txt_wrap p {color:#444444;font-size:20px;margin-top:24px}
.index .sec_01 .txt_wrap .btn_wrap {margin-top:34px}

.index .sec_02 {padding:170px 0 130px}
.index .sec_02 .title_box p {font-size:34px;color:#121212}
.index .sec_02 .swiper {overflow:visible}
.index .sec_02 .swiper-wrapper {-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important}
.index .sec_02 .swiper-slide {width:auto}
.index .sec_02 .swiper-slide .img_wrap {height:80px;margin:0 36px}
.index .sec_02 .swiper-slide .img_wrap img {width:auto;max-width:initial;height:100%}
.index .sec_02 p.sub {margin-top:14px;font-size:14px;font-weight:500;color:#787878;text-align:right}

.index .sec_03 {background:linear-gradient(to right, #70A9FF, #99DDFF);padding:128px 0}
.index .sec_03 .wrapper {display:flex;align-items:center;justify-content:space-between;gap:0 40px}
.index .sec_03 .title_box {margin:0;color:var(--white)}
.index .sec_03 .title_box .sub {background:0;padding:0;color:var(--white)}
.index .sec_03 .title_box p {color:var(--white)}
.index .sec_03 .img_wrap {width:50%;max-width:718px;border-radius:30px;overflow:hidden;box-shadow:4px 4px 30px rgba(125,126,166,.15)}
.index .sec_03 .img_wrap img {width:100%}

.index .sec_04 {background:url('../img/maker_04_bg.png') no-repeat center bottom/100%;padding:var(--sec-padding) 0}
.index .sec_04 .list {display:grid;grid-template-columns:repeat(2, 1fr);gap:44px}
.index .sec_04 .list .item {display:flex;flex-direction:column;border-radius:30px;box-shadow:4px 4px 30px rgba(125,126,166,.15);color:var(--white);overflow:hidden}
.index .sec_04 .list .item .txt_wrap {padding:100px 70px}
.index .sec_04 .list .item .txt_wrap .icon {display:block;max-width:initial;height:30px;margin-bottom:10px}
.index .sec_04 .list .item .txt_wrap .tit {display:block;font-size:30px;font-weight:700;line-height:1.4;margin-bottom:30px}
.index .sec_04 .list .item .txt_wrap ul li {display:flex;align-items:flex-start;gap:10px;font-size:20px}
.index .sec_04 .list .item .txt_wrap ul li + li {margin-top:14px}
.index .sec_04 .list .item .txt_wrap ul li svg {min-width:24px;margin-top:2px}
.index .sec_04 .list .item .img_wrap {margin-top:auto}
.index .sec_04 .list .item:first-child {align-items:center;justify-content:space-between;grid-column:span 2;background:#4D62FF;flex-direction:row;}
.index .sec_04 .list .item:nth-child(2) {background:#191919}
.index .sec_04 .list .item:nth-child(3) {background:#4DA6FF}
.index .sec_04 .list .item:first-child .img_wrap {width:56%;max-width:854px}

.index .sec_05 {padding:var(--sec-padding) 0}
.index .sec_05 .list {display:flex;gap:48px}
.index .sec_05 .list .item {flex:1;background:var(--white);border-radius:30px;overflow:hidden;box-shadow:4px 4px 30px rgba(125,126,166,.2)}
.index .sec_05 .list .item .txt_wrap {padding:30px 40px}
.index .sec_05 .list .item .txt_wrap .tit {display:block;font-size:30px;font-weight:700;line-height:1.3}
.index .sec_05 .list .item .txt_wrap p {font-size:20px;color:#787878;font-weight:500;margin-top:14px}

.index .sec_06 {background:linear-gradient(to right, #70A9FF, #99DDFF);padding:var(--sec-padding) 0}
.index .sec_06 .title_box {color:var(--white)}
.index .sec_06 .swiper {max-width:1248px;margin:0 auto;overflow:visible;position:relative}
.index .sec_06 .swiper-slide {font-size:20px;width:400px;min-height:362px;border-radius:15px;background:var(--white);box-shadow:0 4px 30px rgba(0,0,0,.1);padding:45px 34px;margin:12px;opacity:.4;transition:all .3s}
.index .sec_06 .swiper-slide .top {display:flex;align-items:center;gap:0 14px;font-weight:700}
.index .sec_06 .swiper-slide .top .profile {display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;background:#E5F6FF;border-radius:44px;color:#4DA6FF}
.index .sec_06 .swiper-slide .top .name {display:block}
.index .sec_06 .swiper-slide .top .sub {display:block;font-size:14px;font-weight:500;color:#959595;margin-top:4px}
.index .sec_06 .swiper-slide svg {margin:40px 0 20px}
.index .sec_06 .swiper-slide p {color:#3C3C3C}
.index .sec_06 .swiper-slide-active {background:#191919;color:var(--white);opacity:1}
.index .sec_06 .swiper-slide-active p {color:var(--white)}
.index .sec_06 .swiper-slide-next {opacity:1}
.index .sec_06 .swiper-slide-next + .swiper-slide {opacity:1}
.index .sec_06 .btn_prev,
.index .sec_06 .btn_next {display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--white);border-radius:40px;cursor:pointer;position:absolute;top:50%;left:-120px;transform:translateY(-50%);z-index:10}
.index .sec_06 .btn_next {left:auto;right:-120px}

.index .sec_07 {background:#F3F7FA;padding:var(--sec-padding) 0}
.index .sec_07 .wrapper {max-width:1860px}
.index .sec_07 .swiper {display:none}
.index .sec_07 .list {display:flex;align-items:flex-start;gap:20px}
.index .sec_07 .list .item:nth-child(even) {margin-top:90px}
.index .sec_07 .item {border-radius:30px;position:relative;overflow:hidden;box-shadow:4px 4px 18px rgba(125,126,166,.32)}
.index .sec_07 .item .img_wrap {transition:all .3s}
.index .sec_07 .item .txt_wrap {opacity:0;position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);padding:20px 40px;color:var(--white);transition:all .3s}
.index .sec_07 .item .txt_wrap .sub {display:inline-block;background:#4DA6FF;border-radius:40px;font-size:20px;font-weight:700;color:var(--white);padding:7px 14px;margin-bottom:20px}
.index .sec_07 .item .txt_wrap .num {display:flex;align-items:center;gap:0 10px;font-size:40px;font-weight:700;color:rgba(255,255,255,.6)}
.index .sec_07 .item .txt_wrap .num::before {content:'·';display:block;}
.index .sec_07 .item .txt_wrap p {font-size:24px;font-weight:700;margin-top:10px;line-height:1.4}

.index .sec_08 {background:url('../img/maker_08_bg.png') no-repeat center bottom/100%;padding:var(--sec-padding) 0}
.index .sec_08 .wrapper {display:flex;align-items:flex-start;justify-content:space-between;gap:0 40px}
.faq_list {width:65%;max-width:960px;border-bottom:solid 1px #D6D6D6}
.faq_list > ul > li {border-top:solid 1px #D6D6D6}
.faq_list button {width:100%;font-size:30px;font-weight:700;line-height:1.3;padding:40px 50px 40px 60px;position:relative;text-align:left;transition:all .2s}
.faq_list button:hover {color:var(--primary)}
.faq_list button::before,
.faq_list .cont::before {content:'Q.';display:block;position:absolute;top:40px;left:10px;font-size:30px;font-weight:700;color:var(--primary)}
.faq_list button::after {content:'';display:block;width:24px;height:24px;background:url('../img/arrow_down.svg') no-repeat center/100%;position:absolute;top:50%;right:10px;transform:translateY(-50%);transition:all .2s}
.faq_list button.on::after {transform:rotate(180deg) translateY(14px)}
.faq_list .cont {display:none;font-size:20px;padding:34px 50px 34px 60px;position:relative;border-top:solid 1px #D6D6D6}
.faq_list .cont::before {content:'A.';top:34px;color:#888888}
.faq_list .cont p {color:#646464;line-height:1.7}
.faq_list .cont ul {margin-top:20px}
.faq_list .cont li {position:relative;padding-left:14px}
.faq_list .cont li::before {content:'·';display:block;position:absolute;top:0;left:0}

.index .sec_09 {padding:var(--sec-padding) 0}
.index .sec_09 .cont {position:relative}
.index .sec_09 .img_wrap {border-radius:30px;overflow:hidden}
.index .sec_09 .txt_wrap {width:100%;position:absolute;top:50%;left:0;transform:translateY(-50%);padding:0 100px;z-index:1;color:var(--white)}
.index .sec_09 .txt_wrap .tit {display:block;font-size:34px;line-height:1.4}
.index .sec_09 .btn {display:inline-flex;border-radius:70px;gap:0 14px;margin-top:34px}

/* 브랜드 */
.index.brand .sec_03 {background:url('../img/brand_03_bg.jpg') no-repeat center/cover}
.index.brand .sec_03 .title_box {color:#121212}
.index.brand .sec_03 .title_box .sub {color:#4DA6FF}
.index.brand .sec_03 .title_box p {color:#343434}

.index.brand .sec_04 .wrapper {max-width:1640px}
.index.brand .sec_04 .list {display:flex;flex-direction:column;gap:34px;}
.index.brand .sec_04 .list .item {align-items:center;justify-content:space-between;flex-direction:row;background:var(--white) !important;color:#121212}
.index.brand .sec_04 .list .item:nth-child(2) {flex-direction:row-reverse;}
.index.brand .sec_04 .list .item .img_wrap {align-self:flex-end;width:54%;max-height:489px;max-width:initial;margin:0}

.index.brand .sec_05 {background:linear-gradient(to right,#99DDFF, #70A9FF)}
.index.brand .sec_05 .title_box .tit {color:var(--white)}
.index.brand .sec_05 .list {align-items:flex-start}
.index.brand .sec_05 .list .item {height:467px}
.index.brand .sec_05 .list .item:nth-child(odd) {margin-top:-30px}

.index.brand .sec_06 {background:url('../img/maker_08_bg.png') no-repeat center bottom/100%}
.index.brand .sec_06 .title_box .tit {color:#121212}
.index.brand .sec_06 .btn_prev,
.index.brand .sec_06 .btn_next {background:#4DA6FF}
.index.brand .sec_06 .swiper-slide-active {background:linear-gradient(#83C1FF, #4DA6FF)}
.index.brand .sec_06 .swiper-slide-active .top .sub {color:var(--white)}
.index.brand .sec_06 .swiper-slide-active svg path {fill:var(--white)}

.index.brand .sec_07 {background:none}
.index.brand .sec_07 .list .item:nth-child(even) {margin:0}
.index.brand .sec_07 .list {justify-content:center;align-items:flex-end;}
.index.brand .sec_07 .item {width:300px;height:500px;transition:all .4s}
.index.brand .sec_07 .item:hover {width:540px;}
.index.brand .sec_07 .item .img_wrap {width:100%;height:100%}
.index.brand .sec_07 .item .img_wrap img {width:100%;height:100%;object-fit:cover;}
.index.brand .sec_07 .item .txt_wrap {display:flex;flex-direction:column;align-items:flex-start;height:100%;padding:35px 40px}
.index.brand .sec_07 .item .txt_wrap .num {margin-top:auto}

.index.brand .sec_08 {background:none}

.index.brand .sec_09 {background:linear-gradient(to right,#8BE0FE, #4DA6FF)}
.index.brand .sec_09 .title_box {text-align:center}
.index.brand .sec_09 .title_box .sub {font-size:34px;color:var(--white);background:0;padding:0;margin-bottom:10px}
.index.brand .sec_09 .title_box .tit {font-size:64px;color:var(--white)}
.index.brand .sec_09 .btn_white {border:0}
.index.brand .sec_09 .btn_white path,
.index.brand .sec_09 .btn_white line {transition:all .2s}
.index.brand .sec_09 .btn_white:hover path,
.index.brand .sec_09 .btn_white:hover line {stroke:var(--primary)}
.index.brand .sec_09 .item {border-radius:30px}
.index.brand .sec_09 .swiper {overflow:visible}
.index.brand .sec_09 .swiper-wrapper {-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important}
.index.brand .sec_09 .swiper-slide {width:auto;padding:0 10px}
.index.brand .sec_09 .swiper-slide img {width:385px;border-radius:30px}

@keyframes zoom-in {
    from {transform:scale(1)}
    to {transform:scale(1.08)}
}

@media (hover: hover) {
    .index.maker .sec_07 .item:hover .img_wrap {filter:blur(22px) brightness(0.8)}
    .index .sec_07 .item:hover .txt_wrap {opacity:1}
}

@media all and (max-width: 1599px) {
    .index .sec_07 .list .item:nth-child(even) {margin-top:50px}
    .index .sec_07 .item .txt_wrap {padding:20px 30px}
    .index .sec_07 .item .txt_wrap .sub {font-size:16px}
    .index .sec_07 .item .txt_wrap .num {font-size:34px}
    .index .sec_07 .item .txt_wrap p {font-size:18px}
}

@media all and (max-width: 1499px) {
    .index .sec_06 .btn_prev {left:-30px}
    .index .sec_06 .btn_next {right:-30px}
}

@media all and (max-width: 1199px) {
    :root {
        --sec-padding: 120px;
    }
    
    .btn {border-radius:7px;font-size:18px;padding:16px 22px}
    .title_box {margin-bottom:54px}
    .title_box .sub {font-size:20px;margin-bottom:16px}
    .title_box .tit {font-size:34px}
    .title_box p {font-size:17px;margin-top:20px}

    /* 헤더 */
    .header .wrapper {height:74px}
    .header .logo {width:146px}
    .header .menu_wrap {display:none;flex-direction:column;align-items:flex-start;width:100%;height:100%;background:#4DA6FF;position:fixed;top:0;left:0;overflow-y:auto;padding:70px 40px 40px}
    .header .menu_wrap .menu_head {display:flex;align-items:center;width:100%;height:60px;padding-left:16px;position:fixed;top:0;left:0}
    .header .menu_open {display:flex;font-size:14px;margin-left:auto;padding:10px 14px;border-radius:5px}
    .header .menu_close {display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin-left:auto}
    .header .right_menu {width:100%;display:block}
    .header .right_menu .btn {width:100%;justify-content:flex-start;background:pink;border:0;border-radius:0;;padding:0;background:transparent;color:var(--white);font-size:24px;margin-top:34px}
    .header .right_menu .btn::before {content:'·';margin-right:14px}
    .header .right_menu a:first-child {color:var(--white);margin:0 0 34px;padding-bottom:34px;border-bottom:solid 1px rgba(255,255,255,.6)}
    .header .right_menu a:first-child::before {display:none}
    .header .right_menu a:first-child path {fill:var(--white)}
    .header .right_menu .btn_gra svg {display:block;margin-left:10px}

    /* 인덱스 */
    .index .sec_01 {height:700px}
    .index .sec_01 .txt_wrap .sub {font-size:16px;padding:9px 10px}
    .index .sec_01 .txt_wrap h1 {font-size:50px;margin-top:10px}
    .index .sec_01 .txt_wrap p {font-size:16px;margin-top:20px}
    .index .sec_01 .txt_wrap .btn_wrap {margin-top:28px}

    .index .sec_02 {padding:120px 0 100px}
    .index .sec_02 .title_box p {font-size:25px}
    .index .sec_02 .swiper-slide .img_wrap {height:50px;margin:0 22px}

    .index .sec_03 {padding:100px 0}
    .index .sec_03 .img_wrap {border-radius:22px}

    .index .sec_04 .list {gap:30px}
    .index .sec_04 .list .item .txt_wrap {padding:60px 50px}
    .index .sec_04 .list .item .txt_wrap .tit {font-size:24px;margin-bottom:24px}
    .index .sec_04 .list .item .txt_wrap ul li {font-size:17px}
    .index .sec_04 .list .item .txt_wrap ul li svg {width:20px;height:20px}

    .index .sec_05 .list {gap:30px}
    .index .sec_05 .list .item {border-radius:22px}
    .index .sec_05 .list .item .txt_wrap {padding:25px 30px}
    .index .sec_05 .list .item .txt_wrap .tit {font-size:24px}
    .index .sec_05 .list .item .txt_wrap p {font-size:17px}

    .index .sec_06 .title_box {margin:0}
    .index .sec_06 .btn_wrap {justify-content:flex-start;margin:24px 0 20px}
    .index .sec_06 .btn_prev,
    .index .sec_06 .btn_next {position:initial;transform:none}
    .index .sec_06 .swiper-slide {width:350px;min-height:320px;font-size:17px;padding:45px 24px;margin:8px}
    .index .sec_06 .swiper-slide .top .sub {font-size:13px}
    .index .sec_06 .swiper-slide svg {margin-top:30px}

    .index .sec_07 .list {flex-wrap:wrap;justify-content:center;max-width:800px;margin:0 auto}
    .index .sec_07 .item {width:225px}
    .index .sec_07 .list .item:nth-child(even) {margin:0}
    .index .sec_07 .swiper {padding:20px 0;margin:-20px 0;overflow:visible}
    .index .sec_07 .swiper-slide {width:240px}

    .faq_list button {font-size:24px;padding:30px 50px 30px 70px}
    .faq_list button::before,
    .faq_list .cont::before {font-size:24px;top:30px;left:30px}
    .faq_list .cont {font-size:17px;padding:28px 50px 34px 70px}

    .index .sec_09 .txt_wrap {padding:0 70px}
    .index .sec_09 .txt_wrap .tit {font-size:26px}
    .index .sec_09 .btn svg {width:30px}

    /* 브랜드 */
    .index.brand .sec_05 .list .item {height:380px}

    .index.brand .sec_07 .item {height:400px}
    .index.brand .sec_07 .item:hover {width:300px}
    
    .index.brand .sec_09 .title_box .sub {font-size:24px}
    .index.brand .sec_09 .title_box .tit {font-size:44px}
    .index.brand .sec_09 .swiper-slide img {width:300px;border-radius:22px}
/*

*/
}

@media all and (max-width: 1023px) {
    .index .sec_03 .wrapper {max-width:600px;flex-direction:column;gap:24px 0}
    .index .sec_03 .title_box {width:100%}
    .index .sec_03 .img_wrap {width:100%}

    .index .sec_04 .list {display:flex;flex-direction:column;gap:20px;max-width:560px;margin:0 auto}
    .index .sec_04 .list .item:first-child {flex-direction:column}
    .index .sec_04 .list .item:first-child > div {width:100% !important;max-width:100%}

    .index .sec_05 .wrapper {max-width:600px}
    .index .sec_05 .list {flex-direction:column}

    .index .sec_08 .wrapper {flex-direction:column;}
    .index .sec_08 .title_box {width:100%;text-align:center}
    .faq_list {width:100%}

    /* 브랜드 */
    .index.brand .sec_04 .list .item {flex-direction:column !important;gap:24px 0}
    .index.brand .sec_04 .list .item .img_wrap {width:100%}

    .index.brand .sec_05 .list .item {height:auto}
    .index.brand .sec_05 .list .item:nth-child(odd) {margin:0}
}

@media all and (max-width: 767px) {
    :root {
        --sec-padding: 80px;
    }

    .only_mb {display:block}
    .only_pc {display:none}
    .btn {border-radius:5px;font-size:15px;padding:12px 14px}
    .title_box {margin-bottom:34px}
    .title_box .sub {font-size:14px}
    .title_box .tit {font-size:24px}
    .title_box p {font-size:14px;margin-top:14px}
    .wrapper {padding:0 20px}

    /* 푸터 */
    .footer {font-size:12px}
    .footer .float_btn {padding:10px 14px;right:15px;bottom:20px}
    .footer .float_btn img {width:34px}
    .footer .float_btn .tit {font-size:14px;margin-left:4px}
    .footer .float_btn .tit .blue {display:none}
    .footer .float_btn .btn_primary {margin-left:14px;font-size:14px;padding:6px 10px 5px}
    .footer .wrapper {display:block}
    .footer .left {width:100%}
    .footer .num {font-size:20px}
    .footer .num svg {width:20px}
    .footer .left .info > div {display:block}
    .footer .left .info > div .cont {display:block;margin-top:4px}
    .footer .right {text-align:left;margin-top:14px}
    .footer .right .copyright {margin-top:4px}
    
    /* 인덱스 */
    .index .sec_01 .wrapper {top:104px}
    .index .sec_01 .txt_wrap .sub {font-size:12px;padding:7px 10px}
    .index .sec_01 .txt_wrap h1 {font-size:30px;margin-top:8px}
    .index .sec_01 .txt_wrap p {font-size:14px;margin-top:14px}
    .index .sec_01 .txt_wrap .btn_wrap {margin-top:20px}
    
    .index .sec_02 {padding:70px 0 28px}
    .index .sec_02 .title_box p {font-size:17px}
    .index .sec_02 .swiper-slide .img_wrap {height:38px;margin:0 10px}
    .index .sec_02 p.sub {font-size:11px;margin-top:56px;color:#A9A9A9}

    .index .sec_03 {padding:80px 0}
    .index .sec_03 .img_wrap {border-radius:15px}
    .index .sec_03 .title_box .sub {margin-bottom:10px}
    
    .index .sec_04 {background-size:cover}
    .index .sec_04 .title_box {text-align:left}
    .index .sec_04 .list .item .txt_wrap {padding:30px 30px 0}
    .index .sec_04 .list .item .txt_wrap .tit {font-size:20px;margin-bottom:20px}
    .index .sec_04 .list .item .txt_wrap ul li {gap:0 8px;font-size:14px}
    .index .sec_04 .list .item .txt_wrap ul li svg {width:18px;height:18px}
    .index .sec_04 .list .item .txt_wrap .icon {height:20px}

    .index .sec_05 .list {gap:20px}
    .index .sec_05 .list .item {border-radius:15px}
    .index .sec_05 .list .item .txt_wrap {padding:20px}
    .index .sec_05 .list .item .txt_wrap .tit {font-size:20px}
    .index .sec_05 .list .item .txt_wrap p {font-size:14px;margin-top:12px}

    .index .sec_06 .swiper-slide {width:300px;min-height:280px;padding:40px 20px}
    .index .sec_06 .swiper-slide .top .profile {width:34px;min-width:34px;height:34px}
    .index .sec_06 .swiper-slide p {font-size:14px}

    .index .sec_07 .list {display:none}
    .index .sec_07 .item {width:100%}
    .index .sec_07 .item .txt_wrap .sub {font-size:13px}
    .index .sec_07 .item .txt_wrap .num {font-size:30px}
    .index .sec_07 .item .txt_wrap p {font-size:17px}
    .index .sec_07 .swiper {display:block}
    .index .sec_07 .swiper-slide {padding:7px}
    .index.maker .sec_07 .swiper-slide-active .item .img_wrap {filter:blur(22px) brightness(0.8)}
    .index .sec_07 .swiper-slide-active .item .txt_wrap {opacity:1}

    .faq_list button {font-size:17px;padding:24px 38px 24px 38px}
    .faq_list button:hover {color:inherit}
    .faq_list button::before,
    .faq_list .cont::before {font-size:17px;left:10px;top:24px}
    .faq_list button::after {right:10px;width:18px;height:18px}
    .faq_list .cont {font-size:14px;padding:24px 0 24px 38px}

    .index .sec_09 .txt_wrap {padding:50px 30px}
    .index .sec_09 .txt_wrap .tit {font-size:20px}
    .index .sec_09 .img_wrap {height:0;padding-bottom:50%;position:relative;border-radius:20px}
    .index .sec_09 .img_wrap img {width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
    .index .sec_09 .btn {margin-top:24px}
    .index .sec_09 .btn svg {width:22px}

    /* 브랜드 */
    .index.brand .sec_07 .item {width:initial}
    .index.brand .sec_07 .item:hover {width:100%}
    .index.brand .sec_07 .item .txt_wrap {padding:40px 20px}
    .index.brand .sec_07 .swiper-slide {width:330px}
    
    .index.brand .sec_09 .title_box .sub {font-size:14px}
    .index.brand .sec_09 .title_box .tit {font-size:24px}
    .index.brand .sec_09 .swiper-slide img {width:198px;border-radius:15px}
}

@media all and (max-width: 499px) {
    .index .sec_05 .title_box .tit br {display:none}
    .index .sec_09 .txt_wrap {top:0;transform:none}
    .index .sec_09 .img_wrap {padding:0;height:auto}
    .index .sec_09 .img_wrap img {position:relative}
}
 
@media all and (max-width: 374px) {
    .index.maker .sec_02 .title_box p .blue {display:block}

    .index.brand .sec_07 .item {height:350px}
    .index.brand .sec_07 .swiper-slide {width:300px}
}