@charset "utf-8";

*{margin: 0; padding: 0; box-sizing: border-box;}
a {text-decoration:none; color:#000}
html, body {max-width: 100%;height:100%; min-width: 360px;overflow-x: hidden;}
body {font-family: 'Noto Sans KR';  letter-spacing:-.5px; box-sizing:border-box; color:#111; font-size:16px; font-weight:300; background-color: #e8f5ff;}
.header .ham_btn {display: none;}
html{scroll-behavior: smooth;}
#container, .contents {width: 100%; height: 100%; position: relative;}


/*gnb*/
.main .mobile_menu .gnb>ul>li:first-child {display: none;}

/* PC_Main Visual */
.main_page {overflow-y: hidden;}
    /* btn */
.main_page .btn_box {top: 0; margin: 0 auto; width: 100%; height: 100%;}
.main_page .btn {text-align:center; font-size:22px;position:absolute;display:block; width: 16.0165%; height: 18.255%;}
.main_page .btn::before {content:"";position:absolute;width: 150%;height: 180%;top: -160%;left: -60px;border-radius: 140px;}
.main_page .btn2::before {width: 140%;height: 220%;top: -220%;left: -25%;border-radius: 180px 180px 120px 130px;}
.main_page .btn3::before {width: 130%;height: 240%;top: -240%;left: -60px;border-radius: 140px 420px 130px 200px;}
.main_page .btn.btn1 {top: 40%;left: 41%;border-radius: 0;}
.main_page .btn.btn2 {top: 70%;left: 12%;}
.main_page .btn.btn3 {top: 70%;left: 72%;}
    /* svg */
.m_mobile{display: none;}
.main_page .svg_wrap {width: auto;height: 100%; min-height: 667px; position:relative; background: #e8f5ff;}
.main_page .svg_wrap::before {display: none;content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;}
.main_page .svg_cont {width: 84%;height: calc(100% - 66px);min-width: 1280px;max-width: 1920px;max-height: 1080px;min-height: 667px;z-index: 1;margin: 0 auto;position: relative;overflow: hidden;}
.main_page svg {width: 100%; height: auto; min-width: 320px; max-width: 1920px;min-height: 667px;margin: 0 auto; display: block;}


/* 메뉴 버튼 공통 */
.btn .txt {padding-left:5px;vertical-align:middle;height:21px;display:inline-block;position: relative;line-height: 100%;display: none;}
   
.btn .mark {display: block;width: 100%;height: 100%;box-sizing: border-box;position: relative;z-index: 1;}
.btn .mark .title {background: url("https://kcmie2021.com/resources/img/svg/btn02.png") center/contain no-repeat;width: 100%;height: 100%;transition: all .3s cubic-bezier(1, -0.15, 0.38, 0.91);}
.btn:hover .mark .title {transform:translateY(-40px);}
.btn2 .mark .title {background-image: url("https://kcmie2021.com/resources/img/svg/btn03.png");}
.btn3 .mark .title {background-image: url("../img/svg/btn01.png");}
.btn .mark .sd {position: absolute;width: 126%;height: 100%;bottom: 0;background: url("../img/svg/btn_sd.png") center/contain no-repeat;transition: all .3s cubic-bezier(1, -0.15, 0.38, 0.91);pointer-events: none;z-index: -1;left: 0%;bottom: -40%;}
.btn:hover .mark .sd {width: 150%;transform:translate(0,5px); opacity: .3;}

   

/* 반응형 */
@media screen and (max-width:1024px){
    .main_page .svg_wrap { display: none !important;}

    .m_mobile{display:block;position: absolute;top: 0;overflow: hidden;width: 100%;height: 310vw;max-width: 1024px;min-width: 320px;background: #e8f5ff;}
    .m_mobile .cont_wrap {position: relative;top:0;width: 100%;height: 310vw;background: #e8f5ff;}
    .m_mobile .svg_bg {position: absolute;top: 75vw;left: 0;width: 100%;}
    .m_mobile .svg_bg>img {width: 100%;}
    .m_mobile #m_svg {position: relative;width: 100%;height: 280vw; margin: 0 auto; margin-top: 30px;}
    svg {max-height: 280vw;}
    .m_mobile svg {display: block;width: 100%;height: 100%;min-width: 280px;min-height: 667px;margin: 0 auto; padding-top: 50px;}

    .m_mobile .btn_box .mark{position: absolute;z-index: 9999;width: 40vw;height: 40vw;}
    .m_mobile .btn_box .mk1{top: 95vw;left: 54vw;z-index: 0}
    .m_mobile .btn_box .mk2{top: 138vw;left: 5vw;z-index: 0}
    .m_mobile .btn_box .mk3{top: 228vw;left: 53vw;z-index: 0}
    .m_mobile .btn .mark .sd {bottom: -27%;}
    }
    
@media screen and (max-width:768px){
}

@media screen and (max-width:650px){
}

@media screen and (max-width:580px){
}

@media screen and (max-width:500px){   
}

@media screen and (max-width:400px){
}