#main_visual { position: relative; overflow: hidden; height: 950px; background-color: #faf9f6; }
#main_visual .mv_bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1920px; height: 100%; background-color: red; }
#main_visual .mv_bg { background: url(/image/main/mv_bg.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-position: center;  }
#main_visual .mv_bg .mv_cont { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#main_visual .mv_cont .circle { z-index: 5; position: absolute; }
#main_visual .mv_cont .circle .circle_icon { z-index: 3; position: relative; display: inline-block; transform-origin: center; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; background-color: red;}
#main_visual .mv_cont .circle .circle_icon::after { display: block; content: ''; opacity: 0.3; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background-color: red; border-radius: 50%; transform-origin: center; animation: point 1.6s ease-in-out infinite; }
@keyframes point{
        0% {
        transform: scale(1);
    }
    50% {
        transform: scale(2.5);
    }
    100% {
        transform: scale(1);
    }
}

#main_visual .mv_cont .circle .circle_back { z-index: 1; position: absolute; width: 100%; height: 100%; background-color: transparent; }

#main_visual .mv_cont .circle .circle_bar { z-index: 2; position: absolute; background-color: rgba(18, 18, 18, .8); top: 10px; left: -20px; width: 100%; height: 2px; opacity: 0; transition: opacity 0.3s; }
#main_visual .mv_cont .circle:hover .circle_bar { opacity: 1; }
#main_visual .mv_cont .circle .circle_info { 
    z-index: 3;
    position:absolute;
    top:50%; transform: translateY(-50%);
    right: 40px; padding:12px;

    display:flex; flex-direction:column; gap:6px;

    width:max-content; min-width:180px;

    background:rgba(18,18,18,.8); opacity: 0; transition: opacity 0.3s;
}
#main_visual .mv_cont .circle:hover .circle_info { opacity: 1; }
#main_visual .mv_cont .circle:hover .circle_info strong { display: block; text-align: center; padding: 10px; font-weight: 600; font-size: 16px; color: #fff; background-color: #000; }
#main_visual .mv_cont .circle .circle_info a { display: block; padding: 8px; text-align: center; white-space: nowrap; font-weight: 600; font-size: 16px; color: #fff; border-radius: 100px; overflow: hidden; transition: background-color 0.3s, color 0.3s; }
#main_visual .mv_cont .circle .circle_info a:hover { background-color: #000; color: #ff0000; }
#main_visual .mv_cont .circle .circle_back { top: -70px; left: -200px; width: 250px; height: 182px; }

/* circle1 */
#main_visual .mv_cont .circle1 { top: 445px; left: 570px; }

/* circle2 */
#main_visual .mv_cont .circle2 { top: 620px; left: 790px; }

/* circle3 */
#main_visual .mv_cont .circle3 { top: 630px; left: 1060px; }

/* circle4 */
#main_visual .mv_cont .circle4 { top: 710px; right: 350px; }

/* circle5 */
#main_visual .mv_cont .circle5 { top: 320px; left: 1000px; }

/* circle6 */
#main_visual .mv_cont .circle6 { top: 460px; left: 800px; }

/* circle7 */
#main_visual .mv_cont .circle7 { top: 500px; right: 380px; }

#main_visual .mv_tabs { display: none; }

@media (max-width: 1920px) {
    #main_visual { height: 49.4792vw; }

    #main_visual .mv_cont .circle .circle_icon { width: 1.0417vw; height: 1.0417vw; }
    #main_visual .mv_cont .circle .circle_icon::after { width: 0.9375vw; height: 0.9375vw; width: 90%; height: 90%; }

    #main_visual .mv_cont .circle .circle_icon:hover::after { width: 0.9375vw; height: 0.9375vw; }

    #main_visual .mv_cont .circle .circle_bar { top: 0.5208vw; left: -1.0417vw; }
    #main_visual .mv_cont .circle .circle_info { 
        right: 2.0833vw; padding:0.6250vw;
        gap:0.3125vw; min-width:9.3750vw;
    }
    #main_visual .mv_cont .circle:hover .circle_info strong { padding: 0.5208vw; font-size: 0.8333vw; }
    #main_visual .mv_cont .circle .circle_info a { padding: 0.4167vw; font-size: 0.8333vw; border-radius: 5.2083vw; }
    #main_visual .mv_cont .circle .circle_back { top: -3.6458vw; left: -10.4167vw; width: 13.0208vw; height: 9.4792vw; }

    /* circle1 */
    #main_visual .mv_cont .circle1 { top: 23.1771vw; left: 29.6875vw; }

    /* circle2 */
    #main_visual .mv_cont .circle2 { top: 32.2917vw; left: 41.1458vw; }

    /* circle3 */
    #main_visual .mv_cont .circle3 { top: 32.8125vw; left: 55.2083vw; }

    /* circle4 */
    #main_visual .mv_cont .circle4 { top: 36.9792vw; right: 18.2292vw; }

    /* circle5 */
    #main_visual .mv_cont .circle5 { top: 16.6667vw; left: 52.0833vw; }

    /* circle6 */
    #main_visual .mv_cont .circle6 { top: 23.9583vw; left: 41.6667vw; }

    /* circle7 */
    #main_visual .mv_cont .circle7 { top: 26.0417vw; right: 19.7917vw; }
}

