@charset "utf-8";

@media (max-width:720px) {
	.pc_ver{display:none;}
	.mo_ver{display:block;}
	.dis_none{display:none;}
	.tBr {display: block}


	section h3 {font-size: 4rem;}
	section .sent {font-size: 16px;line-height: 28px;}
	
	.pageNum .pageAll {font-size: 12px;margin-left: 24px;}
	.subVisual {padding: 112px 0 0;margin-bottom: 75px;}
	.contactVisual {margin-bottom: 0;}
	.subVisual h2 {font-size: 30px;padding-bottom: 80px;}
	.subVisual .utillMenu {margin-bottom: 20px;}
	.subContent h3 {font-size: 28px;line-height: 3.6rem;}
	.subContent .txt {font-size: 13px;line-height: 24px;}
	
	#header h1 {padding: 18px 0;margin-left: 5.6%;height: 56px;}
	#header h1 img {width: 126px;}
	#header .sideMenu {width: 221px;}
	#header .sideMenu .hdBtn {width: 56px;}
	#header .sideMenu .hdBtn .allMenuBtn {height: 56px;line-height: 56px;padding-top: 16px;width: 100%;}
	#header .sideMenu .hdBtn .allMenuBtn .line {width: 22px;margin: 4px auto;}
	#header .sideMenu .hdBtn .designBtn {display: none;}
	#header .sideMenu .iconMenu {width: 165px;}
	/* #header .sideMenu .iconMenu a:first-child {display: none;} */
	#header .sideMenu .hdBtn .allMenuBtn .line:nth-child(1).over {transform: translateY(5px) rotate(45deg);}
	#header .allMenu {width: 100%;padding: 88px 40px 0 40px;}
	#header .allMenu .allGnb > li > span {font-size: 26px;margin-bottom: 27px;}
	#header .allMenu .memMenu {margin-bottom: 64px;}
	#header .allMenu .designBtn {display: block;}
	#header .search {padding: 30px 0;border: 1px solid #F3F3F3;}
	#header .search .group {border: 1px solid #E0E0E0;}
	#header .search input {padding: 15px 21px;font-size: 14px;}
	#header .search button {padding: 10px 14px;}
	#header .search button img {width: 26px;}	
	#header .search .close {position: absolute;top: 13px;right: 13px;}
	#header .sideMenu .usId {display: none;}

	#footer .selectBox {width: 88%;}
	#footer .footGroup .footTerms .list li {line-height: 28px;}
	

	#mainVisual .visualTxt {left: 5.6%;}
	#mainVisual .visualTxt h2 {font-size: 30px;line-height: 46px;margin-bottom: 26px;}
	#mainVisual .visualTxt .sentence {font-size: 16px;line-height: 26px;}
	#mainVisual .visualCont {bottom: 28%;left: 36.3%;}
	#mainVisual .quickMenu {width: 100%;}
	#mainVisual .quickMenu li img {width: 66px;}
	#mainVisual .quickMenu li span {font-size: 13px;}
	#mainVisual .quickMenu li a {padding: 14px 0 27px;}
	

	#social .inner {margin: 0 0 6.3%;}
	#social.active .inner {width: 100%;}
	#social:before, #social:after {font-size: 4rem;}
	#social:before {top: -35px;}
	#social:after {top: 0;}
	#social:before {left: 4.6%;}
	#social:after {right: 4.5%;}
	#social .title .subSent {font-size: 13px;line-height: 22px;}


	#vcc .vccSlide .owl-carousel {width: 90%;}
	#vcc .vccSlide .owl-carousel .owl-item img {width: 93%;margin: 0 auto;}
	#vcc .vccSlide .owl-dots {margin: 0 0 7% -5.6%;}
	#vcc .vccSlide h3, #vcc .vccSlide .sent {padding-left: 0;}
	#vcc .vccSlide .slideGroup .pageNum {left: 178px;bottom: 0;}
	#vcc .vccList {padding: 60px 5.6% 40px 5.6%;}
	#vcc .vccList ol li img {width: 280px}
	#vcc .vccList ol li span {font-size: 13px;bottom: 17px;left: 18px;}
	#vcc .vccList ol li:nth-child(even) span {right: 0;width: 254px;}
	
	
	

	#product.active:after {width: 48%;}
	#product .prodSlide li span {font-size: 13px;}
	

	#greeting h4 {font-size: 16px;line-height: 26px;margin-bottom: 390px;}
	#greeting .greetingImg {width: 265px;top: 162px;}
	#greeting .greetingImg .text {width: 69px;top: -11.5%;left: -11.5%;}

	#about .content h3 {margin-bottom: 14px;}
	#about .content .txt {margin-bottom: 45px;}
	#about .mission .aboutImg img {width: 100%;}
	#about .vision {padding: 167px 0 6.5%;margin-top: -113px;}
	#about .vision .aboutImg img {width: 100%;}
	#about .milestone:before {content: '';position: absolute;top: 139px;left: 0;z-index: -1;width: 100%;height: 1px;background-color: #E2E2E2;}
	#about .milestone:after {bottom: 168px;}
	#about .milestone .list {flex-wrap: wrap;}
	#about .milestone .list li {width: 50%;margin-bottom: 44px;}
	#about .milestone .list li .year:after {margin: 20px 0;}
	#about .milestone {margin-bottom: 72px;}
	#about .achievement {margin-bottom: 57px;}
	#about .achievement .graph:after {top: -227px;height: 685px;border-radius: 54% 0 0 0;}
	#about .achievement .content {width: 68%;}
	#about .achievement .content h3 {margin-bottom: 22px;}
	#about .achievement .content .txt {margin-bottom: 28px;}
	#about .achievement .graph .option {text-align: justify;vertical-align: middle;}
	#about .achievement .graph .option span {font-size: 13px;}
	#about .achievement .graph .option span:before {width: 14px;height: 14px;margin-right: 8px;}
	#about .achievement .graph .graphImg {width: 196px;filter: drop-shadow(8px 8px 12px rgba(0,0,0,0.25));}
	#about .subSocial .subSocialSlide li .mImg {display: block;}
	#about .subSocial .subSocialSlide li .pImg {display: none;}

	#location h3 {margin-bottom: 29px;}
	#location .address {margin-top: 31px;}

	#contact .content {margin-top: 0;padding-top: 75px;background-color: #F3F3F3;} 
	#contact .content h3 {margin-bottom: 16px;} 
	#contact .content .txt {margin-bottom: 16px;}
	#contact .contactForm {padding: 7% 5.6% 70px 5.6%;}
	#contact .contactForm .inputForm {display: block;}
	#contact .contactForm .inputForm .item {margin-bottom: 16px;width: 100%;}
	#contact .contactForm .sendBtn {width: 100%;padding: 18px 0;}
	
	#subVcc .info .content .txt {margin-bottom: 42px;}
	#subVcc .tech {padding: 70px 0;}
	#subVcc .tech li .cont .tit {font-size: 18px;}
	
	#network .mainContainer {padding-bottom: 71px;}
	#network .oversea {padding-top: 70px;}
	#network .content .txt {margin-bottom: 33px;}
	#network .content h3 {margin-bottom: 15px;}

	#process .item1 .list {flex-direction: column;}
	#process .item1 .list li {width: 100%;margin-bottom: 54px;}
	#process .item1 .list li:after {top: auto;bottom: -15%;right: 50%;transform: rotate(90deg);}
	#process .item2 .list {flex-wrap: wrap;}
	#process .item2 .list li {width: 49%;margin-right: 2%;margin-bottom: 2%;}
	#process .item2 .list li:nth-child(even) {margin-right: 0;}
	#process .item .list li img {width: 80px;}
	#process .item .list li span {margin: 14px 0 5px;}
	#process .procBtn a {width: 31%;padding: 19px 0;font-size: 13px;}
	
	#search h2 {font-size: 30px;margin-bottom: 49px;}
	#search .utillMenu {margin-bottom: 23px;}
	#search .content {padding: 54px 5.6% 70px;}
	#search .content h3 {font-size: 16px;line-height: 26px;margin-bottom: 38px;}
	#search .content .result {font-size: 12px;margin-bottom: 17px;}
	#search .content .schList li {padding: 21px;}
	#search .content .schList li .group {display: block;margin-top: 25px;}

	#search .content .schList li .group .route {margin-bottom: 45px;}
	#search .content .schList li .txt {font-size: 14px;line-height: 24px;}
	#search .content .schList li .group .route {font-size: 12px;}
	
	.btn_wrap a {height: 50px;line-height: 50px;font-size: 14px;}
	.btn_wrap .btn_type01,.btn_wrap .btn_type02, .btn_wrap .btn_type03 {font-size: 14px;}
	input[type="text"], input[type="password"], select, textarea {font-size: 14px;}
	.btn_wrap button {height: 50px;}
	.mbskin_box2 .btn_wrap .btn_type03 {
    width: 100%;
}
}
@media (max-width:500px) { 
	.pageNum .pageAll {font-size: 12px;}
	.pageNum .pageAll:before {content: url(../img/m_slash.png);top: 0;left: -13px;}
	.pageNum .pageAll {margin-left: 17px;}
	#vcc .vccSlide .slideGroup .pageNum .pageAll {margin-left: 17px;}
	#social .slideGroup .pageNum .pageAll {margin-left: 17px;}
	#vcc .vccSlide .slideGroup .pageNum .pageAll:before {top: 0px;left: -13px;}
	#social .slideGroup .pageNum .pageAll:before {top: 0;left: -13px;}

	#vcc .vccList ol li img {width: 222px;}
	#vcc .vccList ol li:nth-child(even) span {width: 201px;}

	#product .cont .more {font-size: 12px;}
	
	#subVcc .info .vccVideo img, #subVcc .info .vccVideo video {width: 100%;}
	#subVcc .tech li img {width: 100%;}
	#subVcc .center .centerImg img {width: 100%;margin-bottom: 20px;}
	#subVcc .center .centerImg .mImg {display: block;}
	#subVcc .center .centerImg .pImg {display: none;}

	#process .item .list li {padding: 34px 0 4%;}
	#process .item .list li p {font-size: 13px;line-height: 20px;}
	#process .item .list li span {font-size: 14px;}
	#process .item .list li p {height: 70px;}
	#process .item h3 span {font-size: 14px;display: block;margin-top: 10px;margin-bottom: 12px;}
	#process .item .txt {margin-bottom: 48px;}
	
}
@media (max-width:479px) { 
	.pBr{display:none;}
	.mBr{display:block;}
	section h3 {font-size: 28px;}
	section .sent {font-size: 14px;line-height: 26px;}
	.subVisual .tabMenu {text-align: left;}
	.subVisual .tabMenu li a {font-size: 14px;}
	.pageNum .pageAll {font-size: 10px;}

	#header h1 {padding: 20px 0;}
	#header h1 img {width: 94px;}
	#header .allMenu .memMenu a {font-size: 13px;}
	#header .allMenu .allGnb > li {border-bottom: 1px solid rgba(255,255,255,0.2);margin-bottom: 35px;}
	#header .allMenu .allSub > li > a {font-size: 14px;}
	#header .allMenu .allGnb .allSub {display: none;margin-bottom: 27px;}
	#header .allMenu .allGnb > li > span {font-size: 22px;}
	#header .allMenu .allGnb > li > span img {display: block;}

	
	#footer .footInfo {padding: 40px 0 40px 5.6%;}
	#footer .footInfo h4 img {width: 95px;}
	#footer .footInfo p.info {font-size: 12px;}
	#footer .footInfo p.info span {font-size: 12px;}
	#footer .footGroup {padding: 3.4% 0 40px;}
	#footer .footGroup .footTerms .list {margin-bottom: 34px;}
	#footer .footGroup .footTerms .list li {font-size: 12px;}
	#footer .footGroup .footTerms .copy {font-size: 12px;}
	#footer .footGroup .footMenu {padding-bottom: 23px;}
	#footer .footGroup .footMenu span a {font-size: 14px;}


	
	#mainVisual .visualTxt {top: 113px;}
	#mainVisual .visualCont .pageNum .pageCurrent {font-size: 18px;}
	#mainVisual .visualCont .slideStop img {width: 20px;}
	#mainVisual .visualCont {bottom: 31%;}

	#social:before, #social:after {font-size: 31px;}
	#social:before {top: -28px;}
	#social .inner {margin: 0 0 70px;}
	#social .title {padding: 44px 0 40px 20px;}
	#social .pageNum {bottom: 38px;left: 142px;}
	#social .slideGroup .pageNum {left: 125px;bottom: 19px;}
	#social .slideGroup .pageNum .pageCurrent {font-size: 10px;}

	#vcc .vccList ol li {margin-bottom: 40px;}
	#vcc .vccSlide h3 {line-height: 40px;}
	#vcc .vccSlide .owl-carousel {width: 100%;}
	#vcc .vccSlide .slideGroup .owl-carousel li {height: 194px;}

	#vcc .vccSlide .owl-carousel img {filter: drop-shadow(6px 6px 10px rgba(0,0,0,0.4));}
	#vcc .vccSlide .owl-dots {margin: 0 0 7% 0%;}
	#vcc .vccSlide .slideGroup .pageNum .pageCurrent {font-size: 10px;}
	
	
	#product {padding: 65px 0px 395px;}
	#product .prodSlide {left: 66px;top: 271px;}
	#product .prodSlide .owl-item.prev li {
		box-shadow: 3px 3px 15px rgb(0 0 0 / 20%);
	}

	#greeting .greetingImg {right: 5.6%;left: auto;transform: none;}
	

	#about .milestone .list li .year {font-size: 18px;}
	#about .milestone .list li .txt {font-size: 13px;line-height: 24px;}
	#about .milestone .list li .txt span {font-size: 13px;}
	#about .milestone .list li .txt p {font-size: 13px;line-height: 24px;}
	#about .achievement .content {width: 86%;}
	#about .achievement .graph:after {width: 94%;}
	#about .achievement .graph .graphImg {width: 196px;}
	#about .achievement .graph .option {margin-right: 11%;}
	#about .subSocial h3 {width: 49%;margin-top: -47px;}
	#about .subSocial .pageNum .pageCurrent {font-size: 10px;}
	#about .subSocial .pageNum {bottom: 19px;right: 14px;}
	
	#location .map {height: 180px;}
	#location .address .item span {font-size: 14px;}
	#location .address .item p {font-size: 13px;line-height: 24px;}
	
	#contact .contactForm .inputForm2 {margin-bottom: 33px;}
	#contact .contactForm .chkForm .tit {font-size: 12px;margin-bottom: 16px;}
	#contact .contactForm .chkForm .txt {font-size: 13px;line-height: 26px;}
	#contact .contactForm .radioForm .txt {font-size: 14px;}
	#contact .contactForm .agreeForm .txt {width: 89%;}
	#contact .contactForm .sendBtn {font-size: 14px;}
	#contact input[type="checkbox"] + label, #contact input[type="radio"] + label {margin-right: 8px;}
	
	
	#subVcc .info .vccVideo .vod {height: 180px;}

	#network .imgItem img.mImg {display: block;}
	#network .imgItem img.pImg {display: none;}
	
	.btn_wrap {margin: 22px 0 0;}
}