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

#idxani{ position: relative; overflow: hidden; font-family: "Noto Sans KR"; letter-spacing: -0.03em;  }
#idxani>*{ position: absolute; z-index: auto; opacity: 0;}
#aniback{ width: 100%; height: 100%; position: absolute; z-index: -10; width: 100%; height:100%; animation: anikeyback ease-in-out 1.5s; animation-fill-mode:forwards; }
@keyframes anikeyback{ 100% {  opacity:1; } }
#aniback .bgdiv{ height:100%; width: 100%; background-position: 50% 50%; background-repeat: no-repeat; position: absolute; background-size: cover; }

#ani01{ color:#fff; background: url(/images/idxani01_back.png); border:10px solid #fff; border-radius: 150px; box-sizing: border-box; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); display: flex; align-items: center;  }
#ani01>div{ width: 75%; margin: auto; line-height:initial;}
#ani01>div>h1{ font-family: "Cute Font"; font-size: 500%; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7); }
#ani01>div>h1>span{ font-size: 60%; font-weight: initial; }
#ani01>div>p{ font-size: 170%; }

#popBn{ text-align: center; height: 20px; width: 100%; z-index: auto; bottom:30px; opacity: 1; }
#popBn>a { display: inline-block; width: 10px; height:10px; background: #fff; border-radius: 10px; }
#popBn>a:not(:last-of-type) { margin-right: 10px;}

#conts{ padding:0px 20px; }

