/* =========================================================
   THE COMPANY LOGOS
   IT / DIGITAL PLATFORM THEME
   FINAL VERSION
========================================================= */


/* =========================================================
   RESET / COMMON
========================================================= */

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    padding:0;
}

ul,
ol,
li {
    list-style:none;
    margin:0;
    padding:0;
}

li::marker {
    content:"";
}

.lead {
    font-size:16px;
    line-height:1.75;
    letter-spacing:-0.02em;
    color:#667085;
    word-break:keep-all;
}

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

    input {
        -webkit-appearance:none;
        -webkit-border-radius:0;
    }

}



/* =========================================================
   HEADER
========================================================= */

#header {
    position:absolute;
    top:22px;
    left:50%;
    transform:translateX(-50%);

    width:calc(100% - 80px);
    max-width:1500px;
    height:86px;

    z-index:9999;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    transition:
        top .3s ease,
        width .3s ease,
        height .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


#header .header-inner {
    position:relative;

    width:100%;
    height:100%;

    padding:0 28px;

    display:flex;
    align-items:center;
}



/* =========================================================
   LOGO
========================================================= */

#header #logo {
    position:relative;

    margin:0 auto 0 0;
    padding:0;

    display:flex;
    align-items:center;
}


#header #logo a {
    display:flex;
    align-items:center;

    width:auto;
    height:auto;

    line-height:normal;
}


#header #logo img {
    display:block;

    width:auto;
    max-width:245px;
    max-height:46px;

    filter:brightness(0) invert(1);

    transition:.3s ease;
}



/* =========================================================
   GNB
========================================================= */

#header .gnb {
    position:relative;

    right:auto;

    height:100%;

    display:flex;
    align-items:center;

    margin:0;
    padding:0;

    list-style:none !important;
}


#header .gnb > li {
    position:relative;

    width:auto;
    height:86px;

    float:none;

    display:flex;
    align-items:center;

    margin:0 2px;
    padding:0;

    list-style:none !important;

    text-align:center;
    line-height:normal;
}


#header .gnb > li::marker {
    content:"" !important;
    display:none !important;
}


#header .gnb > li > a {
    position:relative;

    display:flex;
    align-items:center;

    height:86px;

    padding:0 20px;

    color:#fff !important;

    font-size:15px;
    font-weight:600;

    line-height:1;
    letter-spacing:-.5px;

    text-decoration:none;

    text-shadow:0 2px 8px rgba(0,0,0,.30);

    transition:.25s ease;
}


#header .gnb > li > a:after {
    content:"";

    position:absolute;

    left:20px;
    right:20px;
    bottom:20px;

    height:2px;

    background:linear-gradient(
        90deg,
        #4da9ff,
        #7ec7ff
    );

    transform:scaleX(0);
    transform-origin:center;

    transition:.25s ease;
}


#header .gnb > li:hover > a {
    color:#72bdff !important;
}


#header .gnb > li:hover > a:after {
    transform:scaleX(1);
}


#header .gnb > li.active {
    background:none;
}


#header .gnb > li.active > a {
    color:#72bdff !important;
}



/* =========================================================
   DROPDOWN
========================================================= */

#header .gnb .snb,
.device-md #header .gnb .snb {
    display:none;

    position:absolute;

    top:74px;
    left:50%;
    right:auto;

    transform:translateX(-50%);

    width:220px;

    padding:12px;
    margin:0;

    list-style:none !important;

    background:rgba(255,255,255,.98);

    border:1px solid #e7edf5;
    border-radius:15px;

    box-shadow:0 24px 60px rgba(9,28,58,.18);

    z-index:99999;

    overflow:hidden;
}


#header .gnb .snb:before {
    content:"";

    position:absolute;

    top:0;
    left:22px;
    right:22px;

    height:2px;

    background:linear-gradient(
        90deg,
        #176bd5,
        #57b4ff
    );
}


#header .gnb .snb li {
    width:100%;

    margin:0;
    padding:0;

    list-style:none !important;

    font-size:14px;
    line-height:normal;
    text-align:left;

    border:0;
}


