/* mobile */


@media screen and (max-width: 1600px) {
    .m1-txt > p:nth-child(1) span { font-size: 45px;}
    .m1-txt > p:nth-child(1) {  font-size: 55px;  line-height: 65.39px; }
    .m1-txt {  left: 16%;}    
    .m1-txt > p:nth-child(3) { font-size: 16px; width: 90%; transform: skewX(-0.3deg)}    
    .m1-txt > p:nth-child(3) br {display: none;}
    
    .m3_ul > li:nth-child(1) {margin-top: 0px;}

    .m3_ul > li:nth-child(1) a > p { font-size: 55px;  line-height: 65.39px;}
    .m3_ul > li:nth-child(1) a > p span { font-size: 45px;}
    
        
}
  


@media screen and (max-width: 1480px) {
    #nav {max-width: 1000px;}
    .m2_ul_hover > p:nth-child(1) { font-size: 17px;  line-height: 23.99px; }        
    .m3_ul > li:nth-child(2) > p {  font-size: 19px;  line-height: 27px;  margin-bottom: 35px;   width: 90%;} 
    .m3_ul > li:nth-child(2) > p span.m3_ul_txt {  margin-left: 50px;}
    .m_title p:nth-child(1) { font-size: 18px;  line-height: 30.54px; }
    .m_title p:nth-child(2) {  font-size: 42px;  line-height: 52.39px; }
    .m2_ul_conbox > p {  font-size: 22px; }
        
    
}

@media screen and (max-width: 1280px) {
    .f_ul li p {  font-size: 13px; padding-left: 165px;}
    .f_ul li p span { padding-right: 15px;   width: 140px; }
    .f_ul li p span.color {  width: 80px; }
    .f_ul li:nth-child(2) p { padding-left: 110px; }
    .m3_ul > li:nth-child(2) > p {  font-size: 17px; } 
    
}


@media screen and (max-width: 1100px) {
    #nav { max-width: 910px;  padding-left: 140px;  padding-right: 60px;}
    .m3_ul > li:nth-child(2) > p {  margin-left: 20px;  font-size: 17px;  margin-bottom: 20px;}
    .m3_ul > li:nth-child(2) > p span.m3_ul_txt {  margin-left: 35px; }
    
}





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

    .pc {display: none !important;}
    .mob {display: block !important;}
    html,body {min-width: inherit}
    #header {min-width: inherit;}
    
    html { font-size:10px; }
    
    