@media (max-width: 768px) {
    #main_visual .mv_cont .circle .circle_icon { width: 2.0417vw; height: 2.0417vw; }
}

@media (max-width: 425px) {
    #main_visual { height: 60.4792vw; }
}


@media (max-width: 1279px) {
    #main_visual { /* display: none; */ }
    #main_visual .mv_cont .circle .circle_bar { display: none !important; }
    #main_visual .mv_cont .circle .circle_info { display: none !important; }
    #main_visual .mv_tabs { display: block; z-index: 2; position: absolute; padding-top: 0; padding-bottom: 0; bottom: -100%; left: 0; width: 100%; background-color: rgba(18, 18, 18, 0.8); transition: bottom 0.3s; }
    #main_visual .mv_tabs.active { bottom: 0; }
    #main_visual .mv_tabs .tabs { display: flex; flex-wrap: wrap; justify-content: center; font-size: 13px; color: #fff; line-height: 1.25; }
    #main_visual .mv_tabs .tabs * { font-size: inherit; color: inherit; line-height: inherit; }
    #main_visual .mv_tabs .tabs a { display: inline-flex; padding: 10px 0; align-items: center; justify-content: center; width: 50%; text-align: center; }
}

/* main_visual_mo */
#main_visual_mo { display: none; }
@media (max-width: 1279px) {
    #main_visual_mo { /* display: block; */ position: relative; /* height: calc(250px + 15vw);  */ /* height: 90vh; */ height: 85vw; background-color: gray; overflow: hidden; }
    #main_visual_mo .mv_bg { z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/image/main/mv_bg.jpg) no-repeat center/cover; }
    #main_visual_mo .tabs { z-index: 2; position: absolute; padding-top: 30px; padding-bottom: 20px; bottom: -395px; left: 0; width: 100%; background-color: rgba(18, 18, 18, 0.8); transition: bottom 0.3s; }
    #main_visual_mo .tabs.active { bottom: 0; }
    #main_visual_mo .tabs .tabs_arrow { z-index: 3; position: absolute; top: 0; left: 0; width: 100%; padding: 10px; text-align: center; cursor: pointer; }
    #main_visual_mo .tabs .tabs_arrow img { width: 15px; transform-origin: center; transition: transform 0.3s; }
    #main_visual_mo .tabs.active .tabs_arrow img { transform: rotateZ(180deg); }
    #main_visual_mo .tabs ul { display: flex; flex-wrap: wrap; padding-left: 10px; padding-right: 10px; }
    #main_visual_mo .tabs ul li { width: 25%; text-align: center; padding: 10px; }
    #main_visual_mo .tabs ul li .top { display: block; padding: 10px; font-weight: 500; font-size: 15px; color: #fff; background-color: #000; cursor: pointer; }
    #main_visual_mo .tabs ul li .top br { display: none; }
    #main_visual_mo .tabs ul li a { display: block; padding: 10px; font-size: 14px; color: #fff; }
    #main_visual_mo .tabs ul li a span { position: relative; display: inline-block; }
    #main_visual_mo .tabs ul li a span::after { display: block; content: ''; position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background-color: #ff0000; transition: width 0.3s; }
    #main_visual_mo .tabs ul li a:hover span::after { width: 100%; }
}
@media (max-width: 767px) {
    #main_visual_mo .tabs { bottom: -85px; }
    #main_visual_mo .tabs ul li { padding: 3px; }
    #main_visual_mo .tabs ul li:nth-of-type(3) { width: 50%; }
    #main_visual_mo .tabs ul li .top { padding: 8px; font-size: 14px; background-color: transparent; }
    #main_visual_mo .tabs ul li a { padding: 8px; font-size: 13px; }
    #main_visual_mo .tabs ul li a span::after { bottom: -5px; }
    #main_visual_mo .tabs ul li .bottom { display: none; }
}
@media (max-width: 524px) {
    #main_visual_mo .tabs { bottom: -83px; }
    #main_visual_mo .tabs ul li .top { padding: 7px; font-size: 13px; background-color: #000; border-radius: 100px; }
    #main_visual_mo .tabs ul li a { padding: 7px; }
}
@media (max-width: 460px) {
    #main_visual_mo .tabs { bottom: -133px; }
    #main_visual_mo .tabs ul li { width: 50%; }
    #main_visual_mo .tabs ul li .top { padding: 5px 0; }
    #main_visual_mo .tabs ul li a { padding: 5px 0; }
}

