@media screen and (max-width:1800px){
	#brandAll .content .linkBox{ margin: 0 80px;}
	#brandAll .content .slideWrap .slideBox .swiper-slide-next .outBox .inBox{ left: 200px;}
}

@media screen and (max-width:1700px){
	/* common */
	.w1700,.w1600{ padding: 0 40px;}

	#fp-nav.left{ left: 10px;}

	/* main */
	main .visual .slideWrap .txtBox{ left: 70px;}

	main .business > div{ padding-bottom: 80px;}
	main .business .content{ margin-left: 70px;}

	main .brand .titleBox{ padding: 100px 0 50px;}

	main .fran{ padding: 100px 0;}

	/* sub */
	#tabWrap .tabBox{ padding: 0 20px;}

	#about #vision .map .ctnBox{ padding: 0 0 5%;}
	#about #history .slideWrap .slideBox{ margin: 0 200px 30px 20px;}

	#brandAll .content .slideWrap .slideBox .swiper-slide .outBox{ width: 850px; height: 450px;}
}

@media screen and (max-width:1600px){
	/* common */
	.font70{ font-size:55px; }
	.font50{ font-size:45px; }
	.font42,.font40{ font-size:37px; }

	header .headerBox nav{ left: 60%;}

	#allMenu{ padding: 0 40px;}
	#allMenu #allGnb #gnb .depth2{ flex-wrap:wrap; }
	#allMenu #allGnb #gnb .depth2 li a{ height: 50px; line-height: 50px; display: block; } 

	/* main */
	main .business .content .ctnBox .itemBox .txtBox button{ font-size:20px; }
	main .business .content .ctnBox .itemBox{ width: 70px;}
	main .business .content .ctnBox .itemBox:last-child{ width: calc(100% - 210px);}

	main .fran .ctnBox{ width: 65%; margin-left: 50px;}
	main .fran .ctnBox .itemBox{ width: calc(100% / 3);}
	main .fran .ctnBox .itemBox a{ width: 100%;}

	/* sub */
	#brandAll .content .linkBox{ margin: 0 20px;}
	#brandAll .content .slideWrap .slideBox .swiper-slide .outBox{ width: 770px;}

	#brand .content .slideWrap{ max-width:none; width: 50%; flex-shrink:0; }
	#brand .content .titleBox dt .txt br{ display:none; }

	#about #introduce .intro .ctnBox .txtBox{ margin-right: 50px;}
	#about #introduce .intro .ctnBox .txtBox .txt br{ display:none; }
	#about #introduce .intro .ctnBox .imgBox{ flex-shrink:0; }
	#about #vision .map{ height: 750px;}

	.franchise .intro figure{ width: 50%;}
	.franchise .intro .txtBox .txt br{ display:none; }

	#order{ margin-top: 30px;}
	#order .slideWrap{ padding: 0 50px;}
	#order .slideBox .swiper-slide figure{ width: 50%; margin-right: 50px;}
	#order .arrowBox button.prev{ left: 0;}
	#order .arrowBox button.next{ right: 0;}
	#order .orderBox{ flex-wrap:wrap; }
	#order .orderBox:before{ display:none; }
	#order .orderBox .itemBox{ width: calc((100% - 80px) / 5);} 

	.inquiry .ctnBox .itemBox > dt{ width: 200px; padding: 0 20px;}
	.inquiry .ctnBox .itemBox > dd input.w320, .inquiry .ctnBox .itemBox > dd select.w320{ width: 100%;}
	
	#voc .ctnBox .itemBox > dd input.w320, 
	#voc .ctnBox .itemBox > dd select.w320{ width: 320px;}
	
	/* footer */
	.footer_in .txtBox .ctnBox .snsBox a{ flex-shrink:0; }
	.footer_in .txtBox .ctnBox{ display: flex; flex-direction: column; justify-content: space-between;}
	.footer_in .linkBox dl{ width: 140px;}
	.footer_in .linkBox > div{ flex-wrap: wrap; justify-content: flex-end; gap: 20px 0; }
}

