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

header{ background: #fff; }

#conts{ color:#555; }

footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background:url(/images/footback.jpg);
    border-top:1px solid #ddd;
    padding:30px 0px 40px 0px;
    text-align: center;
    font-size: 90%;
    letter-spacing: -0.03em;
}

footer>div:last-child{ width: 100%; flex-grow: 0; color:rgba(0, 0, 0, 0.7); padding:20px 0px; }
footer>div:last-child>p{ color:rgba(0, 0, 0, 0.7); margin-top: 15px;}

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

a.lsbj { 
    font-family: "Noto Sans KR"; font-weight: 500; color:#555; line-height: 150%; width: 100%; font-size: 110%;
    display: inline-block; max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; 
}

/**********************************************************/
body{ min-width: 1200px; }
header{ 
    position: fixed; width: 100%; z-index: 101; border-top: 3px solid #029add; 
    background:url(/images/dot10.svg) repeat-x 0% 97px; background-size: 1px; background-color: rgba(62, 62, 62, 0.9);
}
#topmn{ 
    align-self: flex-start;
    position: absolute; z-index: auto; top:0px; right: calc(50% - 600px);
    background: #029add; padding: 3px 15px; color:#fff; letter-spacing: -0.02em; font-size: 80%;
}
#topmn>a{ opacity: 0.5;}
#pgtkey{ height:10px; }

#hcenter{ width: 1200px; margin: auto; display: block;}

#logowrap{ float: left; margin-top: 25px; }
#logo{ font-family: "Noto Sans KR"; font-weight: 500; font-size: 160%; color:#fff; letter-spacing: -0.03em; width: 255px; }
#logo>img{ display: block; float: left;}
#logo>span{display: block; float: right; padding-top: 10px; }
#logo>span>p{ font-size: 45%; font-weight: 500; color:rgba(255, 255, 255, 0.5); letter-spacing: -0.02em; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.5); margin-top:8px; }

#menu{ float: right; width: 850px; margin-top: 45px; }
#nav{ 
    display: flex; flex-flow: row wrap; justify-content: space-around;
    list-style: none; text-align: center; width: 850px;
}
#nav>li{ flex-grow: 1; flex-basis: 150px; }
#nav>li:not(:nth-last-of-type(1)){ background:url(/images/menubar.svg) no-repeat 100% 12px; background-size: 1px; }
#nav>li>a{ font-family: "Noto Sans KR";font-size: 110%; font-weight: 400; display: block; height:52px; line-height: 40px; padding-bottom: 12px; box-sizing: border-box; position: relative; color:rgba(255, 255, 255, 0.7); text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); }
#nav>li>div{ display: none; margin:40px 0px 50px 0px; color:rgba(255, 255, 255, 0.7); }
#nav>li>div>a{ display: block; padding:5px 0px; width: 100%; font-family: "Noto Sans KR"; font-weight: 400; font-size: 100%; }
#nav>li>div>a:hover{ color:#029ADD; font-weight: 500;  }

#nav>li>a:after{content:''; position:absolute; display:block; bottom:0; left:50%; width:0; height:2px; background-color:#fff; transition:left 0.3s, width 0.3s}
#nav>li>a.onmenu:after{background-color:#029ADD; left:0%; width:100%; }
#nav>li>a.onmenu{color:#fff; }

#topani{ 
    width: 100%; height: 700px;
    position: relative; margin: auto; overflow: hidden; 
}
#topani>*{ position: absolute; z-index: auto; }

#topani .backimg{ left:0px; bottom:0px; right: 0px;  background-size: cover; }
#anizone{ position: absolute; z-index: -10; width: 100%; height:100%; }
#anizone .bgdiv{ height:100%; width: 100%; background-position: 50% 50%; background-repeat: no-repeat; position: absolute; background-size: cover; }

#ani01{ 
    background:rgba(0,0,0,0.4); width: 100%; height: 135px; bottom: 0px; opacity: 0;
    animation: anik01 ease 1s; animation-delay:1s; animation-fill-mode:forwards; 
}
@keyframes anik01{
    0% {opacity:0; bottom:-20px; }
    100% {  opacity:1; bottom:0px; }
}
#ani02{ 
    width: 780px; text-align: center; line-height: 140%; font-family: "Noto Sans KR"; font-size: 140%; color:rgba(255, 255, 255, 0.8); bottom:40px; left:calc(50% - 390px); opacity: 0;
    animation: anik02 ease 1s; animation-delay: 1.5s; animation-fill-mode:forwards; 
}
@keyframes anik02{
    0% {opacity:0; bottom:20px; }
    100% { opacity:1; bottom:40px; }
}
#ani03{ width: 180px;  bottom:30px; left:calc(50% + 400px);  font-family: "Noto Sans KR"; font-size: 100%; color:#fff; line-height:initial; }
#ani03>img{display: inline-block; }
#ani03>p{ text-align: right;}

