@charset "utf-8";

@media screen and (max-width:1300px){
    .inner{width:100%;padding:0 50px;}

    .visual .con-txt{width:50%;}
    .visual .inner{overflow:hidden;}
    .visual .con-img{width:50%;right:-0px;}
    .visual .con-img img{width:650px;}
    .visual .con-txt p{font-size: var(--tit-p);}
    .visual h2 img{width:350px;}
    .visual .btn{height:70px;font-size:20px;}

    .sec02 .con-txt h3{font-size:50px;}
    .sec02 .con-txt p{font-size: 20px;}
    .sec02 .sec02-txt-swip h3::before{width:60px;height:60px;}
    .sec02 .con-r{width:50%;background-size: contain;}
    .sec02 .con-l{width:50%;}
    .sec04 ul{align-items: stretch;}

    footer .con-bt .inner{flex-direction: column;align-items: flex-start;gap:20px;}
    footer .con-bt .com-info ul{flex-wrap: wrap;}
  
}

@media screen and (max-width:1024px){
    :root{
        /*size*/
        --tit-h3:45px;
        --tit-p:25px;
    }

    .inner{padding:0 30px;}
    .visual h2 img{width:300px;}

    .sec02 .inner{flex-direction: column;}
    .sec02 .con-r,
    .sec02 .con-l{width:100%;text-align: center;}
    .sec02 .con-r .swiper{width:400px;}
    .sec02 .sec02-swip-page{position:absolute;bottom:-50px;}
    .sec02 .con-r{background-size: 500px auto;}
    .sec02 .sec02-txt-swip h3::before{margin:0 auto 20px;}
    .sec04 h3{width:calc(100% - 20px);}
    .sec05 .con-r{display:none;}
    .sec05 .inner{justify-content: center;text-align: center;}
    .sec05 .con-txt h3{font-size: 42px;}
    footer .con-top{font-size: 18px;line-height:1.4;}
    footer .con-bt .inner{align-items: center;text-align: center;}
    footer .con-bt .fnb ul{justify-content: center;}
    footer .con-bt .com-info ul{justify-content: center;}
    footer .con-bt .com-info ul li:first-child{width:100%;}
    footer .con-bt{padding:60px 0;}
    footer .con-bt .fnb{margin-bottom:30px;}
    
   
    .sec04 .pc-only{display:none;}
    .sec04 .m-only{display:block;}
    .sec04 .m-only .sec04-tab{margin-bottom:50px;}
    .sec04 .m-only .sec04-tab ul{width:100%;gap:10px;justify-content: center;}
    .sec04 .m-only .sec04-tab li{display:flex;width:180px;height:60px;padding:0;background:transparent;border-radius:500px;align-items: center;justify-content: center;border:1px solid #fff;color:#fff;font-size:22px;}
    .sec04 .m-only .sec04-tab li.active{background:#fff;color:#3E8DED;font-weight: 700;}
    .sec04{padding:120px 0;}
    .sec04 h3{margin-bottom:40px;font-size:45px;}
    .sec04 .m-only .con-wrap .conbx{display:none;}
    .sec04 .m-only .con-wrap .conbx.active{display:block;}
    .sec04 ul{width:max-content;gap:10px;padding-right:30px;}
    .sec04 .s1 ul li,
    .sec04 .s2 ul li{width:200px;}
    .sec04 .conbx{overflow-x:auto;padding-bottom:10px;}/*-ms-overflow-style: none;*/
    /* .sec04 .conbx::-webkit-scrollbar{display:none;} */
    .sec04 .m-only .inner{padding:0 0px 0 30px;}
    .sec04 .s1 ul li img, 
    .sec04 .s2 ul li img{width:60px;}
    .sec04 li h4{margin:20px 0 15px;font-size: 24px;}
    .sec04 li p{font-size:20px;}
    
}

@media screen and (min-width:768px){
    .m-only,
    .br-m{display:none;}
}

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

    :root{
        /*size*/
        --tit-h3:36px;
        --tit-p:18px;
    }


    .m-only,
    .br-m{display:block;}
    .m-only.btn{display:flex;}
    .sec01 .br-m{display:none;}
    .sec01 .br-pc{display:block;}

    .pc-only,
    .br-pc{display:none;}

    .inner{padding:0 20px;}
    .contents{padding:80px 0px;}
    
    header{height:60px;}
    header h1 img{width:130px;}
    header .btn{border-radius: 50%;background:transparent;border: 1px solid rgba(255, 255, 255, 0.25);}
    header .hd-btn{gap:6px;}
    header .app-dw-btn{width:34px;height:34px;}
    header .go-howto{width:81px;height:34px;color:#fff;font-size: 14px;border-radius: 999px;}
    header h1{position:relative;top:2px;}

    .visual{height:auto;min-height:calc(100vh - 60px);margin-top:60px;padding:50px 0 30px;text-align: center;}
    .visual .inner{flex-direction: column;justify-content: center;}
    .visual .inner>div{width:100%;}
    .visual .con-img{right:10px;width:100%;margin-left:0;}
    .visual .con-img img{content:url(../img/visual_m.png);width:calc(100% + 30px);}
    .visual .btn{position:relative;width:100%;height:54px;margin:0 auto;font-size: 20px;}
    .visual .con-txt h2{margin:20px 0 0px;}
    .visual h2 img{width:240px;}
    .visual .con-txt p{font-size: 22px;}

    .sec01 .con-txt img{width:95%;}

    .sec02 .sec02-swip-page{bottom:-20px;}
    .sec02 .con-r{padding:30px 0 0 0px;background-size:260px 260px;}
    .sec02 .sec02-txt-swip h3::before{width:40px;height:40px;}
    .sec02 .con-txt h3{font-size: 36px;}
    .sec02 .con-txt p{margin-bottom:20px;font-size: 18px;}
    .sec02 .con-r .swiper{width:193px;}
    .sec02 .sec02-swip-page .swiper-pagination-bullet{width:8px;height:8px;margin:0 4px;}
    .sec03 .con-img>img{content:url(../img/sec03_img_ct_m.png);width:193px;margin-left:-96px;bottom:-120px;}
    .sec03 .con-img{margin-top:150px;}
    .sec03{padding:80px 0 180px;}
    .sec03 .swiper-slide{width:100px;}
    .sec05 .btn-area{flex-direction: column;}
    .sec05 .btn-area a:first-child img{content:url(../img/btn_googleplay_m.svg);}
    .sec05 .btn-area a:last-child img{content:url(../img/btn_appstore_m.svg);}
    .sec05 .con-txt h3{font-size: 34px;}
    .sec04{padding:80px 0;}
    .sec04 .m-only .sec04-tab li{width:102px;height:40px;font-size:18px;}
    .sec04 h3{margin-bottom:30px;font-size:36px;}
    .sec04 .m-only .inner{padding:0 0px 0 20px;}
    .sec04 ul{padding-right:20px;}
    .sec04 .s1 ul li,
    .sec04 .s2 ul li{width:160px;}
    .sec04 li{border-radius: 40px;}
    .sec04 li h4{font-size: 20px;}
    .sec04 li p{font-size: 16px;}
    .sec04::after{bottom:-50px;width:300px;height:198px;}
    .sec04 .inner::before{right:40px;width:133px;height:133px;}

    footer .con-top{font-size: 14px;}
    footer .con-top img{width:190px;content:url(../img/ft_com_logo_m.png);}



}

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



@media screen and (max-width:390px){
    .sec04 .inner::before{right:0;}
    .sec01 .br-m{display:block;}
    .sec01 .br-pc{display:none;}

}