.idxtitle{ text-align: center; padding:30px 0px;}
.idxtitle>h1{ font-family: "Cute Font"; font-size: 230%; color:#000; line-height: 100%; }
.idxtitle>p{ font-family: "Noto Sans KR"; font-size: 105%; color:rgba(0, 0, 0, 0.6); }

.flexbtw{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#idxquick .flexbtw>a{ display: block; width: calc(24.1%); text-align: center; color:#fff; letter-spacing: -0.05em; padding: 20px; box-sizing: border-box; }
#idxquick .flexbtw>a:nth-of-type(1){ background: url(/images/idxqbn_01.jpg) no-repeat; background-size: 100%; }
#idxquick .flexbtw>a:nth-of-type(2){ background: url(/images/idxqbn_02.jpg) no-repeat; background-size: 100%; }
#idxquick .flexbtw>a:nth-of-type(3){ background: url(/images/idxqbn_03.jpg) no-repeat; background-size: 100%; }
#idxquick .flexbtw>a:nth-of-type(4){ background: url(/images/idxqbn_04.jpg) no-repeat; background-size: 100%; }
#idxquick .flexbtw>a>h1{ padding-top: 45%; font-family: "Cute Font"; font-size: 220%; line-height: initial;  }
#idxquick .flexbtw>a>p{line-height: initial; font-weight: 500;  }

#idxpro>.flexbtw>div{ width: calc(24.1%); text-align: center; padding-bottom: 30px; font-family: "Noto Sans KR"; font-weight: 500; letter-spacing: -0.03em; } 
#idxpro>.flexbtw>div>a:first-child{ display: block; width: 100%; height: 0; padding-bottom: calc(100% * 35/29); margin-bottom: 20px; background-size: cover; background-position: 50% 0%; border-radius: 20px; box-sizing: border-box;}
#idxpro>.flexbtw>div>p{ color:rgba(0, 0, 0, 0.5); padding-bottom: 7px; }
#idxpro>.flexbtw>div>a.lsbj{ font-size: 130%; line-height: initial; }
#idxpro>.flexbtw>div.problank{ flex: 0 1 74.7%; background: url(/images/idxproback.jpg) no-repeat 0%/cover; border-radius: 20px; height: calc((74.7vw - 40px) * 360/897); padding: 20px; box-sizing: border-box; }
#idxpro>.flexbtw>div.problank>div{ height: 100%; border:1px solid #fff; border-radius: 10px; text-align: left; letter-spacing: -0.03em; }
#idxpro>.flexbtw>div.problank>div>h1{ color:#fff; font-family: "Cute Font"; margin:8% 0% 2% 28%; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); }
#idxpro>.flexbtw>div.problank>div>h1::before{ content: "\2022 \2022 \2022 \2022 "; padding-right: 10px; vertical-align: text-bottom; }
#idxpro>.flexbtw>div.problank>div>p{ color:#4c341e; margin-left: 28%; }

.graywrap{ background: url(/images/idxntcback.jpg) no-repeat 0%/cover; padding:50px 0px; font-family: "Noto sans KR"; }
.graywrap>div{ margin: 0px 20px;}

.idxbbsel{ width: calc(50% - 7px); text-align: center; }
.idxbbsel>h1{ font-family: "Cute Font"; font-size: 330%; font-weight: 600; line-height: -0.05em; margin: 0px 0px 20px 10px; text-align: left; line-height: initial; }
.idxbbsel>h1>span{ font-family:"Noto Sans KR"; font-size: 32%; font-weight: 400; display: inline-block; margin-left: 20px; color:#999; }
.idxbbs{ list-style: none;  border-top: 1px solid rgba(0, 0, 0, 0.1); text-align:initial; }
.idxbbs>li{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:15px 10px;   }
.idxbbs>li>.lsbj{ font-size: 105%; color:rgba(0, 0, 0, 0.6); max-width: calc(100% - 35px); }
.idxbbs>li>p{color:#02aac8; font-family: "Noto Sans KR"; font-weight: 300; }
.idxbbsel .btn-arrow{ margin:20px auto; }

#boxlink{ width: calc(50% - 7px); }
#boxlink>a{ width: calc(50% - 5px); border:5px solid #999; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: space-between;  margin-bottom: 10px; padding: 30px 15px 0px 15px; }
#boxlink>a:nth-of-type(1){ border-color:#f4ca72; border-top-left-radius: 0px; }
#boxlink>a:nth-of-type(2){ border-color:#4edbbc; border-top-right-radius: 0px; }
#boxlink>a:nth-of-type(3){ border-color:#a3abf7; border-bottom-left-radius: 0px; }
#boxlink>a:nth-of-type(4){ border-color:#f3a0c5; border-bottom-right-radius: 0px; }
#boxlink>a>div:first-child{ width: 25%;}
#boxlink>a>div:first-child>img{ width: 90%;}
#boxlink>a>div:last-child{ width: 73%; color:rgba(0, 0, 0, 0.5); line-height: 140%; }
#boxlink>a>div:last-child>h1{ font-family: "Cute Font"; margin-bottom: 10px; color:#000; line-height:initial;  }
#boxlink .material-icons{ font-size: 220%;}

#cscenter{ 
    width: 100%; height: 520px;  background: url(/images/idxcsback.jpg) repeat-x 50% 50%; background-attachment: fixed;  background-size: cover;
    text-align: center; font-family: "Lusitana","Noto Sans KR"; color:#fff; line-height: initial;
}
#cscenter>h1{ padding-top:80px; font-family: "Cute Font"; font-size: 350%; font-weight: 500; }
#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;}
#cscenter .desc>span{ display: inline-block; }
.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: #403F3C;}
.btn-skew>span { vertical-align:text-top; opacity: 0.5; display: inline-block; margin-right: 5px;}

#banner{ text-align: center; margin: 40px 0px;}
#banner>a{ display: inline-block; padding:0px 30px; }

.lsbj { max-width: 100%; display: inline-block; max-width: calc(100% - 10px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }


@media screen and (min-width: 1025px) {
    body{
        background-image: url(/images/idxbackc_brown.svg), url(/images/idxbackc_brown.svg), url(/images/idxbackc_pink.svg);
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: calc(50% + 1600px - 23px) 2090px, calc(50% - 1600px + 23px) 1630px, calc(50% + 1600px - 23px) 1150px;
    }

    #idxani{ height: 870px; }

    #ani01{ width: 1200px; height: 290px; left:calc(50% - 600px); top:405px; animation: anik01 ease-in-out 1s; animation-delay: 1s; animation-fill-mode:forwards;}
    @keyframes anik01{ 100% {  opacity:1; top:385px; } }
    #ani02{ top:calc(385px + 145px - 23px); left: calc(50% - 2000px - 600px + 3px); animation: anik02 ease-in-out 1s; animation-delay: 0.5s; animation-fill-mode:forwards; }
    @keyframes anik02{ 100% {  opacity:1; left:calc(50% - 2000px - 600px + 23px); } }
    #ani03{ top:calc(385px + 145px - 23px); left: calc(50% + 600px - 3px); animation: anik03 ease-in-out 1s; animation-delay: 1.5s; animation-fill-mode:forwards; }
    @keyframes anik03{ 100% {  opacity:1; left:calc(50% + 600px - 23px); } }
    
    #conts{ width: 1200px; margin: auto; padding: 0px; }

    .idxtitle>h1{  font-size: 300%; ; }
    .idxtitle>p{ font-size: 115%; }

    #idxquick .flexbtw>a{ height: 350px; padding-left: 35px; padding-right: 35px; }
    #idxquick .flexbtw>a>h1{ padding-top: 58%; }
    #idxquick .flexbtw>a>p{line-height: initial; font-size: 110%; opacity: 0.8; }

    #idxpro>.flexbtw>div.problank{ height: calc(869.391px * 360/897); }
    #idxpro>.flexbtw>div.problank>div>h1{ font-size: 300%; margin-top:12%; }
    #idxpro>.flexbtw>div.problank>div>p{ font-size: 130%; line-height: initial; }

    .graywrap>div{ width: 1200px; margin:auto; }
    #boxlink .material-icons{ font-size: 330%;}

    #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) {
    #idxani{ height: 640px; }

    #ani01{ width: calc(100% - 20px); height: 220px; left:10px; top:250px; animation: anik01 ease-in-out 1s; animation-fill-mode:forwards;  }
    @keyframes anik01{ 100% {  opacity:1; top:230px; } }
    #ani01>div>h1{ font-family: "Cute Font"; font-size: 400%; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7); }
    #ani01>div>p{ font-size: 140%; }

    #idxquick .flexbtw>a{ height: calc(24.1vw * 1.17); }
    #idxquick .flexbtw>a>p{line-height: initial; font-size: 80%; opacity: 0.7; }

    .graywrap{ padding:20px 0px; }

    .idxbbsel>h1{ font-size: 250%; }
    .idxbbsel>h1>span{ font-size: 40%; margin: 0px 0px 10px 0px; display: block; }

    #boxlink>a>div:last-child{ width: 73%; color:rgba(0, 0, 0, 0.5); line-height: 140%; font-size: 90%; letter-spacing: -0.03em; }
}
@media screen and (max-width: 500px) {
    body{
        background-image: url(/images/idxbackc_brown.svg);
        background-repeat: no-repeat;
        background-position: calc(50vw - 27px) 2090px;
    }

    #idxani{ height: 640px; }

    #ani01{ width: calc(100% - 20px); height: 250px; left:10px; top:220px; border-radius: 70px; }
    @keyframes anik01{ 100% {  opacity:1; top:200px; } }
    #ani01>div>h1{ font-size: 300%; }
    #ani01>div>p{ font-size: 120%; }

    #idxquick .flexbtw>a{ width: calc(49vw - 20px); height: calc(49vw * 1.12); }

    #idxpro>.flexbtw>div{ width: calc(49vw - 20px); }

    .idxbbsel{ width: 100%;}

    #boxlink{ width: 100%; }
    #boxlink>a{ width: 100%; padding: 20px 35px;}
    #boxlink .material-icons{ font-size: 350%;}
    
    #cscenter .cstel{ font-size: 220%; padding:10px 0px 5px 0px;}

    #banner>a{ display: block;}
}