#header .gnb .snb li::marker {
    content:"" !important;
    display:none !important;
}


#header .gnb .snb li a {
    display:block;

    width:100%;

    padding:13px 14px;

    color:#344054 !important;

    font-size:14px;
    font-weight:500;

    line-height:1.4;

    border-radius:9px;

    transition:.2s ease;
}


#header .gnb .snb li a:hover {
    color:#176bd5 !important;

    background:#f1f7ff;

    padding-left:18px;
}



/* =========================================================
   LOGIN / JOIN
========================================================= */

#header .gnb .login,
#header .gnb .join {
    display:none !important;
}



/* =========================================================
   SCROLL HEADER
========================================================= */

.scrolled #header {
    position:fixed;

    top:0;

    width:100%;
    max-width:none;

    height:72px;

    border-radius:0 !important;

    background:rgba(255,255,255,.96) !important;

    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;

    border-bottom:1px solid rgba(15,35,60,.08) !important;

    box-shadow:0 8px 30px rgba(5,25,55,.09) !important;
}


.scrolled #header .gnb > li {
    height:72px;
}


.scrolled #header .gnb > li > a {
    height:72px;

    color:#17243a !important;

    text-shadow:none;
}


.scrolled #header .gnb > li:hover > a {
    color:#176bd5 !important;
}


.scrolled #header .gnb > li > a:after {
    bottom:13px;
}


.scrolled #header .gnb .snb {
    top:66px;
}


.scrolled #header #logo img {
    filter:none;

    transform:scale(.94);
}



/* =========================================================
   MOBILE HEADER
========================================================= */

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

    #header {
        display:block;

        position:fixed;

        top:0;

        width:100%;
        height:70px;
        max-width:none;

        border-radius:0;

        background:rgba(8,19,38,.70) !important;

        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;
    }


    #header .header-inner {
        padding:0 18px;
    }


    #header #logo {
        width:auto;

        display:block;
    }


    #header #logo img {
        max-width:180px;
    }


    #header .gnb {
        display:none !important;
    }

}



/* =========================================================
   RIGHT QUICK
========================================================= */

.right_quick {
    position:absolute;

    right:0;
    top:-60px;

    z-index:2;
}


.right_quick.fixed {
    position:fixed;

    right:0;
    top:50% !important;

    transform:translateY(-50%);

    z-index:100;
}


.right_quick ul.quick_info {
    position:relative;

    width:60px;
    height:240px;

    margin:0;
    padding:0;

    list-style:none;
}


.right_quick ul.quick_info li {
    position:absolute;

    right:0;

    height:60px;

    list-style:none !important;
}


.right_quick ul.quick_info li:nth-child(1) {
    top:0;
}

.right_quick ul.quick_info li:nth-child(2) {
    top:60px;
}

.right_quick ul.quick_info li:nth-child(3) {
    top:120px;
}

.right_quick ul.quick_info li:nth-child(4) {
    top:180px;
}

.right_quick ul.quick_info li:nth-child(5) {
    top:240px;
}


.right_quick ul.quick_info li a {
    width:60px;
    height:60px;

    text-align:center;

    background:#111c2d;

    overflow:hidden;

    display:block;

    border-radius:10px 0 0 10px;

    box-shadow:0 10px 30px rgba(0,0,0,.14);
}


.right_quick ul.quick_info li i {
    color:#fff;

    font-size:24px;
}


.right_quick ul.quick_info li i.ico {
    position:absolute;

    right:17px;
    top:15px;

    z-index:2;
}


.right_quick ul.quick_info li a span {
    height:60px;

    line-height:60px;

    color:#fff;

    position:absolute;

    text-align:left;

    opacity:0;

    left:30px;

    font-size:14px;
    font-weight:500;

    z-index:2;
}


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

    .right_quick.fixed {
        display:none;
    }

}



/* =========================================================
   RIGHT SIDE MENU
========================================================= */

