@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2020-11-25
******************************************************** */
@media all and ( max-width: 1024px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section{height:auto !important;}
	#fullpage .fp-section .fp-tableCell{padding-top:0; height:0 !important;}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1660px ){	
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{left:30px}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{left:30px}
}
@media all and ( max-width: 1220px ){
	/* 메인 비주얼 :: 사이드메뉴 */
	.main-side-menu ul li{width:55px; height:395px}
	.main-side-menu ul li.open{width:700px}
	.main-side-menu ul li .side-menu-con{width:700px}
	.main-side-menu ul li .side-menu-con .inner{padding:30px}
	.main-side-menu ul li .side-menu-con .inner .img-con{right:30px; bottom:30px}
	.main-side-menu ul li .side-menu-con .inner .txt-con a{bottom:30px; left:30px}
	.main-side-menu ul li .side-menu-con .inner .txt-con p{padding-right:390px}
	.main-side-menu ul li.menu-01 .side-menu-con .inner .txt-con p{padding-right:310px}
	.main-side-menu ul li .side-menu-con .inner .txt-con p .br-01{display:none}
	.main-side-menu ul li .side-menu-con .close-btn{right:28px}
}
@media all and ( max-width: 1024px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{left:15px}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:80px}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 영상 */
	.main-visual-video-wrapper {padding-bottom: 135px;}
	.main-visual-video iframe{top: 49%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:55px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:18px}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{/*bottom:30px;*/bottom:160px; left:15px}
	.main-scroll-icon .line{width:70px; margin-right:10px}
	.main-scroll-icon .txt{font-size:11px; margin-right:10px}
	/* 메인 비주얼 :: 사이드메뉴 */
	.main-side-menu{left:0; top:auto; transform:translateY(0); bottom:0}
	.main-side-menu ul{display:block; width:100%}
	.main-side-menu ul li{width:100%; height:45px}
	.main-side-menu ul li .side-menu-con{width:100%; height:calc(100% - 66px)}
	.main-side-menu ul li.open{width:100%; height:450px}
	.main-side-menu ul li.menu-01.open{height:480px}
	.main-side-menu ul li .side-menu-con .inner{padding:20px}
	.main-side-menu ul li .side-menu-con .inner .img-con{position:relative; bottom:auto; right:auto; margin-top:20px}
	.main-side-menu ul li .side-menu-con .inner .txt-con a{position:relative; bottom:auto; left:auto}
	.main-side-menu ul li .side-menu-tit em{position:static; transform:inherit; text-align:center; display:block; line-height:45px; font-size:15px}
	.main-side-menu ul li .side-menu-con .inner .txt-con p,
	.main-side-menu ul li.menu-01 .side-menu-con .inner .txt-con p{padding-right:0}
	.main-side-menu ul li .side-menu-con .inner .txt-con h3{font-size:23px}
	.main-side-menu ul li .side-menu-con .inner .txt-con p{font-size:14px; margin-top:15px}
	.main-side-menu ul li .side-menu-con .inner .txt-con a{font-size:14px; margin-top:10px}
	.main-side-menu ul li .side-menu-con .inner .txt-con p span{display:inline-block; margin-right:10px}
	.main-side-menu ul li .side-menu-con .close-btn{font-size:20px; top:20px; right:20px}
}
@media all and ( max-width: 480px ){	
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:44px; margin-bottom:20px}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:15px}
	/* 메인 비주얼 :: 사이드메뉴 */
	.main-side-menu ul li .side-menu-con .inner .txt-con p{font-size:12px; margin-top:10px}
	.main-side-menu ul li.open{height:420px}
}
@media all and ( max-height: 600px ){	
	#mainVisual{height:600px !important}
}
	
