@media screen and (max-width:1800px){
	/* common */
	.font84{ font-size:74px; }
	.font68{ font-size:58px; }
	.font58{ font-size:48px; }
	.font54{ font-size:44px; }
	.font52{ font-size:42px; }

	.ps100{ padding: 0 20px;}

	.w1600{ max-width:1600px; margin: 0 auto;}	

	/* header */
	header .headerBox{ padding: 0 20px;}

	#allMenu{ padding: 0 20px;}
	#allMenu .allGnb #gnb > li > a{ font-size:44px; min-width:200px; }

	/* main */
	#fullNav{ right: 20px;}

	main .business .bakBox .imgBox{ padding-left: 20px;}
	main .business .ctnBox .scrollBox{ padding-right: 60px;}
	main .business .bakBox .imgBox .innerBox .scrollDown{ flex-shrink:0; }
	
	main .technology{ padding-left: 20px;}

	main .partners .logoWrap{ margin: 50px 0;}

	/* footer */
	.footerIn{ padding: 100px 20px 80px;}
} 

@media screen and (max-width:1600px){
	/* common */
	.w1600{ padding: 0 20px;}
	
	.mb120{ margin-bottom: 120px;}

	/* header*/
	header .headerBox .logo a{ width: 120px; }
	header .headerBox .navBox #gnb > li > a{ min-width:150px; }

	#searchBox form{ width: 100%; }
	#searchBox .closeBtn{ right: 35px; }
	#searchBox.on div input{ width: 100%;}

	#allMenu .closeBtn{ right: 35px;}
	#allMenu .allGnb #gnb > li .depth2{ width: 1000px; flex-wrap:wrap; }
	#allMenu .allGnb #gnb > li .depth2 > li > a{ padding: 20px 0 10px;}
	
	/* main */
	main .visual .slideBox .swiper-slide .txtBox .txt br{ display:none; }

	main .core .ctnBox .itemBox div{ padding: 40px 20px;}

	main .partners .txtBox .itemBox .txt br{ display:none; }

	/* sub */
	#history .bar{ left: 485px; }

	.connectivity .sec01 .title{ width: 50%; margin-right: 50px;}

	main .platform .ctnBox .slideWrap .slideBox .swiper-slide .fitBox{ height: 230px;}
	main .platform .ctnBox .slideWrap #slideBar{ margin-bottom: 100px;}
	main .platform .ps100{ padding-bottom: 40px; }

}

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

}