#right-side {
    position:fixed;

    z-index:10000;

    top:0;
    right:-400px;

    max-width:400px;
    width:100%;
    height:100%;

    padding:30px;

    color:#fff;

    background:linear-gradient(
        145deg,
        #071225,
        #10274a
    );

    transition:right .3s ease;

    overflow:auto;
}


.right-side-on #right-side {
    right:0;
}


#right-side .side_gnb .call a {
    display:block;

    height:5em;

    margin-top:10px;

    color:#fff;

    line-height:5em;
    text-align:center;
    font-weight:bold;

    background:#176bd5;

    border-radius:10px;
}


.quick_menu {
    width:100%;

    margin:auto;

    padding-top:20px;
}


.quick_menu ul {
    text-align:center;
}


.quick_menu li {
    display:inline-block;

    width:80px;

    margin-left:-3px;

    border-right:1px solid rgba(255,255,255,.15);
}


.quick_menu li:last-child {
    border:0;
}


.quick_menu li a {
    display:block;

    color:#dce5f2;

    font-size:12px;
    text-align:center;
}


.side_gnb {
    position:relative;

    width:100%;

    float:left;

    padding-top:20px;
}


.side_gnb .menu-list {
    display:block;

    position:relative;

    margin-top:60px;

    border-bottom:1px solid rgba(255,255,255,.14);
}


.side_gnb .menu-list > li > a {
    display:block;

    position:relative;

    padding:0 1em;

    color:#fff;

    font-size:15px;
    line-height:3.8em;

    border-top:1px solid rgba(255,255,255,.14);

    text-decoration:none;
}


.side_gnb .depth-2 {
    display:none;
}


.side_gnb .depth-2 > li {
    background:#fff;
}


.side_gnb .depth-2 > li > a {
    display:block;

    padding:0 1.5em 0 2.2em;

    color:#22304a;

    font-size:14px;
    line-height:3em;

    border-bottom:1px solid #e7edf4;
}



/* =========================================================
   MAIN VISUAL
========================================================= */

.visual_slider {
    position:relative;

    width:100%;

    overflow:hidden;

    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
}


.main-carousel {
    position:relative;

    width:100%;

    padding:0 !important;
    margin:0 !important;

    display:block;

    background:transparent !important;
}


.main-carousel .owl-stage-outer {
    position:relative;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden;
}


.main-carousel .owl-stage {
    margin:0 !important;
    padding:0 !important;
}


.main-carousel .owl-item {
    margin:0 !important;
    padding:0 !important;
}



.main-carousel .li {
    position:relative;

    height:800px;

    margin:0 !important;
    padding:0 !important;

    background-size:cover;
    background-position:center;

    overflow:hidden;
}


.main-carousel .li:after {
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(30,125,255,.20),
            transparent 38%
        ),
        linear-gradient(
            90deg,
            rgba(3,10,22,.82) 0%,
            rgba(6,17,34,.58) 48%,
            rgba(6,16,31,.25) 100%
        );
}


.main-carousel .li .cover {
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    margin:0;
    padding:0;

    background:url(../img/main_visual_cover.png) center bottom no-repeat;

    background-size:cover;

    opacity:.25;

    z-index:1;
}


.main-carousel .jarallax {
    min-height:800px;
}


.main-carousel .img01 {
    background-image:url(../img/main_banner_img01.jpg);
}


.main-carousel .img02 {
    background-image:url(../img/main_banner_img02.jpg);
}


.main-carousel .img03 {
    background-image:url(../img/main_banner_img03.jpg);
}



/* =========================================================
   MAIN COPY
========================================================= */

.main-carousel .li .copy_area {
    width:100%;
    max-width:1400px;

    padding:0 90px;

    text-align:left;

    color:#fff;

    position:absolute;

    top:52%;
    left:50%;

    transform:translate(-50%,-50%);

    z-index:3;
}


.main-carousel .li .copy_area h1 {
    padding-bottom:20px;

    color:#63b6ff;

    font-size:13px;
    font-weight:700;

    line-height:1.3;

    letter-spacing:4px;

    text-align:left;
}


