@media (max-width:768px){
    html,body{font-size: 14px;overflow-x: hidden;}
    .scrollbar-track.show, .scrollbar-track:hover{opacity: 0!important}
    section{margin: 5%;}
    .title{font-size: 30px;}
    .sub_title{font-size: 16px;}
    #mouse-cursor{display: none!important;}
    /*--------------------- main_visual 시작--------------------- */
    .main_visual .fix_header{height: 70px;}
    .main_visual .fix_header .header_logo{width: 60px;height: 60px;left: 10px;}
    .main_visual .fix_header .download {width: 125px;height: 40px;line-height: 40px;margin-right: 10px;}
    .main_visual .fix_header .download span{font-size: 12px;}
    .main_visual .bg_box{width: 300px;height: 350px;}
    @keyframes boxfull{100%{width: 100%; height: 100%;border-radius: 0;}}
    .main_visual .bg_txt{top: 18%;}
    .main_visual .bg_txt .content{font-size: 360px;}
    @keyframes marquee{
        0%{transform: translateX(0%);-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);-webkit-text-stroke-color: rgba(255, 255, 255, 0.5);}
        100%{transform: translateX(-50%);-webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);-webkit-text-stroke-color: rgba(255, 255, 255, 0.5);}} 
    .main_visual .visual_txt{width: 100%;}
    .main_visual .visual_txt h2{font-size: 36px;}
    .main_visual .visual_txt h2 span{width: 30px;height: 30px;top: 17%;}
    .main_visual .scroll{bottom: 8%;font-size: 12px;}
    .main_visual .copy{display: none;}
    /*--------------------- about 시작 --------------------- */
    .about{margin-top: 150px;}
    .about .title{text-align: left;}
    .about .sub_title{text-align: left;}
    .about .sub_title br{display: none;}
    .about .about_box{margin-top: 50px;flex-wrap: wrap;}
    .about .about_box .box{padding: 3%;margin-bottom: 20px;}
    .about .about_box .box span{font-size: 16px;margin-left: 70px;}
    .about .about_box .box span::before{top: 30%;left: -70px;}
    .about .about_box .box strong{font-size: 20px;margin-left: 70px;}
    .about .about_box .box p{word-break: keep-all;margin-left: 70px;}
    .about .about_box .box span::before{width: 40px; height: 40px;background-size: cover!important;}
    /*--------------------- wedo 시작 --------------------- */
    .wedo{margin-top: 150px;}
    .wedo .object{top: -72px;}
    .wedo .wedo_box {grid-template-columns: 1fr 1fr;}
    .wedo .wedo_box .box{height: 170px;border-bottom: none!important;}
    .wedo .wedo_box .box:nth-child(5){border-right: none;}
    .wedo .wedo_box .box:nth-child(2),.wedo .wedo_box .box:nth-child(4),
    .wedo .wedo_box .box:nth-child(6),.wedo .wedo_box .box:nth-child(8){border-right: 1px solid #eee;}
    .wedo .wedo_box .box:nth-child(9),.wedo .wedo_box .box:nth-child(10){border-bottom: 1px solid #eee!important;}
    .wedo .wedo_box .box h6{top:30%;font-size: 16px;}
    .wedo .wedo_box .box::after{top:25%}
    .wedo .wedo_box .box span{font-size: 12px;top: 55%;}
    .wedo .wedo_box .box span br{display: none;}
    /*--------------------- portfolio 시작 --------------------- */
    .portfolio{margin-top: 150px;}
    .portfolio .title{text-align: left;}
    .portfolio .sub_title{margin-bottom: 50px;text-align: left;}
    .portfolio .sub_title br{display: none;}
    .portfolio .con{grid-template-columns: 1fr;gap: 0.5%;}
    .portfolio .more_btn{margin: 50px auto;}
    .portfolio .con .item .txt_box P{font-size: 20px;margin-top: 5px;}
    .portfolio .con .item .item_tag{left: 5%;opacity: 1;}
    /*--------------------- modal 시작 --------------------- */
    .modal .header{height: 50px;}
    .modal .header .trigger{width: 40px;height: 50px;}
    .modal .header .trigger span{width: 30px;}
    .modal .swiper{height: calc(100% - 100px);}
    .modal .swiper .info_fix{display: none;}
    .modal .swiper .swiper-wrapper .swiper-slide{flex-wrap: wrap;}
    .modal .swiper .swiper-wrapper .swiper-slide .desc{width: 100%;height: 50px;line-height: 50px;padding: 0 5%; border-right: none;border-bottom: 1px solid #000;}
    .modal .swiper .swiper-wrapper .swiper-slide .desc .title{font-size: 20px;}
    .modal .swiper .swiper-wrapper .swiper-slide .img{width: 100%;margin: 5%;padding: 0;flex-wrap: wrap;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box{width: 100%;margin-right: 0;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box:nth-child(2),
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box:nth-child(3){display: none;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt{bottom: 30px;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt .main_txt{font-size: 16px;margin-top: 10px;}
    .modal .swiper .swiper-navigation{height: 50px;bottom: 0;position: fixed;z-index: 9999999;width: 100%;}
    .modal .swiper .swiper-pagination-fraction{font-size:16px;line-height: 50px;}
    .modal .swiper-button-next:after, .modal .swiper-button-prev:after{width: 17px;height: 17px;}
    
    /*--------------------- marquee 시작 --------------------- */
    .marquee p {font-size: 100px;}
    /*--------------------- with 시작 --------------------- */
    .with {margin-top: 150px;}
    .with .sub_title{margin-left: 10px;}
    .with .brand_area{margin:50px 0px;}
    .with .brand_area .brand{padding: 0px;width: calc(100% / 3);}
    .with .brand_area .brand img{width: 100%;}
    /*--------------------- contact 시작 --------------------- */
    .contact{margin-top: 150px;padding: 50px 0;}
    .contact .title{margin: 0 5%;}
    .contact .title img{width: 21px;margin-left: 7px;}
    .contact>div{margin: 0 5%;flex-wrap: wrap;}
    .contact iframe{width: 100%;margin-top: 10px;}
    .contact ul{padding: 20px;width: 100%;}
    .contact ul li .table{font-size:14px;}
    .contact ul li .contents{font-size:14px;}
    /*--------------------- footer 시작 --------------------- */
    .footer_inner{margin: 0 5%;flex-wrap: wrap;}
    .footer_logo{width: 50%;margin: 0 auto;order: 2;margin-top: 30px;}
    .footer_left{width: 100%;margin-left: 0;order: 1;margin-top: 50px;}
    .footer_right{width: 100%;order: 0;}
    .footer_right .family_site{width: 100%;}
    .footer_right ul{width: 100%;}
     /*--------------------- fix-btn 시작 --------------------- */
    .fix-btn{bottom: 400px;}
}
@media (min-width: 769px) and (max-width: 1200px){
    html,body{font-size: 14px;}
    .scrollbar-track.show, .scrollbar-track:hover{opacity: 0!important}
    section{margin: 7%;}
    .title{font-size: 40px;}
    .sub_title{font-size: 16px;}
    #mouse-cursor{display: none!important;}
    /*--------------------- main_visual 시작--------------------- */
    .main_visual .bg_box{width: 600px;height: 350px;}
    @keyframes boxfull{100%{width: 105%; height: 105%;}}
    .main_visual .bg_txt{top:20%}
    .main_visual .bg_txt .content{font-size: 420px;}
    .main_visual .visual_txt{width: 100%;}
    .main_visual .visual_txt h2{font-size: 50px;}
    /*--------------------- about 시작 --------------------- */
    .about{margin-top: 150px;}
    .about .about_box{margin-top: 120px;}
    .about .about_box .box{padding: 3%;}
    .about .about_box .box span{font-size: 16px;}
    .about .about_box .box strong{font-size: 20px;}
    .about .about_box .box p{word-break: keep-all;}
    .about .about_box .box span::before{width: 40px; height: 40px;background-size: cover!important;}
    /*--------------------- wedo 시작 --------------------- */
    .wedo{margin-top: 150px;}
    .wedo .object{top: -72px;}
    .wedo .wedo_box {grid-template-columns: 1fr 1fr;}
    .wedo .wedo_box .box{height: 170px;border-bottom: none!important;}
    .wedo .wedo_box .box:nth-child(5){border-right: none;}
    .wedo .wedo_box .box:nth-child(2),.wedo .wedo_box .box:nth-child(4),
    .wedo .wedo_box .box:nth-child(6),.wedo .wedo_box .box:nth-child(8){border-right: 1px solid #eee;}
    .wedo .wedo_box .box:nth-child(9),.wedo .wedo_box .box:nth-child(10){border-bottom: 1px solid #eee!important;}
    .wedo .wedo_box .box h6{top:30%;font-size: 20px;}
    .wedo .wedo_box .box::after{top:25%}
    /*--------------------- portfolio 시작 --------------------- */
    .portfolio{margin-top: 150px;}
    .portfolio .sub_title{margin-bottom: 50px;}
    .portfolio .con .item .txt_box span{font-size: 14px;}
    .portfolio .more_btn{margin: 50px auto;}
    /*--------------------- modal 시작 --------------------- */
    .modal .swiper .info_fix{left: auto;right: 20px;top: 20px;width: 30%;max-width: 300px;}
    .modal .swiper .info_fix .info_right li{margin-bottom:10px;}
    .modal .swiper .info_fix .info_left li{margin-bottom:10px; }
    .modal .swiper .swiper-wrapper .swiper-slide{flex-wrap: wrap; align-content:flex-start}
    .modal .swiper .swiper-wrapper .swiper-slide .desc{width: 100%;height: 170px;padding: 30px;border-bottom: 1px solid #000;border-right: none;}
    .modal .swiper .swiper-wrapper .swiper-slide .img{height: calc(100vh - 340px);width: 100%;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt{bottom: 30px;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt .sub_txt{font-size: 12px;}
    .modal .swiper .swiper-wrapper .swiper-slide .img .img_box .img_txt .main_txt{font-size: 16px;margin-top: 5px;}
    /*--------------------- marquee 시작 --------------------- */
    .marquee p {font-size: 100px;}
    /*--------------------- with 시작 --------------------- */
    .with {margin-top: 150px;}
    .with .sub_title{margin-left: 10px;}
    .with .brand_area{margin:50px 0px;}
    .with .brand_area .brand{padding: 15px;width: calc(100% / 4);}
    .with .brand_area .brand img{width: 100%;}
    /*--------------------- contact 시작 --------------------- */
    .contact{margin-top: 150px;padding: 50px 0;}
    .contact .title{margin: 0 7%;}
    .contact .title img{width: 28px;margin-left: 10px;}
    .contact>div{margin: 0 7%;}
    .contact ul{padding: 50px;}
    /*--------------------- footer 시작 --------------------- */
    .footer_inner{margin: 0 7%;}
    .footer_left{width: 70%;}
    .footer_right{width: 30%;}
    .footer_right .family_site{width: 180px;}
    .footer_right ul{width: 180px;}
}