@media screen and (max-width:1200px){
	/* common */
	.font84{ font-size:64px; }
	.font68{ font-size:48px; }
	.font62{ font-size:42px; }
	.font58{ font-size:38px; }
	.font54{ font-size:34px; }
	.font52{ font-size:32px; }
	.font48{ font-size:31px; }
	.font42,.font39,.font38{ font-size:30px; }
	.font36{ font-size:29px; }

	#searchBox{ padding: 50px 20px;}
	#searchBox .closeBtn{ top: 20px; right: 30px;	}
	#searchBox div button{ width: 60px; height: 60px;}
	#searchBox div input{ height: 60px; padding: 0 20px;}

	#policyWrap{ width: 90%; padding: 30px 20px;}
	#policyWrap .policyBox .innerBox{ padding: 0 10px; padding-left: 0;}

	#listBox #searchBox select{ width: 250px; background: url(/img/sub/selectArrow.png) no-repeat top 50% right 40px;}
	#listBox #searchBox select,
	#listBox #searchBox div input{ padding: 0 40px; height: 75px; }
	#listBox #searchBox div button{ width: 75px; height: 75px; }

	a.w320{ margin: 100px auto 0;}

	/* header */
	header .headerBox .navBox nav{ display:none; }

	#allMenu .allGnb #gnb > li > a{ margin-right: 50px; font-size:34px; }
	#allMenu .allGnb #gnb > li .depth2{ width: 700px;}
	#allMenu .btmBox{ bottom: 20px;}

	.paging{ margin-top: 100px; }

	/* main */
	#fullNav{ display:none; }

	main section:not(.business){ height: auto; }

	main .visual .slideBox .swiper-slide{ padding-bottom: 100px;}
	main .visual .btmBox{ position: relative; bottom: auto; left: auto;}
	main .visual .btmBox .ps100{ flex-wrap:wrap; align-items: flex-start; height: auto; padding: 20px;}
	main .visual .btmBox .ps100 > div{ flex-wrap: wrap; gap:20px 0; }
	main .visual .btmBox p{ width: 120px; }
	main .visual .btmBox select{ width: calc(100% - 140px); padding: 0 20px; background: url(/img/common/selectArrow.png) no-repeat rgba(255, 255, 255, 0.10); 
	background-position: right 20px top 50%; margin: 0 0 0 20px;}
	main .visual .btmBox button{ width: 100%; margin-top: 20px;}

	main .technology{ padding: 80px 20px;}

	main .business{ display:flex; }
	main .business .ctnBox{ position: relative; top: auto; left: auto;}
	main .business .bakBox .imgBox{ width: 100%; }
	main .business .bakBox .imgBox .innerBox{ flex-direction: column;}
	main .business .bakBox .imgBox .innerBox .txtBox .title br{ display:none; }
	main .business .bakBox .imgBox .innerBox .scrollDown{ margin-top: 20px;}
	main .business .ctnBox .scrollBox{ width: 100%; padding: 40px 20px;}

	main section.core{ height: 100vh;}
	main .core .cover{ pointer-events:none; }
	main .core .cover .inner{ transition: all 0.7s 1.5s;}
	main .core .cover.aos-animate .inner{ opacity: 0; }
	main .core .ctnBox .itemBox p br{ display:none; }
	main .core .ctnBox .itemBox:hover .topTxt { bottom: 260px; }
	
	main .platform .ps100{ padding-top: 100px;}
	main .platform .txtWrap{ justify-content: flex-start;}
	main .platform .ctnBox .slideWrap .slideBox .swiper-slide .fitBox{ height: 280px;}
	main .platform .ctnBox .slideWrap #slideBar{ margin-bottom: 150px;}

	main .partners{ padding-top: 80px;}
	main .partners .txtBox{ gap:30px; }
	main .partners .txtBox .itemBox{ width: calc((100% - 60px) / 2);}

	/* sub */
	#sv .subVisual{ padding-top: 150px;}

	#subContents{ padding: 100px 0 150px;}

	#titleBox{ padding-bottom: 100px; }

	.numBox{ flex-wrap:wrap; }
	.numBox .itemBox{ width: calc((100% - 20px) / 2);}

	.mb120{ margin-bottom: 100px; }

	#linkBox .ctnBox{ gap:30px; }
	#linkBox .ctnBox .itemBox{ width: calc((100% - 50px) / 2) }

	#iconBox .itemBox figure{ width: 150px; }

	#firstBg{ margin-top: 100px; }

	#sCommon.industries{ margin-top: 100px; }

	#about .introBox{ padding-bottom: 100px; margin-bottom: 100px;}
	#about .content .txtBox{ flex-wrap:wrap; margin-bottom: 100px; }
	#about .content .txtBox dd{ width: 100%; margin-top: 30px;}
	#about .content .ctnBox{ gap:20px; }
	#about .content .ctnBox .itemBox{ width: calc((100% - 40px) / 3); padding: 30px;}
	#about .content .ctnBox .itemBox figure{ margin: 30px 0 20px;}

	#history section .year{ min-width:250px; }
	#history .bar{ left: 275px;}

	#customers section .ctnBox .itemBox{ width: calc((100% - 60px) / 4);}
	#customers section.partner{ padding: 100px 0 150px; margin-top: 100px;}

	#contact .w1600 > div:not(:last-child){ padding-bottom: 100px; margin-bottom: 100px;}
	#contact .inquiryBox #chkBox{ margin: 60px 0 100px;}

	#search .introBox{ margin-bottom: 80px; margin-top: -30px;}
	#search section:not(:last-of-type){ margin-bottom: 100px;}
	#galleryBox{ gap: 50px 20px; }
	#galleryBox .itemBox{ width: calc((100% - 40px) / 3);}

	.solution section:not(:last-of-type){ margin-bottom: 100px;}
	.solution .softTxt{ padding: 100px 0 150px;}

	#people .sec02{ padding: 100px 0;}
	#people .sec02 .ctnBox{ gap:30px 20px; }
	#people .sec02 .ctnBox{ margin: 60px 0 100px;}
	#people .sec02 .ctnBox .itemBox{ width: calc((100% - 40px) / 3);}

	#way .sec01 .ctnBox dl{ margin-bottom: 100px;}
	#way .sec01 .ctnBox dl:first-child dd .itemBox{ width: calc((100% - 40px) / 3);}
	#way .sec01 .ctnBox dl:last-child dd .itemBox{ width: calc((100% - 20px) / 2);}

	#asset .sec02{ padding: 100px 0; }

	#attendance .sec02,
	#attendance .softTxt{ padding: 100px 0;}

	.industries .infoBox .itemBox{ padding: 40px;}

	#location .sec02{ padding: 100px 0 150px;}
	#location .sec02 .ctnBox{ gap:20px; }
	#location .sec02 .ctnBox .itemBox{ padding: 40px; width: calc((100% - 20px) / 2);}
	#location .sec02 .ctnBox .itemBox dt{ padding-bottom: 30px; margin-bottom: 30px;}

	#sensor .bBox,
	#sensor .sec02{ padding: 100px 0;}
	#sensor .bBox .txtBox{ padding: 40px;}

	#finding .sec02,
	#heavy .sec02{ padding: 100px 0;}
	#finding .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 100px;}
	#finding .sec02 .ctnBox .itemBox > *{ width: calc((100% - 50px) / 2);}
	#finding .sec02 .ctnBox .itemBox .txt br{ display:none; }

	#heavy .sec02 .ctnBox .itemBox{ gap:30px; }
	#heavy .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 100px; }
	#heavy .sec02 .ctnBox .itemBox > *{ width: calc((100% - 30px) / 2);}

	#newsletter .introBox .txtBox{ padding: 30px;}

	#brochures section.sec02{ padding: 100px 0 150px;}
	#brochures #galleryBox{ margin-top: 100px; }

	.connectivity .sec01{ padding-bottom: 100px; }
	.connectivity .sec02 .content > div{ padding-top: 200px;}
	.connectivity .sec02 .titleBox{ padding-bottom: 100px;}
	.connectivity .sec02 .titleBox .txt br,
	.connectivity .sec02 .ctnBox .itemBox .txtBox .txt br{ display:none; }
	.connectivity .sec02 .ctnBox .itemBox{ gap:30px; }
	.connectivity .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 100px;}
	.connectivity .sec02 .ctnBox .itemBox > *{ width: calc((100%  - 30px) / 2);}

	#how .sec01 .ctnBox dl dt{ width: 250px;}
	#how .sec02{ padding: 100px 0 150px;}
	#how .sec02 .ctnBox .itemBox{ gap:50px; }
	#how .sec02 .ctnBox .itemBox > *{ width: calc((100% - 50px) / 2);}
	#how .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 100px;}
} 