/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1(제품) -------- */
@media all and ( max-width: 1900px ){	
	#mainPrdCon .bg-txt{width:55%}
}
@media all and ( max-width: 1660px ){	
	#mainPrdCon .bg-txt{right:auto; left:0; width:52.5%}
}
@media all and ( max-width: 1336px ){	
	/* 내용 */
	.main-prd-tab-con .prd-txt{padding-top:4%; min-height:600px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .txt-01 .pc-br,
	.main-prd-tab-con .prd-txt .prd-txt-inner .txt-02 .pc-br{display:none}
	/* 탭 */
	.main-prd-tab-style ul li{width:calc(25% - 5px)}
}
@media all and ( max-width: 960px ){	
	#mainPrdCon{padding-top:50px}
	#mainPrdCon .bg-txt{display:none}
	.main-prd-tab-content-style{position:relative;}
	/* 내용 */
	.main-prd-tab-con .prd-img{float:none; text-align:center; width:100%; margin-bottom: 15%;}
	.main-prd-tab-con .prd-txt{float:none; width:100%; padding:90px 0 0; min-height:auto; text-align:center}
	.main-prd-tab-con .prd-txt .prd-txt-inner{padding-left:0}
	.main-prd-tab-con .prd-txt .prd-txt-inner .icon{display:none}
	.main-prd-tab-con .prd-txt .prd-txt-inner .txt-01,
	.main-prd-tab-con .prd-txt .prd-txt-inner .txt-02,
	.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn{margin-top:25px}
	/* 탭 */
	.main-prd-tab-style{bottom:auto; top:0; margin-top:690px}
	.main-prd-tab-style ul li{margin-right:5px; <!-- width:calc(25% - 3.8px) -->; text-align:center}
	.main-prd-tab-style ul li a span .icon{position:relative; transform:translateY(0); right:auto; text-align:center; display:inline-block; top:auto}
	.main-prd-tab-style ul li a span .txt{padding:15px 0 0}
}
@media all and (min-width:961px){	.main-prd-tab-style ul{width:80%}}
@media all and ( max-width: 800px ){	
	#mainPrdCon{padding:40px 0}
	/* 내용 */
	.main-prd-tab-con .prd-txt .prd-txt-inner .tit{font-size:35px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .txt-01{font-size:17px; margin-top:15px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .txt-02{font-size:15px; margin-top:15px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn{padding:15px 0 16px 27px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn:before{width:45px; height:45px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn span{font-size:11px}
	.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn .line{width:13px; margin-left:7px}
	
	/* 탭 */
	.main-prd-tab-style ul li{height:83px}
	.main-prd-tab-style ul li a span .icon{width:20px; height:20px}
	.main-prd-tab-style ul li a span .txt{font-size:14px; padding-top:10px}
}
@media all and ( max-width: 746px ){		
	/* 탭 */
	.main-prd-tab-style{margin-top:90%}
}


 

 /* -------- 메인 컨텐츠 :: 컨텐츠2(주가정보) -------- */
@media all and ( max-width: 1220px ){	
	.main-ir-con .ir-tit{display:block; margin-top:10px}
	.main-ir-con .ir-tit em{display:block; margin:10px 0 0}
	.main-ir-con .ir-info .more-btn{margin-left:40px}
}
@media all and ( max-width: 1024px ){		
	.main-ir-con{text-align:center}
	.main-ir-con .ir-tit{float:none; justify-content:center; display:flex; margin-top:0} 
	.main-ir-con .ir-tit em{margin-left:15px}
	.main-ir-con .ir-info{float:none; display:block}
	.main-ir-con .ir-info .num{display:block; margin:30px 0}
	.main-ir-con .ir-info .info-detail{display:inline-block;}
	.main-ir-con .ir-info .info-detail.detail-01{margin:0}
	.main-ir-con .ir-info .info-detail dt,
	.main-ir-con .ir-info .info-detail dd{display:inline-block}
	.main-ir-con .ir-info .more-btn{display:block; margin:30px auto 0;}
}
@media all and ( max-width: 800px ){		
	#mainIrCon{padding:30px 0}
	.main-ir-con .ir-tit b{font-size:20px;}
	.main-ir-con .ir-tit em{font-size:12px;}
	.main-ir-con .ir-info .num{font-size:35px; margin:20px 0}
	.main-ir-con .ir-info .info-detail{font-size:14px; margin-left:30px}
	.main-ir-con .ir-info .info-detail.detail-01:after{right:-16px; top:0}
	.main-ir-con .ir-info .more-btn{width:48px; height:48px; margin-top:20px}
	.main-ir-con .ir-info .more-btn i{line-height:48px; font-size:15px}
}
@media all and ( max-width: 480px ){		
	.main-ir-con .ir-tit{display:block}
	.main-ir-con .ir-tit em{margin-left:0}
	.main-ir-con .ir-info .info-detail{display:block; margin:10px 0 0} 
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(information) -------- */
@media all and ( max-width: 1220px ){
	.main-info-con .main-info-box{margin:40px -0.6% 0}
	.main-info-con .main-info-box li{width:32.1333%; margin:0 0.6%;}
}
@media all and ( max-width: 800px ){
	#mainInfoCon{padding:50px 0 40px}
	#mainInfoCon .bg-txt{display:none}
	.main-info-con .con-tit{text-align:center; font-size:26px}
	.main-info-con .main-info-box{display:block; margin:30px 0 0}
	.main-info-con .main-info-box li{width:100%; margin:0 0 12px}
	.main-info-con .main-info-box li a{padding:25px 70px 25px 25px}
	.main-info-con .main-info-box li a .more-view{display:none}
	.main-info-con .main-info-box li a .icon{position:absolute; top:50%; transform:translateY(-50%); right:25px; width:38px; height:38px}
	.main-info-con .main-info-box li a .icon img{max-width:100%; max-height:100%}
	.main-info-con .main-info-box li a .tit{font-size:22px; margin-top:0}
	.main-info-con .main-info-box li a .txt{font-size:15px; margin-top:15px}
}