@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);



* { margin:0; padding:0;  font-family: 'Noto Sans KR'}

li { list-style:none; }

img { vertical-align: top; }

a { text-decoration: none; }

.indent{text-indent: -9999px;}

#intro { z-index:999; width:100vw; height: 100vh; position: fixed; left: 0; top: 0;  }
#intro .wrap { width: 1200px; margin:0 auto; position: relative; }
#intro img { margin-left: -360px;  }
#intro a { position: absolute; }
#intro a.y2022 { width:30%; height: 14%; left: -6%; top:13%; }
#intro a.y2023 { width:30%; height: 14%; left: 45%; top:55%; }

@media (max-width:800px) { /* 모바일용 */
    .pdf{display: none;}
    .pc { display:none; }
    
    #intro .wrap { width: auto; }
    #intro img { margin-left: 0; width: 100%;  }
    #intro a { position: absolute; background: rgba(0,0,0,0.2); }
    #intro a.y2022 { width:27%; height: 5%; left: 3%; top:17%; }
    #intro a.y2023 { width:26%; height: 5%; left: 45%; top:30%; }

    .botSec{width: 100%; height: 80px; position: fixed; overflow-x: scroll; box-shadow: 0px -3px 3px rgb(0 0 0 / 40%);; background-color: #fff; bottom: 0; left: 0; z-index: 11px;}
    .botSec::-webkit-scrollbar{display: none;}
    .botSec ul{width: 677px; margin-top: 14px;}
    .botSec ul::after{content: ''; visibility: hidden; clear: both; display: block;}
    .botSec li{float: left; width: 45px; border: 4px solid #666; display: block; border-radius: 50%; margin-left: 20px; text-align: center; white-space:  nowrap;}
    .botSec li a{color: #666; font-weight: 700; display: inline-block; line-height: 45px;}
    .botSec .br a{line-height: 18px; margin: 4.5px 0;}
    .bg{display: none;}
    body{background-color: #98cef9; width: 100vw; overflow: scroll;}
    body::-webkit-scrollbar{display: none;}
    .bg,
    .cisec{display: none;}
    figure{display: none;}
    img.mbg{position: fixed; top: 100px; left: 50%; transform: translateX(-50%) ; width: 95%; z-index: -1;}
    .mobile{width: 100%; margin-top: 500px; text-align: center; padding-bottom: calc( 100vh - 450px );}
.mana{font-size: 14px; position: absolute; top: 460px; left: 20px;}
    .mobile li{width: 300px; border-radius: 10px; text-align: center; height: 100%; background-color: #fff; box-shadow: 0px 3px 10px rgb(0 0 0 / 40%); padding: 20px; box-sizing: border-box; margin:0 auto 20px; }
    .mobile li a{color: #000; font-weight: 700; font-size: 17px;}
    ul img{display: none;}
    .mobile h4{font-size: 20px; font-weight: 600;}
    .mobile p{font-size: 16px; display: none; margin-top: 20px; font-weight: 500;}
    .ci{position: fixed; width: 180px; top: 20px; left: 20px;}
    body > a{position: absolute; }
    .west{width: 36%;
        height: 143.36px;
        top: 98.56px;
        right: 30%;}
    .gyeyang{width: 30%;
        height: 80.64px;
        top: 161.28px;
        right: 3%;
        }
    .east{width: 20%;
        height: 53.76px;
        top: 232.96px;
        right: 40%;}
    .bupyeng{width: 27%;
        height: 80.64px;;
        top: 232.96px;
        right: 10%;}
    .michu{width: 17%;
        height: 62.72px;
        top: 286.72px;
        right: 32%;}
    .mid{width: 39%;
        height: 62.72px;
        top: 286.72px;
        right: 49%;}
    .south{width: 24%;
        height: 98.56px;
        top: 304.64px;
        right: 8%;}
    .eunsu{width: 30%;
        height: 107.52px;
        top: 349.44px;
        right: 30%;}
    .ghoj{width: 22%;
        height: 161.28px;
        top: 98.56px;
        right: 75%;
    }
}



@media (min-width:801px) { /* PC용 */
    .mob { display:none; }
    .mana{display: none;}
    .ci{display: none;}
    .mbg{display: none;}
    .botSec{display: none;}
    .cisec{position: absolute; bottom: 0; right: 0;}
    .navsec{position: absolute; top: 0; left: 0; width: 678px; height: auto; bottom: 0; right: 0;}
    body{background-color: #e6e6e6; overflow: hidden;}
    .bg{position: absolute; right: 0%; height: 100vh; width: 100%;}
    nav{width: 18vw; background-color: #fff; height: 97vh; border-radius: 0 0 1vw 1vw; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); position: absolute; left: 3%; padding: 2.5%; box-sizing: border-box; text-align: justify; color: #055db9;}
    nav div h3{font-size: 1.55vw; font-weight: 600;  border-bottom: 2px solid #999; margin-bottom: 2%;}
    nav div h3 span{font-size: 1.13vw;}
    nav div p{font-size: 0.66vw; line-height: 0.9vw; color: #98cef9;}
    nav div p span{color: #de007b; font-weight: 600;}
    nav h4{text-align: center; margin-top: 25%; font-size: 1.1vw; color: #de007b; font-weight: 500; margin-bottom: 10%; cursor: pointer;}
    nav h4 p{font-size: 0.9vw; text-align: justify; margin-top: 5%; color: #999; display: none;}
    nav > ul > li{text-align: center; font-weight: 400; color: #fff; background-color: #25b6dd; margin-bottom: 5%; width: 20vw;  padding: 2%; font-size: 1.1vw; transform: translateX(-18%); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); z-index: 100; cursor: pointer;}
    .dreampa{position: absolute; text-indent: -9999px; width: 33%;
        z-index: 10;
        line-height: 4vh;
        top: 45.5%;
        left: 5.5%;}
    .gjha{position: absolute; text-indent: -9999px; width: 13%; z-index: 10; line-height: 4vh; top: 57%; left: 7.6%;}
    .bdha{position: absolute; text-indent: -9999px; width: 13%; z-index: 10; line-height: 4vh; top: 57%; left: 21.5%;}
    .onlinea{position: absolute; text-indent: -9999px; width: 13%; z-index: 10; line-height: 4vh; top: 66.5%; left: 7.6%;}
    .higha{position: absolute; text-indent: -9999px; width: 13%; z-index: 10; line-height: 4vh; top:  66.5%; left: 21.5%;}
    a{position: absolute; cursor: pointer;}
    figure{position: relative; width: 678px; height: 412px;}
    ul li img{position: absolute; z-index: 11; left: 3.3%; top: 426px; transition-duration: 0.5s; opacity: 0; }
    ul li.up img{top: 326px; opacity: 1;}
    .west{width: 16%;
        height: 38%;
        top: 3%;
        right: 19%;}
    .gyeyang{width: 16%;
        height: 21%;
        top: 18%;
        right: 3%;
        }
    .east{width: 10%;
        height: 18%;
        top: 37%;
        right: 25%;}
    .bupyeng{width: 12%;
        height: 18%;
        top: 37%;
        right: 10%;}
    .michu{width: 10%;
        height: 16%;
        top: 50%;
        right: 20%;}
    .mid{width: 22%;
        height: 22%;
        top: 48%;
        right: 29%;
        }
    .south{    width: 12%;
        height: 28%;
        top: 53%;
        right: 8%; }
    .eunsu{width: 13%;
        height: 28%;
        top: 64%;
        right: 21%;}
    .ghoj{width: 11%;
        height: 42%;
        top: 3%;
        right: 41%;}
    
    .mobile{display: none;}
    
    nav > ul li ul{display: none; background-color: #fff; color: #999; text-align: left; padding: 3%}
    
    .ci{width: 50%; position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%); z-index: 1;}

    .pdf{background-color: #1f3f88; display: inline-block; text-align: center; color: #fff; font-weight: 700; position: absolute; left: 2.6%; padding: 5px 12px; border-radius: 999px; font-size: 13px; top: 40%; width: 160px;}
    .pdf:nth-of-type(3){top: 47%;}

}