/*    menu*/
    
    
    #header_inner { position: relative; margin: 15px 0px; padding-top: 0px;}
    
    #right_header {left: 4%; margin-top: 0px; width: auto; max-width: none;}
    #location { width: 100%; margin-right: 0; display: block; max-width: 85px;}
    #location span { font-size: 12px; line-height: 15px;}
    #location i { font-size: 10px;  margin-right: 4px;  color: #fff; line-height: 15px;}
    #lang {left: 5%; right: auto; max-width: 70px; top: 10px;}
    #lang li { font-size: 12px;  line-height: 15px;}
    
    #header_logo { width: 100%; max-width: 160px;  margin-left: 0px;  position: absolute; left: 50%;  top: 5%;  margin-top: 10px;  transform: translate(-50%, 0px); z-index: 10;}
    
    #nav {display: none; width: 100%; padding: 0px 35px; box-sizing: border-box; position: absolute;
    top: 58px;  left: 0px;  background-color: #666; margin-left: 0px; padding-bottom: 20px;}
    #nav > li {height: auto; width: 100% !important; color: #ffffff; margin-top: 0px; text-align: left; margin-bottom: 15px; font-size: 15px; transform: skewX(-0.3deg); font-weight: 800;}
    #nav > li:nth-child(1) {margin-top: 20px;}
    .nav_ul {padding: 10px 0px 0px; width: 90%; margin-left: 10%;}
    .nav_ul li {  font-size: 13px;  line-height: 25.55px; }
    
    #menu_icon { display: block;  position: absolute; width:100%;
    max-width: 25px;  right: 5%;  top: 0%;  margin-top: 13px;  z-index: 100;}
    #menu_icon img {width: 100%;}
    #open_btn {display: block;}
    #close_btn {display: none;}
   
    
    #fp-nav {top: auto; bottom: 10px;  transform: translateY(-0%) !important;}
    #fp-nav.fp-right { right: 5px;}
    #fp-nav ul li, .fp-slidesNav ul li { margin: 10px 15px;}
    
    
    .f_inner { padding-top: 25px; padding-bottom: 10px;}
    .f_inner > li:nth-child(1) { width: 50%;}
    .f_inner > li:nth-child(1) > img { width: 100%; max-width: 100px; margin: 0px auto;  display: block;}
    .f_inner > li:nth-child(2) { margin-left: 0%; width: 50%;}
    .f_inner > li:nth-child(2) p { font-size: 11px; line-height: 16px;}
    .f_inner > li:nth-child(3) { width: 60%;  display: block;  margin: 15px auto;}
    .f_sns {text-align: center;}
    .f_sns > li { width: auto; margin: 0px 5px; }
    .f_sns img { max-width: 25px;}
    .f_inner > li:nth-child(3) > p { text-align: center;  font-size: 11px;  line-height: 18px; padding-top: 5px;}
    .copy {  padding: 10px 0px;  font-size: 10px;  line-height: 15.96px; }
    
    
    
    
    
