/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */

@media all and ( max-width: 1220px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section{height:auto !important;}
	#fullpage .section:not(#mainVisual){padding: 100px 0;}
	#fullpage .fp-section .fp-tableCell{padding-top:0; height:0 !important;}
	#mainFooter{padding: 0 !important;}
}
@media all and (max-width:800px){
	#fullpage .section:not(#mainVisual){padding: 40px 0;}
}
/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1740px ){
	.main-visual-item .main-visual-txt-box{max-width: none; padding: 0 150px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img{width:90%;}
}

@media all and ( max-width: 1560px ){
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img{width:80%;}	
}
@media all and ( max-width: 1220px ){
	#fullpage #mainVisual,
	#fullpage .fp-section#mainVisual .fp-tableCell{height: 980px !important;}
	
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-box {padding: 0 30px; padding-top: 110px; align-items: center;/*  text-align: center; justify-content: center; */}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:96px; line-height: 0.1;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img{width:70%;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:17px; margin-bottom:28px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:21px; margin-bottom:48px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn{/* font-size: 18px; */}

	/* 메인 비주얼 :: 제품이미지 */
	.main-visual-prd-con{height: 400px;}
	.main-visual-prd-con .area{text-align: center; justify-content: center;  align-items: center;}
	.item01 .main-visual-prd-con .area{transform: translateX(0);}
	.item02 .main-visual-prd-con .area{transform: translateX(0);}
	.main-visual-prd-con img{max-height: 100%;}

	.slick-dots-wrapper{display: none !important;}
}
@media all and ( max-width: 800px ){
	#fullpage #mainVisual,
	#fullpage .fp-section#mainVisual .fp-tableCell{height: 575px !important;}
	
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-box {width:100%; padding: 0 15px; /* padding-top: 70px; */ box-sizing:border-box; margin-left:0;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:60px; margin-bottom:25px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:14px;margin-bottom:20px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{font-size:12px; margin-bottom:15px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn{height: 20px; line-height: 22px; padding: 0 10px 0 10px; font-size:10px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:before{display: none;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn span{margin-top: 0; left: 70px; width: 8px; height: 1px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn span:before{margin-top: -4.5px; right: -6px; width: 6px; height: 9px;}

	/* 메인 비주얼 :: 제품이미지 */
	.main-visual-prd-con{height: 240px;}
}
@media all and (max-width:480px){
	.main-visual-item .main-visual-txt-box{/* width:60%; */ padding-top:20px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img{width:150px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{margin-bottom:10px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:10px; margin-bottom:10px;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (max-width:1220px){
	.main-tit-box .main-sub-tit{margin-top: 24px;}
	.main-tit-box .main-more-btn{margin-top: 40px;}
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:34px;}
	.main-tit-box .main-sub-tit{margin-top: 20px; font-size:12px;}
	.main-tit-box .main-more-btn{margin-top: 20px; padding: 12px 55px 12px 18px; font-size:12px;}
	.main-tit-box .main-more-btn span{left: 90px; width: 20px;}
	.main-tit-box .main-more-btn span:before{margin-top: -4.5px; right: -6px; width: 6px; height: 9px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Product Information) -------- */
@media all and (max-width:1220px){
	.main-prd-item .prd-category{margin-bottom: 7px; font-size: 14px;}
	.main-prd-item .prd-name{font-size: 24px;}
}
@media all and (max-width:1024px){
	.main-prd-item .prd-category{display: none;}
}
@media all and (max-width:800px){
	#fullpage .section#mainProductCon {padding: 40px 0;}
	.main-prd-tab-style{margin-top: 20px;}
	.main-prd-tab-list li{margin: 0 15px;}
	.main-prd-tab-list li:before{margin-top: -5px; left: -16px; height: 10px;}
	.main-prd-tab-list li a{font-size: 12px;}

	/* .main-prd-wrapper{margin-top: 30px; margin-right: -10px;}
	.main-prd-wrapper .main-prd-slide{padding-bottom:40px;}
	.main-prd-wrapper .swiper-container-horizontal > .swiper-scrollbar{left:0; width:100%; margin-right: 10px; width: calc(100% - 10px);} */

	.main-prd-wrapper{margin-top: 30px; margin-right: -10px;}
	.main-prd-wrapper .main-prd-slide{padding-bottom: 60px;}
	.main-prd-wrapper .swiper-container-horizontal > .swiper-scrollbar{bottom: 18px; width: calc(100% - 110px);}
	.main-prd-control{right: 10px;}
	.main-prd-control .arrow i{font-size: 18px; color: #9d9d9d;}
	.main-prd-control .icon{margin: 0 4px; width: 38px; height: 38px;}
	.main-prd-control .icon i{font-size: 17px; line-height: 38px;}

	.main-prd-item{padding-top: 0; padding-right: 10px;}
	.main-prd-item a{box-shadow: 7px 7px 10px -3px rgba(0,0,0,0.08); -webkit-border-radius: 15px; border-radius: 15px;}
	.main-prd-item a:before,
	.main-prd-item a:after{display: none;}
	.main-prd-item .prd-tit{top: 14%;}
	.main-prd-item .prd-category{display: block; margin-bottom: 7px; font-size: 12px;}
	.main-prd-item .prd-name{font-size: 15px;}
	.main-prd-item .prd-thumb{margin-top: 10px; margin-top: 0;}
	.main-prd-item .prd-thumb span {-webkit-border-radius: 15px; border-radius: 15px;}
}
@media all and (max-width:480px){
	.main-prd-item .prd-tit{top: 12%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(Networks) -------- */
@media all and (max-width:1220px){
	#mainNetworkCon .main-tit-box{text-align: center;}
	.global-map-wrapper{margin-top: 30px; text-align: center; height: 599px;}
	.global-map-con{position:absolute; top: 0; left: 50%; margin-left: -537.5px;}
}
@media all and (max-width:1024px){
	#fullpage .section#mainNetworkCon {padding: 100px 0 60px;}
	.global-map-wrapper{margin-top: 10px; -webkit-transform: scale(0.9); transform: scale(0.9);}
}
@media all and (max-width:800px){
	#fullpage .section#mainNetworkCon {padding: 40px 0;}
	.global-map-wrapper{margin-top: 20px; height: auto; -webkit-transform: scale(1.0); transform: scale(1.0);}
	.global-map-con{display:none;}
	.global-map-con-m{display:block; margin: 0 -15px;}
	.global-map-con-m img{width:100%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Hot issue) -------- */
@media all and (max-width:1320px){
	.main-issue-down-wrapper {padding: 0 50px;}
	.main-issue-down-list .slick-prev{left: -30px;}
	.main-issue-down-list .slick-next{right: -30px;}
}
@media all and (max-width:800px){
	#fullpage .section#mainIssueCon {padding: 50px 0 70px;}
	.main-issue-con{margin-top: 15px;}
	.main-issue-top-item a{padding: 20px 50px 20px 15px;}
	.main-issue-top-item a p{font-size: 12px;}
	.main-issue-top-item a .tit{float: none; width: 100%;}
	.main-issue-top-item a .date{margin-top: 7px; float: none; width: 100%; text-align: left;}
	.main-issue-top-item a .arrow{margin-top: -1px; right: 40px;}
	.main-issue-top-item a .arrow span{width: 20px;}
	.main-issue-top-item a .arrow span:before{margin-top: -4px; right: -5px; width: 5px; height: 7.5px;}

	.main-issue-down-wrapper{margin-top: 25px; padding: 0 40px;}
	.main-issue-down-list{margin: 0 -15px;}
	.main-issue-down-item{width: calc(100% - 30px); margin: 0 15px;}
	.main-issue-down-item a:before{top: 12px; margin-left: -10px; width: 20px; height: 6px;}
	.main-issue-down-item a .top{padding: 35px 30px 65px;}
	.main-issue-down-item a .top img{height: 20px;}
	.main-issue-down-item a .top h5{margin-top: 15px; font-size: 13px;}
	.main-issue-down-item a .top p{margin-top: 10px; font-size: 10px;}
	.main-issue-down-item a .bottom{padding: 10px 30px;}
	.main-issue-down-item a .bottom b,
	.main-issue-down-item a .bottom span{font-size: 10px; line-height: 20px;}

	.main-issue-down-list .slick-arrow{margin-top: -12px;}
	.main-issue-down-list .slick-arrow i{font-size: 24px;}
	.main-issue-down-list .slick-prev{left: -20px;}
	.main-issue-down-list .slick-next{right: -20px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4(Philosophy & Vision) -------- */
@media all and (max-width:1320px){
	.main-vision-inner .inner{top: 12%;}
	.main-vision-inner .txt br{display: none;}
}
@media all and (max-width:1220px){
	.main-vision-list{margin: 0 -1.5%;}
	.main-vision-item{width: 30.33%; margin: 0 1.5%;}
}
@media all and (max-width:1120px){
	.main-vision-inner .inner{top: 9%;}
}
@media all and (max-width:1090px){
	.main-vision-inner .inner{top: 7%;}
	.main-vision-inner .icon,
	.main-vision-inner .icon img{height: 78px;}
	.main-vision-inner .tit {margin-top: 30px;}
}
@media all and (max-width:1024px){
	.main-vision-list{margin: -10px 0; display: flex; flex-wrap:wrap;}
	.main-vision-item{width: 100%; margin: 10px 0;}
	.main-vision-inner{padding-top: 42%; -webkit-border-radius: 25px; border-radius: 25px;}
	.main-vision-inner:before{background: url("../image/gradient_line2_m.png") center/contain no-repeat;}
	.main-vision-inner .inner{top: 0; left: 60px; right: 10px; bottom: 0; text-align: left; display: flex; align-items: center; flex-direction: row-reverse;}
	.main-vision-inner .icon{width: 176px;}
	.main-vision-inner .txt-group{width: calc(100% - 176px);}
	.main-vision-inner .tit{margin-top: 0;}
}
@media all and (max-width:800px){
	#fullpage .section#mainVisionCon {padding: 50px 0 60px;}
	.main-vision-con{margin-top: 20px;}
	.main-vision-list{margin: -5px 0;}
	.main-vision-item{margin: 5px 0;}
	.main-vision-inner{-webkit-border-radius: 15px; border-radius: 15px;}
	.main-vision-inner .inner{left: 8%; right: 10px;}
	.main-vision-inner .icon{width: 100px; height: 50px;}
	.main-vision-inner .icon img{height: 50px;}
	.main-vision-inner .txt-group{width: calc(100% - 100px);}
	.main-vision-inner .tit{font-size: 14px;}
	.main-vision-inner .txt{margin-top: 15px; font-size: 11px;}
}


/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1220px ){
	/* .sidebar-sns-list{display: none;}
	.sidebar-link-list{margin-top: 0;} */
}
@media all and ( max-width: 800px ){
	.main-quick-sidebar{bottom: 5%; right:10px;}
	.main-quick-sidebar > ul{width: 50px;}

	.sidebar-sns-list li + li{margin-top: 10px;}
	.sidebar-sns-list li a{width: 50px; font-size: 20px; line-height: 30px;}
	.sidebar-sns-list li a i{font-size: 20px; line-height: 30px;}

	.sidebar-link-list li a{width:50px; height:50px;}
	.sidebar-link-list li + li{margin-top: 10px;}
	.sidebar-link-list li + li a{padding-top: 5px; font-size: 10px; line-height: 1.4; -webkit-box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.2); box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.2);}
	.sidebar-link-list li a i{font-size: 30px; line-height:50px;}
}


/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1780px){
	#fp-nav{left:25px;}
}
@media all and (max-width:1420px){
	#fp-nav{display:none;}
}

/* ******************  영문 메인 수정 2022-11-23 MJ  ********************** */
/* 비디오 영역 Start */
@media all and (max-width:1220px){
	#fullpage #mainVisual.visual-video-wrap, #fullpage .fp-section#mainVisual.visual-video-wrap .fp-tableCell{height:60.05vw !important; }
	.main-visual-item video{min-height: 60.05vw; width: 120%;}
}
@media all and (max-width:1220px){
	#fullpage #mainVisual.visual-video-wrap, #fullpage .fp-section#mainVisual.visual-video-wrap .fp-tableCell{height:70.05vw !important; }
	.main-visual-item video{min-height: 70.05vw; width: 140%;}
}
@media all and (max-width:640px){
	#fullpage #mainVisual.visual-video-wrap, #fullpage .fp-section#mainVisual.visual-video-wrap .fp-tableCell{height:65.05vw !important; }
	.main-visual-item video{min-height: 65.05vw; width: 130%;}
}
@media all and (max-width:480px){
	#fullpage #mainVisual.visual-video-wrap, #fullpage .fp-section#mainVisual.visual-video-wrap .fp-tableCell{
	    height:99.05vw !important; 
	    
	}
	.main-visual-item video{min-height: 99.05vw; width: 190%;}
}
/* What's New? */
@media all and (max-width:1220px){
	#mainProductCon{padding-bottom:0 !important;}
	.main-product-con .main-tit-box{position: relative; text-align:center; margin-bottom:20px;}
	.main-product-img-box{width:100%; margin-top:150px;}
	.main-product-img-box span{padding-top:400px;}
	.main-product-img-box span img{right:50%; transform:translateX(50%);}
	.main-product-con .logo-txt{margin-top:50px;}
	.main-product-con .logo-txt img{max-width:480px;}
}
@media all and (max-width:800px){
	#fullpage .section#mainProductCon{padding-top:0;}
	.main-product-con .logo-txt img{max-width:280px;}
	.main-product-con .logo-txt{margin-top:20px;}
	.main-product-img-box{margin-top:100px;}
	.main-product-img-box span{padding-top:300px}
}
/* EXHIBITION */
@media all and (max-width:800px){
	.main-exbibition-con{margin-top:30px;}
	.main-exbibition-list{display: block;}
	.main-exbibition-list .list-item{width:100%; max-width:400px; margin:0 auto 30px; }
}
@media all and (max-width:480px){
	.main-exbibition-list .list-item{max-width:250px;}
}
/* Networks */
@media all and (max-width:1620px){
	#mainNetworkCon .network-nation-box .arrow {margin:15% 0 0 -20.2%;  }
	#mainNetworkCon .network-nation-box .arrow img {margin:-2.57vw 0 0 10.5vw; width:47.80vw;}
	#mainNetworkCon .network-nation-box .arrow span {margin:-2.57vw 0 0 10.5vw; width:47.80vw;}
	#mainNetworkCon .network-nation-circle[title="Europe"]  {margin-left:-40% !important; margin-top:-9% !important;}
	#mainNetworkCon .network-nation-circle[title="Asia"]  {margin-left:-18% !important; margin-top:-12.3% !important;}
	#mainNetworkCon .network-nation-circle[title="Africa"]  {margin-left:-41% !important; margin-top:4% !important;}
	#mainNetworkCon .network-nation-circle[title="Middle East"]  {margin-left:-34% !important; margin-top:1% !important;}
	#mainNetworkCon .network-nation-circle[title="NAmericas"]  {margin-left:24% !important; margin-top:-8% !important;}
	#mainNetworkCon .network-nation-circle[title="LAmerica"]  {margin-left:36% !important; margin-top:9.8% !important;}
	#mainNetworkCon .map-logo[title="Eunsung China"]  {margin-left:-19% !important; margin-top:-7.6% !important;}
	#mainNetworkCon .map-logo[title="Eunsung Japan"]  {margin-left:-7.1% !important; margin-top:-2.2% !important;}
	#mainNetworkCon .map-logo[title="Eunsung Australia"]  {margin-left:-4.2% !important; margin-top:15% !important;}
	#mainNetworkCon .map-logo[title="Eunsung USA"]  {margin-left:13% !important; margin-top:-4% !important;}

	#mainNetworkCon .network-nation-box .map-logo{font-size:14px;}
}
@media all and (max-width:1480px){
	#mainNetworkCon .map-logo[title="Eunsung China"]  {margin-left:-23% !important;}
	#mainNetworkCon .map-logo[title="Eunsung USA"]  {margin-left:10% !important;}
}
@media all and (max-width:1320px){
	#mainNetworkCon .global-map-wrapper{margin-top:-100px;}
}
@media all and (max-width:1220px){
	#mainNetworkCon .network-nation-box .arrow{margin-top:18%;}
	.network-nation-circle[title="Oceania"]  {margin-left:-10% !important; margin-top:12.5% !important;}
	#mainNetworkCon .map-logo[title="Eunsung USA"] {margin-left: 14% !important;}

	#mainNetworkCon .global-map-wrapper{margin-top:0px;}
	#mainNetworkCon .network-map-container{margin-left:0;}
	
}
@media all and (max-width:1024px){
	#mainNetworkCon .global-map-wrapper{transform:none; height:auto;}
}
@media all and (max-width:800px){
	#mainNetworkCon .network-nation-box .arrow{margin-top:21%;}
	#mainNetworkCon .network-nation-box .arrow {animation: arrow-ani-m 3s 1.3s infinite; }
	@keyframes arrow-ani-m {
		0% {
			opacity:0;
			-moz-transform: scale(0);
			transform:scale(0);
		}
		100% {
			opacity:1.0;
			-moz-transform: scale(2);
			transform:scale(2);
		}
	}
}
@media all and (max-width:480px){
	#mainNetworkCon .network-nation-box .arrow{margin-top:23%;}
	#mainNetworkCon .network-nation-box .arrow {animation: arrow-ani-m480 3s 1.3s infinite; }
	@keyframes arrow-ani-m480 {
		0% {
			opacity:0;
			-moz-transform: scale(0);
			transform:scale(0);
		}
		100% {
			opacity:1.0;
			-moz-transform: scale(3);
			transform:scale(3);
		}
	}
}