@media screen and (max-width:1700px){
	/* common */
	.w1700{ padding: 0 20px;}
	.font100{ font-size:80px; }
	.font90{ font-size:70px; }

	/* header */
	#allMenu .gnbWrap #gnb > li > a{ font-size:70px; }

	/* main */
	.main .visual .visualSwiper .swiper-slide .txtBox{ left: 0; padding: 0 20px;}
	.main .visual .slideBox .pagiWrap{ right: 20px; }	
	.main .visual .scrollDown{ right:25px;}

	.main .supply .map{ margin-left: 0;}
	.main .about .w1700{ left: 0px;}

	/* sub */
	#greeting .business .slideBox .swiper-slide figure{ height: 100%; position: relative; }
	#greeting .business .slideBox .swiper-slide figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; object-fit:cover; min-width:100%; min-height:100%; }
	#greeting .location .itemBox .innerBox .txtBox ul li:first-child:after{ margin: 0 20px;}

	.pmd .bottomBox .itemBox .txtBox .item .txt br{ display:none; }
	.pmd .bottomBox .itemBox .imgBox{ width: 40%;}
}
@media screen and (max-width:1500px){
	/* common */
	.w1500{ padding: 0 20px;}
	.font100{ font-size:70px; }
	.font90{ font-size:60px; }
	.font80{ font-size:55px; }
	.font70,.font68{ font-size:50px; }
	.font60{ font-size:49px;}
	.font55{ font-size:48px;}
	.font50{ font-size:45px; }
	.font40{ font-size:40px; }

	/* header */
	#allMenu p{ right:20px; }
	#allMenu .gnbWrap #gnb > li > a{ font-size:60px; -webkit-text-stroke: 3px #fff}

	/* main */
	#titleBox h1{ -webkit-text-stroke: 3px #111; }

	.main .visual .visualSwiper .swiper-slide figure{ position: relative; width: 100%; height: 100vh;}
	.main .visual .visualSwiper .swiper-slide figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	.main .visual .visualSwiper .swiper-slide .txtBox .title{ -webkit-text-stroke: 3px #fff;}
	.main .visual .visualSwiper .swiper-slide .txtBox .arrow{ top: 10%;}

	.main .cmb .slideBox{ width: 40%; margin-left: 50px;}
	.main .cmb .slideBox .cmbSwiper .swiper-slide img{ width: 50%;}

	.main .product #titleBox{ left: 20px; position: relative; top: auto; transform:none; }
	.main .product #titleBox.aos-animate{ left: 20px; }

	.main .supply .map{ width: 100%; }
	.main .supply .map .svg{ width: 100%; height: 100%;}

	.main .about #titleBox h1,footer #titleBox h1{ -webkit-text-stroke: 3px #fff; }
	.main .about .mainSwiper .swiper-slide{ top:-50px;}
	.main .about .mainSwiper .swiper-slide-active .title{ font-size:48px;}
	.main .about .mainSwiper .swiper-slide-active.slide03{ top: 10px;}
	.main .about .sildeBox .pagiBox{ right:20px; }

	.main .what #titleBox{ margin-left: 20px;}
	.main .what .ctnBox{ width: 60%;}
	.main .what .ctnBox .itemBox a{ padding: 40px 50px;}
	.main .what .ctnBox .itemBox a .txtBox .txt{ white-space: nowrap;}

	/* sub */
	#subWrap .subVisual .txtBox{ -webkit-text-stroke: 3px #fff;}
	#greeting .history .ctnBox .title{ padding: 150px 0 0 40px; }
	#greeting .history .ctnBox .historyBox .scrollBox{ width: 70%;}
	#greeting .history .ctnBox:before{ left: calc(30% + 211px); top: 90px;}
	#greeting .history .ctnBox:after{ left: calc(30% + 210px);}
	#greeting .history .ctnBox .historyBox .scrollBox li{ padding-top: 70px;}
	#greeting .history .ctnBox .historyBox .scrollBox li:last-child{ padding-bottom: 50px;}	
	#greeting .business .slideBox .swiper-slide .txtBox{ padding: 50px 20px;}
	#greeting .business .slideBox .swiper-slide .txtBox .pagiBox{ left: 20px;}
	#greeting .business .slideBox .swiper-slide.slide02 .txtBox .pagiBox{ right: 20px;}
	#greeting .supply .map{ width: 100%; }
	#greeting .supply .map .svg{ width: 100%; }
	#greeting .location .itemBox .innerBox .txtBox{ padding: 50px 20px;}

	#cmb .info .txtBox .txt br{ display:none; }
	#cmb .info .slideBox{ flex-shrink:0; margin-left: 50px;}
	#cmb .process .ctnBox{ flex-wrap:wrap; }
	#cmb .process .ctnBox .itemBox .slickBox .slick-slide{ height: 500px;}

	#contact .ctnBox .itemBox .title{ width: 250px;}
	#contact .ctnBox .itemBox.email .inputBox input{ width: 50%;}
	#contact .ctnBox .itemBox.phone .inputBox input,#contact .ctnBox .itemBox .inputBox input,#contact .ctnBox .itemBox.select .inputBox select,#contact .ctnBox .itemBox.spam .inputBox input{ width: 100%; }
	#contact .ctnBox .itemBox .inputBox button{ flex-shrink:0; }

	.pmd .linkBox li button .txt{ padding: 30px; height: 200px; display:flex; align-items:flex-end; }

}
@media screen and (max-width:1200px){
	/* common */
	#topBtn{ right:20px; }
	.font100{ font-size:50px; }
	.font90{ font-size:45px; }
	.font80{ font-size:43px; }
	.font70,.font68{ font-size:40px; }
	.font60{ font-size:39px;}
	.font55{ font-size:38px;}
	.font50{ font-size:35px; }
	.font40{ font-size:30px; }
	.font36,.font34{ font-size:28px;}
	.font30{ font-size:25px; }

	/* header */
	header .headerBox nav{ display:none; }
	header .headerBox #side{ gap:30px; }
	header.all .headerBox > div{ justify-content: flex-end}
	#allMenu .gnbWrap #gnb > li:not(:last-child){ margin-bottom: 20px;}
	#allMenu .gnbWrap #gnb > li > a{ font-size:45px; -webkit-text-stroke: 2px #fff; opacity: 1; }
	#allMenu .gnbWrap #gnb > li .depth2,#allMenu .gnbWrap #gnb > li:hover .depth2{ height: auto;}
	#allMenu .gnbWrap #gnb .depth2{ flex-direction:column; gap:20px; padding: 20px 0; }
	#allMenu .gnbWrap #gnb .depth2 li:before{ content:"·"; font-weight: bold; color:#fff; margin-right: 10px;}

	/* main */
	#titleBox h1{ -webkit-text-stroke: 2px #111; }

	.main .visual .slideBox .pagiBox{ gap:80px; }
	.main .visual .slideBox .pagiBox .pagiBar{ width: 150px;}
	.main .visual .visualSwiper .swiper-slide .txtBox .title{ -webkit-text-stroke: 1px #fff;}
	.main .visual .visualSwiper .swiper-slide .txtBox .txt br{ display:none; }	

	.main .cmb{ padding: 100px 0 150px;}
	.main .cmb > div{ flex-direction:column;	}
	.main .cmb .slideBox{ width: 50%; margin: 0 auto 50px; }
	.main .cmb .txtBox .titleBox p{ -webkit-text-stroke: 0.5px #111}
	.main .cmb .txtBox .titleBox p span{ -webkit-text-stroke: 1px #213F99;}

	.main .product { overflow: hidden; }
	.main .product #titleBox{ margin-bottom: 50px;}
	.main .product .ctnBox .itemBox{ width: calc(100% / 3);}

	.main .supply{ padding-bottom: 120px;}

	.main .about #titleBox h1,footer #titleBox h1{ -webkit-text-stroke: 2px #fff; }
	.main .about .mainSwiper .swiper-slide .title{ font-size:28px;}
	.main .about .mainSwiper .swiper-slide-active .title{ font-size:38px;}

	.main .what .ctnBox .itemBox:hover a .txtBox .txt{ font-size:28px; }

	/* sub */
	#subWrap .subVisual .txtBox{ -webkit-text-stroke: 2px #fff;}
	#subContents{ padding: 120px 0 150px;}
	#sTitle{ margin-bottom: 50px;}
	#greeting section:not(:last-child){ margin-bottom: 120px;}
	#greeting .who .ctnBox figure{ position: relative; width: 100%; height: 500px;}
	#greeting .who .ctnBox figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	#greeting .history > div{ margin: 0 20px;}
	#greeting .history figure{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	#greeting .history figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	#greeting .history .ctnBox{ flex-direction:column; position: relative; }
	#greeting .history .ctnBox .title{ position: relative; padding: 50px 0;}
	#greeting .history .ctnBox .historyBox .scrollBox{ width: 100%; padding: 0; }
	#greeting .history .ctnBox .historyBox .scrollBox li{ padding: 0 0 50px;}
	#greeting .history .ctnBox .historyBox .scrollBox li span{ margin: 0 50px 0 0;}
	#greeting .history .ctnBox:before,#greeting .history .ctnBox:after{ display:none; }
	#greeting .business .slideBox .swiper-slide{ flex-direction:column; justify-content:space-between; }
	#greeting .business .slideBox .swiper-slide > *{ width: 100%; }
	#greeting .business .slideBox .swiper-slide figure{ height: 300px; overflow: hidden; order:1; }
	#greeting .business .slideBox .swiper-slide .txtBox .txt br{ display:none; }
	#greeting .business .slideBox .swiper-slide .txtBox .num{ width: 40px; height: 40px;}
	#greeting .business .slideBox .swiper-slide .txtBox .title{ margin: 30px 0 20px;}
	#greeting .business .slideBox .swiper-slide .txtBox .pagiBox{ position: relative; bottom: 0; left: 0; right: 0; margin-top: 50px;}
	#greeting .business .slideBox .swiper-slide.slide02 .txtBox .pagiBox{ right: 0; }
	#greeting .business .slideBox .swiper-slide.slide02 .txtBox{ align-items: flex-start; text-align: left;}
	#greeting .location .tabBox{ gap:30px}
	#greeting .location .itemBox .innerBox{ flex-direction:column;}
	#greeting .location .itemBox .innerBox > *{ width: 100%;}

	#contact .ctnBox .itemBox.phone .inputBox select{ width: 40%;}
	#contact .ctnBox .itemBox.phone .inputBox input{ width: 100%;}
	#contact .ctnBox .itemBox.email .inputBox select{ width: 35%; }
	#contact .ctnBox .itemBox.name{ flex-direction:column; }
	#contact .ctnBox .itemBox.name div{ width: 100%;}
	#contact .ctnBox .itemBox.name div:first-child{ border-bottom:1px solid #dbdbdb;}

	#cmb .process .ctnBox{ gap:20px; }
	#cmb .process .slideBox .swiper-slide p br{ display:none; }

	.pmd .bottomBox{ padding: 100px 0 150px;}

	/* footer */
	footer{ padding: 100px 0 80px;}
}
@media screen and (max-width:960px){
	/* common */
	.font100{ font-size:40px; }
	.font90{ font-size:35px; }
	.font80{ font-size:32px; }
	.font70,.font68{ font-size:30px; }
	.font60{ font-size:29px;}
	.font55{ font-size:28px;}
	.font50{ font-size:25px; }
	.font40{ font-size:23px; }
	.font36,.font34{ font-size:22px;}
	.font30{ font-size:21px; }
	.font24,.font22{ font-size: 20px;}
	.font18{ font-size:16px; }
	.font17{ font-size:15px; }
	.font16{ font-size:14px; }

	/* header */
	header{ height: 80px;}
	header .headerBox .logo img{ width: 120px;}
	#allMenu{ padding-top: 100px;}
	#allMenu .gnbWrap #gnb > li > a{ font-size:35px; -webkit-text-stroke: 1.5px #fff}
	
	/* main */
	#btnBox .circle{ width: 50px; height: 50px;}
	#titleBox h1{ -webkit-text-stroke: 1.5px #111; }

	.main .visual .slideBox .pagiWrap{ top:25%; right:auto; left: 20px;}
	.main .visual .slideBox .pagiBox{ width: auto; gap:20px; }
	.main .visual .slideBox .pagiBox .pagiBar{ transform:rotate(0); width: 100px; }
	.main .visual .slideBox .pagiBox > span.now{ margin-bottom: 0;}
	.main .visual .slideBox .pagiWrap,.main .visual .slideBox .pagiBox{ flex-direction:row; }
	.main .visual .visualSwiper .swiper-slide .txtBox .title{ line-height: 1.5;}
	.main .visual .visualSwiper .swiper-slide .txtBox .arrow{ width: 50px;}

	.main .cmb{ padding: 80px 0 100px;}
	.main .cmb .slideBox{ width: 80%;}
	.main .cmb .bg{ text-align: right; }
	.main .cmb .bg img{ width: 70%; } 
	.main .cmb .txtBox > .txt{ margin: 40px 0 60px;}
	
	.main .product .ctnBox{ flex-direction:column; }
	.main .product .ctnBox .itemBox{ width: 100%; height: 250px; overflow: hidden; }
	.main .product .ctnBox .itemBox .bg{ position: relative; width: 100%; height: 100%;}
	.main .product .ctnBox .itemBox .bg img{ position: absolute; transform:translate(-50%,-50%) rotate(90deg); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	.main .product .ctnBox .itemBox .txtBox .txt{ right:20px; top:20px;  writing-mode: unset; transform: rotate(0);}
	.main .product .ctnBox .itemBox .txtBox a{ padding: 20px;}
	.main .product .ctnBox .itemBox .txtBox .txt span:not(.circle){ margin: 0 10px 0 0;}
	.main .product .ctnBox .itemBox .txtBox .iconBox .icon{ left: 0; width: 100px;}
	.main .product .ctnBox .itemBox:nth-child(2) .txtBox .iconBox .icon{ width: 70px;}
	.main .product .ctnBox .itemBox:first-child:hover .txtBox  .icon{ bottom: 20px; left: 20px;; }
	.main .product .ctnBox .itemBox:nth-child(2):hover .txtBox  .icon{ bottom: 20px; left: 20px; }
	.main .product .ctnBox .itemBox:nth-child(3):hover .txtBox  .icon{ bottom: 20px; left: 20px;}

	.main .supply{ padding-bottom: 100px; margin-top: 80px;}
	.main .supply .map{ margin-left: 20px;}
	.main .supply #titleBox{ margin-top: 0; margin-bottom: 30px;}	

	.main .about .w1700{ top:70px; transform:none; }
	.main .about #titleBox h1{ margin-bottom: 30px; -webkit-text-stroke: 1.5px #fff; line-height: 1.3;}
	.main .about #titleBox h1 br:first-child{ display:none; }
	.main .about .sildeBox .pagiBox{ top:68%; z-index: 10;}
	.main .about .mainSwiper{ width: 100%; height: 380px; padding: 0 50px; left: 50%; bottom: 50px; top: auto;}
	.main .about .mainSwiper .swiper-slide figure{ width: 20%;}
	.main .about .mainSwiper .swiper-slide .title{ font-size:23px;}
	.main .about .mainSwiper .swiper-slide .title br,.main .about .mainSwiper .swiper-slide .txt br{ display:none; }
	.main .about .mainSwiper .swiper-slide-active{ justify-content: center; }
	.main .about .mainSwiper .swiper-slide-active .title{ font-size:28px;margin: 20px 0;}
	.main .about .mainSwiper .swiper-slide-active,.main .about .mainSwiper .swiper-slide-active.slide03{ top: 0;}
	.main .about .subSwiper .swiper-slide figure{ position: relative; width: 100%; height: 100%; height: 650px;}
	.main .about .subSwiper .swiper-slide figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }
	.main .about .imgBox{ height: 700px;}

	.main .what{ flex-wrap:wrap; }
	.main .what #titleBox{ width: 100%; position: relative; top: 0; left: 0; margin-top: 0; height: auto; margin-bottom: 50px; }
	.main .what .ctnBox{ width: 100%; }
	.main .what .ctnBox .itemBox .bg{ height: 300px;}
	.main .what .ctnBox .itemBox a{ padding: 30px 20px;}
	.main .what .ctnBox .itemBox a .txtBox .txt{ flex-direction: column; align-items: flex-end;}
	.main .what .ctnBox .itemBox a .txtBox .txt span{ margin-right: 0;}
	.main .what .ctnBox .slick-dots{ display:flex; justify-content:center; gap:10px; margin-top: 20px;}
	.main .what .ctnBox .slick-dots li button{ width: 10px; height: 10px; border-radius:50%; background: #ddd; font-size:0; }
	.main .what .ctnBox .slick-dots li.slick-active button{ background: var(--mainColor);}
	.main .what .ctnBox .itemBox:hover a .txtBox .txt{ font-size:21px; }
	
	/* sub */
	#subWrap .subVisual{ height: 400px;}
	#subWrap .subVisual .txtBox{ -webkit-text-stroke: 1.5px #fff; line-height: 1.5;}
	#subContents{ padding: 80px 0 100px;}
	#greeting section:not(:last-child){ margin-bottom: 100px;}
	#greeting .history .ctnBox .historyBox .scrollBox li{ padding: 0 0 20px 0;}
	#greeting .history .ctnBox .historyBox .scrollBox li span{ margin-right: 0;}
	#greeting .supply{ overflow: hidden;}		
	#greeting .supply .map{ margin-top: -150px;}
	#greeting .supply .map .svg{ width: 130%; margin-left: -13%;}
	#greeting .location .tabBox{ gap:10px; align-items: center;}
	#greeting .location .itemBox .innerBox .txtBox{ padding: 30px 20px 0;}
	#greeting .location .itemBox .innerBox .txtBox > .txt{ margin: 20px 0 30px;}
	#greeting .location .itemBox .innerBox .txtBox ul{ flex-direction:column; gap:10px}
	#greeting .location .itemBox .innerBox .txtBox ul li img{ width: 30px;}
	#greeting .location .itemBox .innerBox .txtBox ul li:first-child:after{ display:none; }

	#contact .ctnBox{ margin-bottom: 80px;}
	#contact .ctnBox .itemBox,#contact .ctnBox .itemBox.name > div{ flex-direction:column; }
	#contact .ctnBox .itemBox .title{ width: 100%; height: 60px; padding: 0 10px;}
	#contact .ctnBox .itemBox .inputBox input,#contact .ctnBox .itemBox.select .inputBox select,#contact .ctnBox .itemBox .inputBox label .txt{ height: 50px; padding: 0 10px;} 
	#contact .ctnBox .itemBox.email .inputBox select{ width: 50%;}
	#contact .ctnBox .itemBox.email .inputBox select,#contact .ctnBox .itemBox.phone .inputBox select{ height: 50px; padding: 0 10px;}
	#contact .ctnBox .itemBox .inputBox button{ flex-shrink:0; height: 50px; width: 50px;}
	#contact .ctnBox .itemBox.contact .title{ align-items:center; }
	#contact .btnBox #btnBox{ margin-left: 0; }
	#contact .btnBox #btnBox .circle{ width: 70px; height: 70px;}
	#contact .ctnBox .itemBox .inputBox span.line{ width: 12px;}
	#contact .ctnBox .itemBox .inputBox label .txt{ width: 100%; }
	#contact .ctnBox .itemBox .inputBox label .btn{ width: 150px; height: 50px;}
	#contact .ctnBox .itemBox.phone .inputBox{ align-items:flex-start; }
	#contact .ctnBox .itemBox.email .inputBox{ flex-wrap:wrap; }
	#contact .ctnBox .itemBox.email .inputBox input{ width: calc(50% - 17.5px);}
	#contact .ctnBox .itemBox.email .inputBox select{ width: 100%; background: url(/img/sub/contact_down.png) no-repeat 96% 50%;}
	#contact .ctnBox .itemBox.spam .check label span{ width: 13px; height: 13px;}
	#contact .ctnBox .itemBox.spam .check label span:after{ width: 7px; height: 7px;}
	#contact .ctnBox .itemBox .inputBox label{ width: 100%;}

	#cmb .info,#cmb .process{ padding: 100px 0 80px;}
	#cmb .info .w1700 > div{ width: 100%;}
	#cmb .info .w1700{ flex-direction:column; }
	#cmb .info .txtBox{ margin-bottom: 50px; }
	#cmb .info .txtBox .title{ margin: 0 0 30px;}
	#cmb .info .slideBox{ margin-left: 0;}	
	#cmb .process h2.title{ margin-bottom: 50px;}
	#cmb .process .ctnBox{ margin-bottom: 100px;}
	#cmb .process .ctnBox .arrow{ width: 20px;}
	#cmb .process .ctnBox .arrow:nth-of-type(2n){ display:none; }
	#cmb .process .ctnBox .itemBox{ width: calc((100% - 60px) / 2) ; height: 200px;}
	#cmb .process .ctnBox .itemBox .txtBox{ padding: 20px 10px;}
	#cmb .process .ctnBox .itemBox .slickBox{ width: calc(100% - 40px);}
	#cmb .process .ctnBox .itemBox .slickBox .slick-slide{ height: 300px;}
	#cmb .process .ctnBox .itemBox .slickBox .slick-nav{ transform:translateX(-50%); top: auto; bottom: -70px; width: auto; gap:20px; }
	#cmb .process .ctnBox .itemBox .slickBox .slick-nav button{ width: 40px; height: 40px; border-radius:50%; border:1px solid #fff; display: flex; justify-content: center; align-items: center;}
	#cmb .process .ctnBox .itemBox .slickBox .slick-nav button i{ font-size:20px; }
	#cmb .process .ctnBox .itemBox .slickBox .close{ top: 20px; right: 20px; font-size:20px; }
	#cmb .process .ctnBox .itemBox figure{ width: 70px; margin: 0 0 0 auto;}
	#cmb .process .slideBox .proSwiper{ width: 500px; height: 300px}
	#cmb .process .slideBox .swiper-slide figure{ height: 250px;}
	#cmb .process .slideBox .swiper-slide-active figure{ height: 100%;}
	#cmb .process .slideBox .txt{ margin: 50px 0; padding: 0 20px;}
	#cmb .process .slideBox .txt br{ display:none; }
	#cmb .enjoy figure{ position: relative; width: 100%; height: 300px;}
	#cmb .enjoy figure img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }	

	.pmd .linkBox{ flex-wrap:wrap; gap:20px; margin-bottom: 100px;}
	.pmd .linkBox li,.pmd .linkBox li button{ width: 100%; }
	.pmd .linkBox li button .txt{ height: 100px;}
	.pmd .linkBox li button .imgBox figure:not(.icon){ position: relative; width: 100%; height: 200px; overflow: hidden;}
	.pmd .linkBox li button .imgBox figure:not(.icon) img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width:100%; min-height:100%; object-fit:cover; }	
	.pmd .linkBox li button .imgBox .icon{ width: 100px; height: 100px; bottom: 30px;}
	.pmd .linkBox li button .imgBox .icon img{ width: 40%;}
	.pmd .linkBox li:last-child button .imgBox .icon img{ width: 30%;}
	.pmd .bottomBox{ padding: 80px 0 100px;}
	.pmd .bottomBox .itemBox{ flex-direction:column; gap:50px;}
	.pmd .bottomBox .itemBox .imgBox{ width: 100%; text-align: center; }
	.pmd .bottomBox .itemBox .txtBox{ gap: 0 20px;}
	.pmd .bottomBox .itemBox .txtBox .item{ padding: 30px 0; width: 100%;}
	.pmd .bottomBox .itemBox .txtBox .item:not(:last-child){ border-bottom: 1px solid #D9D9D9;}
	.pmd .bottomBox .tabBox li button:after{ margin-top: 5px;}	

	#accessories .bottomBox .tabBox{ flex-wrap:wrap; gap:20px 50px; }

	/* footer */
	footer{ padding: 80px 0 60px;}
	footer #titleBox h1{-webkit-text-stroke: 1.5px #fff; line-height: 1.3;}
	footer .ctnBox{ flex-direction:column; gap:50px;  }
	footer .ctnBox .rightBox .address br{ display:none; }
}
@media screen and (max-width:640px){
	/* common */
	.font100{ font-size:35px; }
	
	/* header */
	header .headerBox #side #lang li a{ line-height: 25px;}

	/* sub */
	#greeting .supply .map{ margin-top: -200px;}
	#greeting .supply .listWrap{ margin-top: -250px;}
	#greeting .supply .listWrap .rolling-list{ height: 40px;}

	#cmb .info .slideBox .mainBox{ width: 80%; margin: 0 auto;}
	#cmb .info .slideBox .mainBox .mainSwiper .swiper-slide figure{ width: 60%; }
	#cmb .process .slideBox .proSwiper{ width: 420px; height: 350px;}
	#cmb .process .slideBox .pagiBox{ gap:20px; }
	#cmb .process .slideBox .pagiBox .numBox .num:after{ margin: 0 15px 2px;}

}