/*    main    */

    .main_div { height: 100vh;}
    .m0_txtbox > p:nth-child(1) { font-size: 12px;  margin-bottom: 0px;  line-height: 15px; }
    .m0_ul > li.m0_tab { font-size: 28px;  line-height: 35.72px; letter-spacing: 0.5px; padding: 20px 0px;}
    
    .m0_txt_change {  font-size: 14px;  line-height: 25.54px; width: 100%;}
    
    .m0_ul > li#m0_tab2::before, .m0_ul > li#m0_tab3::before  {  top: -3px;  width: 8px;  height: 8px;}
    
    #m0_sli2 { background-position: 74% center;}
    #m0_sli3 { background-position: 80% center;}
    
    
    .m1_cont { padding: 30px 0px;}
    .m1-txtbox {  width: 90%;  height: auto;  position: relative;
    left: auto;  top: auto;  z-index: 10;}
    .m1-txt { position: relative;  top: auto;  transform: none;  left: auto;}
    .m1-txt > p:nth-child(1) { font-size: 14px; line-height: 18.32px; }
    .m1-txt > p:nth-child(2) {  font-size: 24px; line-height: 31.39px; padding-top: 15px;}
    .m1-txt > p:nth-child(2) br {display: none}
    .m1-txt > p:nth-child(3) { font-size: 15px;  line-height: 22.54px;   padding-top: 10px; transform: skewX(-0.3deg);}
    .m1-txt > a:nth-child(3) { font-size: 14px;  line-height: 22.34px;  margin-top: 12px;  padding-bottom: 0px;  margin-bottom: 20px;  transform: skewX(-0.3deg);  display: block; }
    
    
    .m1-imgbox { width: 100%;  margin-left: 0; top: auto;  transform: none;}
    .m1_pro_img {  max-width: inherit;  padding-top: 20px;  padding-bottom: 20px; height: auto;}
    .m1_pro_img > img { max-width: 140px; margin: 0px auto 0px;}
    .m1_pro_img p:nth-child(2) span { font-size: 17px;  transform: skewX(-0.3deg);}
    .m1_pro_img p:nth-child(2) { font-size: 18px; line-height: 23.36px; padding-top: 15px;}
    
    
    .m1_pro_hover { opacity: 1;  width: 100%; max-width: inherit;  padding: 10px 10px;  bottom: 5%;  left: 0%;  text-align: center; position: relative;}  
    .m1_pro_hover p:nth-child(1) { display: none;}    
    .m1_pro_hover p:nth-child(2) { display: none; }
    .m1_pro_hover p:nth-child(3) { padding-top: 5px;  font-size: 13px;  line-height: 20.34px;  transform: skewX(-0.3deg);}
    
    
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next { display: none;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10%; left: auto;  top: 30%;}
    .swiper-button-next, .swiper-button-prev { max-width: 30px; }


    .m_title { margin: 70px auto 0px; }
    .m_title p:nth-child(1) { font-size: 16px;  line-height: 20.39px; transform: skewX(-0.3deg)}
    .m_title p:nth-child(2) {font-size: 25px;  line-height: 25.54px;}
    .m2_ul > li:hover { background-color: rgba(0,0,0,0);}
    .m2_ul_conbox { top: 70%; }
    .m2_ul_conbox > img { max-width: 40px;}
    .m2_ul_conbox > p { font-size: 13px; line-height: 20.65px;  padding-top: 5px;}
    .m2_ul_hover { opacity: 1; transition: all 0.4s;  position: relative;  bottom: 0%;  left: 50%;  transform: translateX(-50%);}
    .m2_ul_hover > p:nth-child(1) { font-size: 12px;  line-height: 16.99px;  letter-spacing: -1.2px;  color: #fff;  padding-top: 5px;}
    .m2_ul_hover > p:nth-child(2) { max-width: 94px;  padding: 6px 6px;  font-size: 10px; margin: 15px auto 0px;}
    
    
    .m3_imgbox { margin-top: 50px; height: 110px;}
    .m3_semititle { margin: 15px auto 0px; font-size: 16px; line-height: 22.32px; text-align: center;}
    .m3_ul {width: 90%; }
    .m3_ul > li { width: 100%; }
    .m3_ul > li:nth-child(1) a > p { font-size: 18px; line-height: 24px; padding-bottom: 12px; padding-top: 10px; width: 100%; text-align: center;}
    .m3_ul > li:nth-child(1) a > p i { font-size: 17px; line-height: 24px; padding-left: 5px;}
    
    .m3_ul > li:nth-child(2) { padding-left: 0px; margin-top: 25px;}
    
    
    .m3_ul > li:nth-child(2) > p { font-size: 17px;  line-height: 22px; padding-left: 40px;  margin-bottom: 30px; }
    .m3_ul > li:nth-child(2) > p span.num { line-height: 22px;}
    .m3_ul > li:nth-child(2) > p span.m3_ul_txt {  position: relative; display: block;  left: 0px;  top: 0px;  line-height: 20px; margin-left: 25px;}
    
    .m3_ul > li:nth-child(2) > p:hover { font-weight: 800;        font-size:17px;  line-height: 22px;}
    
    
    
    
    
    

    
/*   main 추가   */
    
    .sh-side-options-container {  bottom: 10px !important; left: -75px !important; }
    #fp-nav.fp-right {  right: auto;  left: 5px;}
    
    .m_d_img1 { width: 100%;  max-width: 32px;  left: 0px;  position: absolute;  top: 0px; }
    
    .m1-txt > p:nth-child(1) { margin-top: 30px;  font-size: 18px;  line-height: 24.32px; padding-left: 40px;  box-sizing: border-box;}
    .m1-txt > p:nth-child(1) span { font-size: 22px;}
    .m1-txt-line { display: none;}
    .m1-txt > p:nth-child(3) {  font-size: 12px;  line-height: 19.54px;  padding-top: 10px; margin-bottom: 20px;}
    .m1_pro_img { top: auto;  transform: none;}   
    .m1_num {  margin-top: -14px;  height: 34px;  max-width: 30px;  background-size: 25px;  font-size: 18px;  padding-top: 5px;   position: absolute; }    
    .m1_pro_hover {  width: 85%;  margin: 10px auto; }
    .m1-imgbox {max-height: 340px; margin-top: 10px}
    .m2_ul {  height: auto; top: auto;  bottom: 0px;}
    .m2_ul > li { color: #fff;  text-align: center;  position: relative;  border-right: none;  box-sizing: border-box;  height: auto;  padding: 28px 0px;  border-bottom: 1px solid rgba(255,255,255,0.5);  display: block;  width: 100%;}
    .m2_ul > li:nth-child(1) {  border-top: 1px solid rgba(255,255,255,0.5);}
     .m2_ul_conbox {  top: auto;  transform: none;  position: relative;  left: auto;  padding-bottom: 0px;}   
    .m2_ul_hover {display: none;}
    
    .m3_ul {margin-top: 15px;}
    .m3_ul > li:nth-child(2) {  margin-top: 5px;  width: 100%; }
    .m3_ul > li:nth-child(2) > p { font-size: 13px;  line-height: 16px;  padding-left: 0px;  margin-bottom: 20px; width: 95%; margin-left: 10px;}
    .m3_ul > li:nth-child(2) > p span.arrow {    color: rgba(0,52,219,0.6); font-size: 20px; line-height: 16px;     top: 50%;   transform: translateY(-50%);}
    .m3_ul > li:nth-child(2) > p .m3_ul_txt {  color: #fff;  background-color: rgba(0,52,219,0.6); border-radius: 15px; }

    .f_txt { display: block;  margin-top: 10px;  }
    .f_nav > li:nth-child(1) { width: 100%;}     
    
    .f_ul { margin: 20px 0px 0px; }
    .f_ul li p {  font-size: 10px;  padding-left: 95px;}      
    .f_ul li p span { padding-right: 0px;  width: 103px; padding-left: 8px; border-right: 0px;}      
    
    .f_ul li:nth-child(1) {   width: 100%; }       
    .f_ul li:nth-child(2) { display: none; } 
    .f_nav > li:nth-child(2) {  width: 100%;  margin: 20px 0px;}       
           
    .sh-side-options.open { width: 100% !important; }
    .sh-side-options.open .sh-side-demos-container { right: 0px !important; padding: 15px !important;}      
    .sh-side-demos-container-close { right: 20px !important;  }
    .re_div3 h1 { font-size: 30px !important; }
    .re_text { margin: 0px 0px 25px !important; font-size: 16px !important; transform: skewX(-0.3deg); }     
                  
    #re_container #cuname, #re_container #cumail, #re_container #cunumber, #re_container #cusubject, #re_container #cucontent, #re_container #cumail { max-width: none !important;  width: 22% !important;  font-size: 14px !important; height: 25px !important; line-height: 25px !important; margin: 0px !important;} 
    
    #re_container #cuname_1, #re_container #cumail_1, #re_container #cunumber_1, #re_container #cusubject_1, #re_container #cucontent_1, #re_container #cumail_1 { max-width: none !important;  width: 75% !important;  height: 25px !important;}   
    #re_container #cucontent_1 {height: 135px !important;}
    #re_container .bgcollr_1 { max-height: 120px !important; }  
         
    #re_container #cusend {margin-top: 0px !important; margin-bottom: 10px !important; }    
    .re_logo img {  max-width: 130px !important;}
    
    #re_container .bgcollr {  height: 18px !important;   font-size: 10px !important; }
    
   #re_container .bgcollr_2 { font-size: 15px  !important; line-height: 25px  !important;  height: 25px  !important;  transform: skewX(-0.3deg)}
    #re_container .bgcollr_3 { font-size: 15px  !important; line-height: 25px  !important;  height: 25px  !important;  transform: skewX(-0.3deg)  }
    
    
    .re_div3 { margin-top: 35px !important ; }
    
    
           
/*    sub    */
    

    .subtop { height: 160px;}
    .subtop_con { top: 65%; width: 90%;}
    .subtop_con p:nth-child(1) { font-size: 25px;  line-height: 30.54px;}
    .sub_title { width: 90%; margin: 0px auto 0px;  padding: 20px 0px;}
    .s_title_top { transform: skewX(-0.3deg);}
    .s_title_top img {  max-width: 18px; }
    .s_title_top span {  font-size: 15px; line-height: 45px;  transform: skewX(-0.3deg);}
    .s_title_ul > li { font-size: 15px;  line-height: 44.44px; transform: skewX(-0.3deg);}
    .s_title_ul_ul > li { margin-bottom: 5px;  font-size: 12px;  line-height: 16px;  transform: skewX(-0.3deg);}
    .s_title_ul_ul { width: 140%;  position: absolute;  left: 0px;  top: 40px;  background: #fff;  padding-left: 5px;  box-sizing: border-box;}

    
    .s11_p1 { margin: 5px auto 0px;  font-size: 15px;  line-height: 25.54px;  letter-spacing: 0px;  transform: skewX(-0.3deg);}    
    .sub_p1 { margin: 35px auto 0px !important; font-size: 15px; line-height: 25.72px;  transform: skewX(-0.3deg); letter-spacing: 0px;  padding-bottom: 10px; width: 100% !important; }
    .sub_p2 { margin: 5px auto 0px;  font-size: 13px;  line-height: 22.54px;  letter-spacing: 0px;  padding-top: 14px;}
    .sub_p2 br {display: none;}
    
      
    
    .m_d_img2 { width: 100%;  max-width: 170px;}        
    .s11-txt-line {  height: 40px;  margin: 10px auto;  } 
    .s11_img1 {  width: 90%;   max-width: 190px; }
    
        
    .s11 { margin: 30px auto 80px; }    
    .ss21 { margin: 30px auto 80px; }  
    .ss31 { margin: 30px auto 80px; }  
    .ss41 { margin: 30px auto 80px; }  
    .ss42 { margin: 30px auto 80px; }  
    .ss51 { margin: 30px auto 80px; }  
    .ss61 { margin: 30px auto 80px; }  
        
        
    .s11_ul li {  width: 100%; }    
    .s11_ul li:nth-child(2) { padding-left: 0px;  margin-top: 30px;}   
    .s11_ul li:nth-child(2) p { font-size: 14px;  line-height: 23px;  transform: skewX(-0.3deg); }
        
    .tab_btn {  margin: 15px 0px; }   
    .s_tab_ul { text-align: left; } 
    .s_tab_ul li { width: 31%;  margin: 0px 1% 7px;
    font-size: 12px; transform: skewX(-0.3deg);  letter-spacing: -0.5px;}
    .ss21_cont > p:nth-child(1) {  font-size: 15px;  transform: skewX(-0.3deg); }
    .ss21_cont > p:nth-child(1) span.num {  font-size: 22px; }
    .ss31_cont_img {  width: 100%;  margin: 0px auto 0px; padding: 0px;  }
    .ss21 .sub_inner { padding: 10px 0px 25px; }
    
    
    .ss21_cont > p:nth-child(1) span.txt {  font-size: 11px;  line-height: 17px;  letter-spacing: -0.9px;  margin-top: 0px;  margin-bottom: 15px; padding-left: 0px; word-break: keep-all}
    .ss21_cont > p:nth-child(1) span.txt br {display: none;}
    .ss31 .sub_inner { padding: 10px 0px 25px; }
    .ss31_bg_img { height: 80px;  margin: 15px auto 20px; }    
    .s_tab_ul li:hover {  opacity: 0.7;}
    .s_tab_ul.a2 li {  width: 48%; }   
    .s_tab_ul.a2 li.a {  width: 31%;}  
    .s_tab_ul.a3 li {  width: 48%; } 
        
        
        
    .ss42 .inq_p {  font-size: 25px;  line-height: 35px;    }
    .ss42 .inq_p2 {  font-size: 18px;  margin-top: 0px;  margin-bottom: 30px; }
    
    .ss42 .container {  padding: 20px 20px !important; }
    .ss42 #cuname21 {display: none;}
    
    .ss42 #cuname, 
    .ss42 #cumail, 
    .ss42 #cunumber, 
    .ss42 #cusubject, 
    .ss42 #cucontent, 
    .ss42 #cumail,
    .ss42 #cuattached { width: 27% !important;  margin-right: 3% !important;  font-size: 15px !important; height: 25px !important;  margin-bottom: 0px !important;  margin-top: 0px !important;  line-height: 25px !important; transform: skewX(-0.3deg);}
    
    .ss42 #cuname_1, 
    .ss42 #cumail_1, 
    .ss42 #cunumber_1, 
    .ss42 #cusubject_1, 
    .ss42 #cucontent_1, 
    .ss42 #cumail_1 
    {  width: 70% !important;  height: 25px !important; margin-bottom: 30px !important;  padding-left: 8px !important; }
    
    .ss42 #cuname_1 p {padding:  0px !important; }
    .ss42 .bgcollr { height: 18px !important; font-size: 13px  !important; transform: skewX(-0.3deg)}
        
    .ss42 #cucontent_1 {height: 180px !important}
    .ss42 .bgcollr_1 {height: 160px !important}
    
    
    
    .ss42 #cuattached_1 {  margin-bottom: 30px;  width: 50%; }
    .ss42 .filebox label {  height: 25px !important;  font-size: 15px !important;  line-height: 25px !important; transform: skewX(-0.3deg);}    

    .ss42 #cusend {  margin: 30px 0px 30px !important;}
    .ss42 #cusend_1 {font-size: 0px; text-align: center;}
    .ss42 .bgcollr_2 { font-size: 15px !important; height: 35px !important;  max-width: 100px !important;  transform: skewX(-0.3deg);  width: 48% !important;  display: inline-block !important;  margin: 0px 1% !important;}
    .ss42 .bgcollr_3 { font-size: 15px !important; height: 35px !important;  max-width: 100px !important;  transform: skewX(-0.3deg);  width: 48% !important;  display: inline-block !important;  margin: 0px 1% !important;}
    
    
    .ss42 #cumail_1 p,
    .ss42 #cunumber_1 p,
    .ss42 #cusubject_1 p { padding: 0px !important;}
    
    #bo_gall .gall_box {  margin: 0 0 30px 0 !important; }
    #bo_gall .gall_img {  height: auto !important; }
    .gall_row .col-gn-4 {  width: 50% !important;}
    #bo_gall .gall_text_href {  margin: 10px 0 0px !important; }
    #bo_gall .bo_tit {  line-height: normal !important;}
    
    
    .ss61_ul > li {padding: 0px; width: 100%; margin: 0px 0px 20px;}
    .ss61_ul > li:hover {box-shadow:none; transform: scale(1); }
    .ss61_ul_ul {  padding: 15px; }
    
    .ss61_ul_ul > li:nth-child(2) p:nth-child(1) { font-size: 20px;  padding-bottom: 5px;  margin-top: 5px;}
    
    .ss61_ul_ul > li:nth-child(2) p:nth-child(2) {  font-size: 11px;  line-height: 19px;  margin-top: 8px;}
    
    
    .s_tab_ul li.a {  width: 65%;}
    
    
    #m0_sli0 {background-position: 70% 50%;}
    .m1_pro_hover > img {  right: 5%;  bottom: 10%;  max-width: 20px;}
    
    
    
    
    
    
    
    
    }


  @media screen and (max-width: 450px) {
    .mob2 {display: block !important;}
      
    .m0_txtbox2 p:nth-child(1) {  font-size: 40px;   line-height: 55px;}
    .m0_txtbox2 p:nth-child(2) {  font-size: 15px;  line-height: 27px;   margin-top: 25px; transform: skewX(-0.3deg); }
      
      
    
    }