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

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

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

.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%; }

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;}


#idxani{ position: relative;  }
#idxani>*{ position: absolute; z-index: auto; }
#ani01{ 
    background: url(/images/idxtop1.png) no-repeat 50% 0%; height: 299px; width: 100%; top:20px; opacity: 0;
    animation: anik01 ease-in-out 3s infinite; animation-delay: 0s;
}
@keyframes anik01{  50%{ top:0px; opacity:1; }  100% { top:20px; opacity:0; } }

#ani02{ 
    background: url(/images/idxtop2.png) no-repeat 50% 0%; height: 357px; width: 100%; top:20px; opacity: 0;
    animation: anik01 ease-in-out 3s infinite; animation-delay: 0.7s;
}

#ani03{ 
    width: 300px; height: 300px; left: calc(50% - 300px); top:130px; transform: rotate(0turn) scale(0.5); opacity: 0;
    animation: anik03 ease-in-out 2s; animation-delay: 0.7s; animation-fill-mode:forwards; 
}
@keyframes anik03{ 50%{transform: rotate(-1.1turn) scale(1.2);} 100% {  opacity:1; transform: rotate(-1turn) scale(1); } }
#ani0301{ position: absolute; width: 50%; top:110px; left:20px; transform: rotate(-60deg);  opacity: 0.2;}
#ani0302{ position: absolute; width: 40%; top:120px; right:40px; transform: rotate(150deg);  opacity: 0.2;}
#ani0303{ position: absolute; width: 50%; top:0px; right:70px; transform: rotate(35deg);  opacity: 0.2;}


#ani04{ 
    width: 300px; height: 300px; left: calc(50% + 0px); top:70px; transform: rotate(0turn) scale(0.5); opacity: 0;
    animation: anik04 ease-in-out 2s; animation-delay: 1.2s; animation-fill-mode:forwards; 
}
@keyframes anik04{  50%{transform: rotate(1.1turn) scale(1.2);} 100% {  opacity:1; transform: rotate(1turn) scale(1); } }
#ani0401{ position: absolute; width: 40%; top:120px; left: 55px; transform: rotate(-135deg);  opacity: 0.2;}
#ani0402{ position: absolute; width: 50%; top:95px; right:0px; transform: rotate(130deg);  opacity: 0.2;}
#ani0403{ position: absolute; width: 65%; top:-30px; right:70px; transform: rotate(50deg);  opacity: 0.2;}

#ani05{ 
    width: 220px; left: calc(50% - 310px); top:160px; transform: rotate(-20deg); opacity: 0;
    animation: anik05 ease-in-out 2s; animation-delay: 1.5s; animation-fill-mode:forwards; 
}
@keyframes anik05{ 100% {  opacity:1; top: 120px; } }

#ani06{ 
    width: 220px; left: calc(50% + 80px); top:160px; transform: scaleX(-1) rotate(-20deg); opacity: 0;
    animation: anik05 ease-in-out 2s; animation-delay: 1.5s; animation-fill-mode:forwards; 
}

#ani07{ 
    left: calc(50% - 100px); top:85px;  opacity:0;
    animation: anik07 ease-in-out 2s; animation-delay: 1.5s; animation-fill-mode:forwards; 
} 
@keyframes anik07{ 100% {  opacity:1; top: 115px; } }

#rotatezone{ 
    color:#fff; flex: 1 0 100%; width: 100%; text-align: center; top:340px; opacity: 0;
    animation: anik08 ease-in-out 2s; animation-delay: 2s; animation-fill-mode:forwards; 
}
@keyframes anik08{ 100% {  opacity:1; top: 320px; } }
#rotatezone>h2{ font-size: 120%; line-height: 160%; font-weight: 400; color:rgba(255, 255, 255, 0.5); }
#rotatezone>h1{ font-family: "Lusitana"; font-size: 250%; font-weight: 600; color:#BFE183; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); letter-spacing: -0.03em; line-height: 130%; }
#rotatezone>h1>span{ color:#FAF20F; }
#rotatezone>p{ font-size: 105%; opacity: 0.5; }

#idxbbswrap{  animation: idxbbswrapani ease-in-out 14s infinite;  }
@keyframes idxbbswrapani{ 50% {  background-position-y: -100px; } 100% {  background-position-y: 0px; } }

