/* PC 반응형 */



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

@media screen and (max-width: 1600px) {
    
  .pro_tab { width: 85%;}

}


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

  .pro_itembox {  margin-bottom: 12vh;  }

  .pro_itembox.catebox1 .pro_item {  margin-bottom: 12vh;}

  .pro_item > li.txt > .descbox { gap: 0;  justify-content: space-between; margin-top: 7vh;}

  .starflon_pro1 .gall_li.col-gn-4.cate_1 { margin-bottom: 0;}

  .pro_item > li.txt > p.desc { min-height: auto;}


  
}

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

  .mob.mob-1500 {display: block;}

  .s211_ul > li.left { width: 45%;}
  .s211_ul > li { width: 55%;}

  .s211_slidebox { width: 85%; margin-left: 15%;}

  .s231_slidebox { width: 90%; }
  .s231_next { right: 0%;}

  .s212_ul > li.chart { width: 600px;}
  .myChart_box { width: 600px; height: 600px;}
  .myChart_box .centerbox {width: 200px; height: 200px;}

  .s212_ul > li.desc { width: calc(100% - 600px);  right: 5.5%;}
  .s212_ul > li.desc .desc_top { top: 20%;}
  .s21_desc_box p { width: 90%;}

  .pro_nav { max-width: 20%;}
  .pro_top_cont { width: calc(80% - 30px);}
  .pro_top_ul > li.txt { padding-left: 5%; box-sizing: border-box; margin-top: 25px;}
    
  .mb-25 { margin-bottom: 15vh;}
    

}

    

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

  .pro_tab { width: 100%;  margin-left: -5%;}

  .grid_view .gall_row .col-gn-4 { width: calc((100% - 50px)/3) !important;}
  .starflon_pro1 .gall_li.col-gn-4.cate_1 { width: calc((100% - 75px)/4) !important;}
  .starflon_pro1.grid_view .gall_con .gall_txt { padding: 10px 0px 20px;}

  .starflon_pro2.grid_view .gall_txt .bo_tit1 { white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  width: 95%;}
  
  .starflon_pro2.grid_view .gall_con .gall_txt .gall_more {  display: block;  margin: 5px auto 0;}

  .s141_cont2 > li.txt .txtbox p { font-size: 1.6rem;}

    
}



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


}

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

  .pro_item > li.txt { width: 56%;}  

  .s141_cont2 > li.txt .txtbox p { font-size: 1.3rem;}
 

}

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


}



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

  .pro_tab_ul > li { letter-spacing: -0.9px; width: 30%; }
  .pro_tab_ul.ver2 { padding-left: 30px; box-sizing: border-box;}
  .pro_tab_ul.ver2 > li { width: 25%;}

}



    
/* mobile */
@media screen and (max-width: 899px) {
  .pc {display: none;}
  .mob {display: block;}
  html, body {  min-width: auto;}
  #header {  min-width: auto;}
  body.hidden {position:fixed;overflow:hidden !important;height:100%;}
  body.hidden2 {position:fixed;overflow:hidden !important;height:100%;}
  html {font-size: 18px !important;}    

    
  /*    header   */        
  #header:hover { height: 80px !important; background-color: transparent;}
  #header.on { background-color: #fff; z-index: 1000;}
  #header:hover.on {background-color: #fff;}
  #header::after { background-color: #fff;}

  #header_inner { height: calc(100% - 20px); overflow: initial;}
  #header_logo { width: 100%;  height: 100%; max-width: 80px;}
  #header_logo img { top: calc(50% - 10px);  transform: translateY(-50%);}
  #header:hover #header_logo img:nth-child(1) { opacity: 1;}
  #header:hover #header_logo img:nth-child(2) { opacity: 0;}
  #header.on #header_logo img:nth-child(1) { opacity: 0;}  
  #header.on #header_logo img:nth-child(2) { opacity: 1;}
  #header:hover.on #header_logo img:nth-child(1) { opacity: 0;}
  #header:hover.on #header_logo img:nth-child(2) { opacity: 1;}

  #right_header { width: calc(100% - 100px); margin-left: 20px;}

  #sitemap.pc {display: none;}
  #sitemap.mob {display: none; background-color: #fd8a2c; border-color: #fd8a2c; margin: 0px auto 15px; font-size: 1rem;text-align: center;} 


  .sch_btn::after {background-color: #fff;}
  #header:hover .sch_btn .iconbox img:nth-child(2) {opacity: 1;}
  #header:hover .sch_btn .iconbox img:nth-child(2) {opacity: 0;}
  #header:hover .sch_btn::after {background-color: #fff;}
  #header.on .sch_btn .iconbox img:nth-child(2) {opacity: 0;}
  #header.on .sch_btn .iconbox img:nth-child(2) {opacity: 1;}
  #header.on .sch_btn::after {background-color: #ddd;}
  #header:hover.on .sch_btn .iconbox img:nth-child(2) {opacity: 0;}
  #header:hover.on .sch_btn .iconbox img:nth-child(2) {opacity: 1;}
  #header:hover.on .sch_btn::after {background-color: #ddd;}

  .schbox { top: 88px; width: 400px;}
  .schbox #sch_str { width: calc(100% - 40px) !important;  line-height: 36px;  font-size: 16px !important;}
  .schbox #sch_submit {  width: 40px !important;  height: 38px !important;  font-size: 20px !important;}
  #admin { font-size: 1.1rem; margin-right: 20px;}
  #header:hover #admin { color: #fff;}
  #header.on #admin {color: #ff951a;}
  #header:hover.on #admin {color: #ff951a;}

  #lang {font-size: 1.1rem; max-width: 80px; display: none !important;}
  #lang.on {background-color: #fd8a2c; border-color: #fd8a2c;}
  #lang:hover .lang_sub {height: 0px;}
  #lang.on .lang_sub {height: 30px;}
  #lang .lang_sub li { font-size: 1rem;}
  #lang .lang_sub li:nth-child(1) { padding-top: 4px;}
  #header:hover #lang {background-color: transparent; border-color: transparent;}
  #header:hover #lang.on {background-color: #fd8a2c; border-color: #fd8a2c;}
  #header:hover #lang .lang_sub li:hover a {border-bottom: 1px solid transparent;}
  #header.on #lang { background-color: #fd8a2c; border-color: #fd8a2c;}
  #header:hover.on #lang {color: #fff;  background-color: #fd8a2c; border-color: #fd8a2c;}
  #header:hover.on #lang.on {background-color: #fd8a2c; border-color: #fd8a2c;}

  #header.on .nav_box2 { opacity: 0;  pointer-events: none;}
    
  .menu_icon {margin-top: 5px;}
  #header:hover .menu_icon span { color: #fff;  background-color: #fff;}  
  #header.on .menu_icon span { color: #fd8a2c;  background-color: #fd8a2c; }
  #header.on .menu_icon span:nth-child(3) {  background-color: transparent;}
  #header:hover.on .menu_icon span { color: #666;  background-color: #666;  }
  #header:hover.on .menu_icon span:nth-child(3) {  background-color: transparent;}

  .nav_box {width: 100%; height: calc(100vh - 80px); box-sizing: border-box; position: absolute;  top:80px;  left: 0px; background: url(../image/navbox2_bg.png) no-repeat center/cover;margin: 0px; pointer-events: none; overflow-y: scroll; overflow-x: hidden; opacity: 0;  }

  .nav_box {-webkit-overflow-scrolling: touch}
  .nav_box::-webkit-scrollbar { width: 14px;}
  .nav_box::-webkit-scrollbar-track { box-shadow: inset 0 0 14px 14px transparent; border: solid 4px transparent;}  
  .nav_box::-webkit-scrollbar-thumb { box-shadow: inset 0 0 14px 14px #fff;  border: solid 4px transparent;  border-radius: 14px; }
  

  #header.on .nav_box {opacity: 1; pointer-events: initial; transition: all 0.4s; }
  .nav_box::after { content: ""; width: 200px; height: 145px; position: absolute;  right: 10px;  bottom: 10px; background: url(../image/navbox2_logo.png) no-repeat center / 100% auto; z-index: 0; opacity: 0.5;}
    
  #nav {padding-bottom: 50px; z-index: 5; position: relative;}
  #nav > li { width: 100%;  text-align: left; font-size: 1.6rem;  }   
  #header:hover #nav > li { color: #fff;}
  #nav > li::after {display: none;}
  #nav > li > .tit { padding: 2vh 10%; box-sizing: border-box; position: relative; display: block;}
  #nav > li > .tit .plus { position: absolute; right: 8%;  top: 50%;  transform: translateY(-50%); width: 15px;  height: 15px;  }
  #nav > li > .tit .plus::before {content: ""; width: 100%;  height: 1px; background-color: #ddd; position: absolute;  left: 0px;   top: 50%;     transform: translateY(-50%);}
  #nav > li > .tit .plus::after {content: ""; max-width: 1px; height: 100%;    background-color: #ddd;width: 100%; margin: auto; transition: all 0.4s; display:block }
  #nav > li.show > .tit .plus::after {transform: rotate(90deg);}

  #nav > li span.mob { display: inline-block; font-size: 0.9rem; vertical-align: top; margin-right: 8px; opacity: 0.5;  margin-top: -5px; display: none;}
  .nav_ul { box-sizing: border-box; opacity: 1;  margin-top: 0; overflow: hidden; padding: 0px 10%;  background-color: rgba(255,255,255,0.8); transition: initial; display: none; }
  #header:hover .nav_ul { display: none;}
  .nav_ul li {font-size: 1.2rem; padding: 1.4vh 0px; margin-bottom: 0px;   font-weight: 300; }      
    

  .lagnbox { width: 90%; margin: 20px auto; text-align: left;  border-bottom: 1px solid #fff; padding: 10px 25px 18px; box-sizing: border-box;  z-index: 5;}
  .lagnbox > li { font-size: 1.25rem; letter-spacing: 0.9px;   text-transform: uppercase;  color: #FFFFFF;  display: inline-block;   vertical-align: top;   padding: 0px 10px;   position: relative; margin-right: 5px; }
  .lagnbox > li:last-child {margin-right: 0;}
  .lagnbox > li.on {color: #fd8a2c; background-color: #fff;}
  .lagnbox > li a {display: inline-block; width: 100%; color: inherit;}


  /*    footer   */   
  .f_logo { margin-bottom: 2vh;}
  .f_wrap_ul > li {  width: 100%;}
  .f_wrap_ul > li.info2 { margin-top: 15px;}
  .f_lang.on .f_lang_cont { bottom: 36px;}
  .f_wrap_ul > li.info1 p { font-size: 1rem;}

    
  /*    main   */
  .main::after {display: none;}
  .m1::before, .m2::before, .m3::before, .m4::before, .m5::before, .m6::before, .m7::before {display: none;}

  .m2 .move, .m3 .move, .m4 .move, .m5 .move, .m6 .move, .m7 .move { opacity: 1 !important; transform: none !important; animation: none !important;}

  .m1 { overflow: hidden; height: 100vh;}
  .m1 .swiper-slide::before {  content: "";  position: absolute;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  background: rgba(0,0,0,0.3);  z-index: 2;}
  #ms1_1 {  background-position: 10% center;}
  #ms1_1 .ms1_text { width: 80%;  left: 50%;  transform: translate(-50%,-50%);}
  .ms1_text_4 {  font-size: 2rem; }
  .ms1_text_3 {  font-size: 1.4rem;}

  .m1_side { right: -240px;}
  .m1_side.toggle {right: 0px;}
  .m1_item_btn i:nth-child(1) { opacity: 0;}
  .m1_item_btn i:nth-child(2) {opacity: 1;}
  .m1_item_btn.toggle i:nth-child(1) { opacity: 1;}
  .m1_item_btn.toggle i:nth-child(2) {opacity: 0;}

  .ms1_btnbox_bg { position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100vh;  background: rgba(255, 255, 255, 0.6);  z-index: 0; opacity: 0; transition: all 0.4s;}
  .ms1_btnbox_bg.on {opacity: 1; z-index: 10;}
  .m1_item .m1_item_color::before { opacity: 1;  filter: brightness(1);}
    

  .m2_ul > li { width: 50%;  padding: 2vh 0px;}
  .m2_ul > li.hidden { display: none;}
  .m2_ul > li.box3 { padding: 2vh 0px;}
  .m2_ul > li.box3 .txtbox { width: auto;  height: auto;  padding: 0; }
  .m2_ul > li.box3::before {display: none;}
  .m2_ul > li.box5 { width: 100%;}
  .m2_txt1 {  margin-bottom: 1vh;}
  
  .main_ul > li { width: 100%;  height: 35vh;}
  .main_ul > li.txt { padding-left: 5%; height: auto; padding-bottom: 150px;}
  .main_ul > li.txt .txtbox_bottom p:nth-child(1) {  font-size: 2rem;}

  .m4 .main_ul > li.txt { margin-top: 35vh;}
  .m4 .main_ul > li.bg { position: absolute;  left: 0px;  top: 0px;}
  
  .main_ul2 > li.cont { width: 100%;  height: 55%;}
  .m6 .main_ul2 > li.bg {  padding-left: 10%;  width: 100%;  height: 45%;}
  .main_ul2_ul > li.box1 .txtbox { left: 5%;}
  .main_ul2_ul > li.box1 .more { margin-top: 3vh;}
  .main_ul2_ul > li.box2 { padding-left: 0%;}
  .main_ul2_ul > li.box3 .more { margin-top: 3vh;}
  .m6_board_item {  margin-bottom: 4vh;}
  .m6_board_itembox .news_div:nth-child(2) {display: none;}
  .m6 .elss3 { width: calc(100% - 25px);}

  .m7 {overflow: hidden;}
  .m7 .main_ul { height: 80%;}
  .m7 .main_ul > li.txt {  height: 75%;}
  .m7 .main_ul > li.txt .txtbox_top {  margin-bottom: 2vh;}
  .m7 .main_ul > li.bg { height: 25%;}
  .m7_bg { top:auto; bottom: 0; height: 600px;  width: auto;}
  .m7 .main_ul > li.bg .imgbox {  top: 10%;  bottom: auto;  max-width: 225px;  padding: 20px 10px;}
  .m7_ul_box { height: 20%; }
  .m7_ul { width: 85%;}
  .m7_ul > li.first { width: 100%;  margin-bottom: 20px;}
  .m7_ul > li.info { width: 33.333%;}


  /*    sub   */
  .subtop { height: 35vh;}
  .subtop .txtbox p:nth-child(2) {  font-size: 3.5rem;  margin: 1vh 0px 2vh;}
  .subtop_nav > li { width: calc((100% - 50px)/4);}
  .sub_p3 { font-size: 1.2rem;}
  .sub_p4 { font-size: 2.5rem;}
  .sub_title {margin: 60px 0px }


  /*    sub 1  */
  .s111 { margin: 60px 0px 120px;}
  .s111_ul > li {  width: 100%;  height: 35vh; margin-bottom: 5vh; }
  .s111_ul:last-child > li:last-child {margin-bottom: 0;}
  .s111_ul > li.img { position: relative;  right: auto;  top: auto;}
  .s111_ul > li.txt.pc { display: none;}
  .s111_ul > li.txt.mob { display: inline-block;  height: auto;  padding: 0;}
  .s111_ul > li.txt .txtbox { position: relative;  left: auto;  top: auto;  transform: none;  padding-right: 0;}
  .s111_ul.ver2 > li.txt .txtbox { padding-right: 0;  padding-left: 0;}
  .s111_ul > li.txt .txtbox p:nth-child(1) { padding-top: 6vh; min-height: initial; font-size: 2rem;}
  .s111_ul > li.txt .txtbox p:nth-child(1) span.num {  font-size: 6rem;}
  .s112 { padding: 60px 0px 120px;}


  .s121 { margin: 60px 0px 0px;}
  .h_tab { margin: 0px auto 8vh;}
  .h_progress_box {  left: 40%;}
  .h_cont { padding-bottom: 8vh;  padding-top: 8vh;}
  .h_cont:last-child {  padding-bottom: 20vh;}
  .h_cont .tit_year { width: 35%;}
  .h_list { width: 56%; margin-left: 9%;}
  .h_list::before {  left: -8.5%;}


  .s131 { margin: 60px 0px 120px;}
  .s131_txtbox {  margin-top: 8vh;}
  .s132 { margin: 120px 0px;}
  .s133_titbox {  margin: 0px auto 6vh;  padding-top: 10vh;}
  .s133_contbox {  padding: 100px 0px;}

  
  .s141 {  margin: 60px 0px 0px;}
  .s141_cont2 > li { width: 100%;  height: 30vh;}
  .s141_cont2 > li.txt {  height: auto;}
  .s141_cont2 > li.txt .txtbox {  position: relative;  right: auto;  top: auto;  transform: none;   padding: 8vh 5%;}
  .s141_cont2 > li.txt .txtbox p > span { display: inline-block; z-index: 0;}


  .s151 { margin: 60px 0px 120px;}
  .s151_ul > li { width: 47.5%;  margin-bottom: 5vh;}
  .s151_ul > li .txtbox .listbox p {  padding-left: 140px;}


  /*    sub 2  */
  .s211 { margin: 60px 0px 120px;}
  .s211_ul > li.left { width: 100%;  padding-right: 0;  margin-bottom: 3vh; }
  .s211_ul > li { width: 100%;}
  .s211_slidebox {  margin-top: 8vh;  width: 100%;  margin-left: 0;}
  .s212 {  padding: 10vh 0px 8vh;}
  .s212_ul { margin-top: 3vh;  padding-bottom: 3vh;}
  .s212_ul > li.chart { width: 100%; margin-bottom: 3vh;}
  .myChart_box { width: 500px; height: 500px;  margin: auto;}
  .myChart_box .centerbox { width: 130px; height: 130px;}
  .myChart_box .centerbox p { font-size: 1.1rem;}
  .s212_ul > li.desc { width: 100%;  height: auto;  position: relative;  right: auto;  top: auto;  overflow: initial;}
  .s212_ul > li.desc .desc_top {  position: relative;  left: auto;  top: auto;  border-top: 1px solid #bbbbbb; padding-top: 15px; width: 90%;  margin: 0px auto 3vh; }
  .s212_ul > li.desc .desc_top .s21_desc_box::before { left: 0;  top: -9px;  width: 12px;  height: 12px;
 background: #ff951a; border-radius: 50%;  border: 3px solid #fff;}
  .s212_ul > li.desc .desc_top .s21_desc_box { padding-top: 0;  padding-left: 0;}
  .s212_ul > li.desc .desc_bottom {  position: relative;  left: auto;  bottom: auto;  border-top: 1px solid #bbbbbb; padding-top: 15px;  width: 90%;  margin: auto;}
  .s212_ul > li.desc .desc_bottom .s21_desc_box {  padding-bottom: 0;  padding-left: 0; position: initial;}
  .s212_ul > li.desc .desc_bottom .s21_desc_box::before {  left: 0px;  top: -9px;  width: 12px;  height: 12px;  background: #ff951a;  border-radius: 50%;  border: 3px solid #fff;}
  .s21_desc_box p {  font-size: 1.3rem;  margin: auto;  width: 100%;  padding-left: 5%;  box-sizing: border-box;}
  .s21_country_box {  width: 80%;  margin: 30px auto 0px;}


  .s221 { margin: 60px 0px 120px;}
  .s221_ul { margin: 7vh 0px;}
  .s221_ul > li { display: inline-block;  vertical-align: top;  width: 100%;  margin-right: 0;  border-bottom: 1px solid #ddd;  margin-bottom: 5vh;  padding-bottom: 5vh;}
  .s221_ul > li:nth-child(2n) {  border-left: 0px;  padding-left: 0;  border-bottom: 0px; padding-bottom: 0px;  margin-bottom: 0px;}
  .s222 { padding: 7vh 0px 9vh;}
  .s222_ul > li { width: 100%; margin-right: 0; margin-bottom: 3vh;}
  .s222_ul > li:nth-child(1) { margin-bottom: 0;}


  .s231 { margin: 60px 0px 120px;}
  .s231_slidebox { margin-top: 8vh;}
  .s231_slide_contbox > .imgbox { height: 25vh;}
  .s231_next {  width: 50px;  height: 50px;}

  .pro_section1 {  margin: 60px 0px 120px;}
  .pro_last { margin-bottom: 120px;}
  .pro_tab { margin-left: 0;}
  .pro_tab_ul { margin-top: 0;}
  .pro_tab_ul.ver2 { padding-left: 0; margin-top: 0;}

  .bo_v_contbox_ul > li.v_img { width: 100%; }
  .bo_v_contbox_ul > li.v_txt { width: 100%; }



  /*    sub 3  */
  .s311 { margin: 60px 0px 150px;}
  .s311_ul .video_content > li { padding-bottom: 3vh;  margin-bottom: 3vh;}
  .s311_ul_ul > li.txt .txtbox .sub_p1 { font-size: 1.8rem;}
  .s311_ul_ul.wid100 > li.txt .txtbox .sub_p1 { font-size: 2.5rem;}
  .s311_ul_ul > li.txt .txtbox .desc_box { margin-top: 20px;}
  .s311_ul_ul > li.txt .txtbox .desc_box .desc_item {  padding: 7px 12px;  margin-right: 10px;}


  /*    sub 4  */
  .s411 { margin: 60px 0px 120px;}
  .s411_top_contbox { flex-flow: column-reverse;}
  .s411_top_contbox > li { width: 100%;}
  .s411_top_contbox > li.img { margin-bottom: 5vh; }
  .s411_top_contbox > li.img img {  max-width: 330px;}
  .s411_top_contbox > li.txt { margin-right: 0;}
  .s411_top_contbox > li.txt p:nth-child(1) {word-break: keep-all;}
  .s411_top_contbox > li.txt p:nth-child(1) span { font-size: 1.1rem;}
  .s411_top_contbox > li.txt p:nth-child(2) { font-size: 1.2rem;}
  .s421 { margin: 120px 0px 180px;}
  .s421_sub_top_img {  height: 38vh; margin-bottom: -18vh;}
  .s412_cont_txt { margin-top: 6vh;  margin-bottom: 6vh;}
  .s412_cont_txt > li { width: 100%;}
  .s412_cont_txt > li.last { border-bottom: 1px solid #ddd;}
  .s412_cont_img > li { width: calc((100% - 10px)/2);}
  .s412_cont_img.ver2 > li { width: calc((100% - 10px)/2);}
  .s412_cont_txt > li.wid45 { width: 100%;}
  .s412_cont_txt > li.wid55 { width: 100%;}


  /*    sub 5  */
  .s511 { margin: 60px 0px 120px;}
  .s521 { margin: 60px 0px 150px;}
  .s521_tab { margin: 0px auto 8vh;}
  .s521_ul li { width: 45%;}
  .s521_ul li:nth-child(2n-1) { margin-right: 5%;}
  .s521_ul li:nth-child(2n) {  margin-left: 5%;}
  .s531 { margin: 60px 0px 120px;}
  .s531_ul > li { width: 47.5%;}
  .s541 { margin: 60px 0px 120px;}
  .s541_mapbox .mapbox { height: 45vh;}
  .s541_mapbox .map_txtbox > li {  width: 100%;  border: 0px;  border-bottom: 1px solid #ddd;  margin-bottom: 15px;  padding: 0px 3% 15px;}
  .s541_mapbox .map_txtbox > li:nth-child(1) { width: 100%;  border-bottom: 1px solid #ddd;  padding: 0px 3% 15px;}
  .s541_mapbox .map_txtbox > li > img {  margin-bottom: 0;  display: inline-block;  vertical-align: top;}
  .s541_mapbox .map_txtbox > li .infobox {  width: calc(100% - 70px);  display: inline-block;  vertical-align: top;  margin-left: 20px;  margin-top: 10px;}



  /* sitemap */
  #sitemap_nav > li { padding: 0px 15px 35px; margin-bottom: 35px;}
  #sitemap_nav { padding: 45px 0px;}
  .site_sub_menu > li { width: 100% !important;}


  /* product board */
  .bo_cate_sel {display: none ;}
  .pro_menu {  width: 50px;  height: 50px;  padding: 6px;  display: none;  position: fixed;  left: 10px;
  top: 90px;  z-index: 100;  background: #ff951a; border-radius: 50%; transition: all 0.4s; box-sizing: border-box;} 
  .pro_menu.color2 {background: #6ca845 ;}
  .pro_menu.color3 {background: #3792ff ;}
  .pro_menu.close {  left: 60%; margin-left: 20px;  }
  .pro_menu.down { top: 20px;}
  .pro_menu .menu_button { top: 50%; margin-top: -1px; left: 50%; margin-left: -12px;}
  .pro_menu .menu_button, .pro_menu .menu_button::before, .pro_menu .menu_button::after {position: absolute; width: 24px; height: 2px; background: #fff; border-radius: 4px; -webkit-transition: all 0.4s;
  transition: all 0.4s;}
  .pro_menu .menu_button::before, .pro_menu .menu_button::after { left: 0; content: "";}
  .pro_menu .menu_button::before {top: 6px;}
  .pro_menu .menu_button::after { bottom: 6px;}
  .pro_menu.close .menu_button {background: transparent; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
  .pro_menu.close  .menu_button::before { -webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg);}
  .pro_menu.close .menu_button::after { -webkit-transform: translateY(6px) rotate(-45deg);  transform: translateY(6px) rotate(-45deg);}
  .pro_top_wrap::before {  content: "";  position: fixed;  z-index: -1;  width: 100%;  height: 100%;  left: 0px;  top: 0px;  background: rgba(255,255,255,0.6);  opacity: 0;  transition: all 0.4s;}    
  .pro_top_wrap.show::before { z-index: 50; opacity: 1;}
  .pro_nav {  position: fixed; left: 0px;  top: 0;  width: 100%;  height: 100%;  max-width: 60%;  z-index: 100;  padding: 50px 30px;  box-sizing: border-box;  background: #fff; margin-left: -60%; opacity: 0; transition: all 0.4s;}
  .pro_top_wrap.show .pro_nav {opacity: 1; margin-left: 0;}
  .pro_nav .nav_item > a { font-size: 1.5rem;}
  .pro_nav .nav_item.on a { font-size: 1.8rem;}
  .pro_nav_cate > li { font-size: 18px;  line-height: 25px;  }
  .pro_nav_cate > li input {  width: 20px;  height: 25px;}
  .pro_nav_cate > li input::before {  height: 20px;  width: 20px;}
  .pro_nav_cate > li input::after { width: 7px; height: 12px;}
  .pro_nav_cate > li label { width: calc(100% - 30px);}
  
  .pro_top_cont { width: 100%; margin-left: 0;}
  .grid_view .gall_row .col-gn-4 {width: calc((100% - 25px)/2) !important;}
  .gall_txt .bo_cate {  font-size: 1.2rem !important;}
  .gall_txt .bo_tit2 { font-size: 1.2rem !important;}
  .list_view .gall_con { border: 1px solid #ddd !important; margin-bottom: 5vh; box-sizing: border-box;}
  .list_view .gall_con .gall_txt { width: 100% !important; padding: 0px 5% !important; margin-bottom: 2%;  box-sizing: border-box;}
  .list_view .gall_con .gall_desc { width: 90% !important; padding: 2% 0% 0!important;    border-left: 0px !important; border-top: 1px solid #ddd;  margin: auto;  display: block !important;}

  #bo_v_con ul { display: flex;  flex-flow: column-reverse;}
  .bo_v_con_top > li.info { width: 100% !important;  margin-right: 0 !important;}
  .bo_v_con_top > li.info .tit {  font-size: 4rem !important;  margin-bottom: 25px !important;  display: block !important;}
  .bo_v_con_top > li.thum { width: 100% !important; margin-bottom: 30px;  }
  .bo_v_con_top > li.wid100_tit { display: none !important;}
  .pro_ban { padding: 6vh 0px;  margin: 100px 0px;}
  .bo_v_conbox {  margin: 100px 0px; }
  .bo_v_conbox > li.title { width: 100% !important;  margin-bottom: 20px;}
  .bo_v_conbox > li.img { width: 100% !important;}
  .bo_v_conbox > li.img img {  width: 100%;}
  .bo_v_conbox_sub.on > li { width: 100% !important;}
  .bo_v_conbox_sub > li:nth-child(1) { padding-right: 0 !important;  margin-bottom: 5vh;}
  .bo_v_conbox > li.title .add_img1 { max-width: 350px;  margin: 0px auto 3vh !important;
  display: block;}

  .pro_itembox { margin-bottom: 8vh;}
  .pro_itembox.catebox1 .pro_item { margin-bottom: 8vh;}
  .pro_item > li.img { width: 100%;  height: 35vh;  margin-bottom: 3vh;}
  .pro_item > li.txt { width: 100%;  margin-left: 0;}
  .starflon_pro1 .gall_li.col-gn-4.cate_1 { width: calc((100% - 25px)/2) !important;}
  #bo_list .starflon_pro1 .gall_img img { max-width: 250px;}
  .grid_view .gall_con .gall_morebox { opacity: 1 !important;}

  .pro_top_ul > li.img {width: 100%;  margin-bottom: 6vh;}
  .pro_top_ul > li.img img {  margin: auto;}
  .pro_top_ul > li.txt { padding-left: 0;  margin-top: 0;  width: 100%;}
  .mob.mob-1500 { display: none; }

  .bo_v_con_top > li.thum .imgbox img.icon { left: 50% !important; transform: translateX(-50%); max-height: 35px;}
  



  /* board */
  .sub_board { margin: 60px 0px 120px;}

  .switch_field { font-size: 0; padding: 0;  height: 0;}
  #sch_res_detail .sch_wr { font-size: 0;  width: 100%;}
  #sch_res_detail .frm_input { width: calc(100% - 150px) !important; font-size: 1rem;  margin-right: 10px;}

  #bo_v_link a { overflow: hidden;  width: 100%;  text-overflow: ellipsis;}




    
}
    

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

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

}

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

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

  /*    header   */
  #header {height: 65px;} 
  #header:hover {height: 65px !important; }
  #header::after {top: 64px;}
  #header_inner {  margin: 15px auto 0px;  height: calc(100% - 15px);}

  .layer_login { max-width: 90%;  margin: 0 !important;  transform: translate(-50%,-50%) !important;}

  .schbox { top: 75px; max-width: 100%;}

  .nav_box { top: 65px; height: calc(100vh - 64px);}


  /*    footer   */    
  .f_logo img { max-width: 200px; }
  .f_wrap_ul > li.info1 p > span {  display: block;}
  .f_wrap_ul > li.info1 p:nth-child(2) > span::after {display: none;}
  .f_wrap_ul > li.info1 p { font-size: 0.9rem;}


  /* main  */
  #fp-nav ul li .fp-tooltip.fp-left {  display: none;}

  .main_inner2 {  width: 80%; position: relative;  left: auto;  top: auto;  transform: none; margin: 8vh auto;}
  .main_top {  right: 15px;  bottom: 15px;  width: 40px;  height: 40px;}
  
  .m1::before { top: 65px;  height: calc(100% - 65px);}
  .m1_side { right: 0;  margin-right: -240px;}
  .m1_side.toggle { margin-right: 0;}
  .ms1_text {  width: 70%;  padding-right: 10%;}
  #ms1_1 .ms1_text {  width: 80%;  padding-right: 0%;}
  .ms1_text_2 { font-size: 2.2rem; margin: 10px 0px 25px;}
  .ms1_text_4 { font-size: 1.4rem; width: 100%;}
  .ms1_text_3 { font-size: 1rem; word-break: keep-all;}
  .ms1_text_3 br { display: none;}
  .ms1_btnbox { width: 90%;}

  .m_txt1 { font-size: 1rem;}
  .m_txt2 { font-size: 2rem;  margin-top: 2vh;  margin-bottom: 2vh; word-break: keep-all;}

  .m2 {height: 900px ;}
  .m2_ul > li { width: 100%;  padding: 2vh 0px;}
  .m2_txt1 span {  font-size: 2.2rem; }
  .m2_txt2 { font-size: 1.5rem;}
  .m2_ul > li img { margin-top: 1vh;}
  .m2_ul > li.box2 { text-align: center;  padding: 5vh 0px;}
  .m2_ul > li.box3 { border-bottom: 1px solid #ddd;}

  .main_ul > li { height: 25vh;}
  .main_ul > li.txt { height: auto; padding-bottom: 150px;}
  .main_ul > li.txt .txtbox_top { margin-bottom: 12vh;}
  .main_ul > li.txt .txtbox_bottom p:nth-child(1) { font-size: 1.5rem;}
  .main_ul > li.txt .txtbox_bottom p:nth-child(2) { word-break: keep-all;}
  .main_ul > li.txt .txtbox_bottom p:nth-child(2) br { display: none;}
  .pro_img.img1 { max-width: 60%;}

  .m4 .main_ul > li.txt { margin-top: 25vh; padding-left: 5%;}
  .m4 .main_ul > li.bg { position: absolute;  left: 0px;  top: 0px;}
  .pro_img.img2 {  max-width: 45%;}

  .main_ul2 > li.cont { height: auto;}
  .main_ul2_ul > li { height: 45vh;}
  .m6_txt2 { font-size: 2.2rem;}
  .main_ul2_ul > li.box2 a img { max-width: 95px;}
  .main_ul2_ul > li.box3 .box3_img { filter: opacity(0.5);}
  .m6 .main_ul2 > li.bg {  height: auto;  padding: 8vh 5%;  padding-left: 5%; position: relative;}
  .m6 .main_ul2 > li.bg::before {  content: "";  position: absolute;  left: 0px;  top: 0px;  width: 100%;  height: 100%;  background-color: rgba(0,0,0,0.2);}

  .m7 {  padding-top: 6vh;}
  .m7 .main_ul { height: auto;}
  .m7 .main_ul > li.txt { height: auto;  padding-bottom: 50px; padding-left: 5%;}
  .m7 .main_ul > li.bg { height: 40vh;}
  .m7 .main_ul > li.bg .imgbox {  left: 10%;  max-width: 160px; padding: 15px 10px;}
  .m7_bg {  height: auto;  width: 100%;  right: -35%;}

  .m7_ul_box {  height: auto; padding-left: 5%;}
  .m7_ul { width:90%; position: relative;  left: auto;  top: auto;  transform: none;  padding: 5vh 0px;}
  .m7_ul > li.info { width: 100%;  margin-bottom: 30px;}
  .m7_ul > li.info:last-child {margin-bottom: 0px;}
  .m7_ul > li.info p { font-size: 0.9rem;}
    

  /*    sub   */
  .subtop { height: 40vh;}
  .subtop .txtbox {  top: 62%;}
  .subtop .txtbox p:nth-child(1) {font-size: 1.2rem;}
  .subtop .txtbox p:nth-child(2) { font-size: 3rem;}
  .subtop_nav { width: 100%; }
  .subtop_nav > li:nth-child(1) { width: 100%;}
  .subtop_nav > li {  border-bottom: 1px solid #ddd; width: 50%;}
  .subtop_nav > li:nth-child(2) {z-index: 3;}
  .subtop_nav > li:nth-child(3) {z-index: 2;}
  .subtop_nav > li:nth-child(4) {z-index: 1;}
  .subtop_nav > li.point.line2 {line-height: 22.5px;}

  .sub_p1 { font-size: 2.4rem; }
  .sub_title .sub_p1 { word-break: keep-all;}
  .sub_title .sub_p1 br { display: none;}
  .sub_p2 { margin-bottom: 8px;}
  .sub_p3 { font-size: 1.1rem;}
  .sub_p4 { font-size: 2rem;}
  .sub_p5 { font-size: 1.5rem;}


  /*    sub 1  */
  .s112_ul {  margin-top: 7vh;}
  .s111_ul > li.txt .txtbox p:nth-child(1) br {  display: none;}
  .s112_ul > li { width: 50%;  margin-bottom: 5vh;}
  .s112_ul > li > img {  max-width: 100px;}
  .s112_ul > li > p:nth-child(2) {  font-size: 1.3rem; margin: 2vh 0px 0.5vh;}
  .s112_ul > li > p:nth-child(2) span {  font-size: 1.8rem;  margin-right: 3px;}

  .h_tab_ul > li { width: 50%; }
  .h_tab_ul > li:nth-child(1) { border-bottom: 0px; }
  .h_tab_ul > li:nth-child(2) { border-bottom: 0px;  border-right: 1px solid #ddd;}
  .h_cont { padding-bottom: 6vh;  padding-top: 6vh;}
  .h_progress_box { left: 0;}
  .h_cont .tit_year {  width: 100%;  text-align: left;  padding-left: 8%;   box-sizing: border-box;    margin-bottom: 3vh;  }
  .h_list { width: 100%;  padding-left: 8%;  margin-left: 0;  box-sizing: border-box;}
  .h_list::before { left: -3.5px;  width: 8px;  height: 8px;}

  .s131_txtbox p { padding: 10px; font-size: 1.5rem;}
  .s131_txtbox p img:nth-child(1) {margin-left: -30px;}
  .s131_txtbox p img:last-child {margin-right:-10px}
  .s132_ul > li {  width: 100%;  margin-right: 0;  margin-bottom: 5vh;}
  .s132_ul > li .imgbox { height: 24vh;}
  .s132_ul > li:last-child { margin-right: 0px;  margin-bottom: 0;}
  .s133_titbox { padding-top: 0vh; }
  .s133_contbox { padding: 7vh 0px;}
  .s133_ul > li { width: 100%;  padding: 4vh 0px; border-right: 0px;} 
  .s133_ul > li.bottom { border-bottom: 1px solid #fff;}
  .s133_ul > li:last-child {border-bottom: 0px;}
  .s133_ul > li.bottom .txt { padding-bottom: 0;}  
  .s133_ul > li .txt { font-size: 1.1rem;}
  .s133_ul > li.bottom .num {  position: relative;  left: auto;  bottom: auto;  transform: none;}

  .s141_cont1_tit { z-index: 5;  position: relative;}
  .s141_cont2 > li.txt .txtbox p { letter-spacing: -0.5px;}
  .s141_cont2 > li.txt .txtbox p > span .color { font-weight: bold; position: relative;   display: inline-block;}
  .s141_cont2 > li.txt .txtbox p > span .color::before { content: "";background-color: #ffbd4a; width: 106%;
  height: 50%; position: absolute; left: -3%; bottom: 0px; z-index: -1;}

  .s151_ul { gap: 0;}
  .s151_ul > li {width:100%;}


  /*    sub 2  */
  .myChart_box {  width: 320px; height: 320px;  margin: auto;}
  .myChart_box .centerbox { width: 100px; height: 100px;}
  .myChart_box .centerbox p { font-size: 0.9rem;}
  .s21_desc_box p { font-size: 1.2rem;  padding-left: 10%;}
  .s21_country_box { width: 100%;}

  .s231_slidebox { width: 100%;}
  .s231_slide_top { flex-wrap: wrap; word-break: keep-all; padding: 0;}
  .s231_pag { display: block;  width: 100%;  text-align: right; }
  .s231_next {  width: 40px;  height: 40px;  top: 69%;  right: 10px;}
  .progress-bar_background { fill: none;  stroke: #fff;  stroke-width: 1.8;}
  .progress-bar_progress { stroke-width: 2;}
  .s231_next > i { color: #fff;  font-weight: bold;  transition: all 0.4s;}
  .s231_next:hover > i { color: #3792ff;}

  .pro_tab_ul.ver2 > li { width: 50%;border-bottom: 0px; border-right: 0px;}
  .pro_tab_ul.ver2 > li:nth-child(2n) { border-right: 1px solid #ddd;}
  .pro_tab_ul.ver2 > li:nth-child(3), .pro_tab_ul.ver2 > li:nth-child(4) {border-bottom: 1px solid #ddd;}
  
  .tit_arrow::before { top: 0.4em;  transform: none;}

  .pro_tab_ul > li {  width: 100%; border-right: 1px solid #ddd; border-bottom: 0px;}
  .pro_tab_ul > li:last-child { border-bottom: 1px solid #ddd;}


  /*    sub 3  */
  .s311_ul_ul > li { width: 100%;}
  .s311_ul_ul > li.txt { margin-top: 3vh;}
  .s311_ul_ul > li.txt .txtbox { padding-left: 0;}
  .s311_ul_ul > li.txt .txtbox .sub_p1 {  width: 95%; word-break: keep-all;}
  .s311_ul_ul.wid100 > li.txt {  position: relative;  left: auto;  bottom: auto;  background: none;}
  .s311_ul_ul.wid100 > li.txt .txtbox {  padding: 0;}
  .s311_ul_ul.wid100 > li.txt .txtbox .sub_p2 { color: #1a1a1a !important;}
  .s311_ul_ul.wid100 > li.txt .txtbox .sub_p1 { font-size: 1.8rem;  color: #FF951A !important;}
  .s311_ul_ul.wid100 > li.txt .txtbox .desc_box .desc_item { border-color: #FF951A !important;  background: #FF951A !important}
  .s311_ul_ul.wid100 > li.img .play_btn { display: flex;}
  .s311_ul_ul > li.txt .play_btn {display: none;}


  /*    sub 4  */
  .s411_top_contbox > li.img img { max-width: 240px;}
  .s411_top_contbox > li.txt p:nth-child(1) {  font-size: 1.5rem;}
  .s411_top_contbox > li.txt p:nth-child(2) { font-size: 1.1rem;}
  .s421 { margin: 120px 0px 150px;}
  .s412_cont_txt > li p { padding:0px 15px;  word-break: keep-all;}  


  /*    sub 5 */
  .s521_ul li { width: 100%;}
  .s521_ul li:nth-child(2n-1) { margin-right: 0%;}
  .s521_ul li:nth-child(2n) {  margin-left: 0%;}
  .s521_ul li > p:nth-child(1) img {  max-width: 50px;  }
  .s531_ul { gap: 0;}
  .s531_ul > li { width: 100%;}
  .s541_tab_ul > li {  width: 33.3333%; }
  .s541_mapbox .map_txtbox > li > img { max-width: 40px;}
  .s541_mapbox .map_txtbox > li .infobox { margin-left: 15px; margin-top: 5px; padding-left: 85px;}
  .s541_mapbox .map_txtbox > li .infobox .tit {  font-size: 1.3rem;}


  /* product board */
  .pro_menu { width: 40px; height: 40px;  padding: 5px; top: 80px;}
  .pro_menu.close { left: 100%; margin-left: -50px;}
  .pro_nav { max-width: calc(100% - 60px); margin-left: -100%;}
  .pro_nav .nav_item.on a { font-size: 1.4rem; }
  .pro_nav .nav_item > a { font-size: 1.2rem; }
  .pro_nav_cate > li { font-size: 15px; line-height: 20px;}
  .pro_nav_cate > li input { width: 15px;  height: 20px;}
  .pro_nav_cate > li input::before { height: 15px;  width: 15px;}
  .pro_nav_cate > li input::after { width: 5px; height: 10px;}
  .pro_nav_cate > li label {width: calc(100% - 25px);}

  #bo_list #gall_ul { gap: 0 !important;}
  .grid_view .gall_row .col-gn-4 {width: 100% !important;}

  #bo_v_con { min-height: auto !important;}
  .v_list_btn > a img { width: 100%;  max-width: 65px !important;}
  .bo_v_con_top > li.info .tit { font-size: 2.8rem !important; word-break: break-word !important;}

  .pro_item > li.txt > .descbox { flex-wrap: wrap;  padding-left: 35%;  box-sizing: border-box;  position: relative;}
  .pro_item > li.txt > .descbox > li {  display: block;  width: 100%; margin-bottom: 10px;}
  .pro_item > li.txt > .descbox > li:last-child {margin-bottom: 0;}
  .pro_item > li.txt > .descbox > li.first {  width: 35%;  position: absolute;  left: 0px;  top: 30px;}
  .pro_item > li.txt > .descbox > li > p:nth-child(1) { word-break: keep-all;}

  .pro_item > li.txt > p.tit { word-break: keep-all;}
  .starflon_pro1 .gall_li.col-gn-4.cate_1 { width: 100% !important; margin-bottom: 3vh;}


  /* board */
  #bo_v_info .profile_info { width: 100%;  border-bottom: 1px solid #f1f1f1; padding-bottom: 20px; margin-bottom: 0;}
  
  #sch_res_detail { padding: 20px 15px !important;}
  #sch_res_detail .sch_wr {  font-size: 0;}
  #sch_res_detail .frm_input { width: 100% !important; padding: 5px 10px !important; box-sizing: border-box;  font-size: 0.9rem;  margin-right:0; margin-bottom: 5px;}
  #sch_res_detail .btn_submit {width: 100% !important;}
  #sch_res_ov { height: 40px !important;   line-height: 40px !important; }
  .sch_res_list h2 {  margin: 0 0 5px !important;}
  .sch_more {  position: relative !important;  right: auto !important;  top: auto !important;  text-align: left  !important;  display: block;  margin-bottom: 10px;  margin-top: 10px;}
  .sch_thum { width: 100% !important;  margin-right: 0 !important;  text-align: center;  margin-top: 15px;}
  .shc_txt {width: 100% !important; }

 




}



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

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


  /* main */
  .ms1_text_2 { font-size: 2rem;}
  .ms1_text_4 { font-size: 1.3rem;}
  .m1_side { top: 55%;}
  .more .arrow { width: 30px;  height: 1px;}
  .more .arrow::before { height: 1px;}
  .m6 .more .arrow { margin-left: 20px;}
  .m6_txt3 { font-size: 1rem;}
  .m7 .main_ul > li.bg .imgbox { max-width: 135px;}
  .m7_ul > li.info img { max-width: 45px;}
  .m7_ul > li.info p { width: calc(100% - 55px);}


   /* sub */
   .sub_p1 { font-size: 2.2rem;}
  .subtop .txtbox p:nth-child(2) {  font-size: 2.8rem;}
  .s141_cont2 > li.txt .txtbox { padding: 6vh 2%;}
  .s411_top_contbox > li.img img {  max-width: 175px;}
  .s541_mapbox .map_txtbox > li > img { max-width: 35px;}
  .s541_mapbox .map_txtbox > li .infobox { margin-left: 8px; padding-left: 55px;}
  .s541_mapbox .map_txtbox > li .infobox p { margin-bottom: 8px;}
  .s541_mapbox .map_txtbox > li .infobox p .sub_txt {  margin-right: 6px;}
  .myChart_box {  width: 280px; height: 280px;  margin: auto;}
  .myChart_box .centerbox { width: 90px; height: 90px;}
  .pro_nav { padding: 25px 20px;}

    


}