@charset "utf-8";
/* CSS Document */

header{ 
    display: flex;
    justify-content: center;
    align-items: center;
}

#conts{ color:rgba(0, 0, 0, 0.6);  }
#conts>h1{ font-family: "Noto Sans KR"; font-weight: 600; font-size: 150%; line-height: 180%; border-bottom: 1px solid #ddd; margin-bottom: 10px; color:#000;  }

footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-top:1px solid #ddd;
    padding:20px 0px;
}
footer>div:last-child>p.copyright{ margin-top: 15px;}

.talk_banner_preview.talk_expose_black.on{ border:0px; box-sizing: border-box; background: transparent;  }
.talk_banner_div .talk_preview_area .talk_banner_desc{ font-family: "Noto Sans KR" !important; font-weight: 400; font-size: 115%; }

#location{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size:85% ; color:rgba(0, 0, 0, 0.54); padding-bottom: 10px; }
#location .material-icons{ vertical-align:text-bottom;}
#location>span{ display: inline-block; padding-right: 10px;}

#bmask{ display:none; position:fixed; z-index:100; top:0px; left:0px; width:100%; height:100%; } /*팝업 및 모바일 메뉴 클릭시 가리개*/

/*PC 관련*/
@media screen and (min-width: 1025px) {
    body{
        background:  url(/images/idxback02.svg) no-repeat fixed, url(/images/idxback01.svg) no-repeat;
        background-size: calc(50% - 600px) 462px, calc(50% - 600px) 100%;
        background-position: 0px 225px, 0px 0px;
    }
    #wrap{ width: 1200px; margin: auto; display: flex; flex-wrap: wrap; }

    header{ width: 220px; display: block; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,0.05); background: #1E1E1E; position: fixed; z-index: 1; min-height:100vh }
    #logowrap{ text-align: center; margin:50px auto 15px auto; }
    #logo { width: 110px; height:102px; }
    #logowrap div{ font-family: "Lusitana"; font-size: 130%; color:rgba(255, 255, 255, 1); }
    #logowrap div>p{ font-size: 50%; color:rgba(255, 255, 255, 0.5);}

    #menu{ background: rgba(255,255,255,0.03); padding:10px 0px; }
    #nav{ list-style: none; margin:auto; font-family: "Noto Sans KR"; color:rgba(255,255,255,0.6); font-size: 90%; }
    #nav>li{ 
        border-bottom: 1px dotted rgba(255, 255, 255, 0.1); line-height: 200%; padding:7px 20px; position: relative; background: rgba(0, 0, 0, 0); 
        transition: all 0.5s;
    }
    #nav>li.nvon{ background: rgba(0, 0, 0, 0.5); color:rgba(255,255,255,1); }
    #nav>li>div{ display: none; position: absolute; left:219px; top:10px; width: 200px; }
    #nav>li>div>a{ 
        display: block; line-height: 200%; padding:7px 20px; border-bottom: 1px dotted rgba(255, 255, 255, 0.1); color:rgba(255,255,255,0.6);
        transition: all 0.5s;
    }
    #nav>li>div>a:hover{ background: rgba(0, 0, 0, 0.5); color:rgba(154,241,0,1); }
    #submnback{ position:absolute; z-index: -1; top:0px; left:219px; width: 200px; height: 100vh; background: rgba(0, 0, 0, 0.8); display: none; }

    .talk_preview_area{ margin-top:15px;}        

    #csTel{ width: 160px; margin:0px auto 14px auto; text-align: center; font-size: 80%;}
    #csTel>h1{ background: #151515; color:#82cb00; font-family: "Lusitana"; font-size: 200%; font-weight:normal; padding: 5px; border-radius: 3px; }
    #csTel>div{ line-height: normal; color:rgba(255, 255, 255, 0.5)  }

    #conts{ flex-grow: 0; width: 980px; margin-left: 220px; min-height: 500px; padding: 20px 0px 50px 50px; box-sizing: border-box;  font-size: 95%;} /*margin-top = #nav>li>a height */
    
    
    #conts>h1{ font-size: 250%; line-height: initial; border-bottom: 0px; margin: 30px 0px 40px 0px; font-weight: 500; letter-spacing: -0.02em; }
    #conts>h1>p{ font-size:40%; font-weight: normal; color:rgba(0, 0, 0, 0.4); line-height: initial; font-family: "Malgun Gothic"; }

    footer{ padding:20px; border:0px; color:rgba(255,255,255,0.5); font-size: 75%; line-height: 160%; }
    footer>div:last-child>p>span::before{ content: "\2022  ";}
    footer>div:last-child>p>span:first-of-type{ margin-top:20px; }
    footer>div:last-child>p.copyright{ color:rgba(255,255,255,0.8); }

    #bmask{ opacity:0; background: #000; flex-grow: 1;  } /*팝업 및 모바일 메뉴 클릭시 가리개*/
}
/*탭 이하 관련*/
@media screen and (max-width: 1024px) { 
    /*
    header{ padding:5px 0px; background: #1E1E1E; }
    */
    header{ padding:5px 0px; display: flex; justify-content: center; align-items: center; background: #1E1E1E; position: fixed; width: 100%; z-index: 101; }
    #logo{ height: 35px; display: block; }
    #mbl_nvlst{ background: url(/images/mobile_icoList.svg) no-repeat; width: 20px; height: 20px; display: block; position: absolute; z-index: auto; top: 12px; right: 10px; cursor:pointer }

    #menu{ 
        transition-property: all; transition-duration: 0.3s;
        position: fixed; z-index: 102; top:0px; left:-300px; width: 300px; height: 100%; background: #fff; border-right: 1px solid #ddd; box-sizing:border-box; 
    }
    #menu.onmenu{ left:0px; }
    #mbl_nvlstC{ background: url(/images/mobile_icoListX.svg) no-repeat; width: 20px; height: 20px; display: block; position: absolute; z-index: auto; top: 10px; right: 10px; cursor:pointer }

    #nav{ margin:20px; list-style: none; font-family: "Noto Sans KR"; display: block; }
    #nav>li>a{ font-size: 110%; display: block; line-height: 250%; padding: 0px 10px; border-bottom: 1px solid #ddd; font-weight: 500; }
    #nav>li>div{ border:1px solid #ddd; border-top: 0px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; margin-bottom: 10px; background: #f7f7f7; padding: 20px; display: none;}
    #nav>li>div>a{ display: block; font-weight: 500; line-height: 220%; padding: 0px 10px;  }
    #nav>li>div>a:not(:last-child){ border-bottom: 1px dotted #ddd;}

    .talk_banner_div{ margin: 0px 20px;}
    .talk_preview_area{ width: 100%; background: #333; }

    #csTel{ margin:20px; text-align: center; font-size: 90%;}
    #csTel>h1{ font-family: "Lusitana"; font-size: 200%; font-weight:700; padding: 5px; border-radius: 3px; }
    #csTel>div{ line-height: normal; color:rgba(0, 0, 0, 0.5)  }

    #conts{ min-height: 300px; padding:55px 20px 0px 20px; letter-spacing: -0.03em; }
    
    #conts>h1{ font-size: 180%; line-height: initial; border-bottom: 0px; margin: 15px 0px 20px 0px; font-weight: 500; letter-spacing: -0.02em; }
    #conts>h1>p{ font-size:55%; font-weight: normal; color:rgba(0, 0, 0, 0.4); line-height: initial; font-family: "Malgun Gothic"; }

    footer>div{ display: block; width: 100%; text-align: center; padding: 0px 20px;  }
    footer>div:first-child>img{ height: 50px; }
    footer>div:last-child{ font-size: 85%; color:rgba(0,0,0,0.8); line-height: 160%; }
    footer>div:last-child>p{ display: inline-block; }
    footer>div:last-child>p.lslash::after{content: " \002F  "; }

    #bmask{ background: rgba(0, 0, 0, 0.5); } /*팝업 및 모바일 메뉴 클릭시 가리개*/
}