/* 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;}        

}


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

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

}



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

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

  	.pc {display: none !important;}
  	.tablet {display: block !important;}

	.inner { width: 100%; padding: 0 1.6rem;}

	/* 공통 - 헤더 */
	.header { height: 6rem;}
	.header .h_inner { gap: 2rem;}
	.header .h_logo { width: 6.5rem;}
	.header .h_nav > li > .link { display: none;}
	.header .h_side .button {  display: none;}
	.header .h_side .menu_open { display: flex;}


	/* 공통 - 기능소개 메뉴 레이어 */
	.func_menu_popup { left: 0; top: 0; width: 100%; height: 100%; box-shadow: none;  border-radius: 0; overflow: auto;}    
	.func_menu_popup::-webkit-scrollbar {display: none}
	.func_menu_popup .pop_head { padding: 1.6rem;border-bottom: 0;}
	.func_menu_popup .pop_head .title {  font-size: 1.6rem; text-align: center;}
	.func_menu_popup .pop_head .pop_close {display: flex; position: absolute;  top: 1.6rem; right: 1.6rem;}
	.func_menu_popup .pop_menu { flex-direction: column; padding: 2.4rem 1.6rem;  gap: 2.4rem;}
	.func_menu_popup .pop_menu > .item { width: 100%;}
	.func_menu_popup .pop_menu > .item > .link { gap: 1.6rem;}
	.func_menu_popup .pop_menu > .item .icon { width: 4rem;}
	.func_menu_popup .pop_menu > .item .txtbox { flex: 1; gap: 0.2rem;}
	.func_menu_popup .pop_menu > .item .txtbox .tit { font-size: 1.4rem;}
	.func_menu_popup .pop_menu > .item .txtbox .desc { font-size: 1.3rem;}
	.func_menu_popup .pop_menu > .item .arrow { display: flex;}
	.func_menu_popup .pop_bottom { position: relative; right: unset;  top: unset;  padding: 0 1.6rem 4.8rem;}
	.func_menu_popup .pop_bottom .down_btn { font-size: 1.4rem; line-height: 157%;   gap: 0.4rem; border-radius: 1.2rem;  height: 4.8rem;}
	.func_menu_popup .pop_bottom .down_btn .icon {width: 2.4rem;}


	/* 공통 - 모달 */
	.modal .modal_box { border-radius: 1.6rem; padding: 5.6rem 1.6rem 2.4rem;  min-width: unset; width: calc(100% - 1.6rem * 2);  max-width: 100%;}
	.modal .modal_box .modal_tit { font-size: 1.6rem;}
	.modal .modal_box .modal_btnbox { gap: 0.8rem; margin-top: 2.4rem;}
	.modal .modal_box .modal_btnbox .modal_btn {  font-size: 1.4rem; width: 9.6rem;   height: 4.8rem; border-radius: 0.8rem;}


	/* 공통 - 푸터 */
	.footer { padding: 4rem 0;}
	.footer .f_inner { flex-direction: column; align-items: unset; font-size: 1.3rem;  line-height: 154%;  gap: 0;}
	.footer .f_tit { font-size: 1.4rem; line-height: 157%;}
	.footer .f_info { order: 3; border-top: 1px solid rgba(255, 255, 255, 0.1);  padding-top: 4rem; margin-top: 4.6rem;}
	.footer .f_info .logo { width: 7.8rem; margin-bottom: 2.4rem;}
	.footer .f_info .info_txt { margin-bottom: 1.2rem;}
	.footer .f_cont {  justify-content: space-between; gap: 1rem; order: 1; margin-bottom: 2.4rem;}
	.footer .f_cont .item { width: 50%; gap: 0.8rem;}
	.footer .f_cont .item .contbox { gap: 0.6rem;}
	.footer .f_cont .sitebox .contbox .link { gap: 0.7rem;}
	.footer .f_cont .sitebox .contbox .link .desc { font-size: 1.2rem; line-height: 150%;}
	.footer .f_contact { gap: 0.8rem; order: 2;}
	.footer .f_contact .contbox .inq_btn {  font-size: 1.3rem;  border-radius: 0.8rem;  height: 3.2rem; padding: 0 1.6rem;}


	/* 공통 - 폼 */
	.form_tit { font-size: 1.4rem;  line-height: 157%;}
	.form_desc { font-size: 1.3rem; line-height: 154%;}
	.input_box .input_text {padding: 1.3rem 2rem;  font-size: 1.4rem; line-height: 157%; border-radius: 0.8rem;}
	.input_box textarea.input_text {  height: 16rem;}
	.select_box .select { border-radius: 0.8rem;  background: url(/images/landing/select_arrow.png) no-repeat right 1.6rem center / 2.8rem;  font-size: 1.4rem; padding: 1.3rem 5rem 1.3rem 2rem;}


	.button { font-size: 1.3rem;  line-height: 154%;  padding: 0 2.4rem;  border-radius: 0.8rem;  height: 4rem;}
	.button.google_btn .icon {width: 1.3rem;}
	.button.apple_btn .icon {width: 1.1rem;}


	/* 공통 - 탭 */
	.tab_swiper .tab_navbox { justify-content: unset;}
	.tab_navbox .tab_nav .link { font-size: 1.3rem; line-height: 154%;  padding: 0 2rem;  height: 4rem; display: flex; align-items: center; justify-content: center;}


	/* 메인 */
	.m_titbox.mb { margin-bottom: 4rem;}
	.m_titbox.mb2 {margin-bottom: 4rem;}
	.m_titbox .tit { font-size: 2rem; line-height: 150%;}
	.m_titbox .tit2 { font-size: 2.4rem; line-height: 142%;}
	.m_titbox .tit3 { font-size: 2rem; line-height: 150%;}
	.m_titbox .desc {  font-size: 1.4rem; line-height: 157%; margin-top: 0.8rem;}
	.m_titbox .desc2 {  font-size: 1.4rem; line-height: 157%; margin-top: 0.8rem;}
	.m_titbox .btnbox { margin-top: 2.4rem; gap: 0.8rem;}
	.main_wrap .container { padding-top: 0;}
	.ms1 {padding-top: 10.8rem; margin-bottom: 8rem; background: linear-gradient(180deg, #e7edff 0%, #c1c9f1 100%);}
	.ms1 .txtbox .sub {  font-size: 1.6rem;  line-height: 150%;  margin-bottom: 0.8rem;}
	.ms1 .txtbox .tit { font-size: 2.4rem; line-height: 142%;  margin-bottom: 2.4rem;}
	.ms1 .txtbox .btnbox {  gap: 0.8rem;}
	.ms1 .imgbox { width: 100%; max-width: 100%;  margin: -1rem auto 0;}
	.ms2 { margin-bottom: 8rem;}
	.ms2 .ms2_swiper { width: calc(100% + 1.6rem * 2);  margin: 0 -1.6rem;  padding: 0 1.6rem;}
	.ms2 .ms2_swiper .item { width: 28rem; height: 30.8rem; border-radius: 1.2rem;   margin-right: 0; }
	.ms2 .ms2_swiper .item:last-child {margin-right: 0 !important;}
	.ms2 .ms2_swiper .item .bg { width: 100%;}
	.ms2 .ms2_swiper .item1 .bg { background-image: url(/images/landing/ms2_item_img1_mob.png);}
	.ms2 .ms2_swiper .item2 .bg { background-image: url(/images/landing/ms2_item_img2_mob.png);}
	.ms2 .ms2_swiper .item3 .bg { background-image: url(/images/landing/ms2_item_img3_mob.png);}
	.ms2 .ms2_swiper .item4 .bg { background-image: url(/images/landing/ms2_item_img4_mob.png);}
	.ms2 .ms2_swiper .item .txtbox { gap: 0.8rem; padding: 3.2rem 2.4rem;}
	.ms2 .ms2_swiper .item .txtbox .tit { font-size: 2rem;  line-height: 150%;}
	.ms2 .ms2_swiper .item .txtbox .desc { opacity: 1; font-weight: 500;  font-size: 1.3rem;  line-height: 154%;  white-space: unset;}
	.ms3 { margin-bottom: 8rem;}
	.ms3 .paging_box { display: none;}
	.ms3 .ms3_swiper { width: calc(100% + 1.6rem * 2);  margin: 0 -1.6rem;  padding: 0 1.6rem;}
	.ms3 .ms3_swiper .swiper-wrapper {  gap: 0;}
	.ms3 .ms3_swiper .item { position: relative;  top: auto;  height: auto;  border-radius: 1.2rem;  padding: 3.2rem 2.4rem;  flex-direction: column; gap: 4rem;}
	.ms3 .ms3_swiper .item .txtbox .tit { font-size: 2.4rem;  line-height: 133%;   letter-spacing: -0.02em;  margin-bottom: 1.6rem;}
	.ms3 .ms3_swiper .item .txtbox .desc {  margin-bottom: 0.8rem;  word-break: unset; font-size: 1.3rem;  line-height: 154%;}
	.ms3 .ms3_swiper .item .txtbox .desc br { display: none;}
	.ms3 .ms3_swiper .item .txtbox .ai_txt { font-size: 1.3rem; gap: 0.4rem;}
	.ms3 .ms3_swiper .item .txtbox .ai_txt .icon { width: 1.3rem;}
	.ms3 .ms3_swiper .item .txtbox .btnbox {  margin-top: 2.4rem;}
	.ms3 .ms3_swiper .item .txtbox .btnbox .button { border-radius: 0.8rem;  padding-right: 2rem; gap: 0.4rem;}
	.ms3 .ms3_swiper .item .txtbox .btnbox .button .icon { width: 2rem; }
	.ms3 .ms3_swiper .item .imgbox { width: 100%; max-width: 100%;}
	.ms3 .ms3_swiper .pagination { display: flex;  align-items: center;   justify-content: center;  position: relative; left: auto;  top: auto;  bottom: auto; margin-top: 1.6rem;}
	.ms4 { margin-bottom: 8rem;}
	.ms4 .contbox { gap: 3rem 1.6rem;}
	.ms4 .contbox .item { width: calc((100% - 1.6rem) / 2);}
	.ms4 .contbox .item > .link { gap: 1.2rem;}
	.ms4 .contbox .item .imgbox {  border-radius: 1.2rem;}
	.ms4 .contbox .item .tit { font-size: 1.4rem; line-height: 157%;}
	.ms5 { margin-bottom: 16.5rem;}
	.ms5 .m_titbox {margin-bottom: 6.6rem;}
	.ms5 .contbox { gap: 0.8rem 0;}
	.ms5 .contbox .item { width: calc(100% / 3);}
	.ms6 { background-image: url(/images/landing/ms6_bg_mob.jpg); padding: 4.8rem 0;}
	.ms7 { padding-top: 4.8rem; background: linear-gradient(180deg, #f3f6ff 0%, #e2e7ff 100%);}
	.ms7 .m_titbox { margin-bottom: 5.6rem;}
	.ms7 .m_titbox .btnbox .button { border-radius: 0.8rem; gap: 0.8rem;}
	.ms8 { margin-bottom: 8rem;}
	.ms8 .contbox {display: none;}
	.ms8 .imgbox {display: flex; max-width: 32.8rem; margin: 0 auto;}
	.ms9 { margin-bottom: 8rem;}
	.ms9 .m_titbox .tab_wrap { width: 100%; margin-top: 1.6rem;}
	.ms9 .m_titbox .tab_navbox { width: 100%; gap: 0.8rem;}
	.ms9 .m_titbox .tab_navbox .tab_nav { width: 50%;}
	.ms9 .vidbox { border-radius: 0.8rem;}
	.ms9 .vidbox .video { aspect-ratio: 1 / 0.61890; }
	.ms9 .vidbox .video .play_btn { width: 2.7rem; top: 47%;}
	.ms9 .vidbox .controls { height: 3.6rem;  padding: 1rem 1.6rem;}
	.ms9 .vidbox .controls .control_btn { width: 1.543rem; margin-right: 0.6rem;}
	.ms9 .vidbox .controls .time { font-size: 0.9rem; margin-right: 0.8rem;}
	.ms9 .vidbox .controls .progress {  border-radius: 10rem;  height: 0.3rem;}
	.ms9 .vidbox .controls .progress .load,
	.ms9 .vidbox .controls .progress .bar { border-radius: 10rem; }
	.ms9 .vidbox .controls .btnbox {  gap: 1.028rem; margin-left: 1.276rem;}
	.ms9 .vidbox .controls .btnbox .btn { width: 1.543rem;}

	/* 기능소개 */
	.fs1 { margin-bottom: 8rem;  padding-top: 10.8rem;}
	.fs1 .m_titbox.mb2 { margin-bottom: 4.8rem;}
	.fs1 .m_titbox .desc { color: #131720;}
	.fs1 .fs_swiper { height: unset; width: calc(100% + 1.6rem * 2);  margin: 0 -1.6rem;  padding: 0 1.6rem;}
	.fs1 .fs_swiper .item {  border-radius: 1.2rem; padding: 3.2rem 1.6rem 1.6rem;  flex-direction: column; gap: 1.6rem;  position: relative;  left: auto;  top: auto;  width:100%; height: unset}
	.fs1 .fs_swiper .item .txtbox {padding: 0 0.8rem;}
	.fs1 .fs_swiper .item .txtbox .tit {  font-size: 2.4rem;  line-height: 133%;   margin-bottom: 1.2rem; word-break: keep-all;}
	.fs1 .fs_swiper .item .txtbox .descbox {  gap: 0.8rem;}
	.fs1 .fs_swiper .item .txtbox .descbox .desc {  font-size: 1.3rem;  line-height: 154%;}
	.fs1 .fs_swiper .item .txtbox .btnbox {  margin-top: 1.6rem;}
	.fs1 .fs_swiper .item .txtbox .btnbox .button { gap: 0.2rem; padding-right: 1.8rem;  border-radius: 0.8rem;}
	.fs1 .fs_swiper .item .txtbox .btnbox .button .icon { width: 2rem;}
	.fs1 .fs_swiper .item .imgbox {  width: 100%;  max-width: 100%;}
	.fs1 .fs_swiper::after {display: none;}
	.fs1 .fs_swiper .pagination { display: flex;  align-items: center;   justify-content: center;  position: relative; left: auto;  top: auto;  bottom: auto; margin-top: 1.6rem;}
	.function_wrap .ms4 { margin-bottom: 8rem;}
	.function_wrap .ms4 .m_titbox { margin-bottom: 3.2rem;}
	.function_wrap .ms4 .contbox .item > .link { gap: 1.2rem;}
	.function_wrap .ms4 .contbox .item .tit { font-size: 1.4rem; line-height: 157%;}


	/* 도입 문의하기 */
	.inquiry_wrap .container { padding-top: 10.8rem;}
	.is1 {  margin-bottom: 4rem;}
	.is1 .contbox {  flex-direction: column;  gap: 1.6rem; padding-bottom: 4rem;}
	.is1 .contbox .item { width: 100%; gap: 1.2rem; padding: 4rem 1.6rem;  border-radius: 2.4rem; box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.08);}
	.is1 .contbox .item .imgbox { width: 8.8rem;}
	.is1 .contbox .item .tit {  font-size: 1.6rem;}
	.is2 { margin-bottom: 8rem;}
	.is2 .m_titbox { margin-bottom: 3.2rem;}
	.is2 .from_wrap {  max-width: 100%; gap: 4rem;}
	.is2 .form_item .form_tit {  margin-bottom: 1.2rem;}
	.is2 .form_item .form_desc {  margin-top: 1.3rem;}
	.is2 .submit_btn {  font-size: 1.6rem;  line-height: 150%;  border-radius: 1.2rem;   width: 100%; height: 5.6rem;}


	/* 플랜 */
	.plan_wrap .container { padding-top: 10.8rem;}
	.ps1 { margin-bottom: 4rem;}
	.ps1 > .inner { padding: 0 0 4rem; width: calc(100% - 1.6rem*2); margin: 0 auto;}
	.ps1 .m_titbox .color_txt {  font-size: 1.6rem;  line-height: 150%;  margin-bottom: 0.8rem;}
	.ps1 .profile {padding: 2rem 2.4rem;  max-width: 100%; gap: 2.2rem; border-radius: 0.8rem; flex-direction: column; align-items: unset; gap: 0; }
	.ps1 .profile .thumbox { width: 8rem;}
	.ps1 .profile .txtbox { display: flex; align-items: flex-start;  justify-content: space-between;}
	.ps1 .profile .txtbox .title {  flex-direction: column;  align-items: flex-start;  gap: 0.2rem;  margin-top: 0.6rem;}
	.ps1 .profile .txtbox .title .name {  font-size: 1.6rem;  line-height: 150%;}
	.ps1 .profile .txtbox .title .desc {  font-size: 1.3rem;  line-height: 154%;}
	.ps1 .profile .txtbox .inq_btn {  font-size: 1.2rem;  line-height: 150%;  padding: 0 1.6rem;  border-radius: 0.8rem;  height: 3.2rem;  margin-top: -1rem;}
	.ps2 {  margin-bottom: 8rem;}
	.ps2 .m_titbox .desc2 {margin-top: 0.8rem;}
	.ps2 .m_titbox .button {  border-radius: 1.2rem;  padding: 0 2.4rem;   margin-top: 2.4rem;}
	.ps2 .contbox {  flex-direction: column; gap: 1.6rem;}
	.ps2 .contbox .item { width: 100%;  padding: 4rem 2rem 2rem;  box-shadow: 0 0.4rem 1.2rem 0 rgba(0, 0, 0, 0.08);  border-radius: 1.2rem;}
	.ps2 .contbox .item .top { margin-bottom: 2rem; padding-bottom: 2.4rem;}
	.ps2 .contbox .item .top .icon { width: 6.4rem; margin-bottom: 1.2rem;}
	.ps2 .contbox .item .top .tit {  margin-bottom: 0;  font-size: 1.3rem;  line-height: 154%;}
	.ps2 .contbox .item .top .price {  font-size: 2rem;  line-height: 160%;}
	.ps2 .contbox .item .top .price .txt { font-size: 1.3rem;}
	.ps2 .contbox .item .list {  gap: 0.8rem;}
	.ps2 .contbox .item .list .listitem {  gap: 0.8rem; font-size: 1.3rem;  line-height: 154%;}
	.ps2 .contbox .item .list .listitem .icon { width: 1.4rem;}


	/* 기술소개 */
	.skill_wrap .container { padding-top: 10.8rem;}
	.ss1 { margin-bottom: 8rem;}
	.ss1 .m_titbox { margin-bottom: 3.7rem;}
	.ss1 .tab_swiper {  width: calc(100% + 1.6rem * 2);  margin: 0 -1.6rem 4.8rem;  padding: 0 1.6rem;}
	.ss1 .contbox { gap: 2.4rem;}
	.ss1 .contbox .imgbox { border-radius: 0.8rem;}
	.ss1 .contbox .txtbox {  gap: 0.7rem;}
	.ss1 .contbox .txtbox .tit { font-size: 1.6rem;}
	.ss1 .contbox .txtbox .desc { font-size: 1.3rem;  line-height: 154%;}

}


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

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


}


@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;}

}