@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-06-05
******************************************************** */

/* ******************  메인 레이아웃(Fullpage) ********************** */
#fullpage .section{height:100vh}
@media all and ( min-width: 1025px ) and (max-height: 800px) {
	#fullpage .section{min-height:800px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}

/* ******************  메인 비주얼 ********************** */
#mainVisual{ position:relative; height:100vh; background-color:#000;}
.background-img-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background:url(/images/m_banner1.jpg) no-repeat 50% 50%; z-index:0;}
.background-img{position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01);}
/*.background-img .m_banner_img { background-imge:url(/images/m_banner1.jpg) no-repeat 50% 50%; background-size:contain; width:100%; height:100%;}*/
/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01);}
.background-video iframe{
	width: 100vw;
	height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 340px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:0.8;filter:Alpha(opacity=80); }
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}

/* 텍스트영역 */
.main-visual-txt-con{position:absolute; top:0px; left:0px; right:0px; bottom:0px;}
.main-visual-txt-con .main-visual-txt-inner{display:flex; align-items:center; height:100%; justify-content:center;}
.visual-slogan-logo-con{
	margin-right:43px;
}
/* .visual-slogan-logo-con span{display:block;opacity:0;filter:Alpha(opacity=0);;} */
.visual-slogan-txt-con{font-size:60px; letter-spacing:-2px; line-height:1.3; font-weight:600; color:#fff; font-size:68px; line-height:1.4; font-weight:500;transition-delay: 2.3s;}

.visual-slogan-txt-con .visual-txt{position:relative;}
/* body:not(.browser-ie) .visual-slogan-logo-con span{
	filter: blur(10px);
    opacity: 0;
    transition: filter 2s, opacity 2s;
    transition-delay: 1.4s;
} */
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt span{
	filter: blur(10px);
    opacity: 0;
    transition: filter 2s, opacity 2s;
    transition-delay: 2.3s;
}
body:not(.browser-ie) .is-active .visual-slogan-txt-con .visual-txt span{filter: blur(0); opacity: 1}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(1) span:nth-child(1){transition-delay:0s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(1) span:nth-child(2){transition-delay:1.6s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(2) span:nth-child(1){transition-delay:2.0s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(2) span:nth-child(2){transition-delay:1.6s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(2) span:nth-child(3){transition-delay:2.2s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(2) span:nth-child(4){transition-delay:1.6s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(3) span:nth-child(1){transition-delay:2.4s}
body:not(.browser-ie) .visual-slogan-txt-con .visual-txt:nth-child(3) span:nth-child(2){transition-delay:1.6s}

/* IE Cross Browsing */
/* body.browser-ie .visual-slogan-logo-con span {
	opacity:0;filter:Alpha(opacity=0);
    transition: opacity 1.5s;
}*/
body.browser-ie .visual-slogan-txt-con .visual-txt span{
	display:inline-block;
	margin-left:0.3em;
	opacity:0;filter:Alpha(opacity=0);
    transition: opacity 1.5s 1s;
}
/*body.browser-ie .is-active .visual-slogan-logo-con span,*/
body.browser-ie .is-active .visual-slogan-txt-con .visual-txt span{opacity:1;filter:Alpha(opacity=100);}
.visual-slogan-txt-con .visual-txt .m_txt_bild { font-weight:900}



/* ******************  공통 ********************** */
/* -------- 카테고리 -------- */
.cm-main-category{display:block; color:#eeaa07; font-weight:600; font-size:20px; margin-bottom:1.5em}
/* -------- 버튼 -------- */
.cm-more-btn{position:relative; display:inline-block; width:50px; height:50px; background-color:#fff; color:#000; font-size:13px; transition:width 0.3s }
.cm-more-btn.black{color:#fff; background-color:#000;}
.cm-more-btn.pink{color:#fff; background-color:#3ebda4;}
.cm-more-btn .icon{display:block; width:50px; height:100%; line-height:50px; font-size:24px; text-align:center;}
.cm-more-btn .icon i{display:inline-block; transition:all 0.3s; position:relative; top:2px;}
.cm-more-btn .txt{position:absolute; top:50%; overflow:hidden; height:1em; margin-top:-0.5em; left:55px; width:150px; }
.cm-more-btn .txt em{display:inline-block; transform:translateY(100%); opacity:0; transition:all 0.3s 0s}
@media all and (min-width:1025px){
	.cm-more-btn:hover{width:150px}
	.cm-more-btn:hover .icon i{transform:rotate(180deg)}
	.cm-more-btn:hover .txt em{ transform:translateY(0%); opacity:1; transition-delay:0.2s}
}

/* ******************  SMART BANNER ********************** */
#mainSmartBanner{position:relative; height:100vh; font-size:13px;}
#mainSmartBanner .fp-tableCell {position:relative; display:block; padding-left:33.33vw;}
.main-smart-banner-item{position:relative; box-sizing:border-box; padding:100px; padding:5.21vw; background-size:cover !important;}
.main-smart-banner-item01{background:url(/images/m_s_banner_bg1.jpg) no-repeat 50% 100%;}
.main-smart-banner-item02{background:url(/images/m_s_banner_bg2.jpg) no-repeat 70% 50%;}
.main-smart-banner-item03{background:url(/images/m_s_banner_bg3.jpg) no-repeat 70% 50%;}
.main-smart-banner-left{position:absolute; left:0; top:0; width:33.33vw; height:100%;  }
.main-smart-banner-right{height:50%; width:66.67vw; }
.main-smart-banner-inner .smart-banner-tit{color:#000; font-weight:900; letter-spacing:-0.5px; font-size:3.53em; font-size:2.4vw; line-height:1.3; margin-bottom:1.52em}
.main-smart-banner-inner .smart-banner-tit.white{color:#fff;}
.main-smart-banner-item:after{position:absolute; top:0px; right:0px; width:100%; height:100%; background-color:#fff; content:""; transition: transform 1s cubic-bezier(0.3, 0, 0.1, 1); transform-origin:100% 0;}
.active-section .main-smart-banner-item:after{transform: scale(0, 1); transition-delay: .2s;}

/* ******************  BRAND BANNER ********************** */
#mainBrandCon{position:relative; height:100vh; }
.main-brand-banner-wrapper{position:absolute; top:100px; left:100px; right:100px; bottom:100px; font-size:20px;}
/* 왼쪽 :: 텍스트영역 */
.main-brand-txt-con{position:absolute; top:0px; left:0px; }
.main-brand-txt-con .main-brand-category{opacity:0; transition:opacity 0.3s 0.3s}
.main-brand-txt-con .brand-tit1{color:#000; /*font-weight:800;*/font-weight:400; letter-spacing:-2.5px; font-size:4.5em; margin-bottom:0.5em;/* display:block;*/}
.main-brand-txt-con .brand-tit1 .t_txt {font-family: 'NanumSquare', sans-serif; font-size:0.8em; color:#111111;font-weight:bold;}
.main-brand-txt-con .brand-tit2{color:#666666; /*font-weight:800;*/font-weight:500; letter-spacing:-1px; font-size:2.5em; margin-bottom:1em;}
.main-brand-txt-con .brand-tit2 .t_txt {font-family: 'NanumSquare', sans-serif; font-size:2.0em; color:#111111;font-weight:bold;}
.main-brand-txt-con .brand-txt{color:#000; font-weight:400; letter-spacing:-1px; font-size:2.1em; line-height:1.52; margin-bottom:0.45em; opacity:0; transition:opacity 0.3s 0.6s}
.main-brand-txt-con .brand-txt .f_txt01 {font-family: 'NanumSquare', sans-serif; font-size:0.9em; background:#76b438; color:#ffffff; padding:2px 5px;}
.main-brand-txt-con .brand-txt .l_txt01 {font-family: 'NanumSquare', sans-serif; font-size:1.4em; background:#38b45b; color:#ffffff; padding:2px 5px; margin-left:0.6em;}
.main-brand-txt-con .brand-txt .f_txt02 {font-family: 'NanumSquare', sans-serif; font-size:0.9em; background:#38b4ad; color:#ffffff; padding:2px 5px;}
.main-brand-txt-con .brand-txt .l_txt02 {font-family: 'NanumSquare', sans-serif; font-size:1.4em; background:#388ab4; color:#ffffff; padding:2px 5px; margin-left:0.6em;}
.main-brand-txt-con .brand-txt .f_txt03 {font-family: 'NanumSquare', sans-serif; font-size:0.9em; background:#388ab4; color:#ffffff; padding:2px 5px;}
.main-brand-txt-con .brand-txt .f_txt01 .small, .main-brand-txt-con .brand-txt .l_txt01 .small, .main-brand-txt-con .brand-txt .f_txt02 .small, .main-brand-txt-con .brand-txt .l_txt02 .small, .main-brand-txt-con .brand-txt .f_txt03 .small { font-size:0.7em; opacity:0.7;}

.main-brand-txt-con .brand-txt .s_txt01 { font-size:0.7em; letter-spacing:-1px;}
.main-brand-txt-con .brand-txt .p_txt01 { font-size:0.7em; letter-spacing:-1px; color:#e63c00;}

.cover-txt {
	display:inline-block;
    position: relative;
    transition: transform .6s cubic-bezier(0.8, 0, 0.5, 1);
    transition-delay: .6s;
    transform: scale(0, 1);
    transform-origin: 100% 50%
}
.cover-txt span {
    position: relative;
    z-index: 2
}

.cover-txt:before {
    display: block;
    width: 100%;
    height: 120%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #3ebda4;
    transform-origin: 0 50%;
    transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1);
    transition-delay: 0s;
    z-index: 3
}
.brand-tit2:before{
	background-color:#666;
}
.active-section .main-brand-category,
.active-section .brand-txt{
	opacity:1.0;
}
.active-section .cover-txt {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    transform: scale(1, 1);
    transform-origin: 0 50%;
}

.active-section .cover-txt:before {
    transform: scale(0, 1);
    transition-delay: .6s;
    transform-origin: 100% 50%
}

/* 오른쪽 :: 퀵링크 */
.main-brand-quick-link-con{position:absolute; bottom:-10px; right:-10px;}
.main-brand-quick-link-con ul{width:645px; font-size:0; text-align:right;}
.main-brand-quick-link-con li{display:inline-block; margin:10px;}
.main-brand-quick-link-con li:first-child{display:block;}
.main-brand-quick-link-con li a{display:inline-block; position:relative; width:300px; height:300px; width:15.63vw; height:15.63vw; box-sizing:border-box; background-color:#000; text-align:left;}
.main-brand-quick-link-con li a .link-tit{position:absolute; bottom:35px; left:40px; bottom:1.82vw; left:2.08vw;  color:#fff; font-size:32px; font-size:1.67vw; letter-spacing:-0.25px; line-height:1.125; font-weight:800;}
.main-brand-quick-link-con li.story-link-item a{background:#3ebda4 url(/images/m_t_banner_bg1.jpg) no-repeat 100% 0;}
.main-brand-quick-link-con li.value-link-item a{background:#000 url(/images/m_t_banner_bg2.jpg) no-repeat 100% 0;}
.main-brand-quick-link-con li.smart-link-item a{background:url(/images/m_t_banner_bg3.jpg) no-repeat 100% 0; background-size:cover;}
.main-brand-quick-link-con li a:after{position:absolute; top:0px; right:0px; width:100%; height:100%; background-color:#fff; content:""; transition: transform 1s cubic-bezier(0.3, 0, 0.1, 1); transform-origin:100% 0;}
.active-section .main-brand-quick-link-con li a:after{transform: scale(0, 1); transition-delay: .3s;}
@media all and (min-width:1025px){
	.main-brand-txt-con .brand-tit1{font-size:4.6vw;}
	.main-brand-txt-con .brand-tit2{font-size:2.1vw; }
	.main-brand-txt-con .brand-txt{font-size:2.19vw;  }
}

/* ******************  BOARD CON ********************** */
#mainBoardCon{position:relative; height:100vh;}
#mainBoardCon .fp-tableCell{vertical-align:top;}
/* -------- MEDIA LIST -------- */
.media-list-container{}
.media-list-container .media-board-item {float:left; position:relative; width:25%; }
.media-list-container .media-board-item:after{position:absolute; top:0px; right:0px; width:100%; height:100%; background-color:#fff; content:""; transition: transform 1s cubic-bezier(0.3, 0, 0.1, 1); transform-origin:100% 0;}
.active-section .media-list-container .media-board-item:after{transform: scale(0, 1);}
.media-board-item a{overflow:hidden; position:relative; display:block; height:0; padding-top:100%; box-sizing:border-box; transition:all 0.5s; background-color:#000; }
.media-board-item .main-media-thumb-con{position:absolute; top:0px; left:0px; width:100%; height:100%; background-size:cover !important;   transition:all 0.5s; opacity: 0.5;}
.media-board-item .main-media-thumb-con img { width:100%; height:100%;}
.media-board-item .main-media-board-info{position:absolute; bottom:50px; left:50px; right:50px; bottom:2.6vw; left:2.6vw; right:2.6vw; color:#fff; font-size:14px;}
.media-board-item .main-media-board-info .media-category{display:block; letter-spacing:-0.25px; margin-bottom:1.57em; font-size:1.07em;}
.media-board-item .main-media-board-info .media-subject{height:3.32em; letter-spacing:-0.5px; font-weight:600; margin-bottom:1.25em; font-size:1.71em; line-height:1.66;}
.media-board-item .main-media-board-info .media-date{display:block; /*opacity:0.35;*/opacity:1; letter-spacing:-0.25px; }
.media-board-item.media-no-thumb.odd a{background:#3ebda4 url(../images/main/brand_logo_h_big.png) no-repeat 100% 0;}
.media-board-item.media-no-thumb.even a{background:#000 url(../images/main/brand_logo_t_big.png) no-repeat 100% 0;}
.media-board-item a:hover .main-media-thumb-con{transform:scale(1.05);}

/* SUB MEDIA */
#boardHeadlineContent .media-list-container .media-board-item:after{background-color:#f5f5f5}
#boardHeadlineContent .media-board-item:not(.media-no-thumb) .main-media-thumb-con{opacity:0.5}
#boardHeadlineContent .media-board-item .main-media-board-info{bottom:2vw; left:2vw; right:2vw;}
.scroll-custom.animated .media-list-container .media-board-item:after{transform: scale(0, 1);}

/* -------- INVEST LIST -------- */
.main-invest-wrapper{position:relative; height:calc(100% - 25vw); box-sizing: border-box; background:#101017}
.main-invest-wrapper:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background:#101017 url(/images/m_f_banner_bg1.jpg) no-repeat 50% 50%; content:"";}
.main-invest-inner-con{position:relative; display:flex; height:100%; align-items:center; color:#fff; font-size:20px;  transition:opacity 0.5s 0.2s; opacity:0;}
/* 왼쪽 :: 주가정보타이틀영역 */
.main-invest-tit-con{width:50%; }
.main-invest-tit-con .main-invest-category{margin-bottom:1.15em}
.main-invest-tit-con .main-invest-tit{font-size:2em; font-weight:900; letter-spacing:-0.5px; margin-bottom:0.5em; font-family:'NanumSquare', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;}
.main-invest-tit-con .main-invest-txt{font-size:0.9em; font-weight:400; letter-spacing:-0.5px; opacity:0.5; margin-bottom:2.22em; line-height:1.5}
/* 오른쪽쪽 :: 주가정보영역 */
.main-invest-price-con{width:50%;}
.main-invest-price-con .main-invest-cur-price{margin-bottom:1em;}
.main-invest-price-con .main-invest-cur-price dt{font-size:0.75em; letter-spacing:-0.5px; margin-bottom:0.68em;}
.main-invest-price-con .main-invest-cur-price dd{font-size:5em; letter-spacing:-0.5px; font-weight:500;}
.main-invest-price-con .main-invest-cur-price dd strong{font-weight:600;}
.main-invest-price-detail-tbl{font-size:15px; table-layout:fixed; }
.main-invest-price-detail-tbl th,
.main-invest-price-detail-tbl td{letter-spacing:-0.5px;}
.main-invest-price-detail-tbl th{font-size:1em; color:rgba(255,255,255,0.5); font-weight:400; text-align:left;}
.main-invest-price-detail-tbl td{font-size:1.06em; color:#fff; padding:5px 0; padding-right:35px;}
.main-invest-price-detail-tbl td .price{font-weight:600; display:inline-block; vertical-align:middle; min-width:50px;}
.main-invest-price-detail-tbl td .icon{position:relative; top:1px; display:inline-block; vertical-align:middle; font-size:1.5em; margin-left:0.5em}

.active-section .main-invest-inner-con{opacity:1.0}

/* 오른쪽 :: 퀵메뉴(210630) */
.main-invest-inner-con{max-width:1380px;}
.main-company-quick-con{width:calc(100% - 610px);}
.main-company-quick-menu-list{overflow:hidden; margin:0 -10px;}
.main-company-quick-menu-list li{float:left; width:calc(33.33% - 20px); margin:0 10px;}
.main-company-quick-menu-list li a{display:block; position:relative; height:0; padding-top:100%; border-radius:30px; background-color:rgba(255,255,255,0.1); transition:all 0.3s}
.main-company-quick-menu-list li a .company-quick-inner{position:absolute; top:0px; left:0px; width:100%; height:100%; display:flex; flex-direction: column; align-items: center; justify-content: center;}
.main-company-quick-menu-list li a .icon{display:block; transition:all 0.3s; opacity:0.5}
.main-company-quick-menu-list li a .tit{display:block; padding-top:30px; color:#fff; font-size:20px; font-weight:600; letter-spacing:-0.25px; transition:all 0.3s; opacity:0.9}
.main-company-quick-menu-list li a:hover{background-color:#3ebda4}
.main-company-quick-menu-list li a:hover .icon,
.main-company-quick-menu-list li a:hover .tit{opacity:1.0;}

/* ******************  메인 브랜드영상 (211007) ********************** */
#mainBrandVideoCon{background:url(/images/main/main_brand_video_bg.jpg) no-repeat}
.main-brand-video-wrapper{padding:105px 0;}  
.main-brand-video-wrapper .main-invest-tit-con{width:44%;}
.main-brand-video-wrapper .main-invest-tit-con .main-invest-tit,
.main-brand-video-wrapper .main-invest-tit-con .main-invest-txt{color:#000}
.main-brand-video-con{position:relative; height:0; padding-top:56.2%; }
.main-brand-video-con iframe{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#000;}
@media all and (min-width:1921px){	
	#mainBrandVideoCon{background-size:cover}
}

/* ******************  메인 왼쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	right:0px;
	width:100px;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
	display:none;
}
#fp-nav.show{display:block;}
#fp-nav ul li{position:relative; width:10px; margin:20px auto;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; box-sizing:border-box;}
#fp-nav ul li a span{position:relative;display:block; width:10px; height:10px; border:1px solid #fff; box-sizing:border-box; border-radius:50%;}
#fp-nav ul li a span:after{position:absolute; top:0px; left:0px; width:0; bottom:0px; background-color:#fff; content:""; transition:width 0.3s}
#fp-nav ul li .fp-tooltip{
	position:absolute; 
	overflow:hidden; 
	right:20px; top:0; 
	opacity:0;filter:Alpha(opacity=0); 
	line-height:20px; 
	letter-spacing:-0.75px; 
	font-size:12px; 
	color:#fff; 
	margin-right:5px; 
	text-align:right; 
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-o-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;
	display:none;
}
#fp-nav ul li .fp-tooltip span{display:block; transform:translateX(100%); transition:all 0.5s;}
#fp-nav ul li a.active span:after{width:100%;}
/* Black Style */
#fp-nav.black ul li a span{border-color:#000}
#fp-nav.black ul li a span:after{background-color:#000;}