/* #main_contact */
#main_contact {padding: 45px 0;}
#main_contact .item_wrap{margin: 0 -15px; display: flex; flex-wrap: wrap;}
#main_contact .item_wrap .item {margin: 0 15px;}
#main_contact .item_wrap .item a {width: 100%; height: 100%;}
#main_contact .item_wrap .item p {font-size: 18px; line-height: 1.5; text-align: center; margin: 25px 0 15px;}


@media (max-width: 1279px) {
    #main_contact .item_wrap{justify-content: center;}
}

@media (max-width: 769px) {
    #main_contact .item_wrap {margin: 0 -5px;}
    #main_contact .item_wrap .item{width: 45%; margin: 0 5px;}
    #main_contact .item_wrap .item img{width: 80%; display: block; margin: 0 auto;}
    #main_contact .item_wrap .item p {margin: 25px 0 15px 0;}
}


@media (max-width: 500px) {
#main_contact .item_wrap{justify-content: center;}
}

#main_product{padding-bottom: 110px;}

/* #main_banner */
#main_banner {background: url(/image/main/main_banner_bg.jpg)no-repeat center/cover; padding: 80px 0;}
#main_banner .text_wrap {display: flex; align-items: center; gap: 0 20px; }
#main_banner .text_wrap h2 {font-size: 45px; font-weight: 700; line-height: 1.5; color: #fff;}
#main_banner .text_wrap p {font-size: 22px; line-height: 1.5; color: #fff;}
#main_banner a {border: 1px solid #fff; border-radius: 5px; padding: 10px 60px; text-align: center; display: inline-block; color: #fff;} 
#main_banner a:hover{background-color: #fff; color: #333;}


@media (max-width: 500px) {

}


/* main_product */
#main_product h3 {font-size: 36px; line-height: 1.5; color: #030303; font-weight: 700; text-align: center; margin-bottom: 30px;}
#main_produc .contwrap{padding: 45px 0;}


/* #main_map */
#main_map { background-color: #e7e7e7;}
#main_map .contwrap .contents{ display: flex; flex-wrap: nowrap; justify-content: space-between; }
#main_map .contwrap .contents > li.left { position: relative; width: 50%; }
#main_map .contwrap .contents > li.right{width: 50%; display: flex;}
#main_map .text_wrap{background-color: #e7e7e7; padding: 85px 0;}
#main_map .text_wrap h3{font-size: 30px; color: #000000; font-weight: 700; margin-bottom: 45px;}
#main_map .text_wrap .text {display: flex; gap:0 30px; align-items: center; margin-bottom: 15px;}
#main_map .text_wrap .text p{font-size: 20px;}

#main_map  .submap_container { width: 50vw; height: 449px; flex-shrink: 0;}
#main_map  .submap_container .root_daum_roughmap { width: 100%; height: 100%; }
#main_map  .submap_container .wrap_map { width: 100%; height: calc(100% - 32px) !important; }

@media (max-width: 767px) {
    #main_map .text_wrap {padding: 30px 0;}
    #main_map .text_wrap h3 {margin-bottom: 25px;}
    #main_map .contwrap .contents {display: block;}
    #main_map .contwrap .contents > li.left {width: 100%;}
    #main_map .contwrap .contents > li.right{width: 100%; display: block;}
    #main_map  .submap_container {width: 100%;}
    #main_map .text_wrap .text {gap: 0 15px;}
    #main_map .text_wrap .text img{width: 40px;}
}