@media (max-width: 1199px) {
    #header .ci{left:15px; top:20px; margin:0}
    #header .sns{right:15px; top:20px; margin:0}
    .bod_wrap{width:100%; padding-left:15px; padding-right:15px; box-sizing:border-box}
    .footer{width:100%; padding-left:15px; padding-right:15px; box-sizing:border-box}
    
    #header{height:70px}
    #header .ci a{height:30px; background-position:bottom}
    #header .gnb{margin-top:22px}
    #header .gnb a{font-size:16px}
    #header .gnb a:before{bottom:-16px}
    
    #header .sub_menu{top:70px}
    #header .sub_menu ul.depth-1{margin-left:-292px}
    #header .sub_menu ul.depth-2{margin-left:-195px}
    #header .sub_menu ul.depth-3{margin-left:-90px}
    #header .sub_menu ul.depth-4{margin-left:10px}
    
    .visual h1{margin-top:260px}
    
    .mbanner .swiper-slide .banner_2.tal h1{left:60px; margin-left:0}
    .mbanner .swiper-slide .banner_2.tal p{left:60px; margin-left:0}
    .mbanner .swiper-slide .banner_2.tal a{left:60px; margin-left:0}

    
    .mport .swiper-container2{width:100%; padding:0 15px; box-sizing:border-box}
    .mport .swiper-slide>div{width:100%; height:100%}
    .mport .swiper-button-prev{left:0%; margin-left:10px}
    .mport .swiper-button-next{right:0%; margin-right:10px}
    
    .mservice{padding:100px 15px; box-sizing:border-box}
    .mservice .title{margin-bottom:30px}
    .mservice .swipe_wrap{position:relative; top:0; width:100%; overflow:visible}
    .mservice .swiper-container3{overflow:hidden}
    
    .mproduct .swiper-slide .swipe_img{width:50%; margin-left:0}
    .mproduct .swiper-slide .swipe_img img{display:block; width:100%}
    
    .mproduct .swiper-slide .swipe_con{background:#f4f5f9; width:50%; margin-top:0; margin-left:0px; padding:20px; box-sizing:border-box}
    .mproduct .swiper-slide .swipe_con .bod_btn{bottom:30px}
        
    .mproduct .swiper-button-prev{display:none}
    .mproduct .swiper-button-next{display:none}
    
    
    .mservice .swiper-scrollbar{display:block}
    .mservice .swiper-container-horizontal>.swiper-scrollbar{width:auto; bottom:-15px; left:0; right:0}
    
    .mservice .service_bg{display:none}
    .swipe_bg{display:none}
    
    
    .swipe_bg{width:100%}
    .swipe_bg .area_l{width:33.33%}
    
    .mcontact>div{width:100%}
    .mcontact>div>div{padding:20px}
    .mcontact .pphone .bod_btn{bottom:20px}
    
    .mpress .press_wrap{width:100%; padding:0 15px; box-sizing:border-box}
    .mpress .press_wrap>div{width:32%}
    
    
    /* sub */
    .greeting .gt_con{width:100%; padding:0 15px; box-sizing:border-box}
    .greeting .gt_con .gt_img{width:50%}
    .greeting .gt_con .gt_img img{width:100%}
    .greeting .gt_con .gt_img:before{top:100px; left:50%; margin-left:-500px; width:100%; height:100%;}
    
    
    .history{margin-top:0}
    .history .his_con>div{width:100%}
    .history .his_con .his_img{width:40%}
    .history .his_con .his_img img{width:100%}
    
    
    .client ul{width:100%; padding:0 15px; box-sizing:border-box}
    
    .location .map_wrap{width:100%; padding:0 15px; box-sizing:border-box}
    
        
    .riupack{width:100%; padding:100px 15px 0 15px; box-sizing:border-box}
    .riupack .riu_wrap{width:100%}
    .riupack .riu_wrap .riu_img{width:45%; bottom:-100px; left:auto; right:0}
    .riupack .riu_wrap .riu_img img{width:100%}
    
    
    .riupack .riu_panel{width:100%}
    
    .poss-2 .poss_panel{width:100%; padding:0 15px; box-sizing:border-box}
    
}

@media (max-width: 1020px) {
    .mbanner{height:600px}
    .mbanner .swiper-slide>div{height:600px}
    .mbanner .swiper-slide .mban{padding-top:200px}
    
    
    .mport .swiper-slide a p{margin-top:80px}
    .mport .arr_bt{width:60px; height:60px}
    .mport .arr_bt:hover{opacity:1}
    .mport .arr_bt img{width:20%; margin-top:18px}
    .mport .swiper-button-prev{margin-top:30px}
    .mport .swiper-button-next{margin-top:30px}
    
    
    .mcontact>div{width:100%}
    .mcontact .pphone dd{font-size:30px}
    
    
    /* sub */
    .riupack .riu_wrap .riu_con{padding:50px}
    .riupack .riu_wrap .riu_img{width:40%; overflow:hidden}
    .riupack .riu_wrap .riu_img img{width:100%}
    
    .greeting .gt_con{display:block}
    .greeting .gt_con .gt_info{width:100%}
    .greeting .gt_con .gt_info h1 br{display:none}
    .greeting .gt_con .gt_info>div{width:50%}
    
    .greeting .gt_con .gt_img{position:absolute; top:170px; right:15px; width:48%; height:45%}
    
    
    .bod_portfolio li a p{margin-top:40px}
    
}

@media (max-width: 950px) {
    #header .dropdown-hover{display:none}
    #header .sns{display:none}
    .b_menu{display:block}
    
    .page-sidebar-toggled #header .nav{display:block; position:fixed; left:0; right:0; top:70px; display:block; background:#fff; height:100%}
    .nav .has-sub{border-bottom:1px solid #e9e9e9; overflow:hidden}
    .nav .has-sub>a{position:relative; display:block; text-align:left; font-size:18px; color:#222; height:50px; line-height:50px; margin-left:40px}
    .nav .has-sub>a span{position:absolute; top:25px; right:40px; display:block; background:#222; width:10px; height:2px}
    .nav .has-sub>a span:nth-child(2){transform:rotate(90deg)}
    
    .nav .sub-menu{display:none; border-top:1px solid #e9e9e9}
    .nav .sub-menu.expand{display:block}
    .nav .sub-menu a{display:block; text-align:left; font-size:14px; color:#888; height:40px; line-height:40px; margin-left:40px}
    
    .nav .has-sub.expand{display:block}
    .nav .has-sub.expand>a span:nth-child(2){transform:rotate(0deg); background:#f94c43}
    
    
    /* sub */
    .riupack .riu_panel>div{padding:30px 20px}
    .poss-2 .poss_panel>div{padding:30px 20px}
    .poss .poss_img>div img{width:100%}
    
    .greeting .gt_con .gt_info p.gt_t_2{font-size:14px; line-height:25px}
    .greeting .gt_con .gt_img:before{top:100px; left:-500px; display:block; width:100%; height:100%; background:#f9f9f9}
    
       
    .client li{width:16.66%; border-right:1px solid #e7e8ee}
    /*.client li img{width:70%}*/
    
    .bod_thumb .tmb_bg{width:20%; margin-right:15px}
    .bod_mov li{width:49%; margin-right:2%}
    .bod_mov li:nth-child(3n){margin-right:2%}
    .bod_mov li:nth-child(2n){margin-right:0}
    
    .bod_portfolio li a h3{font-size:20px}
    .bod_portfolio li a .arrow_bt{margin-top:15px}
    
}

@media (max-width: 768px) {
    .mbanner{height:450px}
    .mbanner .swiper-slide>div{height:450px}
    .mbanner .swiper-slide .mban{padding-top:160px}
    .mbanner .swiper-slide .mban h1{font-size:40px; line-height:50px}
    .mbanner .swiper-slide .mban p{margin-top:20px; font-size:18px}
    .mbanner .btn_white{margin-top:30px}
    
    .mport{overflow:visible}
    .mport .swiper-container2{overflow:hidden}
    .mport .swiper-slide a .mport_con>div{background:none; opacity:1; text-align:left}
    .mport .swiper-slide a p{color:#222; font-size:14px; margin-top:20px; margin-left:20px}
    .mport .swiper-slide a h2{color:#222; font-size:18px; font-weight:400; margin-left:20px}
    .mport .swiper-slide a .arrow_bt{display:none}
    .mport .swiper-slide a:hover .mport_con>div{background:rgba(0,0,0,0); opacity:1}
    
    .mport .swiper-slide a .mport_con>div{display:block}
    
    
    .mport .swiper-scrollbar{display:block}
    .mport .swiper-container-horizontal>.swiper-scrollbar{width:auto; bottom:-15px; left:15px; right:15px}
    .mport .swiper-button-prev{display:none}
    .mport .swiper-button-next{display:none}
    
    .mproduct .swiper-slide .swipe_con h4{font-size:18px}
    .mproduct .swiper-slide .swipe_con p{font-size:14px; font-weight:400; line-height:20px}
    
    
    .mcontact dd{font-size:14px; line-height:20px; margin-top:5px}
    
    .visual{height:400px}
    .visual h1{font-size:45px; margin-top:210px}
    
    
    /* sub */
    .riupack .riu_wrap .riu_con h1{font-size:30px}
    .riupack .riu_wrap .riu_con p{font-size:16px; margin-top:30px; line-height:25px}
    
    
    .location .map_con .map_btn{top:-50px; right:10px; background:#183aa4; width:100px; height:100px; text-align:center; color:#fff}
    
    .bod_portfolio li a>div{display:none}
    
}

@media (max-width: 767px) {
    .mproduct .swiper-slide{display:block}
    .mproduct .swiper-slide .swipe_img{width:100%; box-sizing:border-box}
    .mproduct .swiper-slide .swipe_con{width:100%}
    .mproduct .swiper-slide .swipe_con{padding-bottom:80px}
    
    
    .mcontact>div{display:block}
    .mcontact>div>div{width:100%; padding:30px; box-sizing: border-box}
    .mcontact .pphone .bod_btn{position:relative; bottom:0}
    
    
    /* sub */
    .greeting .gt_con{display:block}
    .greeting .gt_con .gt_info{width:100%}
    .greeting .gt_con .gt_info>div{width:100%}
    .greeting .gt_con .gt_info h1{font-size:30px; line-height:40px}
    .greeting .gt_con .gt_info h1 br{display:none}
    .greeting .gt_con .gt_img{position:inherit; top:0; right:0; width:100%; height:450px; margin-top:20px; overflow:hidden}
    .greeting .gt_con .gt_img img{position:absolute; top:50%; transform:translate(0, -50%)}
    .greeting .gt_con .gt_img:before{background:none}
    
    .poss-2 .poss_panel i{width:100%; height:180px}
    
    .location .map_con .map_btn{top:auto; bottom:-20px; right:10px}
    .location .map_con .map_btn:hover{top:auto}
    
    
    .bod_portfolio li{width:33.33%}
    
    .bod_view .bod_head{justify-content:flex-start; flex-wrap:wrap}
    .bod_view .bod_head h5{width:100%}
    .bod_view .bod_head span{width:100%; margin:10px 0 0 30px}
    .bod_view .bod_con{padding:0; padding-bottom:30px}
    .bod_view .bod_foot>div{padding:20px 10px}
    .bod_view .bod_foot p{margin-right:20px}
}

@media (max-width: 640px) {
    .mport .swiper-button-prev{margin-top:60px}
    .mport .swiper-button-next{margin-top:60px}
    
    
    /* sub */
    .riupack .riu_panel{display:block}
    .riupack .riu_panel>div{width:100%; padding:20px 15px; margin-bottom:15px}
    .riupack .riu_panel h3{color:#222; margin:20px 0 10px 0}
    
    .riupack .riu_wrap{padding-bottom:50px}
    .riupack .riu_wrap .riu_img{width:50%}
    
    .poss-2 .poss_panel{display:block}
    .poss-2 .poss_panel>div{width:100%; margin-bottom:15px}
    .poss-2 .poss_panel i{width:190px; height:205px}
    .poss-2 .poss_panel h4{margin:10px 0}
    
    .poss .poss_img{display:none}
    .poss .poss_respon{display:block}
    
    
    .history .his_con>div{margin-bottom:50px}
    .history .his_con:before{left:20px; width:1px; height:86%; background:#e9e9e9}
    .history .his_con i{position:absolute; left:20px}
    .history .his_con .his_img{padding:0 15px; box-sizing:border-box}
    .history .his_con .his_img:before{background:none}
    .history .his_con .his_2022 .his_img{position:relative; left:0; width:100%; margin-top:30px}
    .history .his_con .his_2022 .his_txt{left:0; padding-left:60px}
    .history .his_con .his_2021 .his_img{position:relative; left:0; right:auto; width:100%; margin-top:30px}
    .history .his_con .his_2021 .his_txt{display:block; left:0; right:auto; height:auto; padding-left:60px; text-align:left}
    .history .his_con .his_2021 em{float:none; margin-left:0; margin-right:20px}
    .history .his_con .his_2020 .his_img{position:relative; left:0; width:100%; margin-top:30px}
    .history .his_con .his_2020 .his_txt{left:0; padding-left:60px}
    .history .his_con .his_2019 .his_img{position:relative; left:0; right:auto; width:100%; margin-top:30px}
    .history .his_con .his_2019 .his_txt{display:block; left:0; right:auto; padding-left:60px; text-align:left}
    .history .his_con .his_2019 em{float:none; margin-left:0; margin-right:20px}
    .history .his_con .his_2017{text-align:left}
    .history .his_con .his_2017 h2{top:-13px; margin:0}
    .history .his_con .his_2017 p{font-weight:400; color:#222; margin:0; margin-top:10px}
    .history .his_con .his_2017>div{margin-left:60px}
   
    
    .client li{width:25%; height:auto}
    .client li img{width:80%}
    
    .location .map_wrap li{display:block}
     
    
    .bod_contact .input_wrap>div{width:100%}
    .pop-window>div{width:90%}
    
    .bod_search p{display:none}
    
    .bod_search .con_search{width:100%}
    .bod_search .con_search>div{display:block; width:100%}
    .bod_search .con_search select{width:100%; margin-bottom:10px}
    .bod_search .con_search input{width:100%}
    
    .bod_list table th:nth-child(1){display:none}
    .bod_list table td:nth-child(1){display:none}
    .bod_list table td:nth-child(3){width:22%}
        
    .bod_view .bod_head h5{margin-left:0}
    .bod_view .bod_head span{margin-left:0}
    .bod_btn .fr,.bod_btn .tac{width:100%}
    .bod_btn .fr a.btn,.bod_btn .tac button{display:block; width:100%; height:50px; line-height:50px}
    
    .bod_thumb .tmb_bg{width:30%}
    
    .bod_btn{display:block; width:100%; height:50px}
    .bod_btn .tac{width:100%}
    .btn div{top:17px}
    
    .paging>div{display:none}
    
    .footer{display:block; text-align:center}
    .footer .foot_bi{margin:0 auto; margin-bottom:30px}

	/*20220401_add*/
	.history .his_con .his_img{display:block}
	.history .his_con .his_img:before{display:none}
}

@media (max-width: 480px) {
    .title{margin-bottom:30px}
    .title h4{font-size:14px}
    .title h1{font-size:30px}
    
    .mbanner .swiper-slide .mban{padding-top:160px}
    .mbanner .swiper-slide .mban h1{font-size:30px; line-height:40px}
    .mbanner .swiper-slide .mban p{margin-top:15px; font-size:16px}
    .mbanner .btn_white{margin-top:20px}
     
    /*.mbanner .swiper-slide .banner_2{background-position:-450px 0}*/
    .mbanner .swiper-slide .banner_2.tal h1{left:50%; transform:translateX(-50%); text-align:center}
    .mbanner .swiper-slide .banner_2.tal p{left:50%; transform:translateX(-50%); text-align:center}
    .mbanner .swiper-slide .banner_2.tal a{left:50%; transform:translateX(-50%)}
    
    .mpress .press_wrap>div{width:48%}
    .mpress .press_wrap>div:nth-child(3){display:none}
    .mpress .press_wrap .press_tit{
        font-size:16px; margin-top:10px; line-height:20px; height:40px;
        word-break:break-all; white-space:normal; text-overflow:ellipsis; overflow:hidden;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
    }
    .mpress .press_wrap .press_con{display:none}
    .mproduct .swiper-slide .swipe_con h4{margin-bottom:15px}
    .mproduct .swiper-slide .swipe_con p{margin-bottom:15px}
    .subm a{width:100%}
       
    /* sub */
    .riupack .riu_wrap .riu_con{padding:30px}
    .riupack .riu_wrap .riu_con h1{font-size:20px}
    .riupack .riu_wrap .riu_con p{font-size:16px}
    
   
    .bod_thumb .tmb_bg{width:35%}
    .bod_thumb a p{display:none}
    
    .footer .copy .foot_mail{display:block}
    .footer .copy span{margin:0}
    .footer .copy span:first-child{margin-right:20px}
    .footer .copy span:before{background:none}
    .footer .copy span:first-child:before{background:#474d62}
    .footer .copy .foot_br{display:block}

}

@media (max-width: 414px) {
    .title h1{margin-top:10px; line-height:36px}
    .title h1 em{display:block}
    
    .mport .swiper-button-prev{margin-top:35px}
    .mport .swiper-button-next{margin-top:35px}
    
    
    /* sub */
    .riupack .riu_wrap .riu_img{width:75%}
    .riupack .riu_panel h3{margin:10px 0}
    
    
    .bod_thumb .tmb_bg{width:50%}
    .bod_portfolio li{width:50%}
    
}

@media (max-width: 360px) {
    
}

@media (max-width: 320px) {
    .mpress .press_wrap{justify-content:flex-start; flex-wrap:wrap}
    .mpress .press_wrap>div{width:100%; margin-bottom:20px}

}