/* PC 반응형 */



@media screen and (max-width: 1680px) {
  
  html {font-size: 16px !important;}
  
}


@media screen and (max-width: 1440px) {
    
  html {font-size: 15px!important;}

}


@media screen and (max-width: 1366px) {
    
  html {font-size: 14.5px !important;}

}


@media screen and (max-width: 1200px) {
    
  html {font-size: 14px !important;}

  /*main0*/
  .txt_box::before{left: 34%; top: 60%}
  .txt_box::after{top: 59%;}
  .swiper-slide1 .txt_box::before{width: 26%;}
  .swiper-slide2 .txt_box::before{width: 61%;}
  .swiper-slide3 .txt_box::before{width: 6%;}
  @keyframes ms1_line1 {
    0% { width: 0%;}
    100% { width: 26%; }
  }
  
  @keyframes ms1_line2 {
    0% { width: 0%;}
    100% { width: 61%; }
  }
  
  @keyframes ms1_line3 {
    0% { width: 0%;}
    100% { width: 6%; }
  }

  /*main1*/
  #main1 .swiper{width: 45%;}

  /*main2*/
  .m2_ul > li{vertical-align: middle;}
  

}


@media screen and (max-width: 1075px){
  
  /*    sub 1  */

  /*s111*/
  .s111_left{padding-left: 10%;}
  .s111_tit{font-size: 1.5rem;}

  /*s113*/
  .m113_ul li .m113_con p{font-size: 1.2rem;}
  .m113_ul li .m113_con span{font-size: 0.9rem;}
}






    
/* mobile */
@media screen and (max-width: 1025px) {
  /* .pc {display: none;}
  .mob {display: block;} */
  html, body {  min-width: auto;}
  #header {  min-width: auto;}

  html {font-size: 18px !important;}    
  body.hideen { position: fixed; overflow: hidden;}


    
  /*    header   */
  .nav_ul li{font-size: 0.7rem;}


  /*    footer   */
  
  
  /*    main   */
  
  /*main0*/
  .txt_box .tit{font-size: 2.8rem;}

  /*main3*/
  .m3_menu li .txt_wrap p{font-size: 1rem;}



  /*    sub    */


  /*    sub 1  */


  /*    sub 2  */

  /*s_2_1*/
  .pro_list li{width: 50%;}
  .pro_list li:nth-child(3n) a{border-right: 1px solid #ddd;}
  .pro_list li:nth-child(2n) a{border-right: 0;}

  /*s_2_1_1*/
  .pro_v_top li.pro_v_txt .pro_v_name{font-size: 2.5rem;}

  /*s_2_3*/
  ul.tabs li{padding: 20px 0; font-size: 0.9rem;}

  /*    sub 3  */

  /*s321*/
  .s321_item p.s321_item_top .s321_more{position: static; display: block; margin-top: 15px;}
  .s321_item p.s321_item_top .s321_more span{margin-right: -80px;}


  /*    sub 4  */


  

  /*    board  */

  
    



  /*    sitemap  */



  /*  font-size  */
   

    
}
    


@media screen and (max-width: 768px) {
  
  html {font-size: 16px !important;}  

  .mob{display: block;}

  /*    header   */
  .header_inner > div.nav_box{display: none;}
  #lang{display: none;}


  .nav_box2{background: #fff;}
  .nav_box2 img:first-child{display: block; position: absolute; left: 26px; top: 18px; z-index: 999;}
  .nav_box_deco{z-index: 999;width: 100%;bottom: -10%;right: -70px;}
  .nav_box2 .nav_box2_cont{position: relative; left: 0; top: 0; transform: translate(0, 0); margin-top: 60px; width: 100%; max-width: 100%; height: 100%; background: #018092; text-align: left;}
  .nav_box2 .nav_box2_cont ul{width: 100%;}
  .nav_box2 .nav_box2_cont ul#nav2 > li{display: block; width: 100%; transition: all 0.4s;}
  .nav_box2 .nav_box2_cont ul#nav2 > li::before{display: block;position: absolute;content: '';right: 38px;top: 24px;width: 2px;height: 18px;margin-top: -1px;background: #fff;transition: all 0.4s;}
  .nav_box2 .nav_box2_cont ul#nav2 > li::after{display: block;position: absolute;content: '';right: 30px;top: 31px;width: 18px;height: 2px;background: #fff;}
  .nav_box2 .nav_box2_cont ul#nav2 > li.open::before{transform: rotate(-90deg);}
  .nav_box2 .nav_box2_cont ul#nav2 > li.open::after{display: none;}
  .nav_box2 .nav_box2_cont ul#nav2 > li > .tit{padding: 20px 30px;margin-bottom: 0;border-bottom: 1px solid rgba(211,211,211,0.3);text-align: left;font-size: 1.2rem;font-weight: 400;opacity: 1;}
  .nav_box2 .nav_box2_cont ul#nav2 > li > .tit::after{display: none;}
  .nav_box2 .nav_box2_cont ul#nav2 button{z-index: 10; cursor: pointer;}
  ul.nav_ul2{display: none; position: relative; padding: 16px 30px; width: 100%; background: #fff; z-index: 99999;}
  ul.nav_ul2 li{margin: 0;}
  ul.nav_ul2 li a{display: block; text-align: left; font-size: 1rem; color: #018092; font-weight: 400; line-height: 2.35rem;}
  ul.nav_ul2 li:hover a{border-bottom: 1px solid transparent; color: #018092;}

  .nav_box2 #lang{display: inline-block;margin-left: 30px;margin-top: 30px;width: auto;height: auto;background: #fff;border-radius: 30px;}
  .nav_box2 #lang li{padding: 5px 20px;}
  .nav_box2 #lang li a{display: block; color: #018092; font-weight: 400;}
  #lang li:first-child::after{background-color: #018092;}
  
  
  /*    footer   */
  .footer_inner{padding: 100px 0 8vh;}
  .logo{width: 100%; text-align: center;}
  .logo > a > img{display: block; margin: auto;}
  .logo .info{display: block;margin: 4vh auto 0;width: 100%;text-align: left;}
  .footer_inner > .f_nav_wrap{position: absolute; top: 50px; left: 0; width:100%; margin-left: 0; text-align: center;}
  .f_nav > li{width: 25%; text-align: center; font-size: 1rem;}
  .f_nav > li ul.f_nav2{display: none;}
  .logo .info p{font-size: 1rem; line-height: 1.5; margin-top: 12px;}
  .logo .info p span i{display: inline-block;}
  .logo .info p span i:first-child{margin-right: 10px;}


  
  /*    main    */

  /*main0*/

  .swiper-slide2{background-position: 68% center;}

  .txt_box .tit{margin-bottom: 50px;}
  .txt_box::before{left: 0; top: 67%}
  .txt_box::after{top: 67%; transform: translate(0, -50%);}
  .swiper-slide1 .txt_box::before{width: 70%;}
  .swiper-slide2 .txt_box::before{width: 96%;}
  .swiper-slide3 .txt_box::before{width: 40%;}
  @keyframes ms1_line1 {
    0% { width: 0%;}
    100% { width: 70%; }
  }
  
  @keyframes ms1_line2 {
    0% { width: 0%;}
    100% { width: 96%; }
  }
  
  @keyframes ms1_line3 {
    0% { width: 0%;}
    100% { width: 40%; }
  }
  .swiper-slide1 .txt_box::after{left: 70%;}

  /*main1*/
  #main1{padding: 15vh 0 10vh;}
  .m1_bg{width: 50%;}
  .main1_txt{width: 100%;}
  .txt_box .tit{font-size: 2.5rem;}
  #main1 .swiper{width: 100%;margin: 40vh 0 6vh;}
  a.morebox{margin: auto;}
  .m1_img{left: 50%;top: 34%;transform: translate(-50%, 0);width: 100%;max-width: 460px;height: 100%;max-height: 250px;}

  /*main2*/
  #main2{margin-bottom: 10vh;}
  .m2::before{width: 100%; height: 55%; border-bottom-right-radius: 200px;}
  .m2_ul .m2_txt{width: 100%;}
  .m2_ul .m2_txt .m2_txt_bot > p:last-child{margin: 3vh 0 5vh;}
  a.morebox2{margin: auto;}
  .m2_ul .m2_slide{width: 100%; margin-top: 6vh;}
  .m2_ul .m2_slide .swiper-container{position: relative;}
  .m2_slide_btnbox{position: absolute; bottom: -45px;}


  /*main3*/
  .m3_menu{flex-wrap: wrap;}
  .m3_menu li{width: 50%;}
  .m3_menu li:nth-child(2){border-right: 0;}
  .m3_menu li:nth-child(3), .m3_menu li:nth-child(4){border-top: 0;}
  .m3_viewmore{margin-top: 10vh;}







  

  /*   sub   */

  .sub{margin-bottom: 16vh;}
  .subtop_txt p:first-child{font-size: 2.5rem;}
  .subtop_txt .mob{display: block;}

  /*sub_path*/
  .sub_path{display: none;}
  .lnb-topbar{display: block;}

  /*    sub 1  */

  /*s111*/
  .s111 > div{display: block; width: 100%;}
  .s111_img{margin-top: 7vh;}

  /*s112*/
  .s112 > div{display: block; width: 100%; max-width: 600px; margin: auto;}
  .s112 .s112_right{margin-top: 6vh; text-align: center;}
  .s112_right p.s111_tit{margin: 0 0 2.5vh;}

  /*s113*/
  .line{bottom: 50%; left: 50%; transform: translate(-50%, 0) rotate(90deg); width: 170%;}
  .m113_ul li{display: block; margin-top: 10vh; padding: 5vh 0; width: 100%;}
  .m113_ul li:first-child{margin-top: 0;}
  .m113_ul li::after{left: 50%; top: 112%; transform: translate(-50%, 0);}

  /*s121*/
  .his_cont_wrap{width: 90%; margin-right: 0;}
  .s121_banner{background-position: 65% center;}

  /*s131*/
  .map_ul li.map_right{padding-left: 20%;}
  .map_ul li.map_right p span{display: block; margin-right: 0; margin-bottom: 1.5vw;}


  /*    sub 2  */
  
  /*sub_2_1_1*/
  .sub_2_1_1{background: transparent;}
  .pro_view.pro_view1{margin-top: 0; padding-top: 14vh;}
  .pro_view{margin: 10vh 0 10vh; padding-bottom: 10vh;}
  .pro_v_top li{display: block; width: 100%;}
  .pro_v_top li.pro_v_txt{padding-right: 0;}
  .pro_v_top li.pro_v_img{margin-top: 7vh;}
  .pro_v_top li.pro_v_txt .pro_v_name .pc{display: none;}

  .pro_v_top li.pro_v_txt .pro_v_desc::before{top: 50%; transform: translate(0, -50%);}
  .pro_v_top li.pro_v_txt .pro_v_desc::after{top: 50%; transform: translate(0, -50%);}

  .pro_v2_list li{width: 100%;}
  .pro_v2_list li .pc{display: none;}

  .pro_v3_table th span{display: block; margin-left: 0;}

  .pro_v3_table th{padding: 20px 15px; line-height: 1.7;}

  /*pro_view3*/
  .compare_ul > li{display: block; width: 100%; max-width: 100%;} 
  .compare_ul > li.compare_tit{width: 100%; max-width: 100%;}
  ul.tabs{font-size: 0; height: 90px;}
  ul.tabs li{display: inline-block; padding: 25px 0; width: 25%; height: 100%; border-bottom: 0; border-right: 1px solid #ddd; vertical-align: middle;}
  ul.tabs li:last-child{padding: 35px 0; border-right: 0;}

  .compare_ul > li.compare_con{width: 100%; margin-top: 5vh;}


  /*    sub 3  */

  /*s321*/
  .s321::before{display: none;}
  .s321_ul .s321_left{display: block; width: 100%; padding: 0;}
  .s321_ul .s321_right{display: block; width: 100%; margin-top: 7vh;}
  .s321_item p.s321_item_top .pc{display: none;}


  /*s322*/
  .s321{background-position: left top; background-size: 80%;}
  .s322 .swiper-slide{width: 50%;}

  .s3_pop .inner .pop_txtbox img{display: block; margin-right: 0; margin-bottom: 15px;}
  .s3_pop .inner .pop_txtbox p.info_txt{display: block; width: 100%;}

  .s3_pop .inner .pop_imgbox{overflow-x: auto; height: 70%;}
  .s3_pop .inner .pop_imgbox img{min-width: 700px;}


  .s3_pop .inner .mob{display: block;}

  /*s331*/  
  .s331_con .s331_imgbox{height: auto;}

  /*    sub 4  */

  






  /*    board  */

}

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

  /*s211*/
  .pro_list li{width: 100%;}
  .pro_list li:nth-child(2n-1) a{border-right: 0;}
}

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

  /*s131*/
  .map_ul li{display: block;}
  .map_ul li.map_left{width: 100%; text-align: center; margin-bottom: 7vh;}
  .map_ul li.map_right{width: 100%; padding-left: 0;}
}

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

  /*s121*/
  .data p.desc span.date{margin-right: 30px;}
  .his_cont{padding-left: 10%;}
  .his_cont_wrap::before{left: calc(10% + 127px);}
  .s121_banner .banner_txt{left: calc(10% + 90px);}
  
}

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

  /*pro_view3*/
  ul.tabs{height: auto;}
  ul.tabs li{width: 50%; height: 65px; padding: 15px 0;}
  ul.tabs li:last-child{padding: 25px 0;}
  ul.tabs li:nth-child(2){border-right: 0;}
  ul.tabs li:nth-child(1), ul.tabs li:nth-child(2){border-bottom: 1px solid #ddd;}
}

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

  /*s121*/
  .data p.desc{top: 12px;}
  .data p.desc span.date{margin-right: 0; margin-bottom: 12px;}
  .data p.desc span:last-child{display: block;}
  .data p.desc::before{top: 26%;}
  .data p.desc::after{top: 26%;}
  .his_cont_wrap::before{top: 25px; height: calc(100% - 25px);}
}

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

  html {font-size: 15px !important;}

  /*    header   */

  /*    footer   */

  /*    main    */

  /*m0*/
  .swiper-slide1{background-position: 52% center;}
  .swiper-slide2{background: url('../img/ms1_img2_1.png') 68% center no-repeat;}
  .swiper-slide3{background-position: 40% center;}


  /*   sub   */


  /*    sub 1  */



  /*    sub 2  */



  /*    sub 3  */

  /*s3_pop*/
  .s3_pop .inner{padding: 7vh 0 9vh}
  .s3_pop .inner .pop_txtbox img{display: none;}
  .s3_pop .s3_prev, .s3_pop .s3_next{top: 94%; font-size: 32px;}
  .s3_pop .s3_prev{left: 9%;}
  .s3_pop .s3_next{right: 9%;}

  /*s322*/
  .s322 .swiper-wrapper{flex-wrap: wrap;}
  .s322 .swiper-slide{display: block; width: 100%; margin-right: 0;}
  .s322 .swiper-slide:nth-child(2){margin-top: 5vh;}

  .s322_pop .inner .pop_imgbox{height: 80%;}



  /*    sub 4  */




  /*    board  */

    

  /* font-size  */




    

}

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

  /*sub_2_1_1*/
  .pro_v_top li.pro_v_img .pro_v_btn{margin-top: 40px;}
  .pro_v_top li.pro_v_img .pro_v_btn a{display: block; margin: auto;}
  .pro_v_top li.pro_v_img .pro_v_btn a:first-child{margin: 0 auto 25px;}
}

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

  .swiper-slide3 .txt_box::before{width: 60%;}
  .swiper-slide3 .txt_box::after{left: 60%;}

  @keyframes ms1_line3 {
    0% { width: 0%;}
    100% { width: 60%; }
  }


  .txt_box .tit{font-size: 2rem;}
  .txt_box .con{margin-bottom: 15px;} 

  .txt_box::before{top: 60%;}
  .txt_box::after{top: 60%;}

  .scroll{left: 50%; transform: translateX(-50%);}
  .scroll .scroll_p{transform: rotate(0);}
  .scroll .scroll_img{margin-top: 10px;}

  /*m1*/
  .main1_txt p:nth-child(3)::before, .m2_ul .m2_txt .m2_txt_bot > p:first-child::before{width: 40px; top: 10px;}
  .main1_txt p:nth-child(3), .m2_ul .m2_txt .m2_txt_bot > p:first-child{padding-left: 60px;}

  /*m3*/
  .m3_menu li{width: 100%; height: 260px;}
  .m3_menu li:nth-child(2){border-top: 0;}
  .m3_menu li:nth-child(1), .m3_menu li:nth-child(3){border-right: 0;}


  /*pro_view3*/
  ul.imgbox li{display: block; width: 100%;}
  ul.imgbox li:first-child{margin-right: 0; margin-bottom: 5%;}


}


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

  /*s113*/
  .s113_tit{font-size: 1.5rem;}
}

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

  /*s121*/
  .data p.desc{padding-left: 65px;}
  .data p.desc::before{width: 40px;}
  .data p.desc::after{left: 40px;}
}

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

  html { font-size: 14px !important;}





    


}