@charset "utf-8";

:root {
    --white:#FFFFFF;
    --black:#000000;
    --header-height: 100px;
    --sec-padding: 200px;
    --primary: #1668FF;
}

/* 공통 */
.container {overflow-x:hidden;background:#050408;color:var(--white)}
.wrapper {width:100%;max-width:1470px;padding:0 20px;margin:0 auto}
.no_scroll {height:100%;overflow:hidden}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn_primary {display:flex;align-items:center;justify-content:center;gap:0 10px;font-size:24px;font-weight:700;color:var(--white);border-radius:100px;padding:15px 40px;transition:all .2s;position:relative;overflow:hidden;text-align:center}
.btn_primary svg {transition:all .2s}
.btn_primary::before {content:'';display:block;width:120%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);z-index:2;position:absolute;top:0;left:0;transition:all .2s}
.btn_primary .txt,
.btn_primary img,
.btn_primary svg {position:relative;z-index:3}

.btn_gra .box {max-width:1200px;border-radius:50px;padding:3px;background:radial-gradient(ellipse at center 10%, #0095FF 0%, transparent 100%);margin:0 auto;position:relative;transition:all .2s;overflow:hidden;text-align:center}
.btn_gra .box::before {content:'';display:block;width:80%;height:3px;background:linear-gradient(to right, transparent, #0095FF, transparent);position:absolute;bottom:0;left:10%}
.btn_gra .box .inner {background:linear-gradient(120deg, #0D1625, #07090E);border-radius:50px;padding:20px 40px;font-size:30px;font-weight:600;color:var(--white);transition:all .2s;position:relative}
.btn_gra .box .inner::before {content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;opacity:0;transition:all .1s}
.btn_gra .box .inner2 {display:flex;align-items:center;gap:0 14px;position:relative;z-index:3}
.btn_gra .box svg {transition:all .2s}

.btn_gray {display:flex;align-items:center;justify-content:center;gap:0 10px;font-size:24px;font-weight:700;color:var(--white);background:rgba(212,212,212,.2);border-radius:100px;padding:15px 40px;transition:all .2s;position:relative;overflow:hidden;text-align:center}
.btn_gray svg {transition:all .2s}
.btn_gray::before {opacity:0;content:'';display:block;width:120%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);z-index:2;position:absolute;top:0;left:0;transition:all .2s}
.btn_gray .txt,
.btn_gray img,
.btn_gray svg {position:relative;z-index:3}

.sec {overflow:hidden}
.blue {color:var(--primary)}
.white {color:var(--white) !important}

.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}

ul.dash li {position:relative;padding-left:16px}
ul.dash li::before {content:'-';position:absolute;top:0;left:0}

ul.dot li {position:relative;padding-left:16px}
ul.dot li::before {content:'·';font-weight:700;position:absolute;top:0;left:0}
ol.num {list-style:auto;padding-left:20px}

/* 보더그라데이션 */
.gra_border .box {border-radius:20px;padding:3px;position:relative}
.gra_border .box::before {opacity:0;content:'';display:block;width:80%;height:3px;background:linear-gradient(to right, transparent, #0095FF, transparent);position:absolute;bottom:0;left:10%;transition:all .2s}
.gra_border .box .inner {background:#1A1A22;border-radius:18px;padding:40px;overflow:hidden;position:relative}
.gra_border .box .inner::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(120deg, #0D1625, #07090E);position:absolute;top:0;left:0;transition:all .2s}
.gra_border .box .inner > * {position:relative;z-index:2}
.gra_border .txt_wrap .sub {display:block;font-size:24px;line-height:1.4;margin-bottom:10px}
.gra_border .txt_wrap .tit {display:block;font-size:34px;font-weight:700;line-height:1.4}
.gra_border .txt_wrap p {font-size:20px;font-weight:300;margin-top:24px;opacity:.9}
.gra_border .txt_wrap p strong {font-weight:700}
.gra_border + .gra_border {margin-top:40px}

.title_box {text-align:center;margin-bottom:60px}
.title_box.left {text-align:left}
.title_box .sub {display:inline-block;font-size:24px;font-weight:500;line-height:1.3;margin-bottom:14px}
.title_box .sub.mark {border:solid 1px var(--white);border-radius:50px;padding:14px 24px}
.title_box .tit {font-size:54px;font-weight:700;line-height:1.3}
.title_box p {font-size:20px;margin-top:24px;color:rgba(255,255,255,.6)}
.title_box p.big {font-size:34px;margin-top:40px}

/* 텍스트 그라데이션 */
.gra_01 {background:linear-gradient(to right, #00A1FF, #0049FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.tab_menu ul {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px}
.tab_menu li>* {display:flex;align-items:center;justify-content:center;width:100%;height:60px;font-size:24px;font-weight:500;background:rgba(212,212,212,.2);border-radius:50px;color:var(--white);padding:0 40px;transition:all .2s}
.tab_menu li>*:hover {background:rgba(212,212,212,.25)}
.tab_menu li>*.on {background:linear-gradient(to right, #00A1FF, #0049FF)}

.tab_cont {display:none}
.tab_cont.on {display:block}

/* 애니메이션 */
@keyframes float {
    0% {transform:translateY(0)}
    100% {transform:translateY(-5%)}
}
@keyframes txt-up {
    0% {transform:translateY(100%)}
    100% {transform:translateY(0)}
}
@keyframes txtSlide {
    from {transform:translateX(0)}
    to {transform:translateX(-100%)}
}
@keyframes scaleUp {
    from {transform:scale(1)}
    to {transform:scale(1.1)}
}
@keyframes opacity {
    from {opacity:0}
    to {opacity:1}
}

/* 포폴 리스트 */
.portfolio_list ul {display:grid;grid-template-columns:repeat(3, 1fr);gap:44px 40px;}
.portfolio_list li > a {position:relative}
.portfolio_list li > a:hover .img_wrap img {transform:scale(1.03)}
.portfolio_list .img_wrap {border-radius:20px;overflow:hidden}
.portfolio_list .img_wrap img {width:100%;transition:all .5s}
.portfolio_list .txt_wrap {text-align:center;margin-top:16px;padding:0 10px}
.portfolio_list .txt_wrap .sub {display:block;font-size:16px;color:var(--primary);margin-bottom:8px}
.portfolio_list .txt_wrap .tit {display:block;font-size:24px;font-weight:700;color:var(--white);line-height:1.4;}
.portfolio_list .gall_chk {position:absolute;top:0;left:0;z-index:3}
    
    /* 헤더 */
.header {width:100%;position:fixed;top:0;left:0;z-index:99;transition:all .2s}
.header.white {background:rgba(255,255,255,.1);backdrop-filter:blur(20px)}

.header .wrapper {display:flex;align-items:center;max-width:1490px;height:var(--header-height)}
.header .logo {width:173px}
.header .logo img {width:100%}
.header .menu_wrap {display:flex;align-items:center;margin-left:auto}
.header .menu_wrap .menu_head {display:none}
.header .gnb ul {display:flex;align-items:center;gap:0 80px}
.header .gnb li a {display:flex;align-items:center;height:var(--header-height);font-size:20px;font-weight:500;color:#F8F7F7;transition:all .2s}
.header .gnb li a.on {color:var(--primary)}
.header .menu_open {display:none}

/* 푸터 */
.footer {background:#191919;color:var(--white);padding:68px 0}
.footer .top {display:flex;align-items:center;gap:24px 30px;}
.footer .top > img {width:128px}
.footer .link_wrap ul {display:flex;align-items:center}
.footer .link_wrap ul li + li a {border-left:solid 1px #ECECEC}
.footer .link_wrap ul li a {color:var(--white);font-size:14px;font-weight:600;padding:0 30px;opacity:.8;transition:all .2s}
.footer .info {display:flex;flex-direction:column;gap:10px;margin-top:24px;font-size:14px;color:#CECECE}
.footer .info span {display:flex;align-items:center;line-height:1.3}
.footer .info div {display:flex;align-items:center}
.footer .info div span + span::before {content:'';display:block;width:1px;height:12px;background:#ECECEC;margin:0 10px}

@media (hover: hover) {
    .btn_primary:hover::before {left:-20%}
    .btn_primary:hover svg.arrow_upright {transform:translate(3px, -3px)}
    
    .btn_gra:hover .box {background:linear-gradient(to right, #00A1FF, #0049FF)}
    .btn_gra:hover .box::before {display:none}
    .btn_gra:hover .box .inner::before {opacity:1}
    .btn_gra:hover .box svg {transform:translateX(5px)}
    
    .btn_gray:hover::before {opacity:1}
    
    .gra_border .box:hover {background:radial-gradient(ellipse at center 10%, #0095FF 0%, transparent 100%)}
    .gra_border .box:hover::before,
    .gra_border .box:hover .inner::before {opacity:1}
    
    .header .gnb li a:hover {color:var(--primary)}
    .footer .link_wrap ul li a:hover {opacity:1}
}

@media all and (max-width: 1520px) {
    .btn_gra .box {padding:1.5px}
    .btn_gra .box::before {height:1.5px}
    .btn_gra .box .inner {font-size:22px;padding:16px 32px}
    .btn_gra .box svg {width:30px}

    .btn_primary {font-size:18px;padding:12px 30px}
    .btn_primary svg.arrow_upright {width:20px;height:20px}

    .gra_border + .gra_border {margin-top:30px}
    .gra_border .txt_wrap .sub {font-size:20px}
    .gra_border .txt_wrap .tit {font-size:26px}
    .gra_border .txt_wrap p {font-size:16px;margin-top:20px}

    .btn_gray {font-size:20px;padding:14px 30px}

    .title_box {margin-bottom:45px}
    .title_box .sub {font-size:18px}
    .title_box .sub.mark {padding:10px 18px}
    .title_box .tit {font-size:36px}
    .title_box p {font-size:18px;margin-top:20px}
    .title_box p.big {font-size:26px;margin-top:24px}

    .tab_menu li>* {font-size:20px;height:52px;padding:0 30px}

    /* 포폴 리스트 */
    .portfolio_list ul {gap:30px 24px}
    .portfolio_list .img_wrap {border-radius:15px}
    .portfolio_list .txt_wrap .sub {font-size:14px;margin-bottom:5px}
    .portfolio_list .txt_wrap .tit {font-size:18px}
}

@media all and (max-width: 1199px) {
    :root {
        --header-height: 70px;
        --sec-padding: 140px;
    }

    
    /* 헤더 */
    .header .wrapper {padding:0 0 0 24px}
    .header .logo {width:103px}
    .header .menu_wrap {display:none;flex-direction:column;align-items:flex-start;width:100%;height:100vh;background:#050408;position:fixed;top:0;left:0;overflow-y:auto;padding:0 26px 40px}
    .header .menu_wrap .menu_head {display:flex;align-items:center;width:100%;height:var(--header-height);padding-left:24px;position:fixed;top:0;left:0}
    .header .gnb {margin:90px 0 100px}
    .header .gnb ul {flex:1;flex-direction:column;align-items:flex-start;gap:30px 0;overflow-y:auto}
    .header .gnb li a {height:auto;font-size:20px;font-weight:700;padding:7px 0}
    .header .gnb li a.on {color:var(--white)}
    .header .menu_open,
    .header .menu_close {display:flex;align-items:center;justify-content:center;width:var(--header-height);height:var(--header-height);margin-left:auto}
}

@media all and (max-width: 767px) {
    :root {
        --sec-padding: 80px;
    }
    
    .only_mb {display:block}
    .only_pc {display:none}
    
    .btn_gra .box .inner {font-size:14px;padding:12px 24px}
    .btn_gra .box svg {width:20px}
    
    .btn_primary {gap:0 8px;font-size:14px;padding:12px 20px}
    .btn_primary svg.arrow_upright {width:16px;height:16px}
    
    .btn_gray {font-size:17px;padding:12px 20px}
    
    .gra_border + .gra_border {margin-top:20px}
    .gra_border .box {border-radius:18px;padding:2px}
    .gra_border .box .inner {border-radius:16px}
    .gra_border .txt_wrap .sub {font-size:16px;margin-bottom:7px}
    .gra_border .txt_wrap .tit {font-size:20px}
    .gra_border .txt_wrap p {font-size:14px;margin-top:12px}
    
    .title_box {margin-bottom:30px}
    .title_box .sub {font-size:14px;margin-bottom:10px}
    .title_box .sub.mark {padding:7px 12px}
    .title_box .tit {font-size:24px}
    .title_box p {max-width:400px;font-size:16px;margin:16px auto 0}
    .title_box p.big {font-size:20px}
    
    .tab_menu ul {gap:16px}
    .tab_menu li>* {font-size:16px;height:44px;padding:0 20px}
    
    /* 포폴 리스트 */
    .portfolio_list ul {grid-template-columns:repeat(2, 1fr);gap:20px 14px}
    .portfolio_list .img_wrap {border-radius:10px}
    .portfolio_list .txt_wrap {text-align:left}
    .portfolio_list .txt_wrap .sub {font-size:12px;margin-bottom:4px}
    .portfolio_list .txt_wrap .tit {font-size:14px}
    
    /* 푸터 */
    .footer {padding:80px 0}
    .footer .top {flex-direction:column;align-items:flex-start;}
    .footer .link_wrap ul li:first-child a {padding-left:0}
    .footer .link_wrap ul li a {font-size:13px;padding:0 10px}
    .footer .info div {flex-wrap:wrap;gap:5px 0}
    .footer .info div > span:last-child::before {display:none}
}



/* 인덱스 */
.sec_price {padding:var(--sec-padding) 0}
.sec_price .list {display:flex;gap:14px;}
.sec_price .list .item {width:100%;margin:0 !important;transition:all .2s}
.sec_price .list .item .box {height:100%}
.sec_price .list .item .inner {display:flex;flex-direction:column;height:100%;padding:60px 32px}
.sec_price .list .item .top {width:100%;text-align:center}
.sec_price .list .item .top img {width:114px}
.sec_price .list .item .top .tit {display:block;font-size:40px;font-weight:700;color:var(--primary);margin-top:14px}
.sec_price .list .item .top .num {display:block;font-size:34px;font-weight:700;margin-top:10px}
.sec_price .list .item .top .num .small {display:block;font-size:16px;margin-top:4px}
.sec_price .list .item .bottom {flex:1;width:100%;display:flex;flex-direction:column;position:relative;padding-top:34px;margin-top:34px;font-size:20px}
.sec_price .list .item .bottom > div:not(.btn_wrap) {margin-bottom:20px}
.sec_price .list .item .bottom::before {content:'';display:block;width:100%;height:1px;background:#D9D9D9;position:absolute;top:0;left:50%;transform:translateX(-50%)}
.sec_price .list .item .bottom .tit {display:block;font-size:20px;font-weight:700;margin-bottom:14px}
.sec_price .list .item .bottom .btn_wrap {margin-top:auto;padding-top:10px}
.sec_price .list .item .bottom .btn {display:flex;align-items:center;justify-content:center;max-width:210px;height:50px;border:solid 1px var(--black);border-radius:50px;color:#4C00FF;font-size:20px;font-weight:600;margin:36px auto 0;padding:0 16px}
.sec_price .list .item ul {color:rgba(255,255,255,.6)}
.sec_price .btn_toggle {display:none}

.sec_price_chk {background:url('../img/web/index_13_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0;padding:180px 0}
.sec_price_chk .title_box {margin-bottom:40px}

.sec_payback {padding:var(--sec-padding) 0}
.sec_payback .wrapper {max-width:1620px}
.sec_payback .list {display:grid;grid-template-columns:repeat(2, 1fr);gap:40px 50px}
.sec_payback .list .item {background:#1A1A22;border:solid 1px #2C2C2C;border-radius:10px;overflow:hidden}
.sec_payback .list .item .inner {height:100%;position:relative;padding:50px}
.sec_payback .list .item .inner::before {content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;transition:all .2s;opacity:0}
.sec_payback .list .item .inner > div {position:relative;z-index:3}
.sec_payback .list .item .top .tit {display:block;font-size:34px;font-weight:700;border-bottom:solid 1px #D9D9D9;padding-bottom:24px;margin-bottom:24px}
.sec_payback .list .item .bottom {display:flex;align-items:flex-start;gap:20px;}
.sec_payback .list .item .bottom > div {width:100%}
.sec_payback .list .item .bottom .tit {display:block;font-size:20px;font-weight:700;margin-bottom:14px}
.sec_payback .list .item .bottom ul {color:rgba(255,255,255,.6);font-size:20px}
.sec_payback .list .item:hover .inner::before {opacity:1}

.success_reason {padding:var(--sec-padding) 0}
.success_reason .swiper {overflow:visible}
.success_reason .swiper-slide {width:540px;padding:0 20px}
.success_reason .swiper-slide:nth-child(even) {margin-top:80px}
.success_reason .swiper-slide .inner {height:506px;background:#1A1A22;border-radius:20px;padding:60px;overflow:hidden;position:relative}
.success_reason .swiper-slide .inner::before {content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;opacity:0;transition:all .2s}
.success_reason .swiper-slide .inner > div {position:relative;z-index:3}
.success_reason .swiper-slide .tit {display:block;font-size:26px;font-weight:700;line-height:1.4;margin-top:60px}
.success_reason .swiper-slide p {font-size:20px;margin-top:14px}
.success_reason .swiper-slide-active .inner::before {opacity:1}
.swiper-scrollbar {position:initial !important;width:100%;background:#1A1A22 !important;margin-top:80px}
.swiper-scrollbar-drag {background:var(--primary) !important}

.index .sec_01 {position:relative}
.index .sec_01 .img_wrap {width:100%;height:100vh;min-height:800px}
.index .sec_01 .img_wrap img {width:100%;height:100%;object-fit:cover;animation:scaleUp 10s alternate both ease-in-out}
.index .sec_01 .txt_wrap {position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);z-index:1}
.index .sec_01 .txt_wrap .tit {font-size:70px;font-weight:700;line-height:1.4}
.index .sec_01 .txt_wrap p {font-size:20px;margin-top:20px}
.index .sec_01 .txt_wrap .btn_wrap {justify-content:flex-start;margin-top:50px}

.index .sec_02 {padding:var(--sec-padding) 0}
.index .sec_02 .img_wrap {max-width:807px;margin:0 auto}
.index .sec_02 .img_wrap img {margin:0 auto}
.index .sec_02 .title_box {margin-top:60px}
.index .sec_02 .cont {font-size:40px;font-weight:700;margin-top:80px;text-align:center;line-height:1.4}

.index .sec_03 {background:url('../img/web/index_03_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}

.index .sec_04 {padding:var(--sec-padding) 0 calc(var(--sec-padding) * 0.8)}
.index .sec_04 .wrapper {max-width:1565px}
.index .sec_04 .list {display:flex;align-items:flex-start;gap:50px}
.index .sec_04 .list .item {flex:1;border-radius:20px;position:relative;overflow:hidden}
.index .sec_04 .list .item .inner {background:#1A1A22;border:solid 1px #2C2C2C;padding:80px 60px;position:relative;z-index:2;transition:all .2s}
.index .sec_04 .list .item::before {content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0149FE);position:absolute;top:0;left:0;z-index:1}
.index .sec_04 .list .item:nth-child(2) {margin-top:100px}
.index .sec_04 .list .item img {width:50%;max-width:200px}
.index .sec_04 .list .item .tit {display:block;font-size:40px;font-weight:700;margin-top:24px}
.index .sec_04 .list .item p {font-size:20px;margin-top:14px}

.index .sec_05 {padding:var(--sec-padding) 0}
.index .sec_05 .title_box .sub {display:block;font-weight:500;font-size:16px;color:#878D96;margin-top:24px}
.index .sec_05 .wrapper {max-width:1160px}
.index .sec_05 .cont {position:relative}
.index .sec_05 .cont img {width:100%}
.index .sec_05 .cont .dot {display:block;width:40px;height:40px;;background:radial-gradient(#1668FF 5%, rgba(2,2,9,0) 75%, rgba(2,2,9,0));border-radius:100px;position:absolute;top:9.3%;right:3.4%;animation:opacity 1s ease-in-out infinite alternate}

.index .sec_06 {background:url('../img/web/index_06_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}
.index .sec_06 .wrapper {max-width:1540px}
.index .sec_06 .list {display:flex;gap:0 50px}
.index .sec_06 .item {flex:1;padding:80px 20px;background:rgba(59,59,85,.6);border-radius:20px;text-align:center}
.index .sec_06 .item .sub {display:block;font-size:20px;font-weight:500;line-height:1.4}
.index .sec_06 .item .tit {display:block;font-size:34px;font-weight:700;line-height:1.4;margin:10px 0 40px}
.index .sec_06 .item img {max-width:355px}
.index .sec_06 .item_02 {background:linear-gradient(125deg, #10203B, #0C1D3C);border:solid 2px #33A2FF}

.service_item .inner {display:flex;align-items:center;justify-content:space-between;}
.service_item .txt_wrap {width:43%}
.service_item .txt_wrap .tit {display:block;font-size:40px;font-weight:700}
.service_item .txt_wrap .sub_tit {display:block;font-size:34px;font-weight:600;line-height:1.4;color:#1668FF;margin:24px 0 16px}
.service_item .txt_wrap p {font-size:20px}
.service_item .txt_wrap .content {display:flex;align-items:flex-start;gap:10px 14px;margin-top:40px;color:rgba(255,255,255,.7);font-size:16px}
.service_item .txt_wrap .content li {position:relative;padding-left:16px}
.service_item .txt_wrap .content li::before {content:'·';display:block;position:absolute;top:0;left:0;font-weight:700}
.service_item .txt_wrap .content li + li {margin-top:10px}
.service_item .txt_wrap .sns_list {display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:40px}
.service_item .process_list {margin-top:60px}
.service_item .process_list > .tit {font-size:34px;font-weight:700;display:flex;align-items:center;gap:0 10px;}
.service_item .process_list > .tit::before {content:'·';display:block;font-weight:900}
.service_item .process_list .list {display:flex;gap:40px;margin-top:24px}
.service_item .process_list .list > div {width:100%;background:#1A1A22;border-radius:20px;padding:60px 20px;text-align:center}
.service_item .process_list .list .tit {display:block;font-size:24px;font-weight:700;margin-top:30px}
.service_item .process_list .list p {font-size:18px;margin-top:14px}

.index .sec_07 {padding:var(--sec-padding) 0 calc(var(--sec-padding) / 2);background:#0B0B10}
.index .sec_07 .wrapper {max-width:1540px}
.index .sec_07 .tab_menu {margin-top:40px}
.index .sec_07 .service_item .img_wrap {width:52%;height:300px;background:pink}
.index .sec_07 .service_item .btn_wrap {margin-top:54px}

.index .sec_09 {padding:var(--sec-padding) 0 120px}
.index .sec_09 .wrapper {max-width:1300px}
.index .sec_09 .gra_border .inner,
.index .sec_10 .gra_border .inner {display:flex;align-items:center;gap:80px;padding:80px 10%}

.index .sec_10 {background:url('../img/web/index_09_bg.png') no-repeat center bottom/100%;padding:var(--sec-padding) 0}
.index .sec_10 .wrapper {max-width:1310px}
.index .sec_10 .txt_wrap .num {display:inline-flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--primary);border:solid 1px var(--primary);border-radius:40px;padding:14px 24px;margin-bottom:24px}
.index .sec_10 .gra_border .inner {justify-content:space-between}

.index .sec_11 {background:url('../img/web/index_11_bg.jpg') no-repeat center bottom/100%;padding:var(--sec-padding) 0}
.index .sec_11 .wrapper {max-width:1600px}
.index .sec_11 .list {display:flex;align-items:center;justify-content:center;gap:0 30px;}
.index .sec_11 .item {position:relative}
.index .sec_11 .item .tit {display:block;width:100%;position:absolute;top:52%;left:0;transform:translateY(-50%);font-size:40px;font-weight:700;text-align:center;line-height:1.4}

.index .sec_15 {background:url('../img/web/index_15_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0;padding:250px 0}
.index .sec_15 .title_box {margin-bottom:40px}

@media (hover: hover) {
    .sec_price .list .item:hover {transform:scale(1.05)}
    .sec_price .item:hover .btn_gray::before {opacity:1}
    
    .index .sec_04 .list .item:hover .inner {background:transparent}
}

@media all and (max-width: 1520px) {
    .index .sec_11 .list {gap:0 10px}
}

@media all and (max-width: 1520px) {
    .sec_price .list .item .inner {padding:40px 24px}
    .sec_price .list .item .top img {width:90px}
    .sec_price .list .item .top .tit {font-size:28px;margin-top:12px}
    .sec_price .list .item .top .num {font-size:22px}
    .sec_price .list .item .top .num .small {font-size:14px}
    .sec_price .list .item .bottom {padding-top:28px;margin-top:28px;font-size:18px}
    .sec_price .list .item .bottom .tit {font-size:18px;margin-bottom:12px}
    
    .sec_price_chk {padding:130px 0}
    .sec_price_chk .title_box {margin-bottom:30px}
    
    .sec_payback .list {gap:30px}
    .sec_payback .list .item .inner {padding:36px}
    .sec_payback .list .item .top .tit {font-size:26px;margin-bottom:20px;padding-bottom:20px}
    .sec_payback .list .item .bottom .tit {font-size:18px;margin-bottom:12px}
    .sec_payback .list .item .bottom ul {font-size:18px}
    
    .success_reason .swiper-slide {width:420px}
    .success_reason .swiper-slide .inner {height:436px;padding:50px 40px}
    .success_reason .swiper-slide .inner img {width:90px}
    .success_reason .swiper-slide .tit {font-size:22px;margin-top:40px}
    .success_reason .swiper-slide p {font-size:16px}
    .swiper-scrollbar {height:2px !important;margin-top:50px}
    
    .index .sec_01 .img_wrap {min-height:600px}
    .index .sec_01 .txt_wrap .tit {font-size:50px;}
    
    .index .sec_02 .img_wrap {max-width:600px}
    .index .sec_02 .cont {font-size:30px;margin-top:60px}
    
    .index .sec_04 .list {gap:30px}
    .index .sec_04 .list .item:nth-child(2) {margin-top:50px}
    .index .sec_04 .list .item .inner {padding:60px 40px}
    .index .sec_04 .list .item img {max-width:140px}
    .index .sec_04 .list .item .tit {font-size:30px}
    .index .sec_04 .list .item p {font-size:16px;margin-top:12px}
    
    .index .sec_05 .cont .dot {width:3.5vw;height:3.5vw;}
    
    .index .sec_06 .list {gap:30px}
    .index .sec_06 .item {padding:60px 20px}
    .index .sec_06 .item .sub {font-size:16px}
    .index .sec_06 .item .tit {font-size:26px;margin:10px 0 30px}
    .index .sec_06 .item img {width:100%;max-width:250px;margin:0 auto}
    
    .index .sec_07 .tab_menu {margin-top:30px}
    .service_item .txt_wrap .tit {font-size:30px}
    .service_item .txt_wrap .sub_tit {font-size:25px}
    .service_item .txt_wrap p {font-size:18px}
    .service_item .txt_wrap .content {font-size:14px;margin-top:30px}
    .service_item .txt_wrap .sns_list {gap:10px}
    .service_item .txt_wrap .sns_list > div {width:35px}
    .service_item .process_list > .tit {font-size:26px}
    .service_item .process_list .list {gap:20px}
    .service_item .process_list .list div img {width:90px}
    .service_item .process_list .list .tit {font-size:20px;margin-top:24px}
    .service_item .process_list .list p {font-size:16px}
    
    .index .sec_09 .gra_border .inner,
    .index .sec_10 .gra_border .inner {padding:60px 10%}
    .index .sec_09 .gra_border .img_wrap {width:120px}
    
    .index .sec_10 {padding-top:calc(var(--sec-padding) /2)}
    .index .sec_10 .img_wrap {width:140px}
    .index .sec_10 .txt_wrap .num {font-size:18px;padding:10px 18px;margin-bottom:20px}
    
    .index .sec_11 .item .tit {font-size:28px}
    
    .index .sec_15 {padding:160px 0}
}

@media all and (max-width: 1023px) {
    .sec_price .list {flex-direction:column;gap:14px}
    .sec_price .list .item .inner {padding-bottom:0}
    .sec_price .btn_toggle {display:flex;align-items:center;gap:0 4px;color:var(--white);font-size:14px;font-weight:600;padding:20px 0;order:3}
    .sec_price .btn_toggle.on svg {transform:rotate(180deg)}
    .sec_price .list .item .bottom {display:none}
    .sec_price .list .item.on .box {background:radial-gradient(ellipse at center 10%, #0095FF 0%, transparent 100%)}
    .sec_price .list .item.on .box::before {opacity:1}
    .sec_price .list .item.on .inner::before {opacity:1;background:linear-gradient(120deg, #182E4B, #060810)}
    
    .sec_payback .list .item .bottom {flex-direction:column;}
    
    .index .sec_04 .list {max-width:400px;flex-direction:column;gap:20px;margin:0 auto}
    .index .sec_04 .list .item {width:100%}
    .index .sec_04 .list .item:nth-child(2) {margin-top:0}
    
    .service_item .tab_cont {max-width:600px;margin:0 auto}
    .service_item .inner {flex-direction:column-reverse;gap:24px 0}
    .service_item .img_wrap {width:100% !important}
    .service_item .txt_wrap {width:100%}
    .service_item .process_list .list {display:grid;grid-template-columns:repeat(2, 1fr);}
    .service_item .process_list .list > div {padding:40px 16px;border-radius:16px}
    
    .index .sec_11 .list {max-width:500px;flex-wrap:wrap;margin:0 auto}
    .index .sec_11 .list .item {width:calc((100% - 10px)/2)}
}

@media all and (max-width: 767px) {
    .sec_price .list .item .inner {padding:24px 24px 0}
    .sec_price .list .item .top img {width:68px}
    .sec_price .list .item .top .tit {font-size:24px;margin-top:6px}
    .sec_price .list .item .top .num {font-size:18px}
    .sec_price .list .item .top .num .small {font-size:12px}
    .sec_price .list .item .bottom {padding-top:20px;margin-top:20px;font-size:16px}
    .sec_price .list .item .bottom .tit {font-size:16px;margin-bottom:10px}
    
    .sec_price_chk {padding:80px 0}
    .sec_price_chk .title_box {margin-bottom:20px}
    
    .sec_payback .list {display:flex;flex-direction:column;gap:20px}
    .sec_payback .list .item .inner {padding:24px}
    .sec_payback .list .item .top .tit {font-size:20px;margin-bottom:16px;padding-bottom:16px}
    .sec_payback .list .item .bottom .tit {font-size:16px;margin-bottom:10px}
    .sec_payback .list .item .bottom ul {font-size:16px}
    
    .success_reason .swiper-slide {width:300px;padding:0 8px}
    .success_reason .swiper-slide:nth-child(even) {margin-top:0}
    .success_reason .swiper-slide .inner {height:378px;padding:40px 24px;border-radius:16px}
    .success_reason .swiper-slide .inner img {width:80px}
    .success_reason .swiper-slide .tit {font-size:20px;margin-top:24px}
    .success_reason .swiper-slide p {font-size:14px}
    .swiper-scrollbar {margin-top:20px}
    
    .index .sec_01 .img_wrap {min-height:initial;height:470px}
    .index .sec_01 .txt_wrap {text-align:center}
    .index .sec_01 .txt_wrap .tit {font-size:30px;}
    .index .sec_01 .txt_wrap p {font-size:16px;margin-top:10px}
    .index .sec_01 .txt_wrap .btn_wrap {justify-content:center;margin-top:30px}
    
    .index .sec_02 .cont {font-size:20px;margin-top:40px}
    
    .index .sec_03 {background-image:url('../img/web/index_03_bg_mb.jpg')}
    
    .index .sec_04 .list .item {border-radius:16px}
    .index .sec_04 .list .item .inner {padding:40px 24px}
    .index .sec_04 .list .item img {max-width:80px}
    .index .sec_04 .list .item .tit {font-size:20px}
    .index .sec_04 .list .item p {font-size:14px;margin-top:10px}
    
    .index .sec_05 .cont {padding-left:3%}
    .index .sec_05 .cont .dot {top:15.1%;right:6.2%}
    .index .sec_05 .title_box .sub {margin-top:16px}
    
    .index .sec_06 .list {flex-direction:column;gap:20px}
    .index .sec_06 .item {padding:40px 20px;border-radius:16px}
    .index .sec_06 .item_01 img {max-width:160px}
    .index .sec_06 .item .sub {font-size:14px}
    .index .sec_06 .item .tit {font-size:20px;margin:10px 0 20px}
    
    .index .sec_07 .tab_menu {margin-top:20px}
    .index .sec_07 .service_item .btn_wrap {margin-top:24px}
    
    .service_item .txt_wrap .tit {font-size:20px}
    .service_item .txt_wrap .sub_tit {font-size:18px;margin:20px 0 16px}
    .service_item .txt_wrap p {font-size:16px}
    .service_item .txt_wrap .content {margin-top:20px;flex-direction:column;gap:6px}
    .service_item .txt_wrap .content li + li {margin-top:6px}
    .service_item .txt_wrap .sns_list {margin-top:24px}
    .service_item .txt_wrap .sns_list > div {width:30px}
    .service_item .process_list > .tit {font-size:20px}
    .service_item .process_list .list {display:flex;flex-direction:column;}
    
    .index .sec_09 {padding-bottom:var(--sec-padding)}
    .index .sec_09 .gra_border .inner,
    .index .sec_10 .gra_border .inner {flex-direction:column;gap:24px 0;padding:40px 10%;text-align:center}
    .index .sec_09 .gra_border .img_wrap {width:80px;min-width:80px}
    
    .index .sec_10 {padding-top:0}
    .index .sec_10 .gra_border .txt_wrap {order:2}
    .index .sec_10 .img_wrap {width:80px}
    .index .sec_10 .txt_wrap .num {font-size:12px;padding:7px 12px;margin-bottom:14px}
    
    .index .sec_11 .list {gap:0}
    .index .sec_11 .list .item {width:50%}
    .index .sec_11 .item .tit {font-size:18px}
    
    .index .sec_15 {padding:80px 0}
}

@media all and (max-width: 499px) {
    .index .sec_10 .gra_border .inner {padding:40px 24px}
}



/* 프로덕트 */
.page_title {font-size:100px;font-weight:700;text-align:left}
.line {display:block;width:1px;height:120px;background:var(--white);margin:60px auto}

.sec_video {padding:120px 0 var(--sec-padding)}
.sec_video .swiper {overflow:visible;position:relative}
.sec_video .swiper::before {content:'';display:block;width:324px;height:634px;background:url('../img/web/product_19_01.png') no-repeat center/100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:3}
.sec_video .swiper-slide {width:310px;padding:0 30px}
.sec_video .swiper-slide .video_wrap {aspect-ratio:125/222;}
.sec_video .swiper-slide .video_wrap video {width:100%;height:100%;object-fit:cover;}
.sec_video .swiper-slide-active .video_wrap {transform:scale(1.2)}

.product .wrapper {max-width:1540px}
.product .sec_01 {background:url('../img/web/product_01_bg.png') no-repeat center top/100%;text-align:center;padding:var(--sec-padding) 0}
.product .sec_01 .title_box {margin-top:150px}
.product .sec_01 .title2 {margin:0}
.product .sec_01 .number {display:flex;align-items:center;gap:0 8px;margin:40px 0}
.product .sec_01 .number > div {position:relative}
.product .sec_01 .num_slide {text-align:center;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}
.product .sec_01 .num_slide > div {display:flex;align-items:center;justify-content:center;flex-direction:column;height:100%;font-size:56px;font-weight:700;animation:txtSlideY 2s linear infinite}
.product .sec_01 .number > div:nth-child(even) .num_slide > div {animation-delay:.5s}
.product .sec_01 .number > div:nth-child(3) .num_slide > div,
.product .sec_01 .number > div:nth-child(8) .num_slide > div {animation-delay:.6s}
.product .sec_01 .number > div:nth-child(4) .num_slide > div,
.product .sec_01 .number > div:nth-child(9) .num_slide > div {animation-delay:.2s}
.product .sec_01 .bottom {font-size:24px}
.product .sec_01 .bottom .tit {display:block;font-size:1.66em;margin:20px 0}

.sec_price .wrapper {max-width:1850px}
@keyframes txtSlideY {
    from {transform:translateY(0)}
    to {transform:translateY(-1000%)}
}

.product .sec_banner {padding:130px 0}
.product .sec_banner .wrapper {display:flex;align-items:center;justify-content:center;gap:0 7%;}
.product .sec_banner p {font-size:40px;font-weight:700}
.product .sec_banner .sub {display:block;font-size:24px;line-height:1.4;margin-bottom:24px}
.product .sec_02 {background:url('../img/web/product_02_bg.png') no-repeat center/cover}

.product .sec_03 {padding:var(--sec-padding) 0}
.product .sec_03 .list {max-width:1180px;margin:60px auto 120px}
.product .sec_03 .list > div {display:flex;align-items:center;gap:0 40px;}
.product .sec_03 .list > div + div {margin-top:40px}
.product .sec_03 .list > div img {width:125px;min-width:125px}
.product .sec_03 .list .box {flex:1;background:#1A1A22;border:solid 1px #2C2C2C;border-radius:20px;overflow:hidden}
.product .sec_03 .list .box .inner {position:relative;padding:50px;position:relative;font-size:34px}
.product .sec_03 .list .box .inner::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;transition:all .2s}
.product .sec_03 .list .box .inner p {position:relative;z-index:2}
.product .sec_03 .list .box:hover .inner::before {opacity:1}
.product .sec_03 .bottom {text-align:center;font-size:40px;font-weight:700}
.product .sec_03 .bottom p.big {font-size:1.35em}
.product .sec_03 .bottom p.big:last-child {margin-top:24px}

.product .sec_04 {background:url('../img/web/product_04_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.product .sec_04 .title_box {margin:0}
.product .sec_04 .img {margin:60px auto}

.list_01 {max-width:1264px;margin:0 auto}
.list_01 .item {flex:1;background:#1A1A22;border:solid 1px #2C2C2C;border-radius:20px;overflow:hidden}
.list_01 .item + .item {margin-top:40px}
.list_01 .item .inner {display:flex;align-items:center;gap:0 60px;padding:50px 10%;position:relative}
.list_01 .item .inner::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;transition:all .2s}
.list_01 .item .inner img {width:215px;min-width:215px;position:relative;z-index:2}
.list_01 .item .inner .txt_wrap {position:relative;z-index:2;font-size:20px}
.list_01 .item .inner .txt_wrap .tit {display:block;font-size:34px;font-weight:700;line-height:1.4}
.list_01 .item .inner .txt_wrap > p {max-width:560px;margin-top:16px}
.list_01 .item .inner ol.num {display:flex;flex-direction:column;align-items:flex-start;margin-top:16px}
.list_01 .item .inner ol.num li {width:fit-content}
.list_01 .item:hover .inner::before {opacity:1}

.product .sec_05 {padding:var(--sec-padding) 0}
.product .sec_05 .list_02 {display:flex;gap:0 40px;}
.product .sec_05 .list_02 .item {width:100%}
.product .sec_05 .list_02 .item + .item {margin:0}
.product .sec_05 .list_02 .item .box {height:100%}
.product .sec_05 .list_02 .item .inner {height:100%;padding:60px}
.product .sec_05 .list_02 .item .inner::before {background:linear-gradient(125deg, #182E4B, #060810)}
.product .sec_05 .list_02 .item .txt_wrap .tit {font-size:30px}
.product .sec_05 .list_02 .item .bottom {margin-top:40px;padding:30px;background:rgba(212,212,212,.1);border-radius:20px;font-size:18px}
.product .sec_05 .list_02 .item .bottom > div + div {margin-top:24px}
.product .sec_05 .list_02 .item .bottom p {margin-top:10px}

.product .sec_06 {background:#1A1A22}

.product .sec_07 {background:url('../img/web/product_07_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.product .sec_07 .title_box {margin:0}
.product .sec_07 .title_box .sub {font-size:34px;margin-bottom:24px}
.product .sec_07 .title_box.bottom .sub {color:rgba(255,255,255,.6)}
.product .sec_07 .list {max-width:856px;margin:60px auto}
.product .sec_07 .list > div + div {margin-top:20px}
.product .sec_07 .list > div {background:rgba(59, 59, 85, .6);border-radius:15px;padding:24px 40px;font-size:32px;text-align:center}

.product .sec_08 {padding:var(--sec-padding) 0}
.product .sec_08 .title_box.bottom {margin:24px 0 0}
.product .sec_08 .img_wrap {margin:80px auto 0;text-align:center}
.list_chk {max-width:800px;margin:0 auto}
.list_chk .item {flex:1;background:#1A1A22;border:solid 1px #2C2C2C;border-radius:20px;overflow:hidden}
.list_chk .item + .item {margin-top:24px}
.list_chk .item .inner {display:flex;align-items:center;gap:0 10px;padding:24px 34px;position:relative}
.list_chk .item .inner::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;transition:all .2s}
.list_chk .item .inner svg {position:relative;z-index:2;margin-top:-2px}
.list_chk .item .inner p {position:relative;z-index:2;font-size:34px;font-weight:600}
.list_chk .item:hover .inner::before {opacity:1}

.product .sec_09 {background:url('../img/web/product_09_bg.png') no-repeat center bottom/cover;padding:var(--sec-padding) 0}
.product .sec_09 .wrapper {max-width:1320px}
.product .sec_09 .title_box {margin:0}
.product .sec_09 .btn_wrap {margin:40px auto 60px}
.list_03 {display:flex;gap:40px}
.list_03 .item {width:100%;background:#1A1A22;border-radius:20px;overflow:hidden}
.list_03 .item .inner {padding:60px;position:relative}
.list_03 .item .inner::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;transition:all .2s}
.list_03 .item .txt_wrap {margin-top:60px;position:relative;z-index:2}
.list_03 .item .txt_wrap .sub {display:block;font-size:20px;}
.list_03 .item .txt_wrap .tit {display:block;font-size:30px;font-weight:700;margin-top:10px}
.list_03 .item img {position:relative;z-index:2}
.list_03 .item:hover .inner::before {opacity:1}

.product .sec_10 {background:url('../img/web/product_10_bg.png') no-repeat center bottom/100%;padding:var(--sec-padding) 0}
.product .sec_10 .item .box {background:radial-gradient(ellipse at center 10%, #0095FF 0%, transparent 100%)}
.product .sec_10 .item .box::before {opacity:1}
.product .sec_10 .item .box .inner::before {opacity:1;background:linear-gradient(125deg, #182E4B, #060810)}
.product .sec_10 .item .box .inner {display:flex;align-items:center;gap:0 60px;padding:60px}
.product .sec_10 .item .img_wrap {width:460px;min-width:460px;border-radius:20px;overflow:hidden}
.product .sec_10 .item:last-child .txt_wrap p {max-width:750px}

.product .sec_11 {padding:var(--sec-padding) 0}
.product .sec_11 .wrapper {max-width:1400px}
.product .sec_11 .list {display:flex}
.product .sec_11 .list .item {flex:1;display:flex;align-items:center;justify-content:center;height:400px;background:#171721;border-radius:20px;font-size:34px;font-weight:500;text-align:center}
.product .sec_11 .list .item:last-child {background:linear-gradient(to right, #00A1FF, #0049FF);transform:scale(1.1);font-weight:700}

.product .sec_12 {padding:120px 0 50px}
.product .sec_12 .wrapper {max-width:1100px}
.product .sec_12 .swiper {overflow:visible}
.product .sec_12 .swiper-slide {width:640px;padding:0 20px;margin-top:60px;transition:all .3s}
.product .sec_12 .swiper-slide-active {margin-top:0 !important}
.product .sec_12 .swiper-slide-next + .swiper-slide {margin-top:180px}
.product .sec_12 .swiper-slide .inner {position:relative;border-radius:20px;overflow:hidden}
.product .sec_12 .swiper-slide .txt {display:block;position:absolute;left:0;bottom:0;padding:50px;font-size:30px;font-weight:600}
.product .sec_12 .list {display:none}

.product .sec_13 {background:url('../img/web/product_13_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.product .sec_13 .wrapper {max-width:1300px}
.product .sec_13 .item + .item {margin-top:40px}
.product .sec_13 .item > button {display:flex;align-items:center;width:100%;color:var(--white);background:#1A1A22;border-radius:20px;padding:28px 60px;font-size:30px;text-align:left}
.product .sec_13 .item > button svg {margin-left:auto}
.product .sec_13 .item > button.on {background:linear-gradient(to right, #00A1FF, #0049FF)}
.product .sec_13 .item > button.on svg {transform:rotate(180deg)}
.product .sec_13 .item .content {display:none;background:#050408;border-radius:20px;border:solid 1px #585858;margin-top:20px;padding:60px 20px}
.product .sec_13 .item .content > .inner {display:flex;justify-content:center;gap:40px;}
.product .sec_13 .item .content > .inner > div {width:100%;max-width:400px}
.product .sec_13 .item .before {background:#1A1A22;border-radius:20px}
.product .sec_13 .box_tit {display:block;font-size:30px;font-weight:500;line-height:1.4;text-align:center;margin-bottom:40px}
.product .sec_13 strong.box_tit {font-weight:700}
.product .sec_13 .info {font-size:20px;font-weight:700;margin-bottom:100px}
.product .sec_13 .info > div {padding:24px 0}
.product .sec_13 .info > div + div {border-top:solid 1px #D9D9D9;}
.product .sec_13 .info ul {opacity:.6;font-weight:normal;margin-top:10px}
.product .sec_13 .box1 {border:solid 1px #3F3F3F;border-radius:20px;text-align:center;padding:40px 20px;margin-top:40px}
.product .sec_13 .gra_border .box {height:100%;background:radial-gradient(ellipse at center 10%, #0095FF 0%, transparent 100%)}
.product .sec_13 .gra_border .box::before,
.product .sec_13 .gra_border .box .inner::before {opacity:1}
.product .sec_13 .gra_border .box .inner {height:100%}
.product .sec_13 .item .before,
.product .sec_13 .gra_border .box .inner {display:flex;flex-direction:column;padding:60px 40px}
.product .sec_13 .result {background:rgba(212,212,212,.1);border-radius:20px;height:230px;padding:30px;font-size:17px;font-weight:700;margin-top:auto}
.product .sec_13 .result .tit {display:block;margin-bottom:10px}
.product .sec_13 .after .result {background:linear-gradient(to right, #00A1FF, #0049FF)}
.product .sec_13 .after .result ul li {display:flex;align-items:center;gap:0 10px;}
.product .sec_13 .after .result ul li svg {width:23px;min-width:23px}
.product .sec_13 .after .result ul li + li {margin-top:10px}
.product .sec_13 .after .txt {flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;font-size:30px;padding-bottom:80px}
.product .sec_13 .after .txt .dot {font-size:18px;opacity:.6;margin-top:10px}
.product .sec_13 .btm_txt {max-width:790px;font-size:24px;color:rgba(255,255,255,.6);margin:40px auto 0;text-align:center}
.product .sec_13 .btm_txt .small {display:block;font-size:16px;font-weight:500;margin-top:12px}

.product .sec_14 {background:url('../img/web/product_14_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.product .sec_14 .list {display:grid;grid-template-columns:repeat(3, 1fr);gap:40px}
.product .sec_14 .list .item {display:flex;flex-direction:column;align-items:center;justify-content:center;height:250px;background:linear-gradient(125deg, rgba(31,59,96,.8), rgba(18,43,69,0));border:solid 1px rgba(255,255,255,.2);border-radius:20px;text-align:center;backdrop-filter:blur(20px);}
.product .sec_14 .list .item .tit {display:block;font-size:24px;font-weight:700;line-height:1.4}
.product .sec_14 .list .item .tit .num {font-size:.8em;color:rgba(255,255,255,.6);margin-right:4px}
.product .sec_14 .list .item p {font-size:18px;margin-top:10px}

.product .sec_17 {padding:var(--sec-padding) 0 calc(var(--sec-padding)/2)}
.product .sec_17 .wrapper {max-width:1300px}
.product .sec_17 .list {display:flex;gap:40px}
.product .sec_17 .list .item {width:100%;background:#1A1A22;border-radius:20px;padding:60px 50px}
.product .sec_17 .list .item .tit {display:block;font-size:34px;font-weight:500;margin-bottom:40px;text-align:center}
.product .sec_17 .list .item ul {font-size:24px}
.product .sec_17 .list .item ul li {border-bottom:solid 1px rgba(255,255,255,.3);padding-bottom:24px;margin-bottom:24px;opacity:.6}
.product .sec_17 .list .item ul li:last-child {margin:0;padding:0;border:0}
.product .sec_17 .list .item_02 {background:linear-gradient(to right, #00A1FF, #0049FF);font-weight:700}
.product .sec_17 .list .item_02 .tit {font-weight:inherit}
.product .sec_17 .list .item_02 ul li {opacity:1}

.product .sec_20 {background:#1A1A22;padding:150px 0}
.product .sec_20 .wrapper {max-width:1290px}
.product .sec_20 .list {display:flex;align-items:flex-start;justify-content:space-between;}
.product .sec_20 .list .item .tit {display:block;font-size:20px;font-weight:700;color:var(--primary);margin-bottom:20px}
.product .sec_20 .list .item .cont {font-size:24px;font-weight:600}
.product .sec_20 .list .item .cont .num {font-size:80px;font-weight:800;margin-right:6px}

.product .sec_21 {background:url('../img/web/product_21_bg.png') no-repeat center/cover;padding:300px 0}
.product .sec_21 p {font-size:40px;text-align:center}

.product .sec_22 {padding:300px 0}

.product .sec_23 {background:url('../img/web/product_23_bg.jpg') no-repeat center/cover;padding:var(--sec-padding) 0}
.product .sec_23 .list {max-width:700px;margin:0 auto}
.product .sec_23 .list .item {display:block;color:var(--white)}
.product .sec_23 .list .item + .item {margin-top:24px}
.product .sec_23 .list .item .inner {padding:24px}
.product .sec_23 .list .item .inner .txt_wrap {display:flex;align-items:center;justify-content:center;gap:24px;font-size:34px;font-weight:600;}


@media (hover: hover) {}

@media all and (max-width: 1520px) {
    .product .sec_05 .list_02 {gap:0 30px}
    .product .sec_05 .list_02 .item .inner {padding:60px 40px 40px}
    .product .sec_05 .list_02 .item .txt_wrap .tit {font-size:24px}
}

@media all and (max-width: 1520px) {
    .page_title {font-size:60px}
    .line {height:90px;margin:40px auto}
    
    .product .sec_01 {padding-top:110px}
    .product .sec_01 .title_box {margin-top:90px;margin-bottom:0}
    .product .sec_01 .number {margin:30px 0}
    .product .sec_01 .num_slide > div {font-size:40px}
    .product .sec_01 .title_box {margin-top:60px}
    .product .sec_01 .bottom {font-size:20px}
    
    .product .sec_banner {padding:100px 0}
    .product .sec_banner .wrapper {gap:0 5%}
    .product .sec_banner .img_wrap {width:240px}
    .product .sec_banner p {font-size:30px}
    .product .sec_banner .sub {font-size:20px;margin-bottom:16px}
    
    .product .sec_03 .list {margin:40px 0 80px}
    .product .sec_03 .list > div img {width:90px;min-width:90px}
    .product .sec_03 .list .box .inner {font-size:22px;padding:34px}
    .product .sec_03 .bottom {font-size:30px}
    
    .product .sec_04 .img {width:130px;margin:40px auto}
    
    .list_01 .item + .item {margin-top:30px}
    .list_01 .item .inner {padding:40px 6%}
    .list_01 .item .inner img {width:180px;min-width:180px}
    .list_01 .item .inner .txt_wrap {font-size:16px}
    .list_01 .item .inner .txt_wrap .tit {font-size:26px}
    
    .product .sec_05 .list_02 .item .inner {padding:40px 24px}
    .product .sec_05 .list_02 .item .txt_wrap .tit {font-size:22px}
    .product .sec_05 .list_02 .item .bottom {margin-top:20px;padding:30px 20px;font-size:16px}
    .product .sec_05 .list_02 {gap:0 20px}
    
    .product .sec_07 .title_box .sub {font-size:24px}
    .product .sec_07 .list > div {font-size:28px;padding:20px 28px}
    
    .list_chk .item .inner p {font-size:26px}
    .product .sec_08 .img_wrap {width:160px;margin-top:60px}
    
    .list_03 {gap:30px}
    .list_03 .item .inner {padding:50px 40px}
    .list_03 .item img {width:95px}
    .list_03 .item .txt_wrap {margin-top:40px}
    .list_03 .item .txt_wrap .sub {font-size:16px}
    .list_03 .item .txt_wrap .tit {font-size:24px}
    
    .product .sec_10 .item .box .inner {padding:40px;gap:0 40px}
    .product .sec_10 .item .img_wrap {width:350px;min-width:350px;border-radius:15px}
    
    .product .sec_11 .wrapper {padding:0 40px}
    .product .sec_11 .list .item {height:250px;font-size:24px}
    
    .product .sec_12 {padding:var(--sec-padding) 0}
    .product .sec_12 .swiper-slide {width:500px;margin-top:40px}
    .product .sec_12 .swiper-slide .txt {font-size:24px;padding:36px}
    .product .sec_12 .swiper-slide-next + .swiper-slide {margin-top:80px}
    
    .product .sec_13 .item > button {font-size:24px;padding:24px 40px;border-radius:15px}
    .product .sec_13 .item .content {padding:40px 20px}
    .product .sec_13 .btm_txt {font-size:20px}
    .product .sec_13 .box_tit {font-size:24px}
    .product .sec_13 .info {font-size:18px;margin-bottom:50px}
    .product .sec_13 .info > div {padding:20px 0}
    .product .sec_13 .item .before, .product .sec_13 .gra_border .box .inner {padding:40px 30px}
    
    .product .sec_14 .list {gap:30px}
    .product .sec_14 .list .item {height:200px}
    .product .sec_14 .list .item .tit {font-size:20px}
    .product .sec_14 .list .item p {font-size:16px}
    
    .product .sec_17 .list .item {padding:50px 36px}
    .product .sec_17 .list .item .tit {font-size:26px;margin-bottom:40px}
    .product .sec_17 .list .item ul {font-size:20px}
    
    .product .sec_20 {padding:120px 0}
    .product .sec_20 .list {justify-content:center;gap:0 10%;}
    .product .sec_20 .list .item .tit {font-size:18px;margin-bottom:14px}
    .product .sec_20 .list .item .cont {font-size:20px}
    .product .sec_20 .list .item .cont .num {font-size:54px}
    
    .product .sec_21 {padding:180px 0}
    .product .sec_21 p {font-size:30px}
    
    .product .sec_22 {padding:180px 0}
    
    .product .sec_23 .list .item + .item {margin-top:20px}
    .product .sec_23 .list .item .inner {padding:16px}
    .product .sec_23 .list .item .inner .txt_wrap {font-size:26px}
    .product .sec_23 .list .item .inner .txt_wrap img {width:auto;height:50px}
    /*
    */
}

@media all and (max-width: 1023px) {
    .product .sec_banner .wrapper {flex-direction:column;gap:20px;text-align:center;}
    .product .sec_05 .list_02 {flex-direction:column;gap:20px}
    .list_03 {flex-direction:column;align-items:center;max-width:400px;margin:0 auto}
    .product .sec_10 .list {max-width:400px;margin:0 auto}
    .product .sec_10 .item .box .inner {flex-direction:column;gap:20px}
    .product .sec_10 .item .box .inner > * {width:100%;min-width:initial}
    .product .sec_14 .list {grid-template-columns:repeat(2, 1fr);}
    .product .sec_14 .list .item {height:180px}
    .product .sec_17 .list {gap:20px}
    
    .sec_video {padding-bottom:140px}
    .sec_video .swiper::before {width:252px;height:496px}
    .sec_video .swiper-slide {width:240px;padding:0 15px}
    .sec_video .swiper-slide-active .video_wrap {transform:scale(1.1)}
}

@media all and (max-width: 767px) {
    .page_title {font-size:30px}
    .line {height:60px;margin:24px auto}
    
    .sec_video {padding-top:50px}
    
    .product .sec_01 {padding-top:110px}
    .product .sec_01 .title_box {margin-top:40px}
    
    .product .sec_01 .number {margin:20px 0}
    .product .sec_01 .num_slide > div {font-size:30px}
    .product .sec_01 .title_box2 {margin-top:20px}
    .product .sec_01 .bottom {font-size:16px}
    
    .product .sec_banner {padding:80px 0}
    .product .sec_banner .img_wrap {width:100px}
    .product .sec_banner p {font-size:20px;max-width:350px;margin:0 auto}
    .product .sec_banner .sub {font-size:16px;margin-bottom:10px}
    
    .product .sec_03 .list {margin:20px 0 40px}
    .product .sec_03 .list > div {flex-direction:column;gap:16px}
    .product .sec_03 .list > div + div {margin-top:20px}
    .product .sec_03 .list > div img {width:60px;min-width:60px}
    .product .sec_03 .list .box {width:100%;border-radius:10px;text-align:center}
    .product .sec_03 .list .box .inner {font-size:20px;padding:20px 16px}
    .product .sec_03 .bottom {font-size:20px}
    
    .product .sec_04 .img {width:100px;margin:24px auto}
    
    .list_01 .item {border-radius:16px}
    .list_01 .item + .item {margin-top:20px}
    .list_01 .item .inner {flex-direction:column;text-align:center;padding:40px 20px}
    .list_01 .item .inner img {width:120px;min-width:120px}
    .list_01 .item .inner .txt_wrap .tit {font-size:20px}
    .list_01 .item .inner .txt_wrap {font-size:14px}
    .list_01 .item .inner .txt_wrap > p {margin-top:14px}
    .list_01 .item .inner ol.num {align-items:center}
    
    .product .sec_05 .list_02 .item .txt_wrap .tit {font-size:20px}
    .product .sec_05 .list_02 .item .bottom {padding:20px;font-size:14px}
    
    .product .sec_07 .title_box .sub {font-size:16px}
    .product .sec_07 .list {margin:24px 0}
    .product .sec_07 .list > div {font-size:20px;padding:20px 16px;border-radius:10px;text-align:left}
    
    .list_chk .item {border-radius:10px}
    .list_chk .item + .item {margin-top:20px}
    .list_chk .item .inner {padding:20px 16px}
    .list_chk .item .inner svg {width:30px;min-width:30px;height:30px}
    .list_chk .item .inner p {font-size:20px}
    .product .sec_08 .img_wrap {width:100px;margin-top:40px}
    
    .list_03 {gap:20px}
    .list_03 .item {border-radius:16px}
    .list_03 .item .inner {padding:40px 24px}
    .list_03 .item img {width:80px}
    .list_03 .item .txt_wrap {margin-top:24px}
    .list_03 .item .txt_wrap .sub {font-size:14px}
    .list_03 .item .txt_wrap .tit {font-size:20px}
    .product .sec_09 .btn_wrap {margin:20px auto 24px}
    
    .product .sec_10 .item .box .inner {padding:40px 24px}
    .product .sec_10 .item .img_wrap {border-radius:10px}
    
    .product .sec_11 .list {flex-direction:column;}
    .product .sec_11 .list .item {width:100%;height:auto;padding:20px 16px;font-size:18px;border-radius:16px}
    
    .product .sec_12 .swiper-slide {width:480px;padding:0 10px}
    .product .sec_12 .swiper-slide .txt {font-size:18px;padding:24px}
    .product .sec_12 .swiper-slide .inner {border-radius:16px}
    
    .product .sec_13 .item .content > .inner {gap:20px}
    .product .sec_13 .item > button {font-size:20px;padding:20px 16px;border-radius:10px;}
    .product .sec_13 .item > button svg {width:30px;min-width:30px;height:30px}
    .product .sec_13 .item .content {padding:24px 20px}
    .product .sec_13 .item .content .inner {flex-direction:column;align-items:center}
    .product .sec_13 .item .before, .product .sec_13 .gra_border .box .inner {padding:20px 16px}
    .product .sec_13 .btm_txt {font-size:17px}
    .product .sec_13 .btm_txt .small {font-size:14px}
    .product .sec_13 .box_tit {font-size:20px;margin-bottom:24px}
    .product .sec_13 .info {font-size:16px;margin-bottom:24px}
    .product .sec_13 .info > div {padding:16px 0}
    .product .sec_13 .result {padding:20px;height:auto}
    .product .sec_13 .after .txt {font-size:24px;padding-bottom:20px}
    .product .sec_13 .after .txt .dot {font-size:16px}
    
    .product .sec_14 .list {gap:20px;display:flex;flex-direction:column;}
    .product .sec_14 .list .item {height:auto;padding:20px;border-radius:10px;background:linear-gradient(125deg, #0C162E, #050E24)}
    
    .product .sec_17 {padding-bottom:0}
    .product .sec_17 .list {flex-direction:column;}
    .product .sec_17 .list .item {padding:40px 24px}
    .product .sec_17 .list .item .tit {font-size:20px;margin-bottom:24px}
    .product .sec_17 .list .item ul {font-size:18px}
    .product .sec_17 .list .item ul li {padding-bottom:20px;margin-bottom:20px}
    
    .product .sec_20 {padding:80px 0}
    .product .sec_20 .list {flex-direction:column;align-items:center;gap:20px;text-align:center}
    .product .sec_20 .list .item .tit {font-size:16px;margin-bottom:8px}
    .product .sec_20 .list .item .cont {font-size:14px}
    .product .sec_20 .list .item .cont .num {font-size:30px}
    
    .product .sec_21 {padding:80px 0}
    .product .sec_21 p {font-size:20px}
    
    .product .sec_22 {padding:80px 0}
    
    .product .sec_23 .list .item .inner {padding:10px}
    .product .sec_23 .list .item .inner .txt_wrap {font-size:20px}
    .product .sec_23 .list .item .inner .txt_wrap img {height:40px}
}

@media all and (max-width: 499px) {
    .product .sec_01 .number {gap:0 4px}
    .product .sec_01 .num_slide > div {font-size:20px}
    
    .product .sec_12 {padding-top:0}
    .product .sec_12 .swiper {display:none}
    .product .sec_12 .swiper-slide {width:100%;margin-top:20px}
    .product .sec_12 .list {display:block}
}

@media all and (max-width: 374px) {
    .product .sec_01 .num_slide > div {font-size:14px}
}



/* 서비스 */
.service .page_title,
.recruit .page_title {padding:180px 0 80px}
.service .sec_01 {background:url('../img/web/service_01_bg.png') no-repeat center/100%;padding-top:150px}

.service .sec_02 {padding:var(--sec-padding) 0}
.service .sec_02 .list_01 {max-width:1620px}
.service .sec_02 .list_01 .inner {position:relative}
.service .sec_02 .list_01 .inner .asset {font-size:140px;font-weight:700;color:rgba(255,255,255,.05);position:absolute;bottom:-11%;right:0;z-index:1}
.service .sec_02 .list_01 .item .blue {transition:all .2s;}
.service .sec_02 .list_01 .item:hover .blue {color:var(--white)}
.service .sec_02 .list_01 .item .inner .txt_wrap p {max-width:initial;color:rgba(255,255,255,.6)}
.service .sec_02 .list_01 .item .inner img {width:175px;min-width:175px}

.service .sec_03 {background:url('../img/web/service_03_bg.png') no-repeat center/cover}
.service .sec_03 .wrapper {display:flex;align-items:flex-start;justify-content:space-between;max-width:1790px;padding-right:0}
.service .sec_03 .title_box {text-align:left;align-self:center}
.service .sec_03 .list {display:flex;gap:24px;height:650px;overflow:hidden}
.service .sec_03 .list > div {display:flex;flex-direction:column;gap:24px}
.service .sec_03 .list > div .img_wrap {animation:slideImg 5s infinite linear}
.service .sec_03 .list > div:last-child .img_wrap {animation:slideImgReverse 5s infinite linear}
@keyframes slideImg {
    from {transform:translateY(0)}
    to {transform:translateY(-100%)}
}
@keyframes slideImgReverse {
    from {transform:translateY(-100%)}
    to {transform:translateY(0)}
}

.service .sec_04 {padding:var(--sec-padding) 0}
.service .sec_04 h2.tit {font-size:150px;background:linear-gradient(rgba(255,255,255,.5), rgba(5,4,8,.7));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:80px;text-align:center}

.service .sec_05 {padding:var(--sec-padding) 0}

.service .sec_06 .top_sec {background:#1A1A22;padding:100px 0}
.service .sec_06 .title_box {margin-bottom:24px;text-align:left}
.service .sec_06 .title_box .tit {font-size:40px}
.service .sec_06 ul.dot {font-size:24px}
.service .sec_06 .tab_menu {margin-top:60px}
.service .sec_06 .tab_menu ul {justify-content:flex-start;}
.service .sec_06 .service_item {padding:var(--sec-padding) 0}
.service .sec_06 .txt_wrap.right {max-width:720px}
.service .sec_06 .txt_wrap .sub_tit {color:var(--white)}
.service .sec_06 .img_wrap {border-radius:20px;overflow:hidden}
.service .sec_06 .item_01,
.service .sec_06 .item_05 {background:url('../img/web/service_06_bg.png') no-repeat center/cover}
.service .sec_06 .item_02 .inner,
.service .sec_06 .item_06 .inner {align-items:flex-start;}
.service .sec_06 .item_02 .txt_wrap .sub_tit {margin-top:0;}
.service .sec_06 .item_04 {background:url('../img/web/product_23_bg.jpg') no-repeat center bottom/cover}
.service .sec_06 .banner img {width:100%}

.service .sec_07 {padding:var(--sec-padding) 0 calc(var(--sec-padding)/2)}
.service .sec_07 .list {display:flex;flex-direction:row-reverse;flex-wrap:wrap;gap:40px 60px;max-width:1320px;margin-left:auto}
.service .sec_07 .list .item {width:calc((100% - 60px)/2);position:relative;border-radius:20px;overflow:hidden}
.service .sec_07 .list .item:nth-child(even) {transform:translateY(50%)}
.service .sec_07 .list .item .txt_wrap {position:absolute;bottom:0;left:0;width:100%;padding:60px 50px;z-index:1}
.service .sec_07 .list .item .txt_wrap .tit {display:block;font-size:34px;font-weight:700;line-height:1.4}
.service .sec_07 .list .item .txt_wrap p {font-size:20px;margin-top:24px}

.exist_reason {padding:var(--sec-padding) 0 calc(var(--sec-padding)/2)}
.exist_reason .img_wrap {position:relative;border-radius:20px;overflow:hidden}
.exist_reason .img_wrap div {display:block;position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);z-index:1;text-align:center;font-size:54px;font-weight:700;line-height:1.3}
.exist_reason .list {display:flex;flex-direction:column;gap:24px 0;max-width:900px;margin:60px auto 0}
.exist_reason .list > div {width:100%;background:#1A1A22;border-radius:15px;padding:24px 20px;text-align:center;position:relative;overflow:hidden}
.exist_reason .list > div::before {content:'';display:block;background:linear-gradient(to right, #00A1FF, #0049FF);width:100%;height:100%;position:absolute;top:0;left:0;transition:all .2s;opacity:0}
.exist_reason .list > div:hover::before {opacity:1}
.exist_reason .list > div .tit {font-size:34px;font-weight:700;line-height:1.4;position:relative;z-index:2}
.exist_reason .list > div p {font-size:20px;margin-top:10px;;position:relative;z-index:2}

.service .sec_09 {padding:var(--sec-padding) 0}
.service .sec_09 .wrapper {max-width:1640px}
.service .sec_09 .title_box {display:flex;align-items:center;justify-content:space-between;}
.service .sec_09 .btn_wrap {display:none}
.service .sec_09 .portfolio_list ul li:last-child(4) {display:none}

.service .sec_10 {background:url('../img/web/service_10_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0;text-align:center}
.service .sec_10 .cont {display:flex;flex-direction:column;align-items:center;gap:16px 0;font-size:24px;line-height:1.6;margin-top:80px}
.service .sec_10 .cont > strong {margin:60px 0}
.service .sec_10 .cont .last {font-size:40px;font-weight:700;line-height:1.5}
.service .sec_10 .btn_wrap {margin-top:40px}

@media (hover: hover) {}

@media all and (max-width: 1520px) {
    .service .sec_03 .list {max-width:600px}
}

@media all and (max-width: 1520px) {
    .service .page_title,
    .recruit .page_title {padding:140px 0 50px}
    .service .sec_01 {padding-top:60px}
    .service .sec_01 .title_box > img {max-width:400px}
    
    .service .list_01 .item .inner img {width:130px;min-width:130px}
    .service .sec_02 .list_01 .inner .asset {font-size:100px}
    .service .sec_02 .list_01 .item .inner img {width:120px;min-width:120px}

    .service .sec_04 h2.tit {font-size:80px;margin-bottom:80px}
    
    .service .sec_06 .title_box .tit {font-size:32px}
    .service .sec_06 ul.dot {font-size:20px}
    .service .sec_06 .tab_menu {margin-top:40px}
    .service .sec_06 .img_wrap {width:500px}
    .service .sec_06 .img_wrap img {width:100%}
    
    .service .sec_07 .list .item .txt_wrap {padding:45px 36px}
    .service .sec_07 .list .item .txt_wrap .tit {font-size:26px}
    .service .sec_07 .list .item .txt_wrap p {font-size:18px;margin-top:16px}
    
    .exist_reason .img_wrap div {font-size:40px}
    .exist_reason .list {margin-top:40px}
    .exist_reason .list > div .tit {font-size:26px}
    .exist_reason .list > div p {font-size:18px}
    
    .service .sec_10 .cont {font-size:20px;margin-top:58px}
    .service .sec_10 .cont > strong {margin:44px 0}
    .service .sec_10 .cont .last {font-size:35px;}
}

@media all and (max-width: 1023px) {
    .service .sec_03 {padding:var(--sec-padding) 0}
    .service .sec_03 .wrapper {padding:0 20px;flex-direction:column;align-items:center;justify-content:center;}
    .service .sec_03 .title_box {text-align:center}
    .service .sec_03 .list {height:auto;gap:10px}
    .service .sec_03 .list > div {gap:10px}
    .service .sec_03 .list > div .img_wrap {animation:none !important}
    .service .sec_03 .list > div .img_wrap:nth-child(n + 3) {display:none}
    
    .service .sec_06 .img_wrap {order:3}
    .service .service_item .inner {flex-direction:column;}
    
    .service .sec_07 .list {gap:30px}
}

@media all and (max-width: 767px) {
    .service .page_title,
    .recruit .page_title {padding:110px 0 30px}
    .service .sec_01 {padding-top:0}
    .service .sec_01 .title_box > img {max-width:230px}
    
    .service .list_01 .item .inner {text-align:left;align-items:flex-start;}
    .service .list_01 .item .inner img {width:70px;min-width:70px;margin-bottom:24px}
    .service .sec_02 .list_01 .inner .asset {font-size:60px;bottom:-5%}
    .service .sec_02 .list_01 .item .inner img {width:70px;min-width:70px}

    .service .sec_04 h2.tit {font-size:34px}
    
    .service .sec_06 .title_box .tit {font-size:24px}
    .service .sec_06 ul.dot {font-size:16px}
    .service .sec_06 .tab_menu {margin-top:24px}
    .service .sec_06 .item_03 {padding-bottom:0}
    
    .service .sec_07 .title_box {text-align:center}
    .service .sec_07 .list {max-width:400px;margin:0 auto;gap:20px;flex-direction:column;}
    .service .sec_07 .list .item {width:100%;transform:none !important}
    .service .sec_07 .list .item .txt_wrap {padding:30px 24px}
    .service .sec_07 .list .item .txt_wrap .tit {font-size:20px}
    .service .sec_07 .list .item .txt_wrap p {font-size:16px;margin-top:10px}
    
    .exist_reason .img_wrap {height:200px;border-radius:10px}
    .exist_reason .img_wrap img {width:100%;height:100%;object-fit:cover;}
    .exist_reason .img_wrap div {font-size:24px}
    .exist_reason .list {margin-top:24px;gap:20px}
    .exist_reason .list > div {border-radius:10px;padding:20px 16px}
    .exist_reason .list > div .tit {font-size:20px;font-weight:600}
    .exist_reason .list > div p {font-size:16px}

    .service .sec_09 .portfolio_list ul li:last-child(4) {display:block}
    .service .sec_09 .btn_wrap {display:flex;margin-top:40px}
    .service .sec_09 .title_box {text-align:center;justify-content:center;}
    .service .sec_09 .title_box .btn_gra {display:none}
    
    .service .sec_10 .cont {font-size:16px;margin-top:20px}
    .service .sec_10 .cont > strong {margin:14px 0}
    .service .sec_10 .cont .last {font-size:20px;margin-top:4px}
    .service .sec_10 .btn_wrap {margin-top:20px}
}

@media all and (max-width: 499px) {
    .service .sec_06 .tab_menu ul {flex-direction:column;}
    .service .sec_06 .tab_menu ul li {width:100%;}
}



/* 리크루트 */
.recruit .sec_01 .title_box {margin:0;position:relative}
.recruit .sec_01 .title_box .asset_01 {width:100%;max-width:320px;position:absolute;top:-40%;right:105%}
.recruit .sec_01 .title_box .asset_01 img {animation:float 1.2s infinite alternate ease-in-out}
.recruit .sec_01 .title_box .asset_02 {width:100%;max-width:350px;position:absolute;bottom:-40%;left:105%}
.recruit .sec_01 .title_box .asset_02 img {animation:float 1.2s .3s infinite alternate ease-in-out}
.recruit .sec_01 .list {position:relative;height:100vh}
.recruit .sec_01 .list .item {display:flex;flex-direction:column;align-items:center;justify-content:center;background:url('../img/web/recruit_01_bg.png') no-repeat center/cover;position:absolute;left:0;top:0;width:100%;height:100%}
.recruit .sec_01 .list .item .wrapper {max-width:710px}
.recruit .sec_01 .list .item_04 .title_box p {font-size:34px}

.recruit .sec_02 {padding-top:var(--sec-padding)}
.recruit .sec_02 .wrapper {max-width:1540px}
.recruit .sec_02 .sec_head {position:relative}
.recruit .sec_02 .sec_head::before {content:'';display:block;width:96%;height:550px;background:url('../img/web/recruit_02_bg.png') no-repeat left center/cover;position:absolute;left:50%;transform:translateX(-750px);z-index:0}
.recruit .sec_02 .sec_head .title_box {align-items:flex-start;text-align:left !important;padding-top:400px;position:relative;z-index:2}
.recruit .sec_02 .sec_head .title_box .tit {font-size:180px;font-family:'montserrat', sans-serif}
.recruit .sec_02 .swiper {overflow:visible}
.recruit .sec_02 .swiper-slide {width:910px;padding-right:60px}

.recruit .sec_03 {padding:var(--sec-padding) 0}
.recruit .sec_03 .wrapper {display:flex;align-items:center;justify-content:space-between;gap:20px}
.recruit .sec_03 .title_box {margin:0}
.recruit .sec_03 .title_box p {max-width:480px}
.recruit .sec_03 .graph_box {width:50%;max-width:700px;background:#1A1A22;border-radius:20px;padding:130px 20px 80px}
.recruit .sec_03 .graph {display:flex;align-items:flex-end;justify-content:space-between;border-bottom:solid 1px var(--white);max-width:412px;margin:0 auto}
.recruit .sec_03 .graph > div {width:60px;position:relative}
.recruit .sec_03 .graph .year {position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:18px;font-weight:500}
.recruit .sec_03 .graph .money {position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);font-size:20px;font-weight:500}
.recruit .sec_03 .graph .bar {display:block;background:#404045;border-radius:5px 5px 0 0;transition:all .3s}
.recruit .sec_03 .graph .div1 .bar {height:44px}
.recruit .sec_03 .graph .div2 .bar {height:107px}
.recruit .sec_03 .graph .div3 {width:90px}
.recruit .sec_03 .graph .div3 .bar {height:287px;background:linear-gradient(to right, #00A1FF, #0049FF)}
.recruit .sec_03 .graph .div3 .money {width:172px}

.recruit .sec_04 {background:url('../img/web/recruit_04_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.recruit .sec_04 .wrapper {max-width:1566px}
.recruit .sec_04 .list {display:flex;gap:50px;}
.recruit .sec_04 .list .item {width:100%;background:#1A1A22;border-radius:20px;overflow:hidden;position:relative}
.recruit .sec_04 .list .item .inner {position:relative;z-index:2}
.recruit .sec_04 .list .item::before {opacity:0;content:'';display:block;width:100%;height:100%;background:linear-gradient(to right, #00A1FF, #0049FF);position:absolute;top:0;left:0;transition:all .2s}
.recruit .sec_04 .list .item:hover::before {opacity:1}
.recruit .sec_04 .list .item .img_wrap {width:100%}
.recruit .sec_04 .list .item .txt_wrap {padding:36px 50px}
.recruit .sec_04 .list .item .txt_wrap .sub {display:block;font-size:18px;font-weight:500}
.recruit .sec_04 .list .item .txt_wrap .tit {display:block;max-width:326px;margin-top:14px;font-size:20px;font-weight:700;line-height:1.4}

.recruit .sec_05 {padding:var(--sec-padding) 0}

.recruit .sec_06 {background:url('../img/web/recruit_06_bg.png') no-repeat center/cover;padding:260px 0}
.recruit .sec_06 p {max-width:900px;font-size:40px;text-align:center;margin:0 auto}

.recruit .sec_07 {padding:var(--sec-padding) 0 calc((var(--sec-padding) /2))}
.recruit .sec_07 .list_01 .item .inner .txt_wrap > p {max-width:initial}

.recruit .sec_09 {background:url('../img/web/recruit_09_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.recruit .sec_09.exist_reason .list > div {background:rgba(59,59,85,.6)}
.recruit .sec_09.exist_reason .list > div::before {display:none}

.recruit .sec_10 {background:url('../img/web/recruit_10_bg.png') no-repeat center/cover;padding:var(--sec-padding) 0}
.recruit .sec_10 .wrapper {max-width:1320px}
.recruit .sec_10 .list_03 .item {text-align:center}
.recruit .sec_10 .list_03 .item .inner {padding-left:20px;padding-right:20px}
.recruit .sec_10 .list_03 .item .txt_wrap .sub {font-size:24px;line-height:1.4}

.recruit .sec_11 {background:url('../img/web/product_23_bg.jpg') no-repeat center bottom/cover;padding:var(--sec-padding) 0}
.recruit .sec_11 .wrapper {max-width:1540px}
.recruit .sec_11 .list {display:grid;grid-template-columns:repeat(4, 1fr);gap:30px}
.recruit .sec_11 .list .item {background:#1A1A22;border-radius:20px;padding:50px 44px 40px}
.recruit .sec_11 .list .item .tit {display:block;margin-top:60px;font-size:24px;font-weight:700;line-height:1.4}
.recruit .sec_11 .list .item p {font-size:18px;margin-top:14px}
.recruit .sec_11 .banner {text-align:center;padding:136px 0;background:url('../img/web/recruit_11_17.png') no-repeat center/cover;border-radius:20px;margin-top:40px}
.recruit .sec_11 .banner .tit {display:block;font-size:40px;font-weight:700;line-height:1.4}
.recruit .sec_11 .banner p {font-size:24px;margin-top:24px}

.recruit .sec_12 {padding:var(--sec-padding) 0}
.recruit .sec_12 .title_box {margin:0}
.recruit .sec_12 .title_box .tit {margin-top:24px}

.recruit .sec_13 {background:url('../img/web/recruit_13_bg.png') no-repeat center top/cover;padding:var(--sec-padding) 0;position:relative}
.recruit .sec_13 .asset_tit {font-size:400px;font-weight:700;color:rgba(255,255,255,.05);position:absolute;top:-10%;left:50%;transform:translateX(-50%);font-family:'montserrat', sans-serif}
.recruit .sec_13 .title_box {margin:0}
.recruit .sec_13 .title_box .tit {margin-top:40px}

.recruit .sec_14 {padding:var(--sec-padding) 0;position:relative}
.recruit .sec_14 .asset_tit {font-size:400px;font-weight:700;color:rgba(255,255,255,.05);font-family:'montserrat', sans-serif;position:absolute}
.recruit .sec_14 .asset_tit.tit_01 {top:0;left:0;transform:rotate(-90deg)  translate(-98%, -10%);transform-origin:top left}
.recruit .sec_14 .asset_tit.tit_02 {right:0;bottom:0;transform:rotate(-90deg) translate(72%,-100%);transform-origin:top right}
.recruit .sec_14 .wrapper {max-width:940px}
.recruit .sec_14 .item + .item {margin-top:40px}
.recruit .sec_14 .item > button {display:flex;align-items:center;width:100%;color:var(--white);background:#1A1A22;border-radius:20px;padding:28px 60px;font-size:30px;font-weight:700;text-align:left}
.recruit .sec_14 .item > button svg {margin-left:auto}
.recruit .sec_14 .item > button.on {background:linear-gradient(to right, #00A1FF, #0049FF)}
.recruit .sec_14 .item > button.on svg {transform:rotate(180deg)}
.recruit .sec_14 .item .content,
.recruit .sec_14 .common_info .cont {border:solid 1px #585858;border-radius:20px;padding:40px 50px;margin-top:20px;font-size:18px}
.recruit .sec_14 .item .content {display:none}
.recruit .sec_14 .item .content > div {display:flex;align-items:flex-start;}
.recruit .sec_14 .item .content > div + div {margin-top:20px}
.recruit .sec_14 .item .content > div .tit {flex:32% 0 0;display:block;font-size:24px;font-weight:700}
.recruit .sec_14 .common_info > div {margin-top:40px}
.recruit .sec_14 .common_info > div .tit {display:flex;align-items:center;height:100px;background:#404045;border-radius:20px;padding:0 60px;font-size:30px;font-weight:700}
.recruit .sec_14 .common_info .div1 .cont dl {display:grid;grid-template-columns:35% 65%;gap:24px 0}
.recruit .sec_14 .common_info .div1 .cont dt {font-size:24px;font-weight:700}
.recruit .sec_14 .common_info .div1 .cont dd {line-height:1.5}
.recruit .sec_14 .common_info .div2 .cont {display:flex;align-items:center;justify-content:space-between;font-size:24px;font-weight:700}
.recruit .sec_14 .btn_wrap {margin-top:80px}

.recruit .sec_15 {background:url('../img/web/recruit_15_bg.png') no-repeat center top/cover;padding:var(--sec-padding) 0}
.recruit .sec_15 .wrapper {max-width:1340px}
.recruit .sec_15 .inner {display:flex;align-items:center;gap:60px;background:linear-gradient(125deg, #284871, #030403);border:solid 2px #33A2FF;backdrop-filter:blur(30px);border-radius:20px;padding:100px}
.recruit .sec_15 .title_box {margin-bottom:40px}
.recruit .sec_15 .title_box p {margin:16px 0 0}
.recruit .sec_15 .info {font-size:20px}
.recruit .sec_15 .info .tit {display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(to right, #00A1FF, #0049FF);font-size:24px;font-weight:700;padding:15px 35px;border-radius:50px;margin-bottom:24px}
.recruit .sec_15 .info .sub {opacity:.6;margin:10px 0 20px}
.recruit .sec_15 .info .p1 {font-size:1.2em;font-weight:600}

@media (hover: hover) {}

@media all and (max-width: 1599px) {
    .recruit .sec_13 .asset_tit {font-size:22vw;top:-6vw}
    .recruit .sec_14 .asset_tit {font-size:178px}
}

@media all and (max-width: 1539px) {
    .recruit .sec_02 .sec_head::before {width:calc(100% - 20px);height:450px;left:auto;right:0;transform:none}
    .recruit .sec_02 .sec_head .title_box {padding-top:310px}
    .recruit .sec_02 .sec_head .title_box .tit {font-size:150px}
    .recruit .sec_02 .sec_head .title_box p {font-size:26px;margin-top:16px}
}

@media all and (max-width: 1520px) {
    .recruit .sec_01 .list .item .wrapper {max-width:600px}
    .recruit .sec_01 .title_box .asset_01 {max-width:200px;top:auto;bottom:105%;right:auto;left:5%}
    .recruit .sec_01 .title_box .asset_02 {max-width:240px;bottom:auto;top:105%;left:auto;right:5%}
    .recruit .sec_01 .list .item_04 .title_box p {font-size:26px}
    
    .recruit .sec_02 .sec_head::before {height:230px}
    .recruit .sec_02 .sec_head .title_box {padding-top:135px}
    .recruit .sec_02 .sec_head .title_box .tit {font-size:100px}
    .recruit .sec_02 .swiper-slide {width:550px;padding-right:20px}
    
    .recruit .sec_03 .graph_box {padding:110px 30px 70px}
    .recruit .sec_03 .graph > div {width:40px}
    .recruit .sec_03 .graph .year {font-size:15px}
    .recruit .sec_03 .graph .money {font-size:16px}
    .recruit .sec_03 .graph .div3 {width:70px}
    .recruit .sec_03 .graph .div3 .money {width:116px}
    
    .recruit .sec_04 .list {flex-direction:column;gap:20px;max-width:400px;margin:0 auto}
    .recruit .sec_04 .list .item .txt_wrap {padding:24px 24px 40px}
    .recruit .sec_04 .list .item .txt_wrap .sub {font-size:16px}
    .recruit .sec_04 .list .item .txt_wrap .tit {font-size:18px}

    .recruit .sec_10 .list_03 .item .txt_wrap .sub {font-size:20px}

    .recruit .sec_11 .list {gap:20px}
    .recruit .sec_11 .list .item {padding:40px 24px;border-radius:16px}
    .recruit .sec_11 .list .item img {width:100px}
    .recruit .sec_11 .list .item .tit {margin-top:42px;font-size:20px}
    .recruit .sec_11 .list .item p {font-size:16px;margin-top:10px}
    .recruit .sec_11 .banner {margin-top:30px;padding:100px 0}
    .recruit .sec_11 .banner .tit {font-size:30px}
    .recruit .sec_11 .banner p {font-size:20px;}
    
    .recruit .sec_12 .title_box img {width:180px}
    .recruit .sec_13 .title_box img {width:128px}
    
    .recruit .sec_14 .item > button {font-size:24px;padding:24px 40px;border-radius:15px}
    .recruit .sec_14 .asset_tit {display:none}
    
    .recruit .sec_06 {padding:150px 0}
    .recruit .sec_06 p {max-width:678px;font-size:30px}
    
    .recruit .sec_14 .item .content,
    .recruit .sec_14 .common_info .cont {font-size:16px}
    .recruit .sec_14 .item .content > div .tit {flex-basis:20%;font-size:20px}
    .recruit .sec_14 .item .content,
    .recruit .sec_14 .common_info .cont {padding:30px 40px}
    .recruit .sec_14 .common_info > div .tit {height:80px;font-size:25px;padding:0 40px}
    .recruit .sec_14 .common_info .div1 .cont dt {font-size:20px}
    .recruit .sec_14 .common_info .div2 .cont {font-size:20px}
    
    .recruit .sec_15 .title_box {margin-bottom:32px}
    .recruit .sec_15 .inner {padding:50px 40px}
    .recruit .sec_15 .img_wrap {width:200px;min-width:200px}
    .recruit .sec_15 .info {font-size:18px}
    .recruit .sec_15 .info .tit {font-size:20px}
}

@media all and (max-width: 1023px) {
    .recruit .sec_11 .list {grid-template-columns:repeat(3, 1fr);}
    .recruit .sec_15 .inner {flex-direction:column;align-items:flex-start;gap:24px 0}
}

@media all and (max-width: 767px) {
    .recruit .sec_01 .title_box .asset_01 {max-width:100px}
    .recruit .sec_01 .title_box .asset_02 {max-width:130px}
    .recruit .sec_01 .list .item_04 .title_box p {font-size:20px}
    
    .recruit .sec_02 .sec_head::before {height:160px}
    .recruit .sec_02 .sec_head .title_box {padding-top:118px}
    .recruit .sec_02 .sec_head .title_box .tit {font-size:50px}
    .recruit .sec_02 .sec_head .title_box p {font-size:20px;margin-top:30px}
    .recruit .sec_02 .swiper-slide {width:220px;padding-right:16px}
    
    .recruit .sec_03 .wrapper {flex-direction:column;gap:24px}
    .recruit .sec_03 .title_box {text-align:center}
    .recruit .sec_03 .graph_box {width:100%;padding:90px 40px 60px;border-radius:16px}
    .recruit .sec_03 .graph > div {width:26px}
    .recruit .sec_03 .graph .div3 {width:54px}
    .recruit .sec_03 .graph .year {font-size:12px}
    .recruit .sec_03 .graph .money {font-size:12px}
    .recruit .sec_03 .graph .div1 .bar {height:26px}
    .recruit .sec_03 .graph .div2 .bar {height:63px}
    .recruit .sec_03 .graph .div3 .bar {height:170px}
    .recruit .sec_03 .graph .div3 .money {width:100px}
    
    .recruit .sec_06 {padding:80px 0}
    .recruit .sec_06 p {max-width:450px;font-size:20px}
    
    .recruit .sec_11 .list {grid-template-columns:repeat(2, 1fr);}
    .recruit .sec_11 .list .item {padding:40px 16px}
    .recruit .sec_11 .list .item img {width:80px}
    .recruit .sec_11 .list .item .tit {margin-top:24px}
    .recruit .sec_11 .banner {border-radius:16px;margin-top:20px;padding:40px 20px}
    .recruit .sec_11 .banner .tit {font-size:20px}
    .recruit .sec_11 .banner p {font-size:18px;margin-top:16px}
    
    .recruit .sec_12 .title_box img {width:104px}
    .recruit .sec_13 .title_box img {width:78px}
    
    .recruit .sec_14 .item + .item {margin-top:20px}
    .recruit .sec_14 .item > button {font-size:20px;padding:20px 16px;border-radius:10px;}
    .recruit .sec_14 .item > button svg {width:30px;min-width:30px;height:30px}
    .recruit .sec_14 .item .content,
    .recruit .sec_14 .common_info .cont {font-size:15px}
    .recruit .sec_14 .item .content > div {flex-direction:column;gap:16px 0}
    .recruit .sec_14 .item .content > div .tit {font-size:18px;flex:auto}
    .recruit .sec_14 .item .content,
    .recruit .sec_14 .common_info .cont {padding:20px 16px;border-radius:10px}
    .recruit .sec_14 .common_info > div {margin-top:20px}
    .recruit .sec_14 .common_info > div .tit {height:64px;font-size:20px;padding:0 16px;border-radius:10px}
    .recruit .sec_14 .common_info .div1 .cont dl {display:flex;flex-direction:column;gap:12px 0}
    .recruit .sec_14 .common_info .div1 .cont dt:not(:first-child) {padding-top:8px}
    .recruit .sec_14 .common_info .div1 .cont dt {font-size:18px}
    .recruit .sec_14 .common_info .div2 .cont {flex-direction:column;align-items:center;gap:14px;font-size:18px}
    .recruit .sec_14 .common_info .div2 .cont svg {width:30px;height:30px;transform:rotate(90deg)}
    .recruit .sec_14 .btn_wrap {margin-top:40px}
    
    .recruit .sec_15 .img_wrap {width:100px;min-width:100px}
    .recruit .sec_15 .title_box {margin-bottom:24px}
    .recruit .sec_15 .inner {padding:40px 24px}
    .recruit .sec_15 .info {font-size:16px}
    .recruit .sec_15 .info .tit {font-size:17px;padding:12px 20px;margin-bottom:20px}
}

@media all and (max-width: 599px) {
    .recruit .sec_11 .list {display:flex;flex-direction:column}
}

@media all and (max-width: 374px) {}



/* 컨택트 */
.contact_form .content {display:flex;align-items:flex-start;justify-content:space-between;gap:0 20px;}
.contact_form .left {flex:260px 0 0}
.contact_form .left > img {width:110px}
.contact_form .left a {display:flex;align-items:center;justify-content:center;text-align:center;width:88px;height:88px;background:linear-gradient(to right, #00A1FF, #0049FF);border-radius:100px;font-size:18px;font-weight:700;color:var(--white);margin:20px 0;transition:all .2s}
.contact_form .left a:hover {transform:translateY(-5px)}
.contact_form .left p {font-size:18px;opacity:.6}
.contact_form .right {width:100%;max-width:1220px}
.contact_form .form {display:grid;grid-template-columns:repeat(2, 1fr);gap:40px 22px}
.contact_form .form .col2 {grid-column:span 2}
.contact_form .form .item .tit {display:block;font-size:24px;font-weight:600;margin-bottom:14px}
.contact_form .form .item .tit sup {color:var(--primary);vertical-align:text-top;}
.contact_form .form .item input,
.contact_form .form .item textarea,
.contact_form .form .item select {width:100%;height:64px;background:#1A1A22;border:solid 1px transparent;border-radius:5px;padding:0 20px;font-size:18px;line-height:1.5;color:var(--white);transition:all .2s}
.contact_form .form .item select {width:50%;background:#1A1A22 url('../img/web/arrow_down.svg') no-repeat center right 16px/24px}
.contact_form .form .item input:focus,
.contact_form .form .item textarea:focus {border-color:var(--primary)}
.contact_form .form .item textarea {height:200px;padding:20px}
.contact_form .form .chk_box{
    position: relative;
}
.contact_form .form .chk_box input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.contact_form .form .chk_box input:checked + label::before {background-image:url('../img/web/chk_yes.svg')}
.contact_form .form .chk_box label {font-size:20px;position:relative;padding-left:32px;cursor:pointer}
.contact_form .form .chk_box label::before {content:'';display:block;width:24px;height:24px;background:url('../img/web/chk_no.svg') no-repeat center/100%;position:absolute;top:0;left:0}
.contact_form .form .btn_wrap {margin-top:40px}

.contact .page_title {margin:180px 0 100px}
.contact .banner {height:500px;background:url('../img/web/contact_bg.jpg') no-repeat center/cover}
.contact .sec_02 {padding:var(--sec-padding) 0}

.inq-wrapper{
    padding: 140px 0;
}
@media all and (max-width: 1520px) {
    .inq-wrapper{
        padding: 80px 0;
    }
    .contact_form .form {gap:24px 20px}
    .contact_form .form .item .tit {font-size:20px;margin-bottom:12px}
    .contact_form .form .item input,
    .contact_form .form .item select {height:50px;font-size:16px}
    .contact_form .form .item textarea {height:160px;font-size:16px}
    .contact_form .form .chk_box label {font-size:17px}
    .contact_form .form .btn_wrap {margin-top:20px}
    
    .contact .page_title {margin:140px 0 60px}
    .contact .banner {height:350px}
}

@media all and (max-width: 1023px) {
    .contact_form .left {display:none}
}

@media all and (max-width: 767px) {
    .contact_form .form {display:flex;flex-direction:column;}
    .contact_form .form .item .tit {font-size:17px;margin-bottom:10px}
    .contact_form .form .item input,
    .contact_form .form .item select {height:44px;padding:0 16px}
    .contact_form .form .item textarea {height:120px;padding:16px;}
    .contact_form .form .item select {width:100%}
    
    .contact .page_title {margin:110px 0 20px}
    .contact .banner {height:185px}
}


.loading-wrap{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    z-index: 9999999;
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
.loading-container,
.loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}


.loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

.loading {
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading {
    border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #ffffff;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 10px;
    font-weight: bold;
    margin-top: 45px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100px;
}