@media screen and (max-width:1200px){
	/* common */
	.font70{ font-size:45px; }
	.font50{ font-size:35px; }
	.font46{ font-size:31px; }
	.font42,.font40{ font-size:28px; }
	.font28,.font26{ font-size:24px; }

	.w1700, .w1600{ padding: 0 20px;}

	header .headerBox nav{ display:none; }
	header .headerBox > div,
	header .gnbBg{ height: 70px;}
	header .headerBox > div .logo{ width: 200px;}
	header .headerBox > div .logo svg{ width: 100%;}
	header .headerBox nav #gnb > li .depth2 li.mobile{ display:block; }
	header.on .gnbBg{ height: calc(70px + var(--navH)); }

	#allMenu{ align-items: flex-start; padding: 110px 20px 0; }
	#allMenu #allGnb #gnb > li{ align-items: flex-start; flex-direction: column;}
	#allMenu #allGnb #gnb > li:not(:last-child){ margin-bottom: 35px;}
	#allMenu #allGnb #gnb > li > a{ font-size:35px; }
	#allMenu #allGnb #gnb .depth2{ display:none; }

	/* main */
	#fp-nav.left{ left: auto; right: 10px;}

	main .visual{ height: 100vh; }
	main .visual .slideWrap .txtBox{ left: 20px;}

	main .business > div{ justify-content: center; padding-bottom: 0;}
	main .business .content{ margin: 50px 20px 0; padding-bottom: 0; display: block;}
	main .business .content .ctnBox{ padding-bottom: 150px;}
	main .business .content .ctnBox .itemBox,
	main .business .content .ctnBox .itemBox:last-child{ width: 25%;}
	main .business .content .ctnBox .itemBox .txtBox{ position: relative; bottom: auto; left: auto; margin-top: 40px; white-space:wrap; }
	main .business .content .ctnBox .itemBox .txtBox button{ font-size:17px; width: 100%; letter-spacing: 0; text-align: left;}
	main .business .content .ctnBox .itemBox .txtBox button img{ margin-left: 0; margin-top: 5px;}
	main .business .content .slideWrap,
	main .business .content .slideWrap .slideBox{ max-width: none;  width: 100%; height: 300px;}
	main .business .content .slideWrap .slideBox .swiper-slide{ width: 100%; height: 100%; overflow: hidden;}
	main .business .content .slideWrap .slideBox .swiper-slide img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }

	main .brand{ display:flex; justify-content: space-between;}
	main .brand .titleBox{ padding: 80px 0; min-width:auto; width: 40%;}
	main .brand .ctnBox{ width: 60%; flex-shrink:1; }

	main .fran{ height: 100%;  display: flex; align-items: center; }
	main .fran .w1600{ flex-wrap:wrap; }
	main .fran .titleBox{ width: 100%; margin-bottom: 40px;}
	main .fran .titleBox .txt br{ display:none;}
	main .fran .ctnBox{ width: 100%; margin-left: 0;}
	main .fran .ctnBox .itemBox:not(:last-child):after{ margin: 0 10px;}
	main .fran .ctnBox .itemBox figure{ width: 50px; margin: 0 auto;}

	/* sub */
	#subContents{ padding: 5px 0 100px;}
	#subContents.sc03{ padding-bottom: 100px;}

	#brandAll .content{ flex-wrap:wrap; }
	#brandAll .content .linkBox{ display:flex; flex-wrap:wrap; width: 100%; }
	#brandAll .content .linkBox li button{ width: 200px;}
	#brandAll .content .slideWrap .slideBox{ margin-left: 20px;}

	#brand .content{ align-items:flex-end; }
	#brand .content .titleBox dt .title{ flex-direction:column; align-items:flex-start;  }
	#brand .content .titleBox dt .title button{ margin-left: 0; margin-top: 30px;}
	#brand .content .titleBox dt .txt{ margin: 30px 0 80px;}
	#brand .content .slideWrap{ margin-left: 50px; height: 400px;}

	#about #introduce .intro{ margin-bottom: 100px;}
	#about #introduce .intro .ctnBox .imgBox{ width: 40%;}
	#about #introduce .identity{ padding: 100px 20px;}
	#about #introduce .identity .slideWrap .slideBox .swiper-slide{ position: relative; width: 70%; height: 400px; margin: 0 20px;}
	#about #introduce .identity .slideWrap .slideBox .swiper-slide figure{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
	#about #introduce .identity .slideWrap .slideBox .swiper-slide figure img{ position:absolute; transform:translate(-50%,-50%);	 top: 50%; left: 50%; min-width:100%; min-height:100%;		
	object-fit:cover; }
	#about #introduce .identity .slideWrap .slideBox .arrowBox button.prev{ left: 12%;}
	#about #introduce .identity .slideWrap .slideBox .arrowBox button.next{ right: 12%;}
	#about #vision{ padding: 100px 0;}
	#about #vision .map .bg{ position: absolute; top: 50px; left: 0; width: 100%; height: 100%; }
	#about #vision .map .center{ position: relative; transform:none; top: auto; left: auto; text-align: center; margin: 0 auto;}
	#about #vision .map .center svg{ width: 100%; }
	#about #vision .map .center .line{ display:none; }
	#about #vision .map .ctnBox{ gap: 50px 0; padding: 0 0 50px; bottom: 50px;}
	#about #vision .map .ctnBox .itemBox{ width: 50%;}
	#about #vision .map .ctnBox .itemBox > div,
	#about #vision .map .ctnBox .itemBox.item2 > div{ width: 100%; height: auto; padding: 10px 20px;}
	#about #vision .map .ctnBox .itemBox.item3{ margin-left: 0;}
	#about #history{ padding: 100px 0;}

	#business .content section,
	#business .content section#out{ padding-top: 100px;}
	#business .content section .ctnBox .titleBox{ margin-right: 20px; width: 30%;}
	#business .content section .ctnBox .txtBox dl dd br{ display:none; }

	.franchise .intro{ margin: 100px 0 120px;}
	.franchise .intro .txtBox{ margin-right: 50px;}
	.franchise .intro .txtBox .title{ flex-wrap:wrap; }
	.franchise .intro .txtBox .title figure{ width: 100%; }
	.franchise .intro .txtBox .title button{ margin-left: 0; margin-top: 30px; }
	.franchise .content .ctnBox{ gap:20px; flex-wrap:wrap; }
	.franchise .content .ctnBox .itemBox{ width: calc((100% - 20px) / 2);}
	.franchise .content .ctnBox .itemBox .txtBox{ padding: 30px;}	
	.franchise .content .ctnBox .itemBox .img{ height: 250px;}
	.franchise .content .ctnBox .itemBox .txtBox{ height: calc(100% - 250px); }

	.inquiry .ctnBox .itemBox{ width: 100%; }
	.inquiry .ctnBox .itemBox > dt{ min-height:70px; }
	.inquiry .ctnBox .itemBox > dd input.w200,
	.inquiry .ctnBox .itemBox > dd input.w210,
	.inquiry .ctnBox .itemBox > dd input.w250, 
	.inquiry .ctnBox .itemBox > dd select.w250,
	.inquiry .ctnBox .itemBox > dd input.w670{ width: 100%; }
	.inquiry .ctnBox .itemBox > dd .radioBox{ flex-wrap:wrap; gap:20px 0; }
	.inquiry .ctnBox .itemBox > dd input[type="text"], 
	.inquiry .ctnBox .itemBox > dd select{ height: 60px;}
	.inquiry .ctnBox .itemBox > dd .inputBox figure img{ height: 60px;}

	#notice .searchBox{ margin: 70px 0 50px;}

	#noticeView .bBtn{ margin-top: 80px;}
 
	/* footer */
	.footer_in{ padding: 50px 0;}
	.footer_in > div{ flex-wrap:wrap; }
	.footer_in .txtBox{ flex-direction:column; }
	.footer_in .txtBox .logo{ margin-right: 0; margin-bottom: 30px; width: 120px; }
	.footer_in .txtBox .ctnBox .infoBox{ margin-bottom: 30px;}
	.footer_in .txtBox .ctnBox .snsBox{ flex-wrap:wrap; }
	.footer_in .txtBox .ctnBox .snsBox a{ width: 100%; }
	.footer_in .txtBox .ctnBox .snsBox a:not(:last-child){ margin-right: 0; margin-bottom: 15px;}
	.footer_in .txtBox,
	.footer_in .linkBox{ width: 100%; }
	.footer_in .linkBox > div{ display:none; }
	.footer_in .linkBox .copy{ margin-top: 40px; text-align: center; }
}