.idxbbsel{ text-align: center; }
.idxbbsel>h1{ font-weight: 500; line-height: -0.05em; margin: 10px 0px 10px 0px; padding:10px; color:#7CA63F; text-shadow: 1px 1px 5px rgba(0, 0, 0, 1); }

.idxbbs{ list-style: none;  border-top: 1px solid rgba(255, 255, 255, 0.1); text-align:initial; }
.idxbbs>li{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding:7px 0px;   }
.idxbbs a>span{ font-size: 90%; color:#7CA63F; display: inline-block; padding-right: 10px; }

.idxbbsel>.btn-arrow{ margin-top: 30px;}
.idxbbsel>.btn-arrow{ background: #252525; color: rgba(255, 255, 255, 0.5); border:none; }
.idxbbsel>.btn-arrow::before{ background:#32600D; }

a.lsbj { 
    font-weight: 400; font-size: 110%; color:rgba(255, 255, 255, 0.7); line-height: 150%; max-width: calc(100% - 40px); 
    display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; 
}
.idxbbs a.lsbj:hover{ color: #fff;}

#idxbn{ display: flex; justify-content: center; padding: 20px 0px; }
#idxbn>a{ display: block; text-align: center; padding: 0px 35px; font-size: 110%; font-weight: 500; transition: all 0.25s ease-in-out; color: rgba(255, 255, 255, 0.4); }
#idxbn>a>span{ font-size: 250%; transition: transform 0.25s ease-in-out;  }
#idxbn>a:hover{ transform: scale(1.2); color: rgba(255, 255, 255, 1); }
#idxbn>a:hover>span {  transform: rotate(360deg);  }


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

    header{ 
        width: 220px; display: block; box-sizing: border-box; border-left: 1px solid rgba(255,255,255,0.05); margin-left: calc(50% - 600px);
        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; 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: 1; min-height: 500px; padding: 0px; box-sizing: border-box;  font-size: 95%; margin-left: calc(50% - 380px);
        position: relative;       
    }
    
    #idxani{ height: 470px; width: 980px;}

    #idxbbswrap{ height: 490px; background: url(/images/idxbackimg2204.jpg); overflow: visible; display: flex; }
    #idxbbszone{ display: flex; justify-content: space-between;  width: 980px; box-sizing: border-box; padding:20px 0px 0px 50px; }
    #idxbbszone>div:first-of-type{ width: calc(50% + 120px); }
    #idxbbszone>div:last-of-type{ width: calc(50% - 140px); }
    .idxbbsel>h1{ font-size: 200%; }

    .idxgcolor{ position: relative; top:-180px; height: 180px; margin-bottom: -180px; padding-bottom: -160px; background: rgba(0, 0, 0, 0.6); }
    #idxbn{ width: 980px; }

    #dggserver{ font-weight:initial; color:rgba(255, 255, 255, 0.3); padding: 10px 50px; border-top:1px solid rgba(255, 255, 255, 0.1); text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
    #dggserver>span{ color:#F9F01E; }

    #btwrap{ display: flex; justify-content: center; width: 980px; padding:20px 0px}
    #btwrap>a{ display: block; padding: 0px 20px;}
    #btwrap>a:not(:last-child){ border-right: 1px solid rgba(0, 0, 0, 0.2);}

    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); }

    #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) {
    /*
    header{ padding:5px 0px; background: #1E1E1E; }
    */
    body{ 
        background: url(/images/idxback.svg); 
        background-position: 0px 0px;
    }

    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:0px 0px 0px 0px; letter-spacing: -0.03em; background-position: 0px 45px; }

    #idxani{ height: 480px; overflow: hidden;}
    #ani08{ top:45px; }

    #rotatezone>h2{ font-size: 110%; line-height: 160%; font-weight: 400;  }
    #rotatezone>h1{ font-family: "Lusitana"; font-size: 200%; font-weight: 600; line-height: 130%; }
    #rotatezone>h1>span{ color:#FAF20F; }
    #rotatezone>p{ padding: 0px 50px; opacity: 0.5; }

    #idxbbswrap{ padding: 0px 20px; background: url(/images/idxbackimg2204.jpg) no-repeat 50% 0%; }
    
    .idxbbsel{ padding: 20px 0px; }
    .idxbbsel>h1{ font-size: 180%; }

    .idxgcolor{ padding: 0px 20px; }
    #idxbn{ flex-wrap: wrap;  }
    #idxbn>a{ background: rgba(0, 0, 0, 0.3); border-radius: 10px; flex: 1 1 80px; padding: 15px 10px; margin:2px; }

    #btwrap{ display: flex; justify-content: center; margin:0px 0px 20px 0px}
    #btwrap>a{ display: block; padding: 0px 10px; font-size: 90%;}
    #btwrap>a:not(:last-child){ border-right: 1px solid rgba(0, 0, 0, 0.2);}

    footer{ background: #252525; border-top:initial; }
    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(255, 255, 255, 0.3); line-height: 160%; }
    footer>div:last-child>p{ display: inline-block; }
    footer>div:last-child>p.lslash::after{content: " \002F  "; }

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