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

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1366px){
	/* 텍스트영역 */
	.visual-slogan-logo-con{margin-right:8px}
	.visual-slogan-txt-con{font-size:42px; font-size:55px;}
}
@media all and (max-width:1220px){
	/* 텍스트영역 */
	/* .visual-slogan-logo-con{margin-right:30px}
	.visual-slogan-logo-con img{height:100px}
	.visual-slogan-txt-con{font-size:40px;} */
}

@media all and (max-width:800px){
	/* 텍스트영역 */
	.main-visual-txt-con{right:auto; top:auto; bottom:0; margin-bottom:100px; left:15px;}
	.main-visual-txt-con .main-visual-txt-inner{display:block;}
	.visual-slogan-logo-con{margin-right:0; margin-bottom:20px;}
	.visual-slogan-logo-con img{height:50px}
	/* .visual-slogan-txt-con{font-size:30px;} */
	/* 텍스트영역 */
	.visual-slogan-txt-con{font-size:20px; letter-spacing:-1px;}
}
@media all and (max-width:480px){
}

/* ******************  공통 ********************** */
@media all and (max-width:800px){
	/* -------- 카테고리 -------- */
	.cm-main-category{font-size:15px; margin-bottom:1em;}
	/* -------- 버튼 -------- */
	.cm-more-btn{width:40px; height:40px;}
	.cm-more-btn .icon{width:40px; line-height:40px; font-size:20px;}
}

/* ******************  SMART BANNER ********************** */
@media all and (max-width:800px){
	#mainSmartBanner{font-size:15px;}
	#mainSmartBanner .fp-tableCell {padding-left:0}
	.main-smart-banner-item{width:auto; height:0; padding:0; position:relative; left:Auto; top:auto; padding-top:66.25%;}
	.main-smart-banner-inner{position:absolute; top:40px; left:20px; bottom:40px; right:20px;}
	.main-smart-banner-item01{background:url( ../images/main/main_smart_banner_bg1_m.jpg) no-repeat 50% 50%;}
	.main-smart-banner-item02{background:url( ../images/main/main_smart_banner_bg2_m.jpg) no-repeat 50% 50%;}
	.main-smart-banner-item03{background:url( ../images/main/main_smart_banner_bg3_m.jpg) no-repeat 50% 50%;}
	.main-smart-banner-inner .smart-banner-tit{font-size:1.53em;}
	.main-smart-banner-inner .smart-banner-more-btn{position:absolute; bottom:0px;}
}

/* ******************  BRAND BANNER ********************** */
@media all and (max-width:1366px){
	.main-brand-banner-wrapper{top:50px; left:50px; right:50px; bottom:50px; font-size:14px;}
}
@media all and (max-width:1024px){
	.main-brand-banner-wrapper{position:static; padding:12% 15px;}
	/* 왼쪽 :: 텍스트영역 */
	.main-brand-txt-con{position:static; /*margin-bottom:13%;*/}
	/* 오른쪽 :: 퀵링크 */
	.main-brand-quick-link-con{position:static; margin-top:-30vw;} 
	.main-brand-quick-link-con ul{width:auto; float:right;}
}
@media all and (max-width:800px){
	.main-brand-banner-wrapper{font-size:15px; }
	/* 왼쪽 :: 텍스트영역 */
	.main-brand-txt-con .brand-tit1{font-size:2.6em; letter-spacing:-1.5px;}
	.main-brand-txt-con .brand-tit2{font-size:1.6em; letter-spacing:-0.5px; }
	.main-brand-txt-con .brand-txt{font-size:1.4em; }
	/* 오른쪽 :: 퀵링크 */
	.main-brand-quick-link-con{margin-top:auto; display:none;}
	.main-brand-quick-link-con ul{width:auto; float:none; text-align:left;}
	.main-brand-quick-link-con ul li{display:block; width:auto; margin:0 0 10px 0;}
	.main-brand-quick-link-con ul li a{width:100%;}
	.main-brand-quick-link-con li.story-link-item a,
	.main-brand-quick-link-con li.value-link-item a{background-size:auto 68.5%}
	.main-brand-quick-link-con li.smart-link-item a{/*background-image:url(../images/main/brand_smart_life_bg_m.jpg)*/ }
	.main-brand-quick-link-con li a .link-tit{font-size:20px; bottom:50%; left:15px; right:15px; transform:translateY(50%)}
	.main-brand-quick-link-con li a .link-tit br{display:none;}
}
@media all and (max-width:640px){
	/* 오른쪽 :: 퀵링크 */
	.main-brand-quick-link-con ul li a{height:0; padding-top:27.7%; }
}

