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

/* ========================================================
 * 메인 레이아웃
======================================================== */
#mainContent{position:relative; /* top:100vh; */}
/* 메인비주얼 :: Background */
.main-cover{width: 100%; height: 100%; position: absolute; z-index: 9999; top: 0; left: 0; opacity: 1;  background-color: #000; transition:all 1.3s;}

/* ========================================================
 * 메인 공통
======================================================== */
/* -------- Hidden Text -------- */
/* 텍스트 */
.hidden-box{display:block; overflow:hidden; line-height:inherit; font-weight:inherit;}
.hidden-box .hidden-item{display:block; transform:translateY(100%) rotate(10deg); opacity:0; transform-origin:left; transition:var(--custom-transiton2); transition-duration:1s; transition-property:transform, opacity}
.hidden-box .hidden-item.reverse{transform:translateY(100%) rotate(-10deg); transform-origin:right;}
/* 링크 */
.txt-link-over{overflow:hidden; display:inline-block; line-height:1.1; position:relative;}
.txt-link-over .default-txt{display:block; transition:var(--custom-transiton1);}
.txt-link-over .over-txt{display:block; position:absolute; top:50%; transform:translateY(100%); transition:var(--custom-transiton1);}
a:hover .txt-link-over .default-txt{transform:translateY(-150%);}
a:hover .txt-link-over .over-txt{transform:translateY(-50%);}

/* -------- 메인 공통 :: 타이틀 -------- */
.main-tit-box{color: #000;}
.main-tit-box .main-tit{ font-size:min(3.9063vw, 7.5rem);  letter-spacing:-0.04em; font-weight:500; margin-top: 1.5rem; margin-left:-0.5rem }
.main-tit-box .main-sub-tit {display:block; font-size:1.8rem; font-weight:600;}
.main-tit-box .main-sub-tit .point {color:#25457f; margin-right:0.7rem;}
.main-tit-box .main-sub-tit-txt{font-size:1.8rem; letter-spacing:-0.075em; color:#666; margin-top:4.2rem; line-height:1.67}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.animated .hidden-box .hidden-item{
	opacity:1.0;
	transform:translateY(0) rotate(0);
}

/* ========================================================
 * 메인 비주얼
======================================================== */
/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; position:relative; width:100%; height:100vh; height:calc(100vh - var(--header-height)); background-color:#000 }
.main-visual-container{height:100%;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item.active-item .main-visual-img{
    animation: image-zoom-out 8s 0s forwards;
}
/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:flex-end;
	height:100%;
	box-sizing:border-box;
	padding-bottom:55.7rem; 
	transition:var(--custom-transiton2);
}


.main-visual-item .main-visual-txt-con .main-visual-txt1{display:block; font-size:min(4.1667vw, 8rem); font-weight:400; letter-spacing:-3.2px; color:#fff; font-weight:500; line-height:1.2; margin-bottom:1.5rem; margin-left:-0.7rem; padding-right:0.7rem}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:min(1.8229vw,3.5rem); letter-spacing:-1.4px; color:#fff; font-weight:300; line-height:1.5;}

/* 메인 비주얼 :: 텍스트 :: active효과 */
.main-visual-item.active-item .hidden-box .hidden-item{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(.7, 0, .2, 1) both 0.5s;
	animation: text-active-animation 1.5s cubic-bezier(.7, 0, .2, 1) both 0.5s;
}

/* 메인 비주얼 :: Dots */
.main-visual-con .slick-dots-wrapper{position:absolute; left:0; bottom:47rem; width:100%; text-align:left; z-index:11; transition:var(--custom-transiton2); }
.main-visual-con .slick-dots{display:inline-block; vertical-align:top; *display:inline;*zoom:1; }
.main-visual-con .slick-dots li{float:left; margin-left:2rem;}
.main-visual-con .slick-dots li:first-child{margin-left:0}
.main-visual-con .slick-dots li button{
	position:relative; 
	cursor:pointer; 
	margin:0px; 
	padding:0px; 
	background:none; 
	vertical-align:top; 
	width:19px; 
	height:19px; 
	font-size:0; 
	border-radius:50%; 
	box-sizing:border-box;
}
.main-visual-con .slick-dots li button:focus{}
.main-visual-con .slick-dots li button:after{position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background-color:#fff; content:""; border-radius:50%; transform:scale(1); transition:var(--custom-transiton1); }
.main-visual-con .slick-dots li button svg{position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(0) rotate(-90deg); transition:var(--custom-transiton1);}
.main-visual-con .slick-dots li button svg circle{
	fill:transparent; 
	stroke:#fff; 
	stroke-width:3px; 
	stroke-linecap:round; 
	stroke-dasharray: 100;
	stroke-dashoffset: 50;
}
.main-visual-con .slick-dots li.slick-active button svg{transform:scale(1) rotate(-90deg);; }
html:not(.ios-os) .main-visual-con .slick-dots li.slick-active button svg circle{animation: draw-circle 2s cubic-bezier(0.4, 0, 0.2, 1) both;}
.ios-os .main-visual-con .slick-dots li.slick-active button svg circle{animation: draw-circle-ios 2s cubic-bezier(0.4, 0, 0.2, 1) both;}
.main-visual-con .slick-dots li.slick-active button:after{transform:scale(0); transition-duration:0s;}

/* 메인 비주얼 :: 스크롤아이콘 */
.scroll-icon{position:absolute; bottom:4.5rem; left:4.2rem; z-index:9;}
.scroll-icon .mouse-icon{position:relative; width:12px; height:17px; border:2px solid #fff; border-radius:6px; margin:0px auto; box-sizing:border-box;}
.scroll-icon .mouse-icon:after{position:absolute; left:50%; margin-left:-1px; width:2px; height:3px; border-radius:50%; background-color:#fff; content:""; animation: scrollAni 1.1s infinite;}
.scroll-icon .txt{display:block; color: rgba(255, 255, 255, 0.7); font-size:10px; font-weight:700; margin:15px auto 0;}
.scroll-icon:not(.main-scroll-icon) .txt{width:1em; }
.scroll-icon:not(.main-scroll-icon) .txt em{display:block; writing-mode:vertical-rl;}
.scroll-icon.main-scroll-icon .txt{letter-spacing:-1px;}
.scroll-icon .scroll-txt{display:block;}
.scroll-icon .scroll-txt .char{display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; animation-delay:calc(60ms * var(--char-index))}


/* ========================================================
 * 메인 :: News
======================================================== */
#mainNewsContent{position:absolute; display:flex; align-items:center; bottom:4.8rem; right:0; left:var(--area-margin); height:34.9rem; background-color:#fff; z-index:11; transition:var(--custom-transiton2); transform:translateX(calc(100% - 97.8rem))}
.news-closed #mainNewsContent.news-over{/* transform:translateX(calc(100% - 5.8rem)) */}
.main-news-wrapper{position:relative; width:97.8rem; height:100%; padding-right:17.6rem; box-sizing:border-box;}
/* -------- 뉴스 영역 -------- */
.main-news-container{display:flex; width:100%; padding:6.1rem 10.3rem 6.1rem 7.2rem; box-sizing:border-box;}
.main-news-container .main-tit-box{display:flex; flex-direction:column; justify-content:space-between; text-align:left; width:28.5rem; margin-bottom:0; }
.main-news-container .main-tit-box .main-sub-tit{display:flex; margin-top:0;}
.main-news-container .main-news-paging{color:rgba(51, 51, 51, 0.3); font-size:2rem; font-weight:600; }
.main-news-container .main-news-paging .cur-num{display:inline-block; width:1.35em; font-size:2.5em; color:#333;}
.main-news-container .main-news-paging .total-num:before{content:"/"; font-family:sans-serif; margin:0 0.5rem 0 0; opacity:0.5; font-weight:400;}
.main-news-container .main-news-list-con{width:34.1rem; letter-spacing:-0.065em }
.main-news-container .main-news-list-con a{display:block; transition:var(--custom-transiton1);}
.main-news-container .main-news-list-con .main-news-tit{color:#222; font-size:3rem; line-height:1.4; margin-bottom:2.5rem; letter-spacing:-1.95px; font-weight:600; transition:var(--custom-transiton1);}
.main-news-container .main-news-list-con .main-news-txt{font-size:1.65rem; color:rgba(85, 85, 85, 0.75); line-height: 1.82; transition:var(--custom-transiton1);}
.main-news-container .main-news-list-con .main-news-date{display:block; color:#555; font-size:1.4rem; margin-top:4.5rem;}
.main-news-container .main-news-list-con a:hover .main-news-tit{color:#25457f}
.main-news-container .main-news-list-con a:hover .main-news-txt{color:#222;}
/* 뉴스 영역 :: controls */
.main-news-wrapper .main-news-controls{position:absolute; top:0px; right:0px; width:17.6rem; height:100%; border-left:1px solid rgba(0, 0, 0, 0.09); border-right:1px solid rgba(0, 0, 0, 0.09); box-sizing:border-box;}
.main-news-wrapper .main-news-controls button{height:50%; width:100%;}
.main-news-wrapper .main-news-controls button svg{fill:#555; transition:all 0.5s ease;}
.main-news-wrapper .main-news-controls button:hover svg{fill:#25457f}
.main-news-wrapper .main-news-controls .main-news-next-btn{border-bottom:1px solid rgba(0, 0, 0, 0.09)}
.main-news-wrapper .main-news-controls .main-news-prev-btn svg{transform:rotate(-180deg)}
.main-news-wrapper .main-news-controls .main-news-next-btn:hover svg{transform:translateX(5px)}
.main-news-wrapper .main-news-controls .main-news-prev-btn:hover svg{transform:translateX(-5px) rotate(-180deg)}
/* -------- 영상 영역 -------- */
.main-video-wrapper{width:calc(100% - 97.8rem); height:100%;}
.main-video-wrapper .main-video-con{position:relative; height:calc(100% - 5rem); margin:2.5rem; margin-left:9.2rem; box-sizing:border-box; }
.main-video-wrapper .main-video-con .main-video-play-btn{position:relative; display:block; width:100%; height:100%;}
.main-video-wrapper .main-video-con .main-video-thumb{overflow:hidden; position:relative; display:block; width:100%; height:100%; background-color:#000;}
.main-video-wrapper .main-video-con .main-video-thumb img{width:100%; height:100%; object-fit:cover; opacity:0.75; transition:var(--custom-transiton1)}
.main-video-wrapper .main-video-con .video-play-icon{position:absolute; top:50%; left:50%; width:8.4rem; height:8.4rem; display:flex; align-items:center; justify-content:center;  transform:translate(-50%,-50%); background-color:#fff; border-radius:50%; transition:var(--custom-transiton1); font-size:1.5rem; color:#25457f}
.main-video-wrapper .main-video-con .main-video-play-btn:hover .main-video-thumb img{opacity:1;}
/* -------- 닫기버튼  -------- */
.main-news-toggle-btn{overflow:hidden; position:absolute; left:0; top:0; width:4.8rem; height:100%; }
.main-news-toggle-btn .toggle-btn-icon{position:absolute; top:0px; left:0px; width:4.8rem; height:4.8rem; color:#000; font-size:2.5rem; display:flex; align-items:center; justify-content:center; transition:var(--custom-transiton1)}
.main-news-toggle-btn .toggle-btn-icon i{display:block;}
.main-news-toggle-btn:hover .toggle-btn-icon{color:#25457f; transform:translateX(3px)}
.main-news-toggle-btn .main-tit-box{width:100%; height:100%; transition:var(--custom-transiton2); transform:translateY(30px); opacity:0;}
.main-news-toggle-btn .main-sub-tit{transform:rotate(90deg); height:4.8rem; width:calc(34.9rem - 4.8rem); transform-origin:0 100%; display:flex !important; align-items:center; justify-content:flex-end; padding-right:2rem; box-sizing:border-box;}
.main-news-toggle-btn .main-sub-tit .word{overflow:hidden;}

@media all and (min-width:801px){
	/* -------- News :: 뉴스닫힐때 -------- */
	.news-closed .main-news-wrapper{visibility:hidden}
	.news-closed .main-visual-item .main-visual-txt-box{padding-bottom:51.8rem;}
	.news-closed .main-visual-con .slick-dots-wrapper{bottom:38.2rem;}
	/* -------- News :: Close 모션 -------- */
	.news-closed #mainNewsContent{transform:translateX(calc(100% - 4.8rem));}
	.news-closed #mainNewsContent .main-news-toggle-btn{height:100%;}
	.news-closed #mainNewsContent .main-news-toggle-btn:hover .toggle-btn-icon{transform:translateX(-3px)}
	.news-closed #mainNewsContent .main-news-toggle-btn .toggle-btn-icon i{transform:rotate(-180deg);}
	.news-closed #mainNewsContent .main-news-toggle-btn .main-tit-box {transform:translateY(0); opacity:1; transition-delay:0.5s}
	/* .main-news-dim-bg{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:2; transition:var(--custom-transiton1) }
	.news-closed .main-news-dim-bg{opacity:0;} */
	.main-news-toggle-btn:hover .main-sub-tit .char{display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; animation-delay:calc(40ms * var(--char-index))}
}

@media all and (max-height:768px){
	.main-visual-item .main-visual-txt-box {padding-bottom:40rem;}
	.news-closed .main-visual-item .main-visual-txt-box {padding-bottom:30rem;}
	.main-visual-con .slick-dots-wrapper {bottom:20rem;}
	.news-closed .main-visual-con .slick-dots-wrapper {bottom:25rem;}
	
} 

@media (max-width:1740px) and (max-height:768px) {
	#mainNewsContent {bottom:0;}
}

/* -------- 영상 뷰 모달 -------- */
.video-iframe-wrapper{max-width:1000px; }
.video-iframe-wrapper .iframe-inner{overflow:hidden; position:relative; width:100%; height:0; padding-top:56%; }
.video-iframe-wrapper .iframe-inner iframe{position:absolute; top:50%; left:50%; width:100%; height:calc(100% + 350px); transform:translate(-50%,-50%)}


/* ========================================================
 * 메인 :: Info Board
======================================================== */
#mainInfoContent{position:relative; z-index:1; margin:20.5rem 0 0 0}
/* -------- Info Board :: 상단 -------- */
.info-board-top-con{position:relative; display:flex; height:21.8rem; align-items:center; justify-content:space-between; margin-bottom:13rem}
.info-board-top-con .hidden-box:nth-child(2){padding-bottom:5px}
.info-board-top-con .main-tit{margin-left:-0.3rem}
/* Info Board :: 카운트 */
.info-board-count-con {display:flex; align-items:center; width:96rem; }
.info-board-count-con .count-item{position:relative; width:33.33%; text-align:center; box-sizing:border-box;}
.info-board-count-con .count-item:before{position:absolute; top:50%; left:0; height:2rem; width:1px; opacity:0.15; background-color:#000; content:""; transform:translateY(-50%);}
.info-board-count-con .count-item:first-child:before{display:none;}
.info-board-count-con .count-item dt{color:#25457f; font-size:1.8rem; font-weight:600; letter-spacing:-0.065em; margin-bottom:2.5rem}
.info-board-count-con .count-item dd .count-num{display:flex; align-items:center; justify-content:center; color:rgba(0, 0, 0, 0.5); font-size:1.8rem; font-weight:600; letter-spacing:-0.025em; margin-bottom:2rem}
.info-board-count-con .count-item dd .count-num .num{font-size:5rem; color:#000;}
.info-board-count-con .count-item dd .count-txt{color:rgba(0, 0, 0, 0.6); font-size:1.6rem; font-weight:500; letter-spacing:-0.05em;}
/* -------- Info Board :: 하단 -------- */
.info-board-bottom-con{display:flex; height:30rem;}
.info-board-bottom-con .info-board-banner-tit{font-size:3rem; line-height:1.2;font-weight:600; letter-spacing:-0.075em;  }
.info-board-bottom-con .info-board-banner-tit.black{color:#000;}
.info-board-bottom-con .info-board-banner-tit strong{display:block; font-size:0.533em; font-weight:500; letter-spacing:-0.025em; margin-top:2rem; color:rgba(255, 255, 255, 0.2); transition:var(--custom-transiton1)}
.info-board-bottom-con .info-board-more-btn{display:inline-block; margin-top:2.9rem}
.info-board-bottom-con .info-board-more-btn .arrow{display:block; transition:var(--custom-transiton1)}
.info-board-bottom-con .info-board-more-btn:hover .arrow{transform:translateX(10px)}
/* Info Board 배너 */
.info-board-banner{width:25%; }
.info-board-banner.corporate-banner{background-color:#25457f}
.info-board-banner .info-board-banner-inner{position:relative; display:flex; height:100%; padding:5rem; box-sizing:border-box; color:#fff; flex-direction:column; justify-content:space-between;}
.info-board-banner .info-board-banner-inner:hover strong{color:rgba(255,255,255,0.7)}
.info-board-banner .info-board-banner-tit{color:#fff; padding-right:10rem}
.info-board-banner .info-board-banner-txt{color:rgba(255, 255, 255, 0.5); font-size:1.6rem; line-height:1.63; letter-spacing:-0.075em;}
.info-board-banner .info-board-banner-icon{position:absolute; top:5rem; right:4.5rem; width:7.5rem; }
.info-board-banner .info-board-banner-icon svg{width:100%;}
.draw-svg-icon *{stroke-dasharray:400; stroke-dashoffset:400;}
.animated .draw-svg-icon *{
	stroke-dashoffset: 0;
	transition: all 10s ease 0.2s;
}
.info-board-banner.history-banner{background-color:#4c790f}
.info-board-banner.history-banner .info-board-banner-icon{width:6.5rem}
/* Info Board 미디어 라이브러리 */
.info-board-media-library{width:50%; box-sizing:border-box; display:flex; padding:5rem; background-color:#dcd4cc}
.info-board-media-library .info-board-midia-tit-box{width:23.5rem;}
.info-board-media-library .main-media-library-list{display:flex; width:calc(100% - 23.5rem);} 
.info-board-media-library .main-media-library-list li{margin-bottom:2rem; width:calc((100% - 0.5rem)/2); margin-right: 1.5rem;}
.info-board-media-library .main-media-library-list li:last-child {margin-right: 0;}
.info-board-media-library .main-media-library-list li .media-tit {font-size:2rem; line-height:1.1; letter-spacing:-0.065em; color:#000011; font-weight: 700; margin-bottom:1.4rem; margin-top:1.9rem;} 
.info-board-media-library .main-media-library-list li .day {font-size:1.3rem; line-height:1.5; letter-spacing:-0.025em; color:#666;}
.info-board-media-library .main-media-library-list li .img-box {/* height:13.8rem; */ position: relative; height:0; padding-top:55.2%; background: #fff; overflow:hidden;}
.info-board-media-library .main-media-library-list li .img-box img {/* max-width:100%; width:100%; height:100%; */ width:100%; transition:var(--custom-transiton1);}
.info-board-media-library .main-media-library-list li:last-child{margin-bottom:0}
.info-board-media-library .main-media-library-list li a{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:rgba(0, 0, 0, 0.68); font-size:1.6rem; letter-spacing:-0.075em; line-height:1.2;}
.info-board-media-library .main-media-library-list li a:hover .img-box img {transform:scale(1.2); }
.info-board-media-library .main-media-library-list li a:hover,
.info-board-media-library .main-media-library-list li a:focus{color:#000;}
@media all and (min-width:801px){
	/* 배경 효과 */
	.info-board-top-con:before{position:absolute; top:0; left:0; bottom:0; width:100%; background:url(../images/main/main_overview_txt.png) no-repeat 50% 50%; background-size:100% auto; content:""; opacity:0; transition:opacity 1.5s ease 0.2s; }
	.info-board-top-con:after{position:absolute; top:-2rem; left:-30rem; right:-30rem; bottom:-2rem; background-color:#fff; transform:skew(-50deg); transition:all 1.2s ease-in-out 0.1s; content:"";}
	.info-board-top-con.animated:before{opacity:1;}
	.info-board-top-con.animated:after{transform:skew(-50deg) translateX(100%);}
}

/* ========================================================
 * 메인 :: Business
======================================================== */
#mainBusinessCon {position:relative; z-index:1; margin:24.4rem 0 33.6rem 0}
.main-business-container{position:relative; display:flex; justify-content:space-between; }
/* 메인 비즈니스 :: 배경텍스트 */
.main-business-bg-txt{position:absolute; bottom:-3px; left:0px; width:100%; height:21.8rem; background:url() no-repeat; opacity:0; transition:opacity 1.5s ease 0.2s; }
.main-business-bg-txt:after{position:absolute; top:-2rem; left:-30rem; right:-30rem; bottom:-2rem; background-color:#fff; transform:skew(-50deg); transition:all 1.2s ease-in-out 0.1s; content:"";}
.main-business-bg-txt.animated{opacity:1;}
.main-business-bg-txt.animated:after{transform:skew(-50deg) translateX(100%);}
/* 메인 비즈니스 리스트 */
.main-business-con{width:84rem;}
.main-business-list {display:flex; margin:0 -0.95rem;}
.main-business-item { position:relative; width:calc(50% - 1.9rem); margin:0 0.95rem}
.main-business-item .thumb-con {display:block; position:relative; padding-top:72.93%; overflow:hidden;}
.main-business-item .thumb-con img {transition:var(--custom-transiton1); }
.main-business-item .thumb-con .en-tit {font-size:2.4rem; letter-spacing:-0.01375em; color: #fff; position:absolute; bottom:4rem; left:4rem; font-weight:600; opacity:0; transition:var(--custom-transiton1); }
.main-business-item .main-business-info-list {padding:4.9rem 4.1rem; height:35rem; border: solid 1px #f1f1f1; border-top:0; background-color:transparent; transition:var(--custom-transiton1);  box-sizing: border-box; }
.main-business-item .main-business-info-list .tit {position:absolute; right:5rem; bottom:5rem; font-size:3.2rem; letter-spacing:-0.04em; color: #000; transition:var(--custom-transiton1); }
.main-business-item .link-list a {position:relative; font-size:1.55rem; letter-spacing:-0.0212em; line-height: 2; padding-bottom: 3px; color: #555; transition:var(--custom-transiton1);}
.main-business-item .link-list a:before {content:""; position:absolute; width:100%; height:1px; background-color:#fff; bottom:0; left: 0; transform:scaleX(0); transition:transform 0.4s; transform-origin:100% 0;}
.main-business-item .link-list a:hover:before {transform:scaleX(1); transform-origin:0 0;}
/* section active */
.main-business-con.animated:before {width:100%;}
@media all and (min-width:801px){
	/* on */
	.main-business-item.on .thumb-con img { -ms-transform: scale(1.1) rotate(0.002deg); -o-transform: scale(1.1) rotate(0.002deg); -moz-transform: scale(1.1) rotate(0.002deg); -webkit-transform: scale(1.1) rotate(0.002deg); transform: scale(1.1) rotate(0.002deg); }
	.main-business-item.on .thumb-con .en-tit {opacity:1;}
	.main-business-item.on .main-business-info-list .tit ,
	.main-business-item.on .main-business-info-list .link-list a {color: #fff;}
	.main-business-item.on .main-business-info-list {background-color:#25457f; border-color:#25457f;}
}

/* ========================================================
 * 메인 :: Global Network
======================================================== */
#mainGlobalContent{position:relative; /* padding:16rem 0 0; margin-top:-24.7rem; */ padding-top:34rem; margin-top:-7rem; background:url(../images/main/main_global_bg.jpg) no-repeat; background-size:cover;}
#mainGlobalContent .main-tit-box{position:relative; z-index:1;}
#mainGlobalContent .main-tit-box .main-tit{margin-left:0}
/* ****************** Global Network :: Container ********************** */
.global-map-container{position:relative; width:100%; padding-bottom:18.8rem; margin-top:-18.6rem; /* transform-style:preserve-3d */}
.global-map-container .global-map-bg{margin:0 -18.2vw 0 -5.8854vw; padding-top:23.4rem; padding-bottom:18.8rem; margin-top:-23.4rem;  }
.global-map-container .global-map-img-box{position:relative; margin:0 -18.2vw 0 -5.8854vw; }
.global-map-container .global-nation-box{position:absolute; top:0rem; left:0px; width:100%; /* height:100%; */ transform:translate3d(0px, 0px, 70px); transform-style:preserve-3d}
.global-map-bg-box{position:relative; height:105.4rem; }
.global-map-bg-img{position:absolute; top:0px; left:-1.3021vw; right:-12.1354vw;}
.global-map-bg-img img{width:100%;}
/* -------- Map BG -------- */
.global-map-img{position:relative; opacity:0.2;}
.global-map-img-item{position:absolute; top:0px; left:0px; animation: twinkle 2s alternate infinite;}
.global-map-img-item.map-bg-01{position:static;}
.global-map-img-item.map-bg-02{animation-delay:0.2s}
.global-map-img-item.map-bg-03{animation-delay:0.6s}
.global-map-img-item.map-bg-04{animation-delay:0.7s}
.global-map-img-item.map-bg-05{animation-delay:1s}
.global-map-img-item.map-bg-06{animation-delay:1.6s}
.global-map-img-item.map-bg-07{animation-delay:2s}
.global-map-img-item.map-bg-08{animation-delay:2.2s}
.global-map-img-item.map-bg-09{animation-delay:2.9s}
.global-map-img-item.map-bg-10{animation-delay:0.5s}
.global-map-img-item.map-bg-11{animation-delay:1s}
.global-map-img-item.map-bg-12{animation-delay:3s}
.global-map-img-item img{width:100%; image-rendering:-webkit-optimize-contrast;}
@keyframes twinkle {
	50% {
		opacity: 0.3;
	}
}
/* -------- Head Office -------- */
.head-office-box{position:absolute; top:15.421vw; left:34.2vw; display:flex; align-items:center; justify-content:center; width:8.2292vw; height:8.2292vw; border-radius:50%;  }
.head-office-box .head-office-bg{position:absolute; width:100%; height:100%; border-radius:50%; background-color:#25457f;}
.head-office-box .head-office-bg:after{position:absolute; top:100%; left:50%; width:1px; height:2.6042vw; background-color:#25457f; content:""; }
.head-office-box .head-office-logo{position:relative; display:flex; align-items:center; justify-content:center; width:6.7188vw; height:6.7188vw; background-color:#fff; border-radius:50%; box-shadow: 6.3px 7.8px 13px 0 rgba(223, 0, 42, 0.1);}
.head-office-box .head-office-logo img{height:1.5104vw; margin-top:-0.5rem}
/* -------- Nation Item -------- */
.nation-mark-item .nation-info-box{/* position:absolute; top:0px; left:0; */ position:relative; background-color:#fff; box-shadow: 6px 3px 9px 0 rgb(155 100 28 / 27%); opacity:1; cursor:pointer; border-radius:2.8rem; will-change: transform; -webkit-font-smoothing: antialiased; }
.nation-mark-item .nation-info-box .nation-info-tit{position:relative; line-height:1.1; }
.nation-mark-item .nation-info-box .nation-info-tit .nation-info-name{position:relative; color:rgba(0, 0, 0, 0.65); font-size:1.3rem; font-weight:600; padding-left:1.8rem; transition:var(--custom-transiton1); color:var(--theme-orange-color); }
.nation-mark-item .nation-info-box .nation-info-tit .nation-info-name:before{position:absolute; top:8px; left:0rem; margin-top:-0.6rem; font-family:"xeicon"; content: "\eb59"; font-size:1.3rem; transition:var(--custom-transiton1) }
.nation-mark-item .nation-info-box .nation-info-flag{position:absolute; top:-0.5rem; right:0; opacity:0; transition:var(--custom-transiton1); transition-delay:0s}
.nation-mark-item .nation-info-box .nation-info-flag img{width:3.3rem;}
.nation-mark-item .nation-info-box dd{margin-top:2.5rem; transition:var(--custom-transiton1); transition-delay:0.3s}
.nation-mark-item .nation-info-box .nation-info-txt{color:#555; font-size:1.3rem; line-height:1.6; margin-bottom:0.6rem; }
.nation-mark-item .nation-info-box .nation-info-txt:last-child{margin-bottom:0;}
.nation-mark-item .nation-info-box .nation-info-close-btn{position:absolute; top:0; right:0; margin:-1rem -1.4rem 0 0; width:4.1rem; height:4.1rem; background-color:#25457f; border-radius:50%; color:#fff; font-size:2.2rem; color:#fff; opacity:0; visibility:hidden; transition:var(--custom-transiton1);}
.nation-mark-item .nation-info-box .nation-info-close-btn i{position:relative; top:0.1rem;}
/* -------- Wave Circle -------- */
@keyframes wave-circle {
	0% {
		-webkit-transform: scale(0);
		transform: scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0; 
	}
}
.wave-circle{position:absolute; left:100%; top:50%; width:1.8229vw; height:1.8229vw; transform:translateY(-50%); margin-left:5px; transition:var(--custom-transiton1); /* opacity:0; */}
.wave-circle.left-circle{left:auto; margin-left:0; margin-right:5px; right:100%; }
.wave-circle .dot{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:0.3646vw; height:0.3646vw; background-color:var(--theme-orange-color); border-radius: 50%;}
.wave-circle .wave-bg > span {
	background-color:rgba(245, 128, 38, 0.2);
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	position: absolute;
	left: 0;
	top: 0px;
	opacity: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}
.wave-circle .wave-bg > span{-webkit-animation: wave-circle 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite; animation: wave-circle 4s cubic-bezier(1, 2, 0.66, 3) infinite; }
.wave-circle .wave-bg > span:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.wave-circle .wave-bg > span:nth-child(2) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
.wave-circle .wave-bg > span:nth-child(3) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.wave-circle .wave-bg > span:nth-child(4) { -webkit-animation-delay: 2.1s; animation-delay: 2.1s; }
.head-office-box .wave-circle{left:50%; top:100%; transform:translate(-50%, 1.5625vw); margin-left:1px; opacity:0;}
.head-office-box .wave-circle .wave-bg > span{background-color:rgba(223, 0, 42, 0.1) ;}
/* @media all and (min-width:801px){ */
	/* -------- Nation Item -------- */
	.global-nation-box .nation-mark-list{overflow:visible; transform:translate3d(0px, 0px, 70px); transform-style:preserve-3d}
	.global-nation-box .swiper-wrapper,	
	.global-nation-box .swiper-slide{position:static; width:auto;}
	.nation-mark-item:not(.open) .nation-info-box:hover{animation: corporMarkerAni 1.5s ease-in-out infinite}
	@keyframes corporMarkerAni {
		0% {
			transform:  translateY(0px);
		}
		50% {
			transform: translateY(-3px);
		}
		100% {
			transform:  translateY(0px);
		}
	}
	.nation-mark-item{position:absolute; will-change: transform; -webkit-font-smoothing: antialiased; }
	.nation-mark-item[data-nation="japan"]{top:24.8875vw; left:42.8vw;}
	.nation-mark-item[data-nation="europe"]{top: 20vw;left:7.1vw;}
	.nation-mark-item[data-nation="china"]{top: 27.1vw;left:37.5vw;}
	.nation-mark-item[data-nation="taiwan"]{top: 29.2vw; right:63.7vw;}
	.nation-mark-item[data-nation="singapore"]{top:35.8979vw; left:32.6729vw}
	.nation-mark-item[data-nation="usa"]{top: 23vw; right: 15.5vw;}
	.nation-mark-item[data-nation="usa"] .nation-info-box{left:auto; right:0;}
	.nation-mark-item .nation-info-box > dl{overflow:hidden; width:11rem; height:4rem; padding:1.2rem 1.8rem; transition:var(--custom-transiton1); box-sizing:border-box;}
	.nation-mark-item[data-nation="singapore"] .nation-info-box > dl{width:13.1rem}
	.nation-mark-item[data-nation="taiwan"] .nation-info-box > dl{width:11rem}
	.nation-mark-item[data-nation="usa"] .nation-info-box > dl{width:10rem}
	/* .nation-mark-item[data-nation="japan"] .nation-info-box > dl{width:14rem}
	.nation-mark-item[data-nation="europe"] .nation-info-box > dl{width:24rem}
	.nation-mark-item[data-nation="china"] .nation-info-box > dl{width:22.8rem}
	.nation-mark-item[data-nation="taiwan"] .nation-info-box > dl{width:21.3rem}
	.nation-mark-item[data-nation="singapore"] .nation-info-box > dl{width:24.5rem}
	.nation-mark-item[data-nation="usa"] .nation-info-box > dl{width:16rem} */
	.nation-mark-item .nation-info-box dd{opacity:1;}
	.nation-rolling-pagination{display:none;}
	/* Nation Item :: OPEN */
	.nation-mark-item.open{z-index:1;}
	.nation-mark-item.open .wave-circle{opacity:0;}
	.nation-mark-item.open .nation-info-box{cursor:default;}
	.nation-mark-item.open .nation-info-box > dl{width:36rem; height:17.6rem; padding:3.5rem; }
	.nation-mark-item.open[data-nation="europe"] .nation-info-box > dl,
	.nation-mark-item.open[data-nation="taiwan"] .nation-info-box > dl{height:20.6rem}
	.nation-mark-item.open .nation-info-box > dl > dd{opacity:1; height:auto;}
	.nation-mark-item.open .nation-info-box .nation-info-tit .nation-info-name{color:#000; font-size:1.6rem; padding-right:4rem; }
	.nation-mark-item.open .nation-info-box .nation-info-tit .nation-info-name:before{left:-0.3rem; color:#000; font-size:1.4rem;}
	.nation-mark-item.open .nation-info-box .nation-info-flag{opacity:1.0; transition-delay:0.3s}
	.nation-mark-item.open .nation-info-box .nation-info-close-btn{opacity:1.0; visibility:visible;}
/* } */

/* -------- 카운트, 설명글 -------- */
.global-detail-box{position:absolute; bottom:19.3rem; right:0; left:0;}
.global-detail-box .area-box{position:relative;}
.global-detail-box a{display:block;}
.global-detail-box .global-num-con{position:absolute; bottom:0px; right:0px; text-align:right;}
.global-detail-box .global-num-con .global-num{display:block; color:#25457f; font-size:2.2rem; font-style:italic; font-weight:700;}
.global-detail-box .global-num-con .global-num b{font-size:10.1563vw; letter-spacing:-0.05em; font-style:normal; margin-right:-0.5rem}
.global-detail-box .global-num-con .global-num .num{font-weight:inherit;}
/* 카운트 */
.global-num-box {overflow: hidden; display:flex; justify-content:flex-end; height: 1em; color:#25457f; font-size:10.1563vw; font-weight:700;}
.global-num-box .global-fix-num,
.global-num-box .global-num-item-box{font-size:1em; letter-spacing:-0.05em; }
.global-num-box .global-num-item-box{height:8em; margin-left:-1rem}
.global-num-box .global-num-item {line-height: 1em; color:#25457f; }
.global-num-box .country-txt{position:relative; top:-3rem;display:flex; align-items:flex-end; font-size:2.2rem; font-style:italic; font-weight:700; margin-left:1rem; padding-right:0.5rem}
.global-detail-box .global-num-con .global-detail-tit{color:#000; font-size:4rem; line-height:1.38; letter-spacing:-0.065em; font-weight:600; margin:2.2rem 0}
.global-detail-box .global-num-con .global-detail-txt{color:#555; font-size:1.8rem; line-height:1.78; letter-spacing:-0.075em; margin-bottom:4rem;}
.global-detail-box .global-num-con .global-detail-txt .hidden-item{transition-delay:0.2s;}
.global-detail-box .global-num-con .global-detail-more-btn{display:block; transition:var(--custom-transiton1); transform:translateX(-10px); opacity:0; transition-delay:0.5s}
.global-detail-box .global-num-con .global-detail-more-btn svg{transition:var(--custom-transiton1); transition-delay:0.3s; }
.global-detail-box a:hover .global-num-con .global-detail-more-btn svg,
.global-detail-box a:focus .global-num-con .global-detail-more-btn svg{transform:translateX(5px); fill:#25457f}

/* active */
.global-detail-box .active .global-num-item-box{animation:count-up-ani 3s forwards;}
@keyframes count-up-ani {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, -87.5%, 0);
	}
}
.global-detail-box .active .global-detail-more-btn{transform:translateX(0px); opacity:1;}
.global-detail-box .active .hidden-box .hidden-item{
	opacity:1.0;
	transform:translateY(0) rotate(0);
}

/* ========================================================
 * 메인 :: Full Banner(ESG, People)
======================================================== */
.main-banner-con {position:relative; height:90.9rem;}
/* Full Banner :: BG */
.main-banner-con .bg {display:block; position:absolute;top:0px; left:0; width:100%; bottom:0%; overflow:hidden; z-index:-1;}
.main-banner-con .bg span {display:block; width:100%; height:100%; background:no-repeat 65% 50% / cover; transform: scale(1.2,1.2); transition:all 2s ease-in-out;}
/* Full Banner :: Banner Box */
.main-banner-con .con-box {position:relative; top:-6.8rem; background-color:#25457f; max-width:84rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.main-banner-con .con-box a {display:block; padding: 12.4rem 7.1rem ; }
.main-banner-con .tit-box {color:#fff;}
.main-banner-con .tit-box .sub-tit {display:block; font-size: 2rem; line-height:1.1}
.main-banner-con .tit-box .tit {display:block; font-size:min(3.1250vw, 6rem); font-weight:500; margin-top:2.8rem;}
.main-banner-con .btn-box {margin-top:13.4rem; transform:translateY(30px); opacity:0; transition:var(--custom-transiton1); transition-delay:0.5s}
.main-banner-con .btn-box .txt { font-size:1.75rem; letter-spacing:-0.075em; color:#fff; }
.main-banner-con .btn-box .arrow {display:block; margin-top:1.9rem; transition:var(--custom-transiton1);}
.main-banner-con .btn-box .arrow svg{fill:#fff;}
/* Full Banner :: Text Box */
.main-banner-con .txt-box {color: #fff; text-align:right;  padding: 0 7.4rem; }
.main-banner-con .txt-box .txt01 {font-size:4rem; letter-spacing:-0.065em; line-height:1.38; }
.main-banner-con .txt-box .txt01 .inner {display:block; overflow:hidden; }
.main-banner-con .txt-box .txt02 {font-size:1.8rem; letter-spacing:-0.075em; line-height:1.67; opacity:0.68; margin-top:2rem;}
/* Full Banner :: Active, Over */
.main-banner-con.animated .bg span {transform: scale(1,1)}
.main-banner-con.animated .con-box{transform:scaleY(1)}
.main-banner-con.animated .btn-box{transform:translateY(0); opacity:1;}
.main-banner-con .con-box a:hover .arrow{transform:translateX(10px)}

/* -------- 입사지원, ESG -------- */
/* 입사지원 */
.main-people-con .bg span{background:url(../images/main/main_people_bg.jpg) no-repeat 65% 50%; background-size:cover;}
.main-people-con .txt-box {margin-top:-3.3rem;}
/* EGS */
.main-esg-con .bg span{background:url(../images/main/main_esg_bg.jpg) no-repeat 35% 50%; background-size:cover;}
.main-esg-con .con-box {background-color:#5674b9; }
.main-esg-con .txt-box {margin-top:0.5rem;}
.main-esg-con .txt-box .txt02 {margin-top:4rem;}