*{margin:0px; padding:0px;}
ul{list-style:none;}
a{text-decoration:none; color:#333;}
body{color:#333; overflow-x:hidden; word-break:keep-all;-webkit-font-family:'Noto Sans KR', sans-serif;font-family:'Noto Sans KR', sans-serif;}
body, html{
    overflow-x: hidden;
}




/*pc!!!!!!!!!!!!!*/
@media (min-width:1221px) {


    /*header*/
    header{width:100%; padding:20px 0px; position:relative; z-index:1;}
    header ul{display:flex; justify-content:space-between; width:1200px; margin:0px auto;align-items:center;}
    header h1{width:100px;}
    header img{width:100%;}
    header .menu{width:500px; line-height:40px;}
    header .hd_icon{width:60px;}


    /*visual*/
    #visual{width:100%; height:100vh; background:url(../index_img/visual1.png) no-repeat center/cover; transform:translateY(-110px);}
    #visual .title{width:1200px; margin:0px auto; transform: translateY(345px);}
    #visual h2{color:#e36a8d; font-size:65px; font-family: 'Noto Serif Vithkuqi', serif;}
    #visual p{color:#e36a8d; font-size:20px; margin:20px 0px 40px;}
    #visual .mall{display:flex; justify-content:center; width:170px; height:40px;line-height:40px; background:rgba(255, 239, 245, 0.767); text-align:center; border:none; color:#e36a8d; cursor:pointer;}
    #visual .mall span{transform:translate(5px, 8px);}
    #visual .mall div{font-size:15.5px; transform:translateY(1px);}
    


    /*container*/
    #container{width:100%; margin:0px auto;}
    .con1{width:1200px; margin:0px auto; position:relative;}
    .con1 .le1{width:70px; position:absolute; top:-50px;}
    .con1 .le2{width:140px; position:absolute; top:200px; left:-150px;}
    .con1 .ri1{width:90px; position:absolute; top:-230px; right:-100px}
    .con1 .ri2{width:150px; position:absolute; top:50px; right:-250px}
    .con1 .ri3{width:70px; position:absolute; top:300px; right:0px}
    .con1 ul{width:950px; margin:100px auto 200px; display:flex; justify-content:space-between;}
    .con1 img{width:400px; border-radius:200px 200px 0px 0px;}
    .con1 h4{color:#333; font-size:25px; margin-top:100px; line-height:38px;}
    .con1 p{color:#333; font-size:17px; line-height:25px; margin:30px 0px;}
    .con1 li:nth-of-type(1) p{margin-bottom:100px;}


    .con2{background:#f7f7f7c2; }
    .con2 h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
    .con2 p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 180px; line-height:40px;}
    .con2 ul{width:1200px; display:flex; justify-content:space-between; margin:0px auto;}
    .con2 li{width:28%;}
    .con2 .back{width:100%; border-radius:300px 300px 0px 0px; position:relative;}
    .con2 .front{position:absolute; top:-60px; left:50%; transform:translateX(-50%); width:56%;}
    .con2 li:nth-of-type(2) .front{position:absolute; top:-60px; left:50%; transform:translateX(-48%); width:62%;}

    
    .con2 li p{margin:70px 0px 5px; font-size:18px;}
    .con2 li h4{text-align:center; font-size:22px;}
    .con2 li:nth-of-type(1) h4{color:#1c7eb5;}
    .con2 li:nth-of-type(2) h4{color:#c6325f;}
    .con2 li:nth-of-type(3) h4{color:#5e4192;}
    .con2 li{position:relative;}

    /* .con2{background:#f7f7f7c2; }
    .con2 h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
    .con2 p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 180px; line-height:40px;}
    .con2 ul{width:1200px; display:flex; justify-content:space-between; margin:0px auto;}
    .con2 li{width:28%;}
    .con2 li:nth-of-type(1) .back{width:100%; height:380px; background:url(../index_img/best_ba1.png) no-repeat center/cover; position:relative; border-radius:300px 300px 0px 0px;}
    .con2 li:nth-of-type(2) .back{width:100%; height:380px; background:url(../index_img/best_ba2.png) no-repeat center/cover; position:relative; border-radius:300px 300px 0px 0px;}
    .con2 li:nth-of-type(3) .back{width:100%; height:380px; background:url(../index_img/best_ba3.png) no-repeat center/cover; position:relative; border-radius:300px 300px 0px 0px;} */

    

    .con2 .box{width:150px; height:40px; border:1px solid #ccc; text-align:center; margin:50px auto 100px;}
    .con2 .box span{transform:translateY(7px); color:#888;}
    .con2 .box a{width:100%; height:100%; display:block; padding-top:2px; color:#777;}

    .con2 .cir{position:relative; z-index:10; transform:translateY(-720px);}


    .con2 li:nth-of-type(1) .cir1{width:25px; height:25px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:200px; left:30px; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(1) .cir2{width:30px; height:30px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:180px; right:20px; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir3{width:32px; height:32px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:80px; left:5px; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir4{width:37px; height:37px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:70px; right:-20px; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir5{width:18px; height:18px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:-20px; left:60px; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir6{width:15px; height:15px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:-10px; right:50px; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }



    .con2 li:nth-of-type(2) .cir1{width:25px; height:25px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:200px; left:30px; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(2) .cir2{width:30px; height:30px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:180px; right:20px; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir3{width:32px; height:32px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:80px; left:5px; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir4{width:37px; height:37px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:70px; right:-20px; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir5{width:18px; height:18px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:-20px; left:60px; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir6{width:15px; height:15px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:-10px; right:50px; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir1{width:25px; height:25px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:200px; left:30px; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(3) .cir2{width:30px; height:30px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:180px; right:20px; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir3{width:32px; height:32px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:80px; left:5px; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir4{width:37px; height:37px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:70px; right:-20px; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir5{width:18px; height:18px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:-20px; left:60px; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir6{width:15px; height:15px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:-10px; right:50px; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }



    /*con3*/
    .con3 video{width:100%;}
    .con_ad{height:100%;
        background:pink;
    }
    .ad{
        clip-path:circle(13vw at 50% 50%);
        width:100%;
    }
    
    .con3{position:relative; height:100%;}
    .vid_but{
        cursor:pointer;
        background:none;
        border:none;
        width:500px;
        height:500px;
        padding:none;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    
    .runningtext{position:absolute; top:50%; left:50%;  
        transform:translate(-50%, -50%) scale(1.1);
        width:36vw;
    }
    @keyframes circlefull{
        0%{
    
        }
        100%{
            clip-path:circle(100% at 50% 50%);
        }
    }
    @keyframes disappear{
        0%{
    
        }
        100%{
            opacity:0;
        }
    }
    @keyframes rotational{
        0%{
    
        }
        100%{
            transform:translate(-50%, -50%) scale(1.1) rotate(360deg) ;
    }
    }


    /*con4*/
    .con4 h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
    .con4 p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 100px;}
    .con4 ul{width:1200px; margin:0px auto; display:flex; justify-content:space-between;padding-bottom:150px;}
    .con4 li{width:30%; height:450px; border:1px solid #aaa; overflow:hidden; position:relative;}
    .con4 li img{width:100%; display:block; transition:1s;}

    .con4 .review{width:100%; height:500px; background:#fff; position:relative; z-index:5; transition:1s;}
    .con4 .review h4{padding:15px 30px; margin-bottom:5px; color:#333;}
    .con4 .review p{text-align:left; margin:0px 30px;  font-size:15px; line-height:27px; color:#333;}
    .con4 .good{width:100%; position:absolute; bottom:0px; z-index:6; background:#fff;}
    .con4 .good p{text-align:left; margin:0px 30px; padding:10px 0px 12px; font-size:14px;  border-top:1px solid #aaa; color:#333;}
    .con4 li:hover .review{transform:translateY(-100px);}
    .con4 li:hover img{filter:brightness(40%);}



    /*con5*/
    .con5{background:#f7f7f7c2; padding-bottom:150px;}
    .con5>h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
    .con5>p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 100px; line-height:40px;}
    .con5 ul{width:1200px; display:flex; justify-content:flex-start; border-bottom:1px solid #aaa; margin-bottom:10px; padding-bottom:20px; margin:0px auto; color:#333}
    .con5 ul:nth-of-type(1){border-top:2px solid #aaa;}
    .con5 li{margin-left:100px;}
    .con5 li h3{font-size:30px; margin:20px 0px 5px;}
    .con5 li{font-size:14px;}
    .con5 li h4{font-size:20px; text-align:left;  margin:25px 0px 5px;}
    .con5 li p{font-size:15px; text-align:left;}
    .con5 ul li:nth-of-type(1){text-align:center;}


    /*footer*/
    footer{padding:60px 0px; text-align:center; line-height:28px; color:#333;}
    footer span{font-size:15px;}
    .foo2{display:none;}


}




/*태블릿!!!!!!!!!!!!!*/
@media (min-width:768px) and (max-width:1220px) {
    /*header*/
    header{width:100%; padding:20px 0px; position:relative; z-index:1;}
    header ul{display:flex; justify-content:space-between; width:90%; margin:0px auto; align-items:center;}
    header h1{width:100px;}
    header img{width:100%;}
    header .hd>li:nth-of-type(2){width:60%; line-height:40px;}
    header .hd_icon{width:60px;}

    /*visual*/
    #visual{width:100%; height:650px;  background:url(../index_img/visual1.png) no-repeat center/cover; transform:translateY(-110px); position:relative;}
    #visual .title{width:90%; padding-top:400px; margin:0px auto; position:absolute; top:-150px; left:5%;}
    #visual h2{color:#e36a8d; font-size:50px; font-family: 'Noto Serif Vithkuqi', serif;}
    #visual p{color:#e36a8d; font-size:18px; margin:20px 0px 40px;}
    #visual .mall{display:flex; justify-content:center; width:170px; height:40px;line-height:40px; background:rgba(255, 255, 255, 0.468); text-align:center; border:none; color:#e36a8d; cursor:pointer;}
    #visual .mall span{transform:translate(5px, 8px);}
    #visual .mall div{font-size:15.5px; transform:translateY(1px);}


    /*container*/
    #container{width:100%;}
    .con1{width:90%; margin:0px auto; position:relative;}
    .con1 .le1{width:55px; position:absolute; top:-5%; left:10%;}
    .con1 .le2{width:140px; position:absolute; top:45%; left:-15%;}
    .con1 .ri1{width:75px; position:absolute; top:-23%; right:10%}
    .con1 .ri2{width:100px; position:absolute; top:25%; right:-15%;}
    .con1 .ri3{width:60px; position:absolute; top:65%; right:-5%}
    .con1 ul{width:100%; margin:100px auto 200px; display:flex; justify-content:space-between;}
    .con1 li{width:47%;}
    .con1 img{width:100%; border-radius:500px 500px 0px 0px;}
    .con1 li:nth-of-type(1) h4{font-size:25px; margin-top:100px;}
    .con1 li:nth-of-type(2) h4{font-size:25px; margin-top:130px;}
    .con1 p{font-size:17px; line-height:25px; margin:30px 0px;}
    .con1 li:nth-of-type(1) p{margin-bottom:100px;}

    .con2{background:#f7f7f7c2; }
    .con2 h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
    .con2 p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 180px; line-height:40px;}
    .con2 ul{width:90%; display:flex; justify-content:space-between; margin:0px auto;}
    .con2 li{width:28%;}
    .con2 .back{width:100%; border-radius:300px 300px 0px 0px; position:relative;}
    .con2 .front{position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:56%;}
    .con2 li:nth-of-type(2) .front{position:absolute; top:-40px; left:50%; transform:translateX(-48%); width:62%;}

    
    .con2 li p{margin:45px 0px 3px; font-size:15px;}
    .con2 li h4{text-align:center; font-size:2vw;}
    .con2 li:nth-of-type(1) h4{color:#1c7eb5;}
    .con2 li:nth-of-type(2) h4{color:#c6325f;}
    .con2 li:nth-of-type(3) h4{color:#5e4192;}
    .con2 li{position:relative;}


    .con2 .box{width:130px; height:38px; border:1px solid #ccc; text-align:center; margin:40px auto 100px;}
    .con2 .box span{transform:translateY(7px); color:#888;}
    .con2 .box a{font-size:15px; width:100%; height:100%; display:block; padding-top:1px; color:#777;}

    .con2 .cir{position:relative; z-index:10; transform:translateY(-720px);}


    .con2 li:nth-of-type(1) .cir1{width:20px; height:20px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:28%; left:8%; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(1) .cir2{width:25px; height:25px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:25%; right:5%; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir3{width:27px; height:27px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:15%; left:-2%; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir4{width:32px; height:32px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:12%; right:-5%; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir5{width:13px; height:13px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:3%; left:12%; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir6{width:10px; height:10px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:0%; right:12%; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }



    .con2 li:nth-of-type(2) .cir1{width:20px; height:20px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:28%; left:8%; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(2) .cir2{width:25px; height:25px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:25%; right:5%; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir3{width:27px; height:27px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:15%; left:-2%; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir4{width:32px; height:32px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:12%; right:-5%; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir5{width:13px; height:13px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:3%; left:12%; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir6{width:10px; height:10px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:0%; right:12%; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir1{width:20px; height:20px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:28%; left:8%; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(3) .cir2{width:25px; height:25px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:25%; right:5%; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir3{width:27px; height:27px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:15%; left:-2%; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir4{width:32px; height:32px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:12%; right:-5%; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir5{width:13px; height:13px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:3%; left:12%; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir6{width:10px; height:10px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:0%; right:12%; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }

    /*con3*/
    .con3 video{width:100%;}
    .con_ad{height:100%;
        background:pink;
    }
    .ad{
        clip-path:circle(13vw at 50% 50%);
        width:100%;
    }
    
    .con3{position:relative; height:100%;}
    .vid_but{
        cursor:pointer;
        background:none;
        border:none;
        width:500px;
        height:500px;
        padding:none;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    
    .runningtext{position:absolute; top:50%; left:50%;  
        transform:translate(-50%, -50%) scale(1.1);
        width:36vw;
    }
    @keyframes circlefull{
        0%{
    
        }
        100%{
            clip-path:circle(100% at 50% 50%);
        }
    }
    @keyframes disappear{
        0%{
    
        }
        100%{
            opacity:0;
        }
    }
    @keyframes rotational{
        0%{
    
        }
        100%{
            transform:translate(-50%, -50%) scale(1.1) rotate(360deg) ;
    }
    }


    /*con4*/
    .con4 h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
    .con4 p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 100px;}
    .con4 ul{width:90%; margin:0px auto; display:flex; justify-content:space-between;padding-bottom:100px;}
    .con4 li{width:30%; height:320px; border:1px solid #aaa; overflow:hidden; position:relative;}
    .con4 li img{width:110%; display:block; transition:1s;}

    .con4 .review{width:100%; height:200px; background:#fff; z-index:5; transition:1s; position:absolute; top:70%;}
    .con4 .review h4{padding:15px 30px; margin-bottom:5px; color:#333;}
    .con4 .review p{text-align:left; margin:0px 30px;  font-size:14px; line-height:23px; color:#333;}
    .con4 .good{width:100%; position:absolute; bottom:0px; z-index:6; background:#fff;}
    .con4 .good p{text-align:left; margin:0px 30px; padding:10px 0px 12px; font-size:14px;  border-top:1px solid #aaa; color:#333;}
    .con4 li:hover .review{transform:translateY(-145px);}
    .con4 li:hover img{filter:brightness(40%);}

     /*con5*/
     .con5{background:#f7f7f7c2; padding-bottom:100px;}
     .con5>h3{font-size:70px; letter-spacing:-2px; color:#333; text-align:center; padding-top:150px; font-family: 'Noto Serif Vithkuqi', serif;}
     .con5>p{font-size:22px; letter-spacing:-1px; color:#333; text-align:center; margin:50px auto 100px; line-height:40px;}
     .con5 ul{width:90%; display:flex; justify-content:flex-start; border-bottom:1px solid #aaa; margin-bottom:10px; padding-bottom:20px; margin:0px auto; color:#333}
     .con5 ul:nth-of-type(1){border-top:2px solid #aaa;}
     .con5 li{margin-left:8%;}
     .con5 li h3{font-size:30px; margin:20px 0px 5px;}
     .con5 li{font-size:14px;}
     .con5 li h4{font-size:20px; text-align:left;  margin:25px 0px 5px;}
     .con5 li p{font-size:15px; text-align:left;}
     .con5 ul li:nth-of-type(1){text-align:center;}
 
 
     /*footer*/
     footer{padding:60px 0px; text-align:center; line-height:28px; color:#333;}
     footer span{font-size:15px;}
     .foo2{display:none;}
 

}


/*모바일!!!!!!!!!!!!!*/
@media (max-width:767px) {
    /*header*/
    .hd{width: 90%; margin:0px auto; display:flex; justify-content:space-between; align-items:center;padding:10px 0px; position:relative; z-index:5;}
    .menu{display:none;}
    .hd_icon{display:flex;}
    .hd_icon li:first-child{margin-right: 20px;}
    .hd img{width:15vw;}

    /*visual*/
    #visual{width:100%; height:330px;  background:url(../index_img/visual1.png) no-repeat 61%/cover; transform:translateY(-60px); position:relative;}
    #visual .title{padding-top:370px; margin:0px auto; position:absolute; top:-80%; left:5%;}
    #visual h2{color:#e36a8d; font-size:5.5vw; font-family: 'Noto Serif Vithkuqi', serif;}
    #visual p{color:#e36a8d; font-size:18px; margin:20px 0px 40px;}
    #visual h2 span{display:none;}
    #visual p{display:none;}
    #visual .mall{display:flex; justify-content:center; width:130px; height:40px; line-height:40px; background:rgba(255, 239, 245, 0.527); text-align:center; border:none; color:#e36a8d; cursor:pointer; margin-top:10px;}
    #visual .mall span{transform:translate(5px, 12px); font-size:17px;}
    #visual .mall div{font-size:14px; transform:translateY(1px);}


    /*container*/
    #container{width:100%;}
    .con1 .le1{display:none;}
    .con1 .le2{display:none;}
    .con1 .ri1{display:none;}
    .con1 .ri2{display:none;}
    .con1 .ri3{display:none;}

    .con1{width:90%; margin:0px auto;}

    .con1 ul{width:100%; margin:15% auto 30%; position:relative;}
    .con1 li{width:90%; margin:0px auto;}
    .con1 img{width:100%; border-radius:500px 500px 0px 0px;}
    .con1 li:nth-of-type(2) img{width:90%; border-radius:500px 500px 0px 0px; position:absolute; top:0px;}
    .con1 li:nth-of-type(1) h4{font-size:4.5vw; line-height:150%; padding-top:146%;}
    .con1 li:nth-of-type(2) h4{font-size:4.5vw; line-height:150%; padding-top:50px;}
    .con1 p{font-size:3.5vw; line-height:160%; margin:20px 0px;}
    .con1 li:nth-of-type(1) p{margin-bottom:100px;}
    .con1 br{display:none;}

    .con2{background:#f7f7f7c2;}
    .con2 h3{font-size:9.5vw; letter-spacing:-2px; color:#333; text-align:center; padding-top:20%; font-family: 'Noto Serif Vithkuqi', serif;}
    .con2 p{font-size:3.5vw; letter-spacing:-1px; color:#333; text-align:center; margin:7% auto 35%; line-height:180%;}
    .con2 ul{width:70%; margin:0px auto; padding-bottom:30%;}
    .con2 li{width:100%; margin-top:60%;}
    .con2 li:nth-of-type(1){margin-top:0px;}
    .con2 .back{width:100%; border-radius:300px 300px 0px 0px; position:relative;}
    .con2 .front{position:absolute; top:-10%; left:50%; transform:translateX(-50%); width:56%;}
    .con2 li:nth-of-type(2) .front{position:absolute; top:-10%; left:50%; transform:translateX(-48%); width:62%;}

    
    .con2 li p{margin:15% 0px 3%; font-size:3.8vw;}
    .con2 li h4{text-align:center; font-size:4.5vw;}
    .con2 li:nth-of-type(1) h4{color:#1c7eb5;}
    .con2 li:nth-of-type(2) h4{color:#c6325f;}
    .con2 li:nth-of-type(3) h4{color:#5e4192;}
    .con2 li{position:relative;}


    .con2 .box{width:50%; height:20%; border:1px solid #ccc; text-align:center; margin:15% auto 0px;}
    .con2 .box span{transform:translateY(15%); color:#888; font-size:5vw;}
    .con2 .box a{font-size:3.8vw; width:100%; height:100%; display:block; padding:6% 0px 7%; color:#777;}

    .con2 .cir{position:relative; z-index:10; transform:translateY(-720px);}

    .con2 li:nth-of-type(1) .cir1{width:20px; height:20px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:28%; left:8%; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(1) .cir2{width:25px; height:25px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:25%; right:5%; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir3{width:27px; height:27px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:15%; left:-2%; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir4{width:32px; height:32px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:12%; right:-5%; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir5{width:13px; height:13px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:3%; left:12%; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(1) .cir6{width:10px; height:10px; border-radius:100px; border:2px solid rgb(39, 158, 227); position:absolute; top:0%; right:12%; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }



    .con2 li:nth-of-type(2) .cir1{width:20px; height:20px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:28%; left:8%; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(2) .cir2{width:25px; height:25px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:25%; right:5%; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir3{width:27px; height:27px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:15%; left:-2%; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir4{width:32px; height:32px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:12%; right:-5%; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir5{width:13px; height:13px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:3%; left:12%; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(2) .cir6{width:10px; height:10px; border-radius:100px; border:2px solid rgb(250, 111, 174); position:absolute; top:0%; right:12%; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir1{width:20px; height:20px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:28%; left:8%; opacity:0;}
    .con2 .box:hover ~ .cir1{animation:cir1 3s infinite;}
    @keyframes cir1 {
        0%{opacity:1;}
        50%{transform:translateY(-10px);}
        70%{opacity:0;}
        100%{opacity:0;}
    }
   
    .con2 li:nth-of-type(3) .cir2{width:25px; height:25px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:25%; right:5%; opacity:0;}
    .con2 .box:hover ~ .cir2{animation:cir2 3s infinite;}
    @keyframes cir2 {
        0%{}
        10%{opacity:1;}
        55%{transform:translateY(-10px);}
        75%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir3{width:27px; height:27px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:15%; left:-2%; opacity:0;}
    .con2 .box:hover ~ .cir3{animation:cir3 3s infinite;}
    @keyframes cir3 {
        0%{}
        20%{opacity:1;}
        60%{transform:translateY(-10px);}
        80%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir4{width:32px; height:32px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:12%; right:-5%; opacity:0;}
    .con2 .box:hover ~ .cir4{animation:cir4 3s infinite;}
    @keyframes cir4 {
        0%{}
        30%{opacity:1;}
        65%{transform:translateY(-10px);}
        85%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir5{width:13px; height:13px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:3%; left:12%; opacity:0;}
    .con2 .box:hover ~ .cir5{animation:cir5 3s infinite;}
    @keyframes cir5 {
        0%{}
        40%{opacity:1;}
        70%{transform:translateY(-10px);}
        90%{opacity:0;}
        100%{opacity:0;}
    }

    .con2 li:nth-of-type(3) .cir6{width:10px; height:10px; border-radius:100px; border:2px solid rgb(174, 117, 212); position:absolute; top:0%; right:12%; opacity:0;}
    .con2 .box:hover ~ .cir6{animation:cir6 3s infinite;}
    @keyframes cir6 {
        0%{}
        75%{opacity:1;}
        85%{transform:translateY(-10px); opacity:0;}
        100%{opacity:0;}
    }

    /*con3*/
    .con3 video{width:100%;}
    .con_ad{height:100%;
        background:pink;
    }
    .ad{
        clip-path:circle(13vw at 50% 50%);
        width:100%;
    }
    .playbut{width:30%;}
    .con3{position:relative; height:100%;}
    .vid_but{
        cursor:pointer;
        background:none;
        border:none;
        width:500px;
        height:500px;
        padding:none;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    
    .runningtext{position:absolute; top:50%; left:50%;  
        transform:translate(-50%, -50%) scale(1.1);
        width:36vw;
    }
    @keyframes circlefull{
        0%{
    
        }
        100%{
            clip-path:circle(100% at 50% 50%);
        }
    }
    @keyframes disappear{
        0%{
    
        }
        100%{
            opacity:0;
        }
    }
    @keyframes rotational{
        0%{
    
        }
        100%{
            transform:translate(-50%, -50%) scale(1.1) rotate(360deg) ;
    }
    }
    @keyframes fadeout {
        0% {
            background-color: rgba(0, 0, 0, 1);
        }
        100% {
            background-color: tr2ansparent;
        }
    }


    /*con4*/
    .con4 h3{font-size:9.5vw; letter-spacing:-2px; color:#333; text-align:center; padding-top:20%; font-family: 'Noto Serif Vithkuqi', serif;}
    .con4 p{font-size:3.5vw; letter-spacing:-1px; color:#333; text-align:center; margin:7% auto 0%; line-height:180%;}
    .con4 ul{width:90%; margin:0px auto; padding-bottom:100px;}
    .con4 li{width:100%; height:50%; border:1px solid #aaa; overflow:hidden; position:relative; margin-top:20%;}
    .con4 li img{width:110%; display:block; transition:1s;}

    .con4 .review{width:100%; height:54%; background:#fff; z-index:5; transition:1s; position:absolute; bottom:-30%;}
    .con4 .review h4{font-size:4vw; line-height:20%; padding:7% 30px; margin-bottom:5px; color:#333;}
    .con4 .review p{text-align:left; margin:0px 30px;  font-size:3.5vw; line-height:170%; color:#333;}
    .con4 .good{width:100%; position:absolute; bottom:0px; z-index:6; background:#fff;}
    .con4 .good p{text-align:left; margin:0px 30px; padding:3% 0px 3%; font-size:2.7vw;  border-top:1px solid #aaa; color:#333;}
    .con4 li:hover .review{transform:translateY(-45%);}
    .con4 li:hover img{filter:brightness(40%);}
    
    /*con5*/
    .con5{background:#f7f7f7c2; padding-bottom:20%;}
    .con5>h3{font-size:9.5vw; letter-spacing:-2px; color:#333; text-align:center; padding-top:20%; font-family: 'Noto Serif Vithkuqi', serif;}
    .con5>p{font-size:3.5vw; letter-spacing:-1px; color:#333; text-align:center; margin:7% auto 15%; line-height:180%;}
    .con5 ul{width:90%; display:flex; justify-content:flex-start; border-bottom:1px solid #aaa; margin-bottom:10px; padding-bottom:20px; margin:0px auto; color:#333}
    .con5 ul:nth-of-type(1){border-top:2px solid #aaa;}
    .con5 li{margin-left:8%;}
    .con5 li h3{font-size:6vw; margin-top:85%;}
    .con5 li{font-size:14px;}
    .con5 li h4{font-size:4vw; text-align:left;  margin:10% 0px 3%;;}
    .con5 li p{font-size:3vw;  margin-bottom:5%; text-align:left;}
    .con5 ul li:nth-of-type(1){text-align:center; margin-bottom:5%;}


    /*footer*/
    footer{padding:60px 0px; text-align:center; line-height:28px; color:#333; font-size:15px;}
    footer span{font-size:13px;}
    .foo1{display:none;}
}