/* PC */
@media screen and (max-width: 1560px) {    

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

}


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

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


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

  	html {font-size: 14.5px !important;} 	  
	
	.ms5 .ms5_cont2 .contbox { gap: 4rem;}

}


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

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

}



  
/* Tablet */
@media screen and (max-width: 1024px) {

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

  	.pc {display: none !important;}
  	.tablet {display: block !important;}
	.inner {width: 100%; padding-left: 2rem; padding-right: 2rem;}
	.mob_swiper {overflow: hidden;}
	.mob_swiper .swiper-slide {width: auto;}


	.header { height: 3.25rem;}	
	.header .h_inner {gap: 1.45rem; padding: 0;}
	.header .h_inner .bar { height: 0.75rem;}

	.footer { padding: 2.2rem 0 4.3rem;}
	.footer .f_logo { width: 9.15rem;  margin-bottom: 2rem;}
	.footer .f_infotxt { margin-bottom: 5.9rem; gap: 2rem;}
	.footer .f_infotxt .tit { font-size: 1.3rem;}
	.footer .f_infotxt .desc { font-size: 1rem; white-space: nowrap;}
	.footer .f_infobox { flex-direction: column;align-items: unset;  gap: 3.2rem;}
	.footer .f_infobox .item {font-size: 1rem; gap: 1rem; line-height: 1.6;}
	.footer .f_copyright { font-size: 1rem;  margin-top: 3.2rem;  padding-top: 1.5rem;}


	.m_titbox .icon { width: 1.7rem; margin-bottom: 1.2rem;}
	.m_titbox .sub { font-size: 1.6rem;  margin-bottom: 0.8rem;}	
	.m_titbox .tit { font-size: 2.25rem;}

	.m_titbox2 { gap: 1.3rem;}
	.m_titbox2 .tit {  font-size: 1.6rem;}
	.m_titbox2 .bar { width: 4.3rem; flex: 1;}

	.ms1 {gap: 3.6rem; margin-bottom: 5.65rem; z-index: 2;}
	.ms1 .contbox { background-image: url(../img/ms1_bg_mob.png);}
	.ms1 .contbox .txtbox { gap: 2.2rem; margin: 0;  padding: 2rem 0; min-height: 45rem;}
	.ms1 .contbox .txtbox .top_txt { font-size: 1rem;}
	.ms1 .contbox .txtbox .txtcont .logo { width: 18.15rem;  margin-bottom: 1.5rem;}
	.ms1 .contbox .txtbox .txtcont .tit { font-size: 2.5rem;}	
	.ms1 .contbox .txtbox .txtcont .sub { font-size: 1.5rem; margin-bottom: 2rem;}
	.ms1 .contbox .txtbox .txtcont .desc { font-size: 1.1rem;}
	.ms1 .contbox .imgbox { position: absolute;  width: 62%;  max-width: 22.15rem;  margin: 0;  right: 0;  bottom: -2.5rem;}
	.ms1 .itembox { flex-direction: column; gap: 2.2rem;}
	.ms1 .itembox .item {  box-shadow: 0 0.8rem 1.4rem rgba(0, 0, 0, 0.1);  width: 100%;  border-radius: 1rem; gap: 1.5rem;  padding: 1.5rem 1.7rem;}
	.ms1 .itembox .item .icon { width: 3rem;}
	.ms1 .itembox .item .tit .small {font-size: 1.2rem;}
	.ms1 .itembox .item .tit .mob_hide {display: none;}	

	.ms2 .ms2_deco { top: -8rem; width: 22%; max-width: 7.6rem;}
	.ms2 .m_titbox { margin-bottom: 5.75rem;}
	.ms2 .contbox { gap: 4.5rem;}
	.ms2 .contbox .item { flex-direction: column; gap: 2.2rem;}
	.ms2 .contbox .item:nth-child(even) { flex-direction: column;}
	.ms2 .contbox .item .imgbox { width: 100%; max-width: unset; border-radius: 1rem;}
	.ms2 .contbox .item .txtbox { padding: 0 0 0 1rem;}
	.ms2 .contbox .item:nth-child(even) .txtbox {text-align: left;}
	.ms2 .contbox .item .txtbox .tit { font-size: 1.8rem; margin-bottom: 1.2rem; font-weight: 600;}
	.ms2 .contbox .item .txtbox .desc { font-size: 1.3rem; line-height: 1.23; word-break: keep-all;}
	.ms2 .ramen_box {width: calc(100% + 2rem * 2); margin: 10rem -2rem 0;}

	.ms3 { padding: 5rem 0 5.5rem;}
	.ms3 .m_titbox { margin-bottom: 3.4rem;}
	.ms3 .contbox { gap: 0;}
	.ms3 .contbox .imgbox { width: calc(100% + 2rem * 2); margin: 0 -2rem;}
	.ms3 .contbox .txtbox { gap: 3rem;}
	.ms3 .contbox .txtbox .txt_tit { font-size: 1.6rem;}
	.ms3 .contbox .txtbox .itembox { gap: 0;}
	.ms3 .contbox .txtbox .itembox .item { width: 20rem;  padding: 2.4rem 2rem 1.4rem;  border-radius: 1rem; gap: 0.8rem; }
	.ms3 .contbox .txtbox .itembox .item .tit { font-size: 1.2rem;}
	.ms3 .contbox .txtbox .itembox .item .desc { font-size: 0.9rem;}

	.ms4 { padding: 0 0 5rem;}
	.ms4 .m_titbox { margin-bottom: 3.8rem;}
	.ms4 .contbox { gap: 4.5rem;}
	.ms4 .contbox .item { flex-direction: column;  gap: 1.6rem;}
	.ms4 .contbox .item:nth-child(even) { flex-direction: column;}
	.ms4 .contbox .item .imgbox { width: 100%; max-width: unset; border-radius: 1rem 1rem 1rem 0;}
	.ms4 .contbox .item:nth-child(even) .imgbox { width: 100%; max-width: unset; border-radius: 1rem 1rem 1rem 0;}
	.ms4 .contbox .item .txtbox { padding: 0 0 0 1rem; text-align: left;}
	.ms4 .contbox .item .txtbox .story { font-size: 1.1rem; margin-bottom: 1rem;}
	.ms4 .contbox .item .txtbox .sub { font-size: 1rem;}
	.ms4 .contbox .item .txtbox .desc {  font-size: 1.2rem; line-height: 1.33;    letter-spacing: 0;}

	.ms5 { padding: 5rem 0 4.5rem;}
	.ms5 .m_titbox { margin-bottom: 2.75rem;}	
	.ms5 .m_titbox2 .bar { opacity: 0.5;}
	.ms5 .ms5_cont1 { margin-bottom: 4.5rem; flex-direction: column; gap: 1.4rem;}
	.ms5 .ms5_cont1 .item { padding: 2rem 2.4rem; border-radius: 1rem; width: 100%;}
	.ms5 .ms5_cont1 .item .num { font-size: 3.5rem; margin-bottom: 0.8rem;}
	.ms5 .ms5_cont1 .item .tit { font-size: 1.2rem; margin-bottom: 0.4rem;}
	.ms5 .ms5_cont1 .item .desc { font-size: 1rem;}
	.ms5 .ms5_cont2 { gap: 5rem; margin-bottom: 4.3rem;}
	.ms5 .ms5_cont3 { flex-direction: column; align-items: unset; margin-bottom: 6.5rem; gap: 1.7rem;}
	.ms5 .ms5_cont3 .leftbox .desc { font-size: 1.5rem;}
	.ms5 .ms5_cont3 .leftbox .tit { font-size: 3.5rem;}
	.ms5 .ms5_cont4 .titbox {  margin-bottom: 6.75rem;}	
	.ms5 .ms5_cont4 .itembox { width: 100%; gap: 2rem;}
	.ms5 .ms5_cont4 .itembox .item { width: 50%; height: 10rem; border-radius: 1rem;   font-size: 2.75rem;  line-height: 1.18;}	
	.ms5 .ms5_cont4 .bottom_txt { margin-top: 2.3rem;  font-size: 1.2rem;}

	.ms6 { padding: 5rem 0 6.5rem;}
	.ms6 .m_titbox { margin-bottom: 4.7rem;}
	.ms6 .ms6_contbox { gap: 6.5rem;}
	.ms6 .ms6_titbox { gap: 1.5rem; margin-bottom: 2.65rem;}
	.ms6 .ms6_titbox .tit_desc { font-size: 1.2rem;}
	.ms6 .ms6_titbox.ver2 {margin-bottom: 4rem;}
	.ms6 .ms6_contitem {  flex-wrap: wrap; margin-bottom: 3.85rem; gap: 2rem;}
	.ms6 .ms6_contitem .item { flex: unset;  width: calc((100% - 2rem) / 2);   border-radius: 1rem;  padding: 2.2rem 1rem 1.6rem;  gap: 1.2rem;}
	.ms6 .ms6_contitem .item .tit { font-size: 1.5rem;}
	.ms6 .ms6_contitem .item .tit .small { font-size: 1.2rem;}
	.ms6 .ms6_contitem .item .desc { font-size: 1.2rem; line-height: 1.3; min-height: 2.6em; }
	.ms6 .ms6_contitem.ver2 {gap: 1.4rem;}
	.ms6 .ms6_contitem.ver2 .item {  width: 100%;  padding: 1rem 1.8rem; flex-direction: row;  align-items: center; text-align: left; }
	.ms6 .ms6_contitem.ver2 .item .tit {width: 7.8rem;}
	.ms6 .ms6_contitem.ver2 .item .desc {flex: 1; min-height: unset;}
	.ms6 .ms6_contitem2 .titbox.ver2 { margin-bottom: 2.3rem;}
	.ms6 .ms6_contitem2 .titbox .tit { font-size: 1.4rem;}
	.ms6 .ms6_contitem2 .titbox .desc { font-size: 1.1rem;}
	.ms6 .ms6_contitem2 .itembox { max-width: 40rem;  gap: 0.5rem;}
	.ms6 .ms6_contitem2 .itembox .item { padding: 0.5rem 0;}
	.ms6 .ms6_contitem2 .itembox .item .txt { font-size: 1rem;}
	.ms6 .ms6_contwrap { gap: 4rem;}	
	

}


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

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


}


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

	html {font-size: 2.222223vw;} 
	
}


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

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

}




/* Mobile */
@media screen and (max-width: 599px) {

  	html {font-size: 11px !important;}  
	
  	.mobile {display: block !important;}
  

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

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

}


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

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

}