.main-carousel .li .copy_area h2 {
    max-width:1050px;

    margin:0;

    color:#fff;

    font-size:58px;
    font-weight:700;

    line-height:1.22;

    letter-spacing:-3px;

    text-align:left;

    text-shadow:0 8px 30px rgba(0,0,0,.20);
}


.main-carousel .li .copy_area h2 strong {
    font-weight:700;
}


.main-carousel .li .copy_area h2 em {
    color:#45a4ff;
}


.main-carousel .li .copy_area h3 {
    max-width:850px;

    margin:24px 0 0;
    padding:0;

    color:rgba(255,255,255,.74);

    font-size:18px;
    font-weight:400;

    line-height:1.8;

    letter-spacing:-.5px;

    text-align:left;
}



/* =========================================================
   OWL DOTS
========================================================= */

.main-carousel .owl-dots {
    position:absolute !important;

    left:0 !important;
    bottom:55px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    z-index:20;

    text-align:center;

    line-height:0;
}


.main-carousel .owl-dots .owl-dot {
    display:inline-block;

    width:30px;
    height:3px;

    margin:0 4px;

    padding:0;

    background:rgba(255,255,255,.35);

    border:0;
}


.main-carousel .owl-dots .owl-dot.active {
    background:#55adff;
}



/* =========================================================
   OWL PREV / NEXT
========================================================= */

.main-carousel .owl-nav {
    position:absolute !important;

    left:0 !important;
    top:50% !important;
    bottom:auto !important;

    width:100% !important;
    height:0 !important;

    margin:0 !important;
    padding:0 !important;

    transform:translateY(-50%);

    z-index:30 !important;

    pointer-events:none;

    background:transparent !important;

    line-height:normal !important;
}


.main-carousel .owl-nav .owl-prev,
.main-carousel .owl-nav .owl-next {
    position:absolute !important;

    top:50% !important;

    width:54px !important;
    height:54px !important;

    margin:0 !important;
    padding:0 !important;

    transform:translateY(-50%);

    display:flex !important;

    align-items:center;
    justify-content:center;

    color:#fff !important;

    font-size:10px !important;
    font-weight:600 !important;

    line-height:1 !important;

    letter-spacing:1px;

    background:rgba(5,15,30,.25) !important;

    border:1px solid rgba(255,255,255,.35) !important;
    border-radius:50% !important;

    box-shadow:none !important;

    cursor:pointer;

    pointer-events:auto;

    z-index:40 !important;

    transition:.25s ease;
}


.main-carousel .owl-nav .owl-prev {
    left:35px !important;
}


.main-carousel .owl-nav .owl-next {
    right:35px !important;
}


.main-carousel .owl-nav .owl-prev:hover,
.main-carousel .owl-nav .owl-next:hover {
    color:#fff !important;

    background:#176bd5 !important;

    border-color:#176bd5 !important;

    transform:translateY(-50%) scale(1.06);
}



/* Owl 기본 스타일 강제 제거 */

.owl-carousel .owl-nav {
    margin-top:0 !important;
}

.owl-theme .owl-nav {
    margin-top:0 !important;
}

.owl-theme .owl-nav [class*=owl-] {
    margin:0 !important;
    padding:0 !important;
}



/* =========================================================
   MAIN 다음 섹션 빈틈 제거
========================================================= */

.visual_slider + .right_quick + script + .tl_company_box_wrap,
.visual_slider + .tl_company_box_wrap {
    margin-top:0 !important;
}



/* =========================================================
   INNER
========================================================= */

.inner {
    width:calc(100% - 80px);
    max-width:1400px;

    margin-left:auto;
    margin-right:auto;
}



/* =========================================================
   BUSINESS
========================================================= */

.tl_company_box_wrap {
    width:100%;

    margin:0;

    padding:105px 0 120px;

    background:
        radial-gradient(
            circle at 15% 0%,
            rgba(36,119,215,.08),
            transparent 35%
        ),
        #f7f9fc;
}


