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

/* ******************  메인 비주얼 ********************** */
@media all and (max-height: 750px) {
	.main-visual-controls{bottom: 50px;}
	.main-scroll-icon{display: none;}
	/* #header.dark-mode .logo img.white{display: block !important;}
	#header.dark-mode .logo img.dark{display: none !important;} */
	/* #header.dark-mode #gnb > ul > li > a{color: #222 !important;} */
	#header.dark-mode .header-lang .lang-open-btn{background-color: #222 !important;}
}
@media all and ( max-width: 1660px ){
	.main-scroll-icon{left: auto; right: var(--area-padding);}
}
@media all and ( max-width: 1260px ){
	#header.dark-mode .logo img.white{display: none;}
	#header.dark-mode .logo img.dark{display: block;}
	#header.dark-mode .header-lang .lang-open-btn{background-color: #222 !important;}
	.main-scroll-icon{display: none;}
}
@media all and ( max-width: 1024px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual, #mainFooter){padding: 65px 0; height:auto !important;}
	#fullpage .fp-section .fp-tableCell{padding-top:0 !important; height:0 !important;}
}
@media all and ( max-width: 800px ){
	#fullpage .section:not(#mainVisual, #mainFooter){padding: 8.75% 0;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	.main-visual-m-img img{width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:60px; margin-bottom:10px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:15px;}
	.main-visual-controls .arrow-box .slick-arrow{font-size: 30px; padding: 0 10px;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}
@media all and ( max-width: 480px ){
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size: 48px;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1260px ){
	.main-tit-box{margin-bottom: 40px;}
	.main-tit-box .main-tit{font-size: 60px;}
	.main-tit-box .main-sub-tit{margin-top: 10px; font-size: 17px;}
}
@media all and ( max-height: 840px ){
	#fullpage .section:not(#mainVisual, #mainFooter) .fp-tableCell{padding-top: 15px;}
	.main-tit-box{margin-bottom: 40px;}
	.main-tit-box .main-tit{font-size: 60px;}
	.main-tit-box .main-sub-tit{margin-top: 10px; font-size: 17px;}
}
@media all and ( max-width: 1820px ){
	#fp-nav{right: var(--area-padding);}
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box{margin-bottom:30px;}
	.main-tit-box .main-tit{font-size:40px;}
	.main-tit-box .main-sub-tit{font-size:15px;}
	.main-tit-box .main-sub-tit span{display:block;}

	.cm-plus-icon{width: 45px; height: 45px;}
	.cm-plus-icon i{line-height: 33px; font-size: 13px;}
}
@media all and ( max-width: 480px ){
	.main-tit-box .main-tit{font-size: 30px;}
	.main-tit-box .main-sub-tit{font-size: 13px;}

}
/* -------- 메인 컨텐츠1 :: BEST PRODUCT -------- */
@media all and ( max-width: 1260px ){
	#mainProduct .product-list .img-box span{padding-top: 80%;}
	#mainProduct .product-list .txt-box{min-height: inherit; margin-top: -40%;}
	#mainProduct .product-list .txt-box strong{font-size: 40px;}
}
@media all and ( max-width: 800px ){
	#mainProduct .product-list .txt-box{border-radius: 10px;}
	#mainProduct .product-list .txt-box .txt-inner{margin-bottom: 15px;}
	#mainProduct .product-list .txt-box strong{font-size: 30px;}
}
@media all and ( max-width: 680px ){
	#mainProduct .product-list .txt-box .txt-inner{min-height: 6em;}
	#mainProduct .product-list .txt-box strong{font-size: 20px;}
}

/* -------- 메인 컨텐츠2 :: GLOBAL NETWORK -------- */
@media all and ( max-width: 1260px ){
	#mainNetwork .main-tit-box{top: 0 !important;}
}
@media all and ( max-height: 750px ){
	#mainNetwork .main-tit-box{top: 0 !important;}
}
@media all and ( max-width: 1024px ){
	#mainNetwork .map-wrapper .pc-ver{display: none !important;}
	#mainNetwork .map-wrapper .m-ver{display: block}
	#mainNetwork .map-wrapper .m-ver img{max-width: 100%;}
}

/* -------- 메인 컨텐츠3 :: SAMHWAN STEEL -------- */
@media all and ( max-height: 840px ){
	#mainSteel .menu-link-list .menu-con{height: 250px;}
	#mainSteel .menu-icon-list li{margin-top: 25px;}
}
@media all and ( max-height: 800px ){
	#mainSteel .menu-link-list .menu-con{height: auto;}
	#mainSteel .menu-link-list .menu-con a{padding: 25px;}
	#mainSteel .menu-link-list .menu-con h4{font-size: 21px;}
	#mainSteel .menu-link-list .menu-con em{font-size: 14px;}
	#mainSteel .menu-link-list .menu-con .cm-plus-icon{margin-top: 20px;}
	#mainSteel .menu-icon-list li a{padding: 0 15px;}
	#mainSteel .menu-icon-list img{height: 50px;}
	#mainSteel .menu-icon-list h4{margin-top: 15px; font-size: 17px;}
	#mainSteel .menu-icon-list p{margin-top: 5px; font-size: 15px;}
}
@media all and ( max-width: 680px ){
	#mainSteel .menu-link-list{display: block; border-radius: 15px;}
	#mainSteel .menu-link-list .menu-con{width: 100%;}
}
@media all and ( max-width: 480px ){
	#mainSteel .menu-icon-list h4{margin-top: 10px; font-size: 13px;}
	#mainSteel .menu-icon-list p{font-size: 11px;}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;opacity:0;filter:Alpha(opacity=0);}
}
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1366px){
	#fp-nav{right:10px;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none !important;}
}