/* ******************  BOARD CON ********************** */

@media all and (max-width:1400px){
	/* 오른쪽 :: 퀵메뉴(210630) */
	.main-invest-inner-con{padding:0 30px;}
}
@media all and (max-width:1366px){
	/* -------- MEDIA LIST -------- */
	.media-board-item .main-media-board-info{left:15px; bottom:15px; right:15px; font-size:13px}
}
@media all and (max-width:1220px){
	/* -------- INVEST LIST -------- */
	.main-invest-wrapper{padding:0 15px}
	.main-invest-inner-con{font-size:15px;}
	/* 오른쪽 :: 퀵메뉴(210630) */
	.main-invest-tit-con{width:40%;}
	.main-company-quick-con{width:100%; max-width:640px;}
}
@media all and (max-width:1024px){	
	/* -------- MEDIA LIST -------- */
	.media-list-container .media-board-item{width:40%;}
	.media-board-item.media-no-thumb.odd a,
	.media-board-item.media-no-thumb.even a{background-size:auto 38%}
	/* -------- INVEST LIST -------- */
	.main-invest-wrapper{height:auto; padding:10% 0;}
	.main-invest-wrapper:before{background-image:url(../images/main/main_invest_bg_m.jpg); background-position:100% 50%; background-size:cover;}
	.main-invest-inner-con{display:block; height:auto; }
	/* 왼쪽 :: 주가정보타이틀영역 */
	.main-invest-tit-con{width:100%; margin-bottom:14.5%;}
	/* 오른쪽쪽 :: 주가정보영역 */
	.main-invest-price-con{width:100% }
	.main-invest-price-con .main-invest-cur-price dt{font-size:0.8em}
	.main-invest-price-con .main-invest-cur-price dd{font-size:3.33em;}
}
@media all and (max-width:800px){	
	/* -------- MEDIA LIST -------- */
	.media-board-item .main-media-board-info{font-size:12px;}
	/* SUB MEDIA */
	#boardHeadlineContent .media-list-container .media-board-item{width:40%;}
	#boardHeadlineContent .media-board-item .main-media-board-info{left:10px; bottom:10px; right:10px;}
	/* -------- INVEST LIST -------- */
	.main-invest-wrapper:before{background-size:cover}
	/* 오른쪽 :: 퀵메뉴(210630) */
	.main-invest-inner-con{padding:0 15px;}
	.main-company-quick-con{width:auto;}
	.main-company-quick-menu-list{margin:0 -4px;}
	.main-company-quick-menu-list li {width:calc(33.33% - 8px); margin:0 4px;}
	.main-company-quick-menu-list li a {border-radius:20px;}
	.main-company-quick-menu-list li a .icon img{height:50px;}
	.main-company-quick-menu-list li a .tit{font-size:16px; padding-top:15px;}
}
@media all and (max-width:640px){	
	/* -------- MEDIA LIST -------- */
	.media-list-container .media-board-item{width:67.5%;}
	.media-board-item .main-media-board-info{font-size:10px;}
	/* SUB MEDIA */
	#boardHeadlineContent .media-list-container .media-board-item{width:70%;}
}
@media all and (max-width:480px){	
	/* -------- INVEST LIST -------- */
	.main-invest-inner-con{font-size:13px;}
	/* 오른쪽쪽 :: 주가정보영역 */
	.main-invest-price-detail-tbl{font-size:12px;}
	.main-invest-price-detail-tbl colgroup{display:none;}
	.main-invest-price-detail-tbl th{width:60px}
	.main-invest-price-detail-tbl td{padding-right:10px}
	.main-invest-price-detail-tbl td:first-of-type{padding-right:20px}
	/* 오른쪽 :: 퀵메뉴(210630) */
	.main-company-quick-menu-list li a {border-radius:10px;}
	.main-company-quick-menu-list li a .icon img{height:38px;}
	.main-company-quick-menu-list li a .tit{font-size:14px; padding-top:10px;}
}


/* ******************  메인 브랜드영상 (211007) ********************** */
@media all and (max-width:1024px){	
	#mainBrandVideoCon{background-size:auto 50%}
	.main-brand-video-wrapper{padding:10% 0;}
	.main-brand-video-wrapper .main-invest-tit-con{width:100%; margin-bottom:7%}
}
@media all and (max-width:480px){	
	.main-brand-video-wrapper{padding:15% 0;}
}

/* ******************  메인 왼쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1366px){
	#fp-nav{left:15px; width:auto;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none !important;;}
}