#conts{ width: 1200px; z-index: 0; min-height: 500px; margin:0px auto 0px auto; padding:25px 0px; } /*margin-top = #nav>li>a height */
#conts>h1{margin-bottom: 50px; display: inline-block;  width: 50%; color:#000; position: relative; box-sizing: border-box; font-weight: 600; font-size: 180%; }

.wd1200c{ width: 1200px; margin: auto; }

#products{ margin-top:30px; position: relative; }
#products>h1{ text-align: center; font-family: "Lusitana", "Noto Sans KR"; color:#000; font-weight: 500; font-size: 250%; margin-bottom: 30px; margin-top: 5px; }
#products>h1>p{ font-size: 43%; font-weight: 400; color:#888; padding-top:15px;  }

#maskmn0302{ width: 1200px; height: 365px; position: relative; overflow: hidden;}
#bbs0302{ display:block; white-space: nowrap; position: absolute; z-index: auto; left:0px; }
#bbs0302>div{ display: inline-block; margin-right: 7px; width: 395px; box-sizing: border-box; margin-top:0px; padding: 14px; background: #f6f6f6; border:1px solid rgba(0, 0, 0, 0.15); }
#bbs0302>div>a:first-child{ display: block; height: 245px; overflow: hidden; }
#bbs0302>div>a:first-child>img{ display: block; width: 100%; }
#bbs0302 a.lsbj{ margin:20px 0px 5px 0px;}
.addduring{ border-top: 1px dotted #ddd; padding: 5px 0px; font-family: "Noto Sans KR"; font-weight: 400; font-size: 90%; color:#888; }

#idxquick{ font-family: "Noto Sans KR"; overflow: auto; margin:30px auto 50px auto; }
.qbgc{ display: block; box-sizing: border-box; padding: 20px;  }
.qbgc>.material-icons{ display: block; float: left; color:rgba(0, 0, 0, 0.5); font-size: 720%;}
.qbgc>h1{ padding: 12px 0px 8px 0px; font-size: 230%; font-weight: 500; color:#fff; }
.qbgc>p{ padding: 10px 0px 0px 10px; color:rgba(255, 255, 255, 0.5); font-size: 110%; }
#quick1{ background:#9d9d9c; float: left; width: 395px; height: 214px; padding: 50px 35px; }
#quick2{ background:#0069b4; float: right; width: 797px; height: 213px; padding: 45px 100px 0px 60px; margin-bottom:8px; }
#quick2>.material-icons{padding-right: 10px;}
#quick2>div{ color:#fff; }

#idxbbswrap{ background: #f2f2f2; width: 100%; padding:50px 0px;  }
#idxbbswrap>div { display: flex; flex-wrap: wrap; justify-content: space-between; }
.idxbbsel{ width: 585px; text-align: center;}
.idxbbsel>h1{ font-family: "Noto Sans KR"; font-weight: 500; font-size: 240%; line-height: -0.05em; margin: 10px 0px 20px 0px; padding:10px; text-align: left; }
.idxbbsel>h1>span{ font-size: 45%; font-weight: 400; display: inline-block; margin-left: 10px; color:#999; }
.idxbbs{ list-style: none; text-align: left; border-top:1px solid rgba(0, 0, 0, 0.1) }
.idxbbs>li{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:15px 10px; }
.idxbbs>li>p{color:#02aac8; font-family: "Noto Sans KR"; font-weight: 300; }
.idxbbsel>a.btn-arrow{ margin-top:20px; min-width: 130px;}

.btn-arrow {
    display:inline-block; position:relative; text-align:left; background: #fff; padding:8px 36px 8px 15px; min-width:90px; border:1px solid #ddd; z-index:5; overflow:hidden; 
    font-family: "Noto Sans KR"; font-weight: 500; font-size: 90%;
    transition:all 0.3s cubic-bezier(.57,.21,.69,1.25);
}
.btn-arrow:before{content:''; position:absolute; display:block; top:-1px; left:-120%; bottom:-1px; width:120%; background-color:#2b2b2b; transform-origin:0% -50%; transform:skewX(-20deg); transition:left 0.3s cubic-bezier(.57,.21,.69,1.25); z-index:-1}
.btn-arrow:after{content: '\2192';; position:absolute; right:13px; color:#999; transition:color 0.3s cubic-bezier(.57,.21,.69,1.25); z-index:1}
.btn-arrow:hover {color:#fff; border-color:#2b2b2b}
.btn-arrow:hover:before, .btn-arrow-black:hover:before {left:-2%}
.btn-arrow:hover:after {color:#fff}

#cscenter{ 
    width: 100%; height: 520px;  background: url(/images/idxcsback.jpg) repeat-x 50% 50% #192C33; background-attachment: fixed; 
    text-align: center; font-family: "Lusitana","Noto Sans KR"; color:#fff; line-height: initial;
}
#cscenter>h1{ padding-top:100px; font-size: 200%; font-weight: 400; }
#cscenter .desc{ font-size: 120%; font-weight: 300;}
#cscenter .cstel{ font-size: 400%; padding:20px 0px 5px 0px;}
#cscenter .cstel+.desc{ font-size: 140%; padding-bottom: 15px;}

.btn-skew{ display: inline-block; width: 240px; height:60px;line-height: 60px; text-align: center; font-size: 130%; position: relative; z-index: 2; }
.btn-skew:before{ content: ''; position: absolute; display: block; width: 100%; height: 60px; z-index: -1; transform:skewX(30deg); background: #007bae;}
.btn-skew>span { vertical-align:text-top; opacity: 0.5; display: inline-block; margin-right: 5px;}
.btn-skew>img{ display: inline-block; vertical-align:middle; padding-bottom: 5px; margin-right: 5px; }
#cscenter a:nth-of-type(1):before{ background: #029add;}
#cscenter a:nth-of-type(2):before{ background: #7acc19;}


#flogo{margin-top: 20px;}
#flogo{ font-family: "Noto Sans KR"; font-weight: 600; font-size: 200%; letter-spacing: -0.03em; color:#000; }
#flogo>img{ display: inline-block; width: 38px; vertical-align:text-bottom; }

/*
@media screen and (min-width: 1024px) {
    #wrap{ width: 1200px; }

    #topmn{ 
        position: absolute; z-index: 102; right: calc(50% - 600px); background: #aaa; color:rgba(255, 255, 255, 0.5); font-size: 90%; 
        padding: 3px 15px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;
    }

    #logo{ flex-basis:250px; height:100px; }

    #menu{ height:100px; }
    #nav{ display: flex; flex-wrap: wrap; justify-content: space-between; margin:30px 0px; padding: 0px 30px; }
    #nav>li{ flex-grow: 1; flex-basis: 100px; position: relative; z-index: auto; }
    #nav>li>a{ font-size: 150%; display: block; line-height: 40px; background:#F0E78C; } 
    #nav>li>div{ position:absolute; z-index:4; top:40px; background: #ccc; }
    #nav>li>div>a{ display: inline; white-space: nowrap; padding: 0px 30px; font-size: 115%; font-weight: 500; line-height: 30px; }
    #nav>li>div>a:hover{ color:#ff0000; }

    #header{ flex-basis:100%; height:50px; }

    #conts>h1{ font-family: "Noto Sans KR"; font-weight: 600; font-size: 150%; line-height: 180%; border-bottom: 1px solid #ddd; margin-bottom: 10px;  }

    #footer{ flex-basis:100%; min-height: 130px; padding: 20px 0px;  }
    #footer .leftinc{ width:250px; }
    #footer .leftinc+div{ float: left; margin: 15px 0px 0px 20px;}
    #footer .leftinc+div>p{ margin-top: 15px;}

    #popupwrap{ position: absolute; top:0px; left: 0px; }
    #popupwrap>div{ position:absolute; z-index: 200; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); opacity: 0; }
    .popdiv>div{ width: 100%; height: 100%; position:relative; }
    .popdiv>div>a{ position:absolute; display: block; width: 100%; height: calc(85% - 40px); top:calc(15%); }
    .xpop{ position: absolute; top:-20px; right: -20px; }
    .dayclose{ position:absolute; z-index: auto; bottom:0px; line-height: 40px; padding-left: 10px; font-size: 95%; }
}
@media screen and (max-width: 1024px) {
    #wrap{ width: 100%; }
    #logo>a>img{ display: inline-block; height: 35px;}
    #mblnvlst, #mblnvlstC{ float: right; opacity: 0.3; padding: 5px;  }
    #wrap>div { flex-basis: 100%; flex-grow: 1; }
    #side{ display: none;}
    #wrap>div#menu{ display:block; position: absolute; top:0px; left:-300px; width: 300px; height: 100%; box-sizing:border-box; }
    #mblnvlstC{ float: right; opacity: 0.3; padding: 5px; }
    
    #nav{ margin:20px; }
    #nav>li>a{ font-size: 120%; display: block; line-height: 250%; padding: 0px 10px; }
    #nav>li>a{ border-bottom: 1px solid #ddd;}
    #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;}
    #nav>li>div>a{ display: block; font-size: 110%; font-weight: 500; line-height: 200%; padding: 0px 10px;  }
    #nav>li>div>a:not(:last-child){ border-bottom: 1px dotted #ddd;}

    #conts>h1{ font-family: "Noto Sans KR"; font-weight: 600; font-size: 150%; line-height: 180%; border-bottom: 1px solid #ddd; margin-bottom: 10px;   }

    #footer{ text-align: center; padding: 20px; letter-spacing: -0.03em; font-size: 90%; word-break: keep-all; line-height: 160%; color:#707070; }
    #footer>div>p{ margin-top: 15px;}
    #footer .leftinc{ margin-bottom: 10px;}
    #footer .leftinc>img{ height: 50px;}

    #bmask{ position:absolute; }
}
*/