@media screen and (max-width:960px){
	/* common */
	.font84{ font-size:58px; }
	.font68{ font-size:42px; }
	.font62{ font-size:37px; }
	.font58{ font-size:32px; }
	.font54,.font52{ font-size:30px; }
	.font48{ font-size:29px; }
	.font42,.font39,.font38{ font-size:28px; }
	.font36{ font-size:27.5px; }
	.font32{ font-size:26px; }
	.font28{ font-size:24px; }
	.font26{ font-size:23px; }
	.font24{ font-size:22px; }
	.font23{ font-size:21px; }
	.font22{ font-size:20px; }
	.font21{ font-size:19px; }
	.font20{ font-size:18px; }
	.font19{ font-size:17px; }
	.font18{ font-size:16px; }
	.font17{ font-size:15px; }

	#slideBar{ margin-bottom: 0; width: 100%; }

	#capcha{ height: 55px;}
	#capcha figure,
	#capcha button{ flex-shrink:0; }
	#capcha input{ width: 100%;}
	#capcha figure{ width: 120px; }
	#capcha button{ width: 55px; }

	.mobile{ display:block; }
	
	#listBox ul{ flex-wrap:wrap; gap:30px 0; }
	#listBox ul li a{ padding: 0 30px; }
	#listBox #searchBox{ margin-top: 40px;}
	#listBox #searchBox form{ flex-wrap:wrap; }
	#listBox #searchBox select{ width: 100%; background: url(/img/sub/selectArrow.png) no-repeat top 50% right 20px; margin-bottom: 20px;}
	#listBox #searchBox select, 
	#listBox #searchBox div input{ height: 65px; padding: 0 20px;}
	#listBox #searchBox div button{ width: 65px; height: 65px; }

	a.w320{ margin: 80px auto 0;}

	/* header */
	header{ height: 70px;}
	header .headerBox .logo a{ width: 100px;}
	header .headerBox .navBox{ margin-left: 20px;}

	#allMenu .closeBtn{ top: 30px; right: 30px;}
	#allMenu{ align-items: flex-start; padding-top: 70px;}
	#allMenu .allGnb #gnb > li{ flex-direction: column; }
	#allMenu .allGnb #gnb > li:not(:last-child){ margin-bottom: 30px;}
	#allMenu .allGnb #gnb > li > a{ pointer-events:none; font-size:30px; }
	#allMenu .allGnb #gnb > li .depth2{ position: relative; width: auto; left: auto; top: auto; display:none; margin-top: 20px;  align-items: flex-start;}
	#allMenu .allGnb #gnb > li .depth2 > li{ display: inline-grid; align-content: center;}
	#allMenu .allGnb #gnb > li .depth2 > li > a{ padding: 10px 0; color:rgba(255,255,255,0.7); font-size:18px; }
	#allMenu .allGnb #gnb > li .depth2 > li:not(:last-child){ margin-right: 20px;}
	#allMenu .allGnb #gnb > li .depth3{ margin-top: 10px;}
	#allMenu .allGnb #gnb > li .depth3 li a{ font-size:16px; }

	#allMenu .allGnb #gnb > li.on > a{ color:#fff; }

	#allMenu .btmBox{ flex-direction: column;}

	.paging{ margin-top: 80px; }

	/* main */
	main .business{ height: auto; flex-wrap:wrap; }
	main .business .bakBox .imgBox{ padding-top: 200px;}
	main .business .ctnBox{ height: auto; overflow-y: auto;}
	main .business .ctnBox .scrollBox .itemBox:not(:last-child){ margin-bottom: 50px;}
	main .business .ctnBox .scrollBox .itemBox figure{ height: 250px;}

	main .technology .titleBox .title p{ display:flex; }
	main .technology .titleBox .title p span{ white-space:wrap; }
	main .technology .slideBox{ margin: 80px 0 50px;}

	main .platform .ps100{ padding-top: 30px;}
	main .platform h3.title{ position: relative; top:  auto; left: auto; width: 100%; padding: 80px 20px 0;}
	main .platform .txtWrap{ padding-top: 250px; padding-bottom: 0;} 
	main .platform .txtWrap > div{ width: 100%;}
	main .platform .txtWrap > div .txtBox{ margin-bottom: 30px;}
	main .platform .txtWrap > div .txtBox p span{ margin-top: 30px;}
	main .platform .ctnBox .slideWrap #slideBar{ margin-bottom: 30px;}
	main .platform .ctnBox .slideWrap .slideBox .swiper-slide{ width: 100%; }

	main section.core{ height: auto;}
	main .core .cover .inner{ padding: 0 20px;}
	main .core .cover .inner .title{ font-size:45px; }
	main .core .ctnBox{ flex-wrap:wrap; }
	main .core .ctnBox .itemBox{ width: 100%; height: auto; padding: 30px 20px; overflow: hidden;}
	main .core .ctnBox .itemBox div{ position: relative; top: auto; left: auto; bottom: auto; padding: 0; }
	main .core .ctnBox .itemBox div figure{ width: 40%; margin: 0 auto;}
	main .core .ctnBox .itemBox .topTxt .title{ margin: 20px 0;}
	main .core .ctnBox .itemBox .btmTxt{ opacity: 1;}
	main .core .ctnBox .itemBox:hover .topTxt { bottom: auto; }

	main .partners .titleBox{ flex-direction: column; align-items: normal}
	main .partners .titleBox .title{ margin-bottom: 20px;}
	main .partners .logoWrap{ margin-bottom: 80px;}
	main .partners .logoWrap .logoBox figure{ width: 200px; height: 100px; padding: 0 20px;}
	main .partners .txtBox{ flex-wrap:wrap; padding: 50px 20px;}
	main .partners .txtBox .itemBox{ width: 100%; padding-top: 0; }
	main .partners .txtBox .itemBox .txt:before{ height: 30px; margin-right: 20px;}

	/* sub */
	#sv .subVisual{ padding-top: 120px;}
	#sv .subVisual .txtBox h2.title{ font-size:48px; }
	#sv .subVisual .txtBox .subTab{ height: auto;}
	#sv .subVisual .txtBox .subTab ul{ flex-wrap:wrap;}
	#sv .subVisual .txtBox .subTab ul li{ width: calc(100% / 4);}
	#sv .subVisual .txtBox .subTab ul li a{ font-size: 16px; height: 60px; }
	#sv .subVisual .txtBox .subTab ul li.on a{ background: var(--mainC);}
	#sv .subVisual .txtBox .subTab ul li:hover a{ color:#333; }
	#sv .subVisual .txtBox #lnb{ margin-bottom: 40px; flex-wrap:wrap; gap:10px 0; }
	#sv .subVisual .txtBox #lnb li:first-child{ flex-shrink:0; }
	#sv .subVisual .txtBox .subTab1 ul li{ width: 50%;}
	#sv .subVisual .txtBox .subTab3 ul li{ width: calc(100% / 3);}

	#sv .subVisual .txtBox .subTab02{ margin: 40px auto 0;}
	#sv .subVisual .txtBox .subTab02 ul{ flex-wrap:wrap; gap:10px 0; }
	#sv .subVisual .txtBox .subTab02 ul li:not(:last-child):after{ margin: 0 15px; height: 15px;}
	#sv .subVisual .txtBox .subTab02 ul li a{ font-size:16px; }

	#subContents{ padding: 70px 0 100px;}

	#titleBox{ padding-bottom: 80px; }
	#titleBox .title br{ display:none; }

	.numBox .itemBox{ width: 100% !important; min-height:250px; padding: 20px; }

	.mb120{ margin-bottom: 80px; }

	#linkBox .ctnBox{ flex-wrap:wrap; }
	#linkBox .ctnBox .itemBox{ width: 100%; }
	#linkBox .ctnBox .itemBox figure .btn{ opacity: 1;}
	#linkBox .ctnBox.flexBox .itemBox{ margin-right: 0; }

	#iconBox .itemBox{ flex-wrap:wrap; }
	#iconBox .itemBox figure{ width: 100%; height: 80px;}
	#iconBox .itemBox figure img{ width: 50px;}
	#iconBox .itemBox dl{ padding: 30px 20px;}

	#firstBg{ padding: 100px 0; margin-top: 80px; margin-bottom: 0;}
	#firstBg.type1 .txtBox{ padding: 0 20px;}
	#firstBg .txtBox .bBtn{ margin-top: 40px;}
	#firstBg.type2 .txtBox .txt{ margin-bottom: 30px;}

	#downBox{ height: auto; padding: 80px 0;}
	#downBox .txt{ margin-bottom: 60px;}
	#downBox .txt.type2{ margin-top: -20px;}

	#sCommon .softTxt .bBtn{ margin-top: 40px;}

	#about .introBox{ overflow: hidden; padding-bottom: 80px; margin-bottom: 80px;}
	#about .introBox .imgBox{ height: 300px;}
	#about .introBox .imgBox .txtBox dd{ width: 100%; }
	#about .introBox .imgBox.aos-animate .txtBox dd{ letter-spacing: 5px;}
	#about .content .txtBox{ margin-bottom: 80px;}
	#about .content .ctnBox{ flex-wrap:wrap; }
	#about .content .ctnBox .itemBox{ width: 100%; min-height:auto;  }
	#about .content .ctnBox .itemBox .title{ margin-bottom: 20px;}

	#history{ overflow: hidden;}
	#history .bar{ left: 25px; height: calc(100% - 100px); top: 100px;}
	#history section{ flex-direction:column; }
	#history section .year{ position: relative; top: auto; left: auto; height: auto; min-width:auto; width: 100%; margin-left: 50px;}
	#history section .year br{ display:none; }
	#history section .ctnBox{ padding: 40px 0 0;}
	#history section:first-of-type .ctnBox{ padding-bottom: 80px;}
	#history section .ctnBox .itemBox{ padding-left: 50px;}

	#customers section .ctnBox .itemBox{ width: calc((100% - 20px) / 2);}
	#customers section.partner{ padding: 80px 0 100px; margin-top: 80px;}

	#contact .w1600 > div:not(:last-child){ padding-bottom: 80px; margin-bottom: 80px;}
	#contact .inquiryBox .ctnBox .itemBox{ width: 100%; padding: 30px 20px; flex-wrap:wrap; }
	#contact .inquiryBox .ctnBox .itemBox dd{ margin-top: 20px;}
	#contact .inquiryBox #chkBox{ margin: 40px 0;}
	#contact .mapBox .Box iframe{ height: 400px;}
	#contact .mapBox .infoBox{ gap: 10px 20px; }
	#contact .mapBox .infoBox li:not(:last-child){ margin-right: 0px; }

	#search .introBox{ margin-bottom: 60px; }
	#search section:not(:last-of-type){ margin-bottom: 80px;}
	#galleryBox{ gap: 40px 20px; }
	#galleryBox .itemBox{ width: 100%; }

	.solution .imgTxtBox .itemBox{ padding: 20px; flex-direction:column; text-align: center; }
	.solution .imgTxtBox .itemBox figure{ margin-right: 0; margin-bottom: 30px; width: 90px; height: 90px;}
	.solution .sec02 .titleBox .title span{ display:block; }
	.solution section:not(:last-of-type){ margin-bottom: 80px;}
	.solution .softTxt{ padding: 80px 20px 100px;}
	.solution .softTxt .txt br{ display:none; }

	#sCommon.industries{ margin-top: 80px; }

	#people .sec02{ padding: 80px 0;}
	#people .sec02 .ctnBox{ margin: 40px 0 80px;}
	#people .sec02 .ctnBox .itemBox{ width:100%; }

	#way .sec01 .ctnBox dl{ margin-bottom: 100px; flex-wrap:wrap; }

	#asset .sec02{ padding: 80px 0; }

	#attendance .sec02,
	#attendance .softTxt{ padding: 80px 0;}

	.industries .sec01{ margin-top: 0; }
	.industries .infoBox .itemBox{ width: 100%; min-height: auto; padding: 30px;}
	.industries .infoBox .itemBox .imgBox{ margin-bottom: 40px;}
	.industries .infoBox .itemBox .title{ margin-bottom: 30px;}
	.industries .infoBox .itemBox .listBox{ padding: 15px; margin-top: 30px;}
	.industries .infoBox .itemBox .title img{ width: 11%;}

	#location .sec02{ padding: 80px 0 100px;}
	#location .sec02 .ctnBox .itemBox{ padding: 30px; width: 100%;}
	#location .sec02 .ctnBox .itemBox dt{ padding-bottom: 20px; margin-bottom: 20px;}
	#location .sec02 .ctnBox .itemBox dd .title br{ display:none; }
	#location .sec02 .ctnBox .itemBox:last-child{ padding: 30px;}

	#sensor .bBox,
	#sensor .sec02{ padding: 80px 0;}
	#sensor .bBox .txtBox{ padding: 40px 20px;}

	#finding .sec02,
	#heavy .sec02{ padding: 80px 0;}
	#finding .sec02 .ctnBox .itemBox{ flex-wrap:wrap; }
	#finding .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 80px;}
	#finding .sec02 .ctnBox .itemBox > *{ width: 100%;}
	#finding .sec02 .ctnBox .itemBox .txtBox{ margin-bottom: 40px;}
	#finding .sec02 .ctnBox .itemBox .title{ margin: 20px 0;}
	#finding .sec02 .ctnBox .itemBox figure{ order:2; }

	#heavy .sec02 .ctnBox .itemBox{ flex-wrap:wrap; }
	#heavy .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 80px; }
	#heavy .sec02 .ctnBox .itemBox > *{ width: 100%}
	#heavy .sec02 .ctnBox .itemBox > figure{ order:2; text-align: center; }

	#boardView .pageBox{ flex-wrap:wrap;  }
	#boardView .pageBox .box{ width: 100%; margin-bottom: 30px;}
	#boardView .pageBox .box a{ min-height:auto; }
	#boardView .pageBox .box div{ margin-right: 0; margin-left: 30px; }
	#boardView .pageBox .box figure{ order:-1; }
	#boardView .pageBox .box.next a{ justify-content:flex-start; text-align: left;}
	#boardView .pageBox .backBtn{ order:2; }

	#newsletter .introBox{ flex-wrap:wrap; }
	#newsletter .introBox > *{ width: 100%; height: auto;}
	#newsletter .introBox .imgBox{ height: 200px; padding: 40px 10px;}
	#newsletter .introBox .txtBox{ padding: 30px 20px;}
	#newsletter .introBox .txtBox .inputBox{ padding: 20px; height: auto; flex-wrap: wrap;}
	#newsletter .introBox .txtBox .inputBox p{ min-width:80px; margin-bottom: 20px;}

	#brochures .slideBox{ margin-bottom: 50px;}
	#brochures .slideBox .itemBox{ width: 100%; }
	#brochures section.sec02{ padding: 80px 0 100px;}
	#brochures section .titleBox select{ padding: 0 20px; width: 200px; background-position: right 20px top 50%; }
	#brochures #galleryBox{ margin-top: 80px; }

	.connectivity .sec01{ padding-bottom: 80px; }
	.connectivity .sec01 > div{ flex-wrap:wrap; }
	.connectivity .sec01 .title{ width: 100%; margin-bottom: 30px;}
	.connectivity .sec02 .content > div{ padding-top: 130px;}
	.connectivity .sec02 .tabWrap .tabBox li a{ padding: 10px 20px; height: 100%; font-size:16px; }
	.connectivity .sec02 .titleBox{ padding-bottom: 60px;}
	.connectivity .sec02 .ctnBox .itemBox{ flex-wrap:wrap; }
	.connectivity .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 80px;}
	.connectivity .sec02 .ctnBox .itemBox > *{ width: 100%;}
	.connectivity .sec02 .ctnBox .itemBox figure{ height: auto; padding: 30px 20px; order:2; }
	.connectivity .sec02 .ctnBox .itemBox .txtBox ul{ margin-top: 30px;}

	#how .sec01 .ctnBox dl{ flex-wrap:wrap; }
	#how .sec01 .ctnBox dl dt{ width: 100%; margin-bottom: 20px; min-height:80px; }
	#how .sec01 .ctnBox dl dd p{ padding: 0 10px;}
	#how .sec01 .ctnBox figure img{ transform:translate(-50%,-50%); left: 50%;}
	#how .sec01 .ctnBox .item01 dd p{ width: calc((100% - 20px) / 2);}
	#how .sec01 .ctnBox .item02 dd div{ width: 100%; }
	#how .sec01 .ctnBox .item02 dd div p{ width: 100%;}
	#how .sec02{ padding: 80px 0 100px;}
	#how .sec02 .ctnBox .itemBox{ flex-wrap:wrap; }
	#how .sec02 .ctnBox .itemBox:not(:last-child){ margin-bottom: 80px;}
	#how .sec02 .ctnBox .itemBox > *{ width: 100%; }
	#how .sec02 .ctnBox .itemBox figure{ min-height:auto; padding: 40px 20px; order:2; }
	#how .sec02 .ctnBox .itemBox .txtBox .title{ margin-bottom: 30px;}

	/* footer */
	.footerIn{ padding: 80px 20px; flex-wrap:wrap; }
	.footerIn > *{ width: 100%; }
	.footerIn .leftBox{ margin-bottom: 50px;}
	.footerIn .rightBox .capcha div figure{ margin: 0 10px; }
	.footerIn .rightBox .capcha div figure img{ width: 120px;}
}

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

}