@media screen and (max-width:960px){
	/* common */
	.font70{ font-size:40px; }
	.font64{ font-size:35px; }
	.font50{ font-size:30px; }
	.font46{ font-size:28px; }
	.font42,.font40{ font-size:25px; }
	.font28,.font26{ font-size:22px; }
	.font22{ font-size:19px; }
	.font20{ font-size:18px; }
	.font19{ font-size:17px; }
	.font18{ font-size:16px; }
	.font17{ font-size:15px; }
	.font16{ font-size:14px; }

	#allMenu #allGnb #gnb > li:not(:last-child){ margin-bottom: 25px;}
	#allMenu #allGnb #gnb > li > a{ font-size:28px; }
	#allMenu #allGnb #gnb .depth2{ margin-top: 10px;}
	#allMenu #allGnb #gnb .depth2 li:not(:last-child){ margin-bottom: 15px; }
	#allMenu #allGnb #gnb .depth2 li a{ height: auto; line-height: 1.3; font-size:20px; }
	#allMenu #allGnb #gnb .depth2 li.mobile{ display:block; }

	#topBtn{ bottom: 20px; right: 20px; width: 50px; height: 50px;}
	#topBtn img{ width: 20px;}
	#topBtn.up{ bottom: 20px;}

	#title.aos-animate{ letter-spacing:5px; }

	/* main */
	#fp-nav{ top: 28%;}
	#fp-nav.left{ right: 5px; }
	#fp-nav ul li .fp-tooltip{ font-size: 13px; }
	#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 5px; height: 5px; }
	#fp-nav ul li:not(:last-child), .fp-slidesNav ul li:not(:last-child){ margin-bottom: 20px;}
	#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width: 12px; height: 12px;}

	main section .titleBox .title{ margin-bottom: 10px;}
	main section .titleBox.aos-animate .title{ letter-spacing:2px; }

	main .brand .titleBox .txt p:not(:first-child){ margin-top: 0px;}

	main .business { padding-top: 0; background: #F1F6F5;}
	main .business .titleBox{ margin-top: 20px;}
	main .business .content .slideWrap,
	main .business .content .slideWrap .slideBox{ height: 300px;}
	main .business .content .ctnBox{ padding-bottom: 130px;}
	main .business .content .ctnBox .itemBox .txtBox{ margin-top: 30px;}
	main .business .content .ctnBox .itemBox .txtBox .txt{ font-size:12px; white-space:nowrap; }
	main .business .content .ctnBox .itemBox .txtBox button{ position: relative; width: auto; display:block; }
	main .business .content .ctnBox .itemBox .txtBox button img{ width: 13px; }
	main .business .content .ctnBox .itemBox.on .circle{ width: 25px; height: 25px;}
	main .business .content .slideWrap .next{ right: 0; }	
	main .business .content .slideWrap .prev{ left: 0; }	

	main .brand > div{ flex-direction: column; justify-content: flex-end }
	main .brand .ctnBox{ width: 100%; height: 350px; }
	main .brand .titleBox{ width: 100%; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 30px;}
	main .brand .titleBox .linkBox{ margin: 20px 0 0; display:flex; flex-wrap:wrap; justify-content: space-between; gap:10px; transition-delay: 0.5s; }
	main .brand .titleBox .linkBox .txtBox{ width: calc((100% - 20px) / 3); height: 45px; background: #f4f4f4; color:#333; border-radius:50px; }
	main .brand .titleBox .linkBox .txtBox.active,
	main .brand .titleBox .linkBox .txtBox:hover{ background: var(--mainC); color:#fff; }
	main .brand .titleBox .linkBox .txtBox.active .off{ opacity: 1; color:#fff; }
	main .brand .titleBox .linkBox .txtBox button > *{ transform:translate(-50%,-50%); left: 50%;}
	main .brand .titleBox .linkBox .txtBox button{ display:block; width: 100%; }
	main .brand .titleBox .linkBox .txtBox .on .arrow{ display:none; }
	main .brand .titleBox .linkBox .txtBox figure img:first-child{ max-width:none; height: 18px; display:none; }
/*	main .brand .titleBox .linkBox .txtBox button > *{ opacity: 0; position: relative; transform: none;  top: auto;}*/
/*	main .brand .titleBox .linkBox .txtBox .off{ display:none; }*/
/*	main .brand .titleBox .linkBox .txtBox .on{ opacity: 1;}*/

	main .fran{ padding: 80px 0 0; }
	main .fran .ctnBox{ flex-wrap:wrap; }
	main .fran .titleBox{ margin-bottom: 0;}
	main .fran .ctnBox .itemBox{ position: relative; width: 100%; flex-direction: column;}
	main .fran .ctnBox .itemBox:last-child{ width: 100%; }
	main .fran .ctnBox .itemBox:not(:last-child):after{ width: 100%; height: 1px;}
	main .fran .ctnBox .itemBox .title{ margin: 10px 0 15px;}
	main .fran .ctnBox .itemBox a{ padding: 50px 0; display:flex; align-items:center; text-align: left;}
	main .fran .ctnBox .itemBox:hover a { transform: translateY(0); }
	main .fran .ctnBox .itemBox figure{ width: auto; margin: 0 30px;}
	
	/* sub */
	#sv{ padding-top: 100px;}
	#sv h1.title{ margin: 20px 0 10px;}

	#subContents{ padding: 30px 0 80px;}
	#subContents.sc03{ padding-bottom: 80px;}

	#title{ margin-bottom: 30px;}

	#tabWrap .tabBox{ flex-wrap:wrap; gap:5px; }
	#tabWrap .tabBox li{ height: 50px; width: calc((100% - 15px) / 4);}
	#tabWrap .tabBox li:not(:last-child){ margin-right: 0;}
	#tabWrap .tabBox li a{ padding: 0 10px; text-align: center; }

	#brandAll .content{ margin: 0; padding: 0 20px;}
	#brandAll .content .slideWrap,
	#brandAll .content .slideWrap .slideBox{ width: 100%; height: 400px; margin-left: 0;}
	#brandAll .content .slideWrap .slideBox .swiper-slide .outBox{ width: 100%; height: 100%;}
	#brandAll .content .linkBox{ margin: 0 0 30px; gap:10px; }
	#brandAll .content .linkBox li{ width: calc((100% - 20px) / 3); background: #f4f4f4; color:#333; border-radius:50px; overflow: hidden;}
	#brandAll .content .linkBox li.on button,
	#brandAll .content .linkBox li:hover button{ background: var(--mainC); }
	#brandAll .content .linkBox li.on button p,
	#brandAll .content .linkBox li:hover button p{ opacity: 1; color:#fff; }
	#brandAll .content .linkBox li button{ width: 100%; height: 50px; display:block;  }
	#brandAll .content .linkBox li button figure{ display:none;  }
	#brandAll .content .slideWrap .slideBox .swiper-slide-next .outBox .inBox{ left: 20px; }
	#brandAll .content .slideWrap .slideBox .swiper-slide .outBox .inBox .txtBox .txt{ white-space:nowrap; }
	#brandAll .content .slideWrap .slideBox .swiper-slide .outBox .inBox .txtBox .logo img{ height: 35px;}

	#brand{ margin-top: 20px; overflow: hidden;}
	#brand .content{ flex-wrap:wrap; }
	#brand .content .titleBox{ margin-bottom: 50px;}
	#brand .content .titleBox dt .title figure{ width: 50%;}
	#brand .content .titleBox dt .txt{ margin: 30px 0 40px;}
	#brand .content .titleBox dd .imgBox{ flex-wrap:wrap; gap:20px; }
	#brand .content .titleBox dd .imgBox .itemBox{ width: calc((100% - 40px) / 3); text-align: center; }
	#brand .content .titleBox dd .imgBox .itemBox:not(:last-child){ margin-right: 0; }
	#brand .content .slideWrap{ margin-left: 0; width: 100%; height: 350px;}
	#brand .content .slideWrap .arrow{ left: 5px;}
	#brand .content .slideWrap .arrow.next{ right: 5px;}

	#about #introduce .titleBox,
	#about #vision .offer .titleBox,
	#about #location h3.title{ margin-bottom: 40px; }
	#about .content section{ padding-top: 60px;}
	#about #introduce .intro{ margin-bottom: 80px;}
	#about #introduce .intro h3.title{ margin-bottom: 60px;}
	#about #introduce .intro .ctnBox { flex-wrap:wrap; }
	#about #introduce .intro .ctnBox .txtBox{ margin-right: 0; margin-bottom: 40px;}
	#about #introduce .intro .ctnBox .imgBox{ width: 100%; text-align: center; }
	#about #introduce .identity{ padding: 80px 20px;}
	#about #introduce .identity .slideWrap .slideBox{ padding-bottom: 0;}
	#about #introduce .identity .slideWrap .slideBox .swiper-slide{ width: 80%; margin: 0 10px;}
	#about #introduce .identity .slideWrap .slideBox .swiper-slide .txtBox{ min-width:300px; min-height: 230px; padding: 30px 20px; bottom: -20px; left: 20px;}
	#about #introduce .identity .slideWrap .slideBox .arrowBox{ display:flex; margin-top: 60px;}
	#about #introduce .identity .slideWrap .slideBox .arrowBox button{ width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 1px solid #000; display:flex; justify-content:center; 
	align-items:center; position: relative; transform: none;  top: auto;}
	#about #introduce .identity .slideWrap .slideBox .arrowBox button img{ width: 20px; filter: brightness(0);}
	#about #introduce .identity .slideWrap .slideBox .arrowBox button.prev{ margin-right: 10px;}
	#about #introduce .identity .slideWrap .slideBox .arrowBox button.prev,
	#about #introduce .identity .slideWrap .slideBox .arrowBox button.next{ left: auto; right: auto;}
	#about #history .slideWrap .arrowBox button{ width: 50px; height: 50px;}
	#about #vision{ padding: 80px 0 0;}
	#about #vision h3.title{ margin-bottom: 0;}
	#about #vision .map{ height: 600px;}
	#about #vision .map .center{ margin-top: -70px;}
	#about #vision .map .ctnBox{ gap: 20px; padding-bottom: 0; bottom: -50px;}
	#about #vision .map .ctnBox .itemBox{ width: 100%; }
	#about #vision .offer{ padding: 150px 0 80px;}
	#about #vision .offer .ctnBox{ flex-wrap:wrap; }
	#about #vision .offer .ctnBox .itemBox{ height: 150px;}
	#about #vision .offer .ctnBox .itemBox p{ transform:translateY(30px); transition:all 0.5s; } 
	#about #vision .offer .ctnBox .itemBox.on{ height: 250px;}
	#about #vision .offer .ctnBox .itemBox,
	#about #vision .offer .ctnBox .itemBox.on,
	#about #vision .offer .ctnBox .itemBox.off{ width: 100%; }
	#about #vision .offer .ctnBox .itemBox.on p{ transform:translateY(0px); }
	#about #history{ padding: 80px 0;}
	#about #history h3.title{ margin-bottom: 50px;}
	#about #history .slideWrap .slideBox .swiper-slide{ width: 300px; padding-left: 20px;}
	#about #location .titleBox ul{ margin: 30px 0 50px;}
	#about #location .titleBox ul li{ width: 100%;}
	#about #location .titleBox ul li:not(:last-child){ margin-right: 0; margin-bottom: 10px; }
	#about #location .titleBox ul li span{ min-width:100px; }
	#about #location .mapBox iframe{ height: 400px;}		
	
	#business .content section,
	#business .content section#out{ padding-top: 60px;}
	#business .content section .ctnBox { flex-wrap:wrap; margin-bottom: 50px; }
	#business .content section .ctnBox .titleBox{ width: 100%; margin-right: 0; padding: 30px 20px;}
	#business .content section .slideBox .swiper-slide{ height: 250px;}
	#business .content section .slideBox .arrowBox button.prev{ left: 10px;}
	#business .content section .slideBox .arrowBox button.next{ right: 10px;}

	.franchise #tabWrap .tabBox li{ width: calc((100% - 10px) / 3);}
	.franchise .intro{ margin: 60px 0 80px;  flex-wrap:wrap; }
	.franchise .intro > figure{ width: 100%; margin-top: 40px; text-align: center; }
	.franchise .intro .txtBox .title figure img{ height: 40px;}
	.franchise .content .txt{ margin-bottom: 50px;}
	.franchise .content .txt br{ display:none; }
	.franchise .content .ctnBox .itemBox{ width: 100%; }

	#order .orderBox{ margin-bottom: 40px; gap:20px 10px; justify-content:center; }
	#order .orderBox .itemBox{	 width: calc((100% - 30px) / 4); height: auto; padding: 15px 0;}
	#order .orderBox .itemBox figure{ width: 50px; height: 50px;}	
	#order .slideWrap{ padding:0; }
	#order .slideBox .swiper-slide{ flex-wrap:wrap; }
	#order .slideBox .swiper-slide figure{ width: 100%; margin-right: 0; margin-bottom: 40px;}
	#order .slideBox .swiper-slide .txtBox .title,
	#order .slideBox .swiper-slide .txtBox .txt{ margin-bottom: 20px;}
	#order .slideBox .swiper-slide .txtBox .txt br{ display:none; }
	#order .slideWrap .arrowBox{ display:flex; margin-top: 20px;}
	#order .slideWrap .arrowBox button{ position: relative; transform:none; top: auto; left: auto; right: auto; width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 1px solid #000;		display:flex; justify-content:center;  align-items:center; }
	#order .slideWrap .arrowBox button img{ width: 20px; filter: brightness(0);}
	#order .slideWrap .arrowBox button.prev{ margin-right: 10px;}

	.inquiry form{ padding-bottom: 2px;}
	.inquiry .tTxt{ margin-top: 0; }
	.inquiry .ctnBox{ margin-bottom: 40px;}
	.inquiry .ctnBox .itemBox{ flex-wrap:wrap; }
	.inquiry .ctnBox .itemBox > dt{ width: 100%; border-right: none; min-height:60px; }
	.inquiry .ctnBox .itemBox > dd{ min-height:70px; border-left: 1px solid #DBDBDB; padding: 10px;}
	.inquiry .ctnBox .itemBox > dd .radioBox{ gap:10px 0; }
	.inquiry .ctnBox .itemBox.email > dd .inputBox{ flex-wrap:wrap; }
	.inquiry .ctnBox .itemBox.email > dd input{ width: calc((100% - 34px) / 2); }
	.inquiry .ctnBox .itemBox.email dd select{ margin-left: 0; margin-top: 10px;}
	.inquiry .ctnBox .itemBox > dd input[type="date"],
	.inquiry .ctnBox .itemBox.store select:not(:last-child){ margin-right: 0; margin-bottom: 10px;}
	.inquiry .ctnBox .itemBox > dd .radioBox.type2 .Box:not(:last-child){ margin-right: 20px;}

	#notice #tabWrap .tabBox li,
	#notice #tabWrap .tabBox li:first-child{ width: calc((100% - 15px) / 4);}
	#notice .searchBox{ margin: 50px 0 30px;}
	#notice .searchBox > *{ height: 60px;}
	#notice .searchBox .inputBox,
	#notice .searchBox select{ padding: 0 20px; background-position: right 20px top 50%}
	#notice .tableBox{ margin-bottom: 40px;}
	#notice .tableBox colgroup{ display:none; }
	#notice .tableBox th,
	#notice .tableBox td{ height: 75px;}
	#notice .tableBox th{ width: 15%;}
	#notice .tableBox th:first-child{ width: 12%; padding: 0 10px;}
	#notice .tableBox th:nth-child(3){ width: 58%;}
	#notice .tableBox td{ padding: 0 10px;}
	#notice .tableBox td:nth-child(3){ padding: 0 20px;}

	#noticeView .ctnBox{ margin-top: 0;}
	#noticeView .ctnBox .tit{ padding: 40px 0 30px;}			
	#noticeView .ctnBox .info{ padding: 20px;}
	#noticeView .ctnBox .file_box dl dt{ padding: 20px 10px; width: 100px;}
	#noticeView .ctnBox .file_box dl dd a{ padding: 20px 15px;}
	#noticeView .ctnBox .pages{ flex-wrap:wrap; }
	#noticeView .ctnBox .pages dl{  width: 100%; height: 70px; margin-right: 0; margin-bottom: 20px;}
	#noticeView .ctnBox .pages dl dt{ display:flex; padding: 0 15px;}
	#noticeView .ctnBox .pages dl dt i{ order:2; margin-right: 0; margin-left: 15px;}
	#noticeView .ctnBox .pages dl dd a,
	#noticeView .ctnBox .pages dl.next dd a{ justify-content:flex-start; padding: 0 15px;}
	#noticeView .ctnBox .pages dl.next{ flex-direction:row; }
	#noticeView .ctnBox .pages dl.next dt::after{ right: -1px; left: auto;}
	#noticeView .bBtn{ margin-top: 40px;}
	
	#voc .ctnBox .itemBox > dd input.w320, 
	#voc .ctnBox .itemBox > dd select.w320{ width: 100%;}

	#store .mapBox{ flex-direction: column-reverse; height: auto;}
	#store .mapBox #map{ height: 350px;}
	#store .mapBox .content{ width: 100%; }
	#store .mapBox .content .ctnBox{ height: 400px;}
	#store .mapBox .content .searchBox dd select, 
	#store .mapBox .content .searchBox dd .inputBox{ height: 55px;}
}

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

}