.tl_company_box_wrap h2 {
    text-align:left;

    font-size:42px;

    line-height:1.25;

    color:#121d30;
}


.tl_company_box_wrap h2:before {
    display:block;

    content:"DIGITAL PLATFORM";

    margin:0 0 14px;

    color:#2177df;

    font-size:13px;
    font-weight:700;

    letter-spacing:3px;
}


.tl_company_box_wrap h2 span {
    display:block;

    padding:18px 0 0;

    color:#738096;

    font-size:16px;
    font-weight:400;

    line-height:1.7;
}


.tl_company_box_wrap ul {
    margin-top:50px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;
}


.tl_company_box_wrap ul li {
    width:auto;

    float:none;

    text-align:left;
}


.tl_company_box_wrap ul li .box {
    position:relative;

    height:100%;
    min-height:285px;

    padding:36px 30px;

    background:#fff;

    border:1px solid #e5ebf3;
    border-radius:20px;

    box-shadow:0 15px 45px rgba(18,42,76,.05);

    transition:.35s ease;
}


.tl_company_box_wrap ul li:hover .box {
    transform:translateY(-9px);

    border-color:rgba(23,107,213,.28);

    box-shadow:0 25px 60px rgba(18,55,110,.12);
}


.tl_company_box_wrap ul li .icon {
    display:flex;

    align-items:center;
    justify-content:center;

    width:66px;
    height:66px;

    padding:0;

    margin-bottom:28px;

    border-radius:17px;

    background:#eff6ff;
}


.tl_company_box_wrap ul li .icon i {
    color:#176bd5;
}


.tl_company_box_wrap ul li dl dt {
    padding-bottom:14px;

    color:#19263c;

    font-size:19px;
    font-weight:700;
}


.tl_company_box_wrap ul li a {
    display:inline-flex;

    margin-top:24px;

    padding:0;

    border:0;

    color:#176bd5;

    font-size:13px;
    font-weight:600;
}


.tl_company_box_wrap ul li a:after {
    content:"→";

    margin-left:8px;
}



/* =========================================================
   NEWS & GALLERY
========================================================= */

.tl_main_gallery_wrap {
    width:100%;

    padding:110px 0;

    background:
        linear-gradient(
            rgba(6,19,38,.84),
            rgba(6,19,38,.90)
        ),
        url(../img/tl_main_gallery_bg.jpg)
        center no-repeat;

    background-size:cover;
}


.tl_main_gallery_wrap .inner {
    max-width:1400px;

    margin:0 auto;

    overflow:hidden;
}


.tl_main_gallery_wrap h2 {
    color:#fff;

    font-size:40px;

    text-align:left;
}


.tl_main_gallery_wrap h2:before {
    display:block;

    content:"MEDIA";

    margin:0 0 13px;

    color:#69b7ff;

    font-size:13px;

    letter-spacing:3px;
}


.tl_main_gallery_wrap h2 span {
    display:block;

    padding:15px 0;

    color:#fff;

    opacity:.65;

    font-size:15px;
    font-weight:400;
}


.tl_main_gallery_wrap ul {
    margin-top:35px;
}


.tl_main_gallery_wrap li {
    position:relative;

    float:left;

    width:48%;

    margin:1%;

    overflow:hidden;

    background:#fff;

    border-radius:14px;
}


.tl_main_gallery_wrap .one_box {
    display:block;

    min-height:165px;

    background:#fff;
}


.tl_main_gallery_wrap .photo {
    position:absolute;

    left:0;
    top:0;

    width:100%;
    max-width:180px;

    min-height:165px;
    height:100%;

    background-size:cover;
    background-position:center;
}


.tl_main_gallery_wrap dl {
    margin-left:210px;

    padding-right:22px;
}


.tl_main_gallery_wrap dt {
    margin-top:30px;

    color:#1e2a3e;

    font-size:18px;
    font-weight:bold;
}


.tl_main_gallery_wrap dd {
    padding:10px 0;

    color:#667085;

    font-size:15px;

    line-height:1.75;
}


.tl_main_gallery_wrap li:hover .one_box {
    background:#176bd5;
}


.tl_main_gallery_wrap li:hover dt,
.tl_main_gallery_wrap li:hover dd {
    color:#fff;
}



/* =========================================================
   PRODUCT
========================================================= */

.tl_business_now_box_warp {
    width:100%;

    padding:120px 0;

    text-align:center;

    background:#071326;

    clear:both;
}


.tl_business_now_box_warp h2 {
    color:#fff;

    font-size:40px;
    font-weight:700;

    line-height:1.4;
}


.tl_business_now_box_warp h2:before {
    display:block;

    content:"PRODUCT";

    margin:0 auto 12px;

    color:#64b4ff;

    font-size:13px;

    letter-spacing:3px;
}


.tl_business_now_box_warp span {
    display:block;

    padding:13px 10px 50px;

    color:rgba(255,255,255,.58);

    font-size:15px;
}



/* =========================================================
   SOLUTIONS
========================================================= */

.tl_product_box_wrap {
    width:calc(100% - 80px);
    max-width:1400px;

    margin:0 auto;

    padding:120px 0;

    overflow:hidden;
}


.tl_product_box_wrap h2 {
    color:#152137;

    font-size:40px;
    font-weight:700;

    line-height:1.5;

    text-align:center;
}


.tl_product_box_wrap h2:before {
    display:block;

    content:"SOLUTIONS";

    margin-bottom:10px;

    color:#176bd5;

    font-size:13px;

    letter-spacing:3px;
}


.tl_product_box_wrap span {
    display:block;

    padding:12px 10px 50px;

    color:#778397;

    font-size:15px;

    text-align:center;
}



/* =========================================================
   NOTICE
========================================================= */

.tl_latest_box_warp {
    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding:80px 20px 110px;

    border-top:1px solid #e5eaf1;

    overflow:hidden;
}


.tl_latest_box_warp .notice_latest {
    width:48%;

    float:left;
}


.tl_latest_box_warp .counsel_latest {
    width:48%;

    float:right;
}



/* =========================================================
   CONTACT
========================================================= */

.tl_contact_box_wrap {
    width:100%;

    min-height:550px;

    padding:110px 0;

    background:
        linear-gradient(
            135deg,
            rgba(4,15,31,.96),
            rgba(11,42,82,.92)
        ),
        url(../img/main_contact_bg.jpg)
        center top no-repeat;

    background-size:cover;
}


.tl_contact_box_wrap .inner {
    max-width:660px;

    margin:0 auto;

    padding:0 20px;
}


.tl_contact_box_wrap h2 {
    color:#fff;

    font-size:40px;
    font-weight:700;

    text-align:center;
}


.tl_contact_box_wrap h2 span {
    display:block;

    padding:12px 0 50px;

    color:#fff;

    opacity:.65;

    font-size:15px;
}


.tl_contact_box_wrap .input_page #co_name,
.tl_contact_box_wrap .input_page #co_email {
    width:48%;
    height:60px;

    padding-left:16px;

    color:#fff;

    font-size:15px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;

    background:rgba(255,255,255,.07);
}


.tl_contact_box_wrap .input_page #co_name {
    float:left;
}


.tl_contact_box_wrap .input_page #co_email {
    float:right;
}


.tl_contact_box_wrap .txtarea_page #co_message {
    width:100%;
    height:130px;

    margin-top:20px;

    padding:15px;

    color:#fff;

    font-size:15px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:10px;

    background:rgba(255,255,255,.07);
}


.tl_contact_box_wrap .send_page {
    text-align:center;
}


.tl_contact_box_wrap .send_page .send {
    height:48px;

    margin:42px 0 0;

    padding:0 45px;

    color:#fff;

    font-size:14px;
    font-weight:bold;

    background:linear-gradient(
        135deg,
        #176bd5,
        #49aaff
    );

    border:0;
    border-radius:9px;
}



/* =========================================================
   SUB VISUAL
========================================================= */

.sub_visual {
    position:relative;

    max-width:2560px;

    height:440px;

    margin:0 auto;

    overflow:hidden;
}


.sub_visual.visual01 .bg {
    background-image:url(../img/sub_visual01.jpg);
}

.sub_visual.visual02 .bg {
    background-image:url(../img/sub_visual02.jpg);
}

.sub_visual.visual03 .bg {
    background-image:url(../img/sub_visual03.jpg);
}

.sub_visual.visual04 .bg {
    background-image:url(../img/sub_visual04.jpg);
}

.sub_visual.visual05 .bg {
    background-image:url(../img/sub_visual05.jpg);
}


.sub_visual .title_warp {
    position:relative;

    max-width:1240px;

    margin:0 auto;

    display:table;

    z-index:5;
}


.sub_visual .title_warp .table-cell {
    display:table-cell;

    height:440px;

    vertical-align:middle;
}


.sub_visual h3 {
    position:relative;

    z-index:5;

    color:#fff;

    font-size:46px;
    font-weight:700;

    text-align:center;
}


.sub_visual .sub_title {
    position:relative;

    z-index:5;

    padding-bottom:13px;

    color:#67b6ff;

    font-size:13px;
    font-weight:600;

    letter-spacing:3px;

    text-align:center;
}


.sub_visual .cover {
    position:absolute;

    inset:0;

    z-index:1;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(40,130,255,.23),
            transparent 42%
        ),
        linear-gradient(
            90deg,
            rgba(4,14,31,.78),
            rgba(7,26,52,.47)
        );
}


.sub_visual .bg {
    position:absolute;

    inset:0;

    z-index:0;

    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}



/* =========================================================
   SUB CONTENT
========================================================= */

.content_wrap {
    width:100%;
}


.content_wrap .txtCon {
    position:relative;

    max-width:1300px;

    margin:0 auto;

    padding:70px 20px 80px;

    font-weight:400;

    clear:both;
}


/* 페이지 제목 영역 */

.content_wrap .txtCon > .sub_title {
    position:relative;

    width:100%;

    margin:0 0 55px !important;
    padding:0 !important;

    float:none !important;
    clear:both !important;

    text-align:center !important;
}


.content_wrap .txtCon > .sub_title > h1 {
    margin:0 !important;
    padding:0 !important;

    color:#172238;

    font-size:38px;
    font-weight:700;

    line-height:1.35;

    letter-spacing:-1.5px;

    text-align:center !important;
}


.content_wrap .txtCon > .sub_title > h1:before {
    content:"";

    display:block;

    width:45px;
    height:2px;

    margin:0 auto 22px;

    background:linear-gradient(
        90deg,
        #176bd5,
        #56b1ff
    );
}


.content_wrap .txtCon > .sub_title > p.sub_title {
    position:relative !important;

    display:block !important;

    width:100% !important;
    max-width:none !important;

    margin:14px auto 0 !important;
    padding:0 !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    float:none !important;
    clear:both !important;

    color:#667085 !important;

    font-size:15px !important;
    font-weight:400 !important;

    line-height:1.7 !important;

    letter-spacing:-.3px;

    text-align:center !important;

    word-break:keep-all;
}


.content_wrap .txtboard {
    max-width:1200px;

    font-size:12px;
}



/* =========================================================
   REMOVE SUB NAV
========================================================= */

.category-wrap,
.sub_navI_warp,
.all-wrap {
    display:none !important;
}



/* =========================================================
   FOOTER
========================================================= */

#footer {
    width:100%;

    padding:45px 0;

    background:#07101e;

    clear:both;
}


#footer .footer_in {
    max-width:1300px;

    min-height:200px;

    height:auto;

    margin:0 auto;

    padding:0 20px;
}


#footer .menu {
    display:block;

    padding:7px 0 0;
}


#footer .menu a {
    display:inline-block;

    margin-right:28px;

    color:#b4c0cf;

    font-size:14px;
    font-weight:600;
}


#footer address {
    margin:35px 0 0;

    padding-top:30px;

    color:#8794a7;

    font-size:14px;

    line-height:1.7;

    border-top:1px solid rgba(255,255,255,.12);
}


#footer .copyright {
    display:block;

    margin:22px 0 0;

    color:#647287;

    font-size:11px;
}



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

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

    .scrolled #header {
        background:rgba(255,255,255,.97) !important;
    }


    .scrolled #header #logo img {
        filter:none;
    }


    .scrolled #open-button .navicon-line {
        background:#24324a;
    }


    #open-button {
        position:fixed;

        z-index:12000;

        right:15px;
        top:9px;

        width:60px;
        height:60px;

        cursor:pointer;

        display:block;
    }


    #open-button .navicon-line {
        position:absolute;

        height:2px;

        border-radius:1px;

        background:#fff;
    }


    #open-button .nl1 {
        top:11px;
        right:10px;

        width:30px;
    }


    #open-button .nl2 {
        top:19px;
        right:10px;

        width:24px;
    }


    #open-button .nl3 {
        top:27px;
        right:10px;

        width:30px;
    }

}



/* =========================================================
   RESPONSIVE
========================================================= */

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

    #header {
        width:calc(100% - 40px);
    }


    #header .gnb > li > a {
        padding-left:13px;
        padding-right:13px;

        font-size:14px;
    }


    .inner,
    .tl_product_box_wrap {
        width:calc(100% - 50px);
    }

}


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

    .tl_company_box_wrap ul {
        grid-template-columns:repeat(2,1fr);
    }


    .tl_main_gallery_wrap li {
        width:100%;

        margin:0 0 4%;
    }

}


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

    .tl_latest_box_warp .notice_latest,
    .tl_latest_box_warp .counsel_latest {
        width:100%;
    }

}


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

    .inner,
    .tl_product_box_wrap {
        width:calc(100% - 34px);
    }


    .tl_company_box_wrap h2,
    .tl_main_gallery_wrap h2,
    .tl_business_now_box_warp h2,
    .tl_product_box_wrap h2,
    .tl_contact_box_wrap h2 {
        font-size:30px;
    }


    .tl_company_box_wrap ul {
        grid-template-columns:1fr;
    }


    .tl_contact_box_wrap .input_page #co_name,
    .tl_contact_box_wrap .input_page #co_email {
        width:100%;

        float:none;

        margin-bottom:12px;
    }

}


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

    .main-carousel .li {
        height:100vh;
    }


    .main-carousel .jarallax {
        min-height:100vh;
    }


    .main-carousel .li .copy_area {
        padding:0 30px;
    }


    .main-carousel .li .copy_area h1 {
        font-size:11px;

        letter-spacing:2px;
    }


    .main-carousel .li .copy_area h2 {
        font-size:34px;

        letter-spacing:-2px;
    }


    .main-carousel .li .copy_area h3 {
        max-width:300px;

        margin:16px 0 0;

        font-size:15px;
    }


    .main-carousel .owl-nav {
        display:none !important;
    }


    .tl_company_box_wrap {
        padding:80px 0;
    }


    .sub_visual {
        height:360px;
    }


    .sub_visual .title_warp .table-cell {
        height:360px;
    }


    .sub_visual h3 {
        font-size:34px;
    }


    .content_wrap .txtCon {
        padding:55px 18px 60px;
    }


    .content_wrap .txtCon > .sub_title {
        margin-bottom:40px !important;
    }


    .content_wrap .txtCon > .sub_title > h1 {
        font-size:30px;
    }


    .content_wrap .txtCon > .sub_title > p.sub_title {
        margin-top:12px !important;

        font-size:14px !important;
    }

}
/* 상단 메뉴 우측의 불필요한 점/버튼 완전 제거 */
#header button.menu,
#header .header-inner > button.menu {
    display:none !important;
    width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:none !important;
    overflow:hidden !important;
}