@font-face {
        font-family: 'Pretendard-Regular';
        src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
        font-weight: 400;
        font-style: normal;
    }

    :root {
          --main-color: #062c40;
          --main-color2: #15245d;
        }

    body    {   margin:  0; font-family: "Pretendard-Regular";}

    #wrapper{overflow: hidden;}

    ul  {padding: 0; list-style-type: none;}
    a   {text-decoration: none;}
    img {   max-width: 100%;}
    p   {margin: 0;}
    
    .bold {font-weight: bold !important;}

    .ft_s1{ font-size: 4.5rem !important;}
    .ft_s2{ font-size: 4.2rem !important;}
    .ft_s3{ font-size: 3.8rem !important;}
    .ft_s4{ font-size: 3.2rem !important;}
    .ft_s5{ font-size: 2.8rem !important;}
    .ft_s6{ font-size: 2.2rem !important;}
    .ft_s7{ font-size: 1.8rem !important;}
    .ft_s8{ font-size: 1.5rem !important;}
    .ft_s9{ font-size: 1.2rem !important;}
    .ft_s10{ font-size: 1rem !important;}

    .ft_c0{color: var(--main-color) !important;}
    .ft_c1{color: var(--main-color2) !important;}

    .ft_white {color:#fff;}
    .ft_gray_dep1 {color:#3f3f3f;}
    .ft_gray_dep2 {color:#545454;}
    .ft_gray_dep3 {color:#a9a9a9;}
    .ft_gray_dep4 {color:#bababa;}

    .content{ position: relative;}
    .bg_none{ background: none !important}
    
    .ml-3{margin-left: 30%;}
    .ml-3h{margin-left: 35%;}
    .ml-4{margin-left: 40%;}
    .ml-4h{margin-left: 45%;}
    .ml-5{margin-left: 50%;}
    .ml-5h{margin-left: 55%;}
    .ml-6{margin-left: 60%;}
    .ml-7{margin-left: 70%;}

    .mb-16{margin-bottom: 16% !important;}
    .mb-8{margin-bottom: 8% !important;}

    .ellipsis {
        white-space: nowrap;       /* 줄바꿈 안 함 */
        overflow: hidden;          /* 넘치는 텍스트 숨김 */
        text-overflow: ellipsis;   /* ... 표시 */
        width: 100%;              /* 반드시 너비 지정 */
    }

    @media all and (min-width:1280px){ 
        .w_1280{width: 1280px; margin: auto; padding: 3rem;}
    }

    /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
    @media all and (min-width:768px) and (max-width:1023px) { 
        .ft_s1{ font-size: 4rem !important;}
        .ft_s2{ font-size: 3.5rem !important;}
        .ft_s3{ font-size: 3rem !important;}
        .ft_s4{ font-size: 2.5rem !important;}
        .ft_s5{ font-size: 2rem !important;}
        .ft_s6{ font-size: 1.7rem !important;}
        .ft_s7{ font-size: 1.5rem !important;}
        .ft_s8{ font-size: 1.2rem !important;}
        .ft_s9{ font-size: 1rem !important;}
        .ft_s10{ font-size: 0.8rem !important;}
    }

    /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
    @media all and (min-width:480px) and (max-width:767px) { 
        .ft_s1{ font-size: 2.5rem !important;}
        .ft_s2{ font-size: 2.1rem !important;}
        .ft_s3{ font-size: 2rem !important;}
        .ft_s4{ font-size: 1.9rem !important;}
        .ft_s5{ font-size: 1.7.5rem !important;}
        .ft_s6{ font-size: 1.6rem !important;}
        .ft_s7{ font-size: 1.45rem !important;}
        .ft_s8{ font-size: 1.3rem !important;}
        .ft_s9{ font-size: 1.15rem !important;}
        .ft_s10{ font-size: 1rem !important;}
    }

    /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
    @media all and (max-width:479px) { 
        .ft_s1{ font-size: 1.7rem !important;}
        .ft_s2{ font-size: 1.5rem !important;}
        .ft_s3{ font-size: 1.4rem !important;}
        .ft_s4{ font-size: 1.3rem !important;}
        .ft_s5{ font-size: 1.2rem !important;}
        .ft_s6{ font-size: 1.1rem !important;}
        .ft_s7{ font-size: 1rem !important;}
        .ft_s8{ font-size: 0.9rem !important;}
        .ft_s9{ font-size: 0.8rem !important;}
        .ft_s10{ font-size: 0.7rem !important;}
    }

    /* ================================================================= 
     * 메뉴바(navbar)
     * ================================================================= */
     .navbar { 
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--background-color);
        padding: 8px 12px;
        font-size: 1.2rem;
    }
    
    .navbar a{color:#fff;}

    .navbar .navbar-brand{  
        margin-right: auto;
        margin-bottom: auto;    
        z-index: 999;
        position:relative;        
        display: inline-block;
        height: 3rem;
    }
    
    .logo{
        margin-bottom: auto;     
        filter: invert(1) grayscale(1);  
        height: 100%;
    }

    .navbar.bg_white {
        background: #fff;
        color:var(--main-color2);        
    }

    .navbar.bg_white a {color:var(--main-color2);}
    .navbar.bg_white .logo {filter: none;}

    .navbar_menu {
        display: flex;
        list-style: none;
        padding-left: 0px;
        text-align: center;
        margin: 0;
    }

    .navbar_menu li {
        padding: 8px 13px;
        width: 10rem;
    }

    .navbar_menu .dept2 {
        margin-left: -13px;
        margin-top: 1rem;
        display: none;
    }

    .navbar_toggleBtn { display: none; }

    @media (hover: hover) {
        .navbar:hover, .navbar:hover.bg_white { background-color: rgba(0, 0, 0, 0.4) !important;}
        .navbar:hover a, .navbar:hover.bg_white a{color: #fff;}
        .navbar:hover .logo, .navbar:hover.bg_white .logo{ filter: invert(1) grayscale(1);  }
        .navbar:hover  .navbar_menu .main_menu:hover .main_txt
        , .navbar:hover.bg_white .navbar_menu .main_menu:hover .main_txt {
            color: #97bdd1;
            border-bottom: #97bdd1 solid 2px;
        }

        .navbar:hover .navbar_menu .main_menu:hover .dept2 a:hover
        , .navbar:hover.bg_white .navbar_menu .main_menu:hover .dept2 a:hover {
            border-bottom: #97bdd1 solid 1px;
            color: #97bdd1;
        }
        .navbar:hover .dept2, .navbar:hover.bg_white .dept2 {display: block;}
    }
    
    @media screen  and (min-width:1195px) and (max-width:1485px) {
        .navbar_menu li {
            width:10.4rem;
            font-size:1.2rem;
        }
    }

    @media screen  and (min-width:1009px) and (max-width:1194px) {
        .navbar img{ width : 15rem }
        .navbar_menu li {
            width:8.8rem;
            font-size:1.1rem;
        }
    }

    /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
    @media screen  and (max-width:1008px) { 
        .container-fluid {padding: 0;}
        .navbar {
            flex-direction: column;
            align-items: flex-start;
            padding : 10px 24px;
        }
        .navbar.active { background-color: rgba(0, 0, 0, 0.4) !important;}
        
        .navbar_menu {
            display: none;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .navbar_menu li {
            width: 100%;
            text-align: center;
        }

        .navbar_toggleBtn {
            display: block;
            right : 20px;
            font-size: 24px;
            color :#fff;
        }

        .navbar_menu.active{
            display: flex;
            transition: ease-out;
        }
        
        .navbar.active:hover .dept2 {display: none;}
    }

    /* ================================================================= 
     * footer
     * ================================================================= */
    footer{
        background: #2b2e3f;
        padding: 1rem;
        color: #c0c0c0;
        font-size: 1rem;
        position: relative;
    }

    footer .textArea{
        display: flex;
        position: relative;
        z-index: 10;
    }

    footer .textArea .contact{
        margin-right: auto;
        position: relative;
    }

    footer .hline::after{content: " | ";}

    footer .textArea .contact p{margin-bottom: 0.2rem;}
    footer .textArea .contact .tel{ font-size: 2.5rem;}
    footer .textArea .contact a{color: #fff;}
    
    footer .textArea .link{
        text-align: right;
        margin: auto 0;
    }

    footer .textArea .link select {margin-bottom: 1rem;    
        padding: 0.5rem 3rem;
        background: #2b2e3f;
        color: #c0c0c0;
    }

    footer .textArea .link select option{padding: 0.5rem 3rem;}
    footer .textArea .link select option[value=""]{display: none;}
    footer .textArea .link i { font-size: 1.5rem; margin-left: 1rem;}
        
    footer .copyright{
        display: flex;
        position: relative;
        z-index: 9999;
    }

    footer .copyright a{ color: #c0c0c0;}
    
    footer .company{
        margin-top: -5rem;
        margin-left: auto;
        font-size: 2rem;
        font-weight: 900;
        opacity: 0.3;
        position: absolute;
        bottom: 0.5rem;
        right: 2rem;
    }

    footer .backImg{
        position: absolute;
        top: 0;
        height: 100%;
        width: inherit;
        text-align: center;
    }
    footer .backImg img{
        filter: invert(1) grayscale(1);  
        height: -webkit-fill-available;
        opacity: 0.2;
    }

    @media screen  and (max-width: 710px) {         
        footer {text-align: center;}
        footer .textArea {display: block;}
        footer .copyright {display: block;}
        footer .copyright a {display: block;}
        footer .hline::after{content: "";}
        footer .contact p span{display: block;}
        footer .textArea .contact .tel{ font-size: 2.3rem;}
        
        footer .company{font-size: 1rem;}
    }

    /* ================================================================= 
    * 배너
    * ================================================================= */
    .banner{
        height: 40rem;
        overflow: hidden;
        position: relative;
    }
    .banner img{
        width: 100%;
        height: 100%;
    }

    .banner .titleMenu{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color:#fff;
        font-weight: bold;
        font-size: 5rem;
        width:max-content;
        letter-spacing: 0.8rem;
    }

    /* ================================================================= 
    * dep2 메뉴바
    * ================================================================= */
    .subMenubar{        
        height: 6rem;
        text-align: center;
        border-bottom: 4px solid var(--main-color2);
        margin: 7rem 0;
        font-size: 2.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .subMenubar div{
        padding: 0 2rem;
        height: -webkit-fill-available;
        position: relative;
        cursor: pointer;
    }
    
    .subMenubar a{color:#808080}

    .subMenubar div.active::after{
        content: " ";
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        position: absolute;
        border: 4px solid var(--main-color2);
        background:#fff;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 50%);
        color:var(--main-color2)
    }
    
    .subMenubar div.active a{
        color:var(--main-color2);
        font-weight: bold;
    }
    
    .subMenubar div a:hover {color:var(--main-color2);}
    
    /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/
    @media screen and (min-width:768px) and (max-width:1122px) { 
        /* ================================================================= 
        * 배너 _모바일
        * ================================================================= */
        .banner .titleMenu{ letter-spacing: 0.6rem;}
        
        /* ================================================================= 
        * dep2 메뉴바 _ 모바일
        * ================================================================= */
        .subMenubar{        
            height: 5rem;
            margin: 3.5rem 0;
            font-size: 2.3rem;
        }

        .subMenubar div{padding: 0 1rem; }
    }
    /* 모바일 가로, 테블릿 세로 (해상도 480px ~ 767px)*/
    @media screen and (min-width:480px) and (max-width:767px) { 
        /* ================================================================= 
        * 배너 _모바일
        * ================================================================= */
        .banner { height: 34rem;}
        .banner .titleMenu{ font-size: 4rem; letter-spacing: 0.5rem;}
        
        /* ================================================================= 
        * dep2 메뉴바 _ 모바일
        * ================================================================= */
        .subMenubar{        
            height: 4rem;
            margin: 3rem 0;
            font-size: 1.5rem;
        }
        .subMenubar div{padding: 0 0.5rem; }
    }
    /* 모바일 가로, 테블릿 세로 (해상도 ~ 479px)*/
    @media screen and (max-width:479px) {         
        /* ================================================================= 
        * 배너 _모바일
        * ================================================================= */
        .banner{ height: 27rem;}
        .banner .titleMenu{ font-size: 3.5rem; letter-spacing: 0.5rem;}
        
        /* ================================================================= 
        * dep2 메뉴바 _ 모바일
        * ================================================================= */
        .subMenubar{        
            height: 4rem;
            margin: 3rem 0;
            font-size: 1.2rem;
        }
        
        .subMenubar div{padding: 0 0.4rem; }
    }

    .center{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .full_dim {
        background: #000;
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.4;
        top: 0;
        left: 0;
    }