﻿    /*--------------------------------------------

    공통 적용  CSS
                 
    --------------------------------------------- */

    main{
        display:block;
    }

    /*----------------------------------------------
    reset 
    ---------------------------------------------*/
    *{ margin: 0;
    padding: 0;
    word-break: keep-all;
    }
    
    /*body{
    letter-spacing:0.7px;
    }*/

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, img, ins, kbd, q, s, samp,
    small, strike, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul ,li {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    
    p{
    line-height: 24px;
    }
    
    a{ text-decoration: none;}
    
    
    /* ---------------------------------
     
    web-font
    
    ----------------------------------*/
    
    @font-face {
    font-family: 'NEXEN_TIRE_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/NEXEN_TIRE_Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

    @font-face {
    font-family: 'Godo';
    font-style: normal;
    font-weight: 400;
    src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
    }

    @font-face {
    font-family: 'Godo';
    font-style: normal;
    font-weight: 700;
    src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoB.woff') format('woff');
    }

     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

    body{font-family: 'Noto Sans KR', sans-serif;}
    /* 따옴표  */

    .Quotes{
    font-family: monospace;
    }

       
   


    /* ---------------------------------
     
    layout
    
    ----------------------------------*/
    
        


    .mvno_t{
        text-align: center;
    font-size: 2rem;
}

    .mgb10 {margin-bottom: 10px;}
    .mgb20 {margin-bottom: 20px;}
    .mgb30 {margin-bottom: 30px;}
    .mgb40 {margin-bottom: 20px;}
    .mgb50 {margin-bottom: 50px;}
    .mgb60 {margin-bottom: 60px;}
    .mgb70 {margin-bottom: 70px;}
    .mgb80 {margin-bottom: 80px;}
    .mgb160{margin-bottom: 160px; } 
    .mgb200{margin-bottom: 200px;} 
    .mgt10 {margin-top: 10px;}
    .mgt20 {margin-top: 20px;}
    .mgt30 {margin-top: 30px;}
    .mgt40 {margin-top: 40px;}
    .mgt50 {margin-top: 50px;}
    .mgt60 {margin-top: 60px;}
    .mgt70 {margin-top: 70px;}
    .mgt160 {margin-top: 200px;}
    .mgt200 {margin-top: 200px;}
    .pdb10{padding-bottom: 10px;}
    .pdb20{padding-bottom: 20px;}
    .pdb30{padding-bottom: 30px;}
    .pdb40{padding-bottom: 40px;}
    .pdb50{padding-bottom: 50px;}
    .pdb60{padding-bottom: 60px;}
    .pdb70{padding-bottom: 70px;}
    .pdt10{padding-top: 10px;}
    .pdt20{padding-top: 20px;}
    .pdt30{padding-top: 30px;}
    .pdt40{padding-top: 40px;}
    .pdt50{padding-top: 50px;}
    .pdt60{padding-top: 60px;}
    .pdt70{padding-top: 70px;}
    .pdt80{padding-top: 80px;} 


    /* all laylout */
    #wrap{
    padding-bottom:10%;
    }
        
        
    /*네비게이션*/




    /*하단 푸터*/
    footer{

    padding-top:68px;
    padding-bottom:68px;
    }


    .footer_logo:after{
    content:'';
    display:block;
    width:100%;
    height:1px;
    background:#FFFFFF;
    margin-top:10px;
    margin-bottom:10px;
    }


    #footer-wrap p{
    color:#FFFFFF;
    letter-spacing:0.8px;
    }

            

    /* 상단 이미지와 텍스트 */
    main
    {
    width:100%;
    height:50vh;
    }

    .content{
    width:1180px;
    /* border: 1px solid blue; */
    margin-left: auto;
    margin-right: auto;
    }

    /* common */

    
    /* 이미지 세개가 정렬되는 레이아웃 */
       
    .imgWrap3{display: flex;}

    .txtcent{
    text-align: center;
    }


    .clearfix::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both;
    }
    
    /* ---------------------------------
     
    nav
    
    ----------------------------------*/
    
    .subnav
    {
    margin-bottom: 110px;
    width:100%;
    /*border-bottom: 1px solid #EAEAEA;*/
    }
    
    .submenu{
    width:100%;
     
    }  

    .menu-wrap{display: flex;
    height: 60px;
    
    }
    .menu-item{
    width:100%;
    height: 100%;   
    flex:1;
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    position:relative;
    }





    /*.menu-item:last-of-type:after{
       content:'';
       display:none;
    }*/

   
    .menu-item a{
    display: inline-block;
    width:100%;
    text-align:center;
    height: 100%;
    vertical-align: middle;
    line-height: 56px;
    color: #000000;
    font-size:16px;
    font-family: pretendard;
    }

    .active{
    /*background-color: #222222;*/
    }
 
    .menu-item .active{
 
    color:white;

    }
   
.menu-item a:after {
  content: '';
  width: 30px;
  bottom: 10px;
  left: 36%;
  position: absolute;
  opacity: 0;


}

.menu-item a.active:after {
opacity:1;
}

    
    /* ---------------------------------
     
    title   /      text
    
    ----------------------------------*/

    .Btit{
    color: #191919;
    font-size: 2.8rem; 
    font-weight: 600; 
    /*margin-bottom:60px;*/ 
    }


    .Mbtit{
    font-size: 1.58rem;
    padding-left: 30px;
    }

    welfarep{
        padding: 30px;
    }

    .Mtit{
    color: #222222;
    font-size: 1.4rem;
    }

 

    .Stit{
    font-weight: 600;
    font-size: 1.3em !important;
    }

    /* 컨텐츠 내용에 관한 텍스트 */
    .c_txt{
    color: #555555;
    }



    /* 타이틀 스타일 */
    .t_line{position: relative;}



    /* ------------------------------컨텐츠--------------------------------- */
   

    

    .maintxtWrap{
    display: inline-block;
    position: relative;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    color: #ffffff;
    
    }

    .maintxtWrap p{
    margin-bottom: 8px;
    font-size: 0.9em;
    }

    .txtWrap{
        margin-top: 80px;
    text-align: center;
    }

    .txtWrap p{
    color: #3a3a3a;
    }

    .txtWrap .Mtit{
    line-height:1.5em ; 
        margin-top: 60px;
    }


    .maintxt{
    font-size: 3.7em;
    font-weight: 700;
    font-family: 'Godo', sans-serif;
 
    }
   

    .maintxtWrap .Stit {
    font-weight:400;
    font-size:16px !important;
    }


    /*    아이콘 레이아웃  section 2*/

    .Quotes {
    display: block;
    font-size: 10rem;
    font-weight: 900;
    color: #424242;
    line-height: 0;
    text-align: center;
    margin-left: -70px;
    margin-bottom: 40px;
     font-family:monospace;
    }

    .sec2 .txtcent {
    line-height: 38px;
    }

    .sec2 .txtcent i{
    font-weight: 700;
    }
   

    .sec2 .imgWrap3>div{
    flex:1;
    margin-right:5%;
    text-align: center;
    }
    
    .sec2 .imgWrap3> div>div{
    width:120px;
    margin: 0 auto;
    margin-bottom: 30px;
    }
    .sec2 .imgWrap3>div>div  img{
          
    /* width:100%; */
    text-align: center;
    }
    .sec2 .imgWrap3>div span{
    display: block;
    width:75%;
    font-size: 18px;
    margin: 0 auto;
        
    }
    .sec2 .imgWrap3>div p{
    width:80%;
    color: #555555;
    margin: 20px auto 0;
    overflow-wrap: break-word;
    font-size:1em;
        
    }
    



    /************************* 중앙 정렬 **************************/


    .center{
    position: relative;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    }

    /* 수평중앙 */

    .L-center{
    position: relative;
    left:50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    }
    
    /* 수직중앙 */

    .T-center{
    position: relative;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    }








    /*모바일 네비게이션*/
   .hide{
       display:none;
   }


  /* Dropdown style */


.mob-nav-wrap{
    width:100%;
    display:flex;
    z-index:99;
      position:relative;
}

.mob-nav {
    width:80%;
    height:80px;
  
    margin: 0 auto; 
    padding: 0;
    display:flex;

}

.mob-nav > li {
flex: 1;
    list-style: none;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding-left: 20px;

}

.mob-nav .button-dropdown {
    position: relative;
    /*border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;*/
}

.mob-nav .button-dropdown:last-of-type{
    /*border-left: 1px solid #eaeaea;*/
}

.mob-nav li a {
    display: block;
    color:#605b53;
    width:100%;
    text-decoration: none;
    text-align:center;
    margin-top:20px;
}

.mob-nav li a span {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    color: #999;
}


.mob-nav li .dropdown-menu {
    display: none;
    text-align: center;
    width: 50%;
    box-sizing: border-box;
    z-index: 99;
    padding: 0px;
    margin: 14px auto auto;
    background: #dfdfdf;
}

.mob-nav li .dropdown-menu.active {
    display: block;
}

.dropdown-menu  .menu-item {
    border-bottom:1px solid #eaeaea;
    text-align:left;
    margin:0 auto;
}


.dropdown-menu  .menu-item:last-of-type{
    border: none;
}

.dropdown-menu  .menu-item a{
    display:block;
     width:80%;
     margin:0 auto;
     line-height:40px;
    font-size:15px;
    color:#767676;
    font-weight:400;

}

.Mcategory > span{
  position:absolute;
  right:0;
  top:0;
}

.dropdown-toggle:after{
        content: "\f105";
     display:inline-block;
    width:12px;
    height:20px;
    position:absolute;
    font-family: "Font Awesome 5 Free" !important;
    right:10px;
    font-weight:900;
}

.nav-active.dropdown-toggle:after{
        content: "\f106";
}

@media all and (max-width:425px) {
    .mob-nav > li{
        padding-left:4px;
        font-size:14px;
    }
  .dropdown-menu .menu-item a{
      width:94%;
  }
}