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

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

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; height:100vh; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
.main-visual-con,
.main-visual-item{height:100%; z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img{
	width:100%;
	height:100%;
	background-size:cover !important;
}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 영상 */
.main-visual-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000; box-sizing: border-box;}
.main-visual-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.main-visual-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	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 2.5s 0.2s;
}
.main-visual-video.start iframe{opacity:0.8;filter:Alpha(opacity=80);}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:110px; top:0; right:0; 
	/*width:100%; */
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	/*justify-content:center;
	text-align:center; */
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt2{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:100px; font-weight:700; /*letter-spacing:-3px;*/letter-spacing:-2.5px; color:#fff; margin:-30px 0 30px; line-height:1.1}
.main-visual-item .main-visual-txt-con .main-visual-txt1 span {opacity: 0;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:24px; letter-spacing:-0.75px; color:rgba(255,255,255,0.8); font-weight:400; line-height:1.4}

/* 메인 비주얼 :: active효과 */
#mainVisual.start .main-visual-txt2,
#mainVisual.active .main-visual-txt2{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
#mainVisual.start .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.85s; animation-delay:0.85s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:1.85s; animation-delay:1.85s;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-50px); 
		transform: translateX(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}


/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; bottom:75px; left:110px; z-index:9;} 
.main-scroll-icon .line{display:inline-block; vertical-align:middle; width:86px; height:1px; position:relative; margin-right:20px}
.main-scroll-icon .line:after{content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, .5);
  animation: 2s infinite alternate scrollguide;}
.main-scroll-icon .txt{display:inline-block; vertical-align:middle; color:rgba(255,255,255,0.5); letter-spacing:-0.5px; font-size:12px; letter-spacing:0; font-weight:400; margin-right:20px}
.main-scroll-icon .arrow{display:inline-block; vertical-align:middle; animation: upDown 1.5s ease-in-out infinite; }
@keyframes upDown {
	0% {
		transform:  translateY(-3px);
	}
	50% {
		transform: translateY(3px);
	}
	100% {
		transform:  translateY(-3px);
	}
}

@keyframes scrollguide {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


/* 메인 비주얼 :: 사이드메뉴 */
.main-side-menu{position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:9}
.main-side-menu ul {display: flex;}
.main-side-menu ul li {width: 64px;height: 430px;position: relative;transition:.3s ease-out;overflow:hidden;}
.main-side-menu ul li:nth-child(1) {background: #0A7C81;}
.main-side-menu ul li:nth-child(2) {background: #05697A;}
.main-side-menu ul li:nth-child(3) {background: #085D70;}
.main-side-menu ul li .side-menu-tit{display: block; height: 100%; cursor:pointer}
.main-side-menu ul li .side-menu-tit em{font-size: 18px; letter-spacing:0; font-weight: 700;color: #fff; white-space: pre; transform: translate(-50%, -50%) rotate(-90deg); position: absolute; left: 50%; top: 50%;}
.main-side-menu ul li.open {width:820px;}
.main-side-menu ul li.open > .side-menu-tit {display:none;}
.main-side-menu ul li .side-menu-con {color:#fff; width:820px; position:relative; height:100%;}
.main-side-menu ul li .side-menu-con .inner{padding:50px 55px}
.main-side-menu ul li .side-menu-con .inner .txt-con{}
.main-side-menu ul li .side-menu-con .inner .txt-con h3{font-weight:700; font-size:36px; letter-spacing:0; }
.main-side-menu ul li .side-menu-con .inner .txt-con p{font-weight:400; font-size:17px; letter-spacing:-0.75px; opacity:0.5; line-height:1.76; margin-top:25px}
.main-side-menu ul li .side-menu-con .inner .txt-con p span{display:block}
.main-side-menu ul li .side-menu-con .inner .txt-con a{display:inline-block; font-weight:600; font-size:17px; letter-spacing:-0.75px; color:#fff; position:absolute; left:50px; bottom:55px}
.main-side-menu ul li .side-menu-con .inner .img-con{position:absolute; bottom:45px; right:50px}
.main-side-menu ul li .side-menu-con .inner .img-con img{max-width:100%}
.main-side-menu ul li .side-menu-con .close-btn {position:absolute; top:45px; right:45px; color:#fff; font-size:30px}



/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1(제품) -------- */
#mainPrdCon{padding:110px 0 73px}
#mainPrdCon > div{position:relative; }
#mainPrdCon .bg-txt{position:absolute; bottom:185px; right:47%; width:63%; text-align:right; z-index:-1}
#mainPrdCon .bg-txt img{max-width:100%}
#mainPrdCon .main-prd-container{position:relative}
/* 내용 */
.main-prd-tab-con{}
.main-prd-tab-con .main-prd-inner{opacity:0; transition:opacity 0.5s}
.main-prd-tab-con .prd-img{float:right; text-align:right; width:47%;}
.main-prd-tab-con .prd-img img{max-width:100%}
.main-prd-tab-con .prd-txt{float:left; width:53%; box-sizing:border-box; padding:4% 4% 100px 0; min-height:680px; box-sizing:border-box; }
.main-prd-tab-con .prd-txt .prd-txt-inner{position:relative; /*padding-left:100px*/padding-left:12.5%}
.main-prd-tab-con .prd-txt .prd-txt-inner .icon{position:absolute; top:6px; left:0; width:10%}
.main-prd-tab-con .prd-txt .prd-txt-inner .icon img{max-width:100%}
.main-prd-tab-con .prd-txt .prd-txt-inner .tit{font-weight:700; font-size:56px; letter-spacing:-0.5px; color:#2d2d2d}
.main-prd-tab-con .prd-txt .prd-txt-inner .txt-01{font-weight:600; font-size:24px; letter-spacing:-0.5px; color:#2d2d2d; line-height:1.5; margin-top:7%}
.main-prd-tab-con .prd-txt .prd-txt-inner .txt-02{font-weight:400; font-size:18px; letter-spacing:-0.5px; color:#676767; line-height:1.66; margin-top:6%}
.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn{position: relative; display: inline-block; margin: auto; padding: 23px 30px 21px 40px; transition: all 0.2s ease; margin-top:5%}
.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn:before {content: ""; position: absolute; top: 0; left: 0; display: block; border-radius: 28px; background: #e6f6f5; width: 60px; height: 60px; transition: all 0.3s ease;}
.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn span {position: relative;  text-transform: uppercase; vertical-align: middle; font-weight:700; font-size:14px; letter-spacing:0; color:#0ea39f}
.main-prd-tab-con .prd-txt .prd-txt-inner .more-btn .line{position:relative; display:inline-block; vertical-align:middle; width:18px; height:2px; background-color:#0ea39f; margin-left:18px}
@media all and (min-width:801px){
    .main-prd-tab-con .prd-txt .prd-txt-inner .more-btn:hover:before {width: 100%;}
}

/* 탭 */
.main-prd-tab-style{position:absolute; left:0; bottom:-9px; z-index:9}
.main-prd-tab-style ul{}
.main-prd-tab-style ul li{float:left; width:245px; height:94px; margin-right:15px; transition:box-shadow 0.3s; margin-bottom:10px;}
.main-prd-tab-style ul li:last-child{margin-right:0}
.main-prd-tab-style ul li a{display:table; width:100%; height:100%; border:1px solid #c2c2c2; box-sizing:border-box; table-layout:fixed; background-color:#fff; position:relative; transition:all 0.3s}
.main-prd-tab-style ul li a span{display:table-cell; vertical-align:middle}
.main-prd-tab-style ul li a span .txt{display:block; padding-left:40px; font-weight:700; font-size:18px; letter-spacing:-0.5px; color:#2d2d2d;  transition:color 0.3s}
.main-prd-tab-style ul li a span .icon{position:absolute; right:33px; top:50%; transform:translateY(-50%); width:24px; height:24px; background-repeat:no-repeat !important; background-position:right center !important; background-size:contain !important; transition:background 0.3s}
.main-prd-tab-style ul li.tab-01 a span .icon{background:url(/images/main/main_prd_tab_icon01.png)}
.main-prd-tab-style ul li.tab-02 a span .icon{background:url(/images/main/main_prd_tab_icon02.png)}
.main-prd-tab-style ul li.tab-03 a span .icon{background:url(/images/main/main_prd_tab_icon03.png)}
.main-prd-tab-style ul li.tab-04 a span .icon{background:url(/images/main/main_prd_tab_icon04.png)}
.main-prd-tab-style ul li.tab-05 a span .icon{background:url(/images/main/main_prd_tab_icon05.png)}
.main-prd-tab-style ul li.tab-06 a span .icon{background:url(/images/main/main_prd_tab_icon06.png)}
.main-prd-tab-style ul li.tab-07 a span .icon{background:url(/images/main/main_prd_tab_icon07.png)}

/* 선택된 탭 */
.main-prd-tab-con.active .main-prd-inner{opacity:1}2023-03-31
.main-prd-tab-style ul li.selected{box-shadow:5px 8px 18px 2px rgba(0,0,0,0.27)}
.main-prd-tab-style ul li.selected a{background-color:#0ea39f; border-color:#0ea39f}
.main-prd-tab-style ul li.selected a span .txt{color:#fff}
.main-prd-tab-style ul li.tab-01.selected a span .icon{background:url(/images/main/main_prd_tab_icon01_on.png)}
.main-prd-tab-style ul li.tab-02.selected a span .icon{background:url(/images/main/main_prd_tab_icon02_on.png)}
.main-prd-tab-style ul li.tab-03.selected a span .icon{background:url(/images/main/main_prd_tab_icon03_on.png)}
.main-prd-tab-style ul li.tab-04.selected a span .icon{background:url(/images/main/main_prd_tab_icon04_on.png)}
.main-prd-tab-style ul li.tab-05.selected a span .icon{background:url(/images/main/main_prd_tab_icon05_on.png)}
.main-prd-tab-style ul li.tab-06.selected a span .icon{background:url(/images/main/main_prd_tab_icon06_on.png)}
.main-prd-tab-style ul li.tab-07.selected a span .icon{background:url(/images/main/main_prd_tab_icon07_on.png)}

@media all and (min-width:801px){	
	.main-prd-tab-style ul li:hover{box-shadow:5px 8px 18px 2px rgba(0,0,0,0.27)}
	.main-prd-tab-style ul li:hover a{background-color:#0ea39f; border-color:#0ea39f}
	.main-prd-tab-style ul li:hover a span .txt{color:#fff}
	.main-prd-tab-style ul li.tab-01:hover a span .icon{background:url(/images/main/main_prd_tab_icon01_on.png)}
	.main-prd-tab-style ul li.tab-02:hover a span .icon{background:url(/images/main/main_prd_tab_icon02_on.png)}
	.main-prd-tab-style ul li.tab-03:hover a span .icon{background:url(/images/main/main_prd_tab_icon03_on.png)}
	.main-prd-tab-style ul li.tab-04:hover a span .icon{background:url(/images/main/main_prd_tab_icon04_on.png)}
}

/* active효과 */
.effect-right{
	 -webkit-transform: translate3d(30px, 0, 0);
	transform: translate3d(30px, 0, 0);
	opacity:0;
	transition:transform 1s, opacity 1s
}
.effect-left{
	 -webkit-transform: translate3d(-30px, 0, 0);
	transform: translate3d(-30px, 0, 0);
	opacity:0;
	transition:transform 1s, opacity 1s
}
.effect-up{
	 -webkit-transform: translate3d(0, 30px, 0);
	transform: translate3d(0, 30px, 0);
	opacity:0;
	transition:transform 1s, opacity 1s
}
.animated .effect-left,
.animated .effect-right,
.animated .effect-up{
	 -webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1
}



/* -------- 메인 컨텐츠 :: 컨텐츠2(주가정보) -------- */
#mainIrCon{padding:55px 0; border-top:1px solid #e0e0e0}
.main-ir-con{}
.main-ir-con .ir-tit{float:left; display:flex; align-items:center; margin-top:19px}
.main-ir-con .ir-tit b{font-weight:600; font-size:30px; letter-spacing:-0.5px; color:#343434}
.main-ir-con .ir-tit em{font-weight:400; font-size:15px; letter-spacing:0; color:#343434; opacity:0.5; margin-left:30px}
.main-ir-con .ir-info{float:right; display:flex; align-items:center}
.main-ir-con .ir-info .num{font-weight:700; font-size:48px; letter-spacing:-0.5px; color:#343434}
.main-ir-con .ir-info .info-detail{margin-left:50px; display:flex; font-weight:400; font-size:16px; letter-spacing:-0.5px; color:#343434; position:relative;}
.main-ir-con .ir-info .info-detail.detail-01:after{position:absolute; content:""; width:1px; height:11px; background-color:#b2b2b2; right:-25px; top:3px}
.main-ir-con .ir-info .info-detail dt{}
.main-ir-con .ir-info .info-detail dd{}
.main-ir-con .ir-info .info-detail dd span{display:inline-block; margin-left:5px}
.main-ir-con .ir-info .info-detail dd span.state{position:relative; padding-left:20px; box-sizing:border-box}
.main-ir-con .ir-info .info-detail dd span.state:before{position:absolute; content:"\e91b"; font-family:"xeicon"; left:0; top:-2px; font-size:19px}
.main-ir-con .ir-info .info-detail dd span.state.up:before{content:"\e92f"; color:#e2383f}
.main-ir-con .ir-info .info-detail dd span.state.down:before{content:"\e935"; color:#2341c4}
.main-ir-con .ir-info .more-btn{margin-left:80px; width:66px; height:66px; text-align:center; position:relative; display:inline-block}
.main-ir-con .ir-info .more-btn:after{position:absolute; content:""; width:100%; height:100%; background:url(/images/main/main_ir_btn.png) no-repeat; background-size:contain !important; left:0; top:0; z-index:0; transform:rotate(0); transition:transform 0.4s}
.main-ir-con .ir-info .more-btn i{line-height:66px; font-size:18px; color:#fff; position:relative; z-index:1}
@media all and (min-width:801px){		
	.main-ir-con .ir-info .more-btn:hover:after{transform:rotate(90deg)}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(information) -------- */
#mainInfoCon{background-color:#ededed; padding:135px 0; position:relative}
#mainInfoCon .bg-txt{position:absolute; top:115px; right:0; width:57%; text-align:right}
#mainInfoCon .bg-txt img{max-width:100%}
.main-info-con{position:relative; z-index:9}
.main-info-con .con-tit{font-weight:400; font-size:42px; letter-spacing:-0.75px; color:#2d2d2d; line-height:1.42}
.main-info-con .con-tit b{font-weight:600}
.main-info-con .main-info-box{display:flex; /*margin:40px -0.6% 0*/margin:40px -2% 0}
.main-info-con .main-info-box li{/*width:32.1333%; margin:0 0.6%;*/ width:29.333%; margin:0 2%; background-color:#fff; box-shadow:9px 13px 15px 3px rgba(0,0,0,0.13);}
.main-info-con .main-info-box li a{display:block; padding:22% 15.2%; position:relative; height:100%; box-sizing:border-box}
.main-info-con .main-info-box li a:after{position:absolute; content:""; width:100%; height:100%; border:3px solid #0ea39f; box-sizing:border-box; top:0; left:0; box-sizing:border-box; opacity:0; transition:opacity 0.3s}
.main-info-con .main-info-box li a .icon{display:block; height:46px}
.main-info-con .main-info-box li a .icon img{}
.main-info-con .main-info-box li a .tit{display:block; font-weight:400; font-size:38px; letter-spacing:-0.5px; color:#2d2d2d; line-height:1.3; margin-top:40px}
.main-info-con .main-info-box li a .txt{font-weight:400; font-size:19px; letter-spacing:-0.55px; color:#7e7e7e; line-height:1.47; margin-top:25px}
.main-info-con .main-info-box li a .more-view{display:inline-block; font-weight:700; font-size:14px; letter-spacing:0; color:#0ea39f; margin-top:80px; text-transform:uppercase; position:relative; transition:all 0.3s}
.main-info-con .main-info-box li a .more-view:before{position:absolute; content:""; width:60px; height:60px; background-color:rgba(14,163,159,0.1); border-radius:50%; left:0; top:-23px; opacity:0; transition:opacity 0.3s}
.main-info-con .main-info-box li a .more-view .line{display:inline-block; width:18px; height:2px; background-color:#0ea39f; vertical-align:middle; margin-left:18px;}
@media all and (min-width:801px){		
	.main-info-con .main-info-box li a:hover:after{opacity:1}
	.main-info-con .main-info-box li a:hover .more-view{padding-left:35px}
	.main-info-con .main-info-box li a:hover .more-view:before{opacity:1}
}