@charset "utf-8";

body {position:fixed; width: 100%;}
body.on {overflow-y:auto;position:relative;}
#ABOUT {height:100vh;}
#ABOUT.on {height:auto;}
#ABOUT .g_title1_en {top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; color: #fff;}
#ABOUT .g_title3 + .g_text1 {margin-top: 52px;}
#ABOUT .g_title4_en {margin-bottom: 40px;}

/* section_top */
#ABOUT .section_top {background:url(../images/sub/bg_top_building.jpg) no-repeat center / cover;}
#ABOUT .section_top .top_bg {position:absolute;width: 100%; height: 120vh;opacity:0;}
#ABOUT .section_top .top_bg.on {opacity:1;}
#ABOUT .section_top .top_character {position: absolute; bottom: -55%; right:20%; max-width: 1700px; width: 100%;opacity:0;transform: translate(50%, -54%);}
/* #ABOUT .section_top .top_character.character1 {transform: translate(70%, -54%);} */
#ABOUT .section_top .title {font-size: 140px; font-weight: 600; letter-spacing: -.02em; position:absolute; width:100%;height:100vh;}
#ABOUT .section_top .mask_logo {position:absolute;bottom:0;right:12%;transform:translate(-530%, 0) scale(20);max-width:2400px; width:100%;opacity: 0; transform-origin:center bottom;}
#ABOUT .section_top .mask_logo:before {position: absolute; height: 100%; content: ''; top: 0; left: 0; background-color: #fff; width: 300px;bottom: 0;}
#ABOUT .section_top.on .mask_logo {opacity: 1;}

#ABOUT .section_top .g_section {max-width:1340px; width:100%; height:100vh; margin:0 auto;}
#ABOUT .section_top .g_section .text_box {padding-top:32vh; height:100vh; box-sizing:border-box;}

/* section_ceo */
#ABOUT .section_ceo {width:100%; overflow:visible; z-index:1; /* height:100vh;min-height:1080px; */}
#ABOUT .section_ceo .bg {background:url(../../img/whoWeAre/about/bg_ceo.jpg) no-repeat 35% 100% / cover;height:100vh;width:100%;text-align:right; position:absolute; z-index:-1;min-height:1080px;}
#ABOUT .section_ceo .text_box {padding-top:420px; display:inline-block; text-align:left;margin-left:54.8%;}
#ABOUT .section_ceo .text_box .g_text2 {margin-top:20px;}
#ABOUT .section_ceo .text_box > * {color:#fff;}
#ABOUT .section_ceo .text_box .g_text1 {font-weight:200;}
#ABOUT .section_ceo .text_box .g_text2 {font-weight:200;}

/* =================================== swiper slide =================================== */
/* swiper */
.swiper {margin-top:80px; position:relative;}
.swiper .swiper-container .swiper-slide {overflow:hidden;}
.swiper .swiper-container .swiper-slide img {width:100%;}
.swiper .swiper-container .swiper-slide .title {margin-top: 62px; margin-left:8.333333%; padding-left:116px; background:#fff; width:246px;}
.swiper .swiper-container .slide_mask {position:absolute; width:100%;top:0;left:0; z-index:3;cursor:pointer;}
.swiper .swiper-container .slide_mask img {margin-top: -4px; margin-left: -4px;width:100px; position:relative;}

.swiper .swiper-container .direction_area {position: relative;width: 100%;font-size: 0; margin-top:70px; height:72px;}
.swiper .swiper-container .direction_area img {width: 100%;}
.swiper .swiper-container .direction_area>li {display:inline-block; vertical-align:middle;}
.swiper .swiper-container .direction_area>li.swiper-title {width:304px; margin-left:64px;box-sizing:border-box;position:relative; margin-top:-40px;}
.swiper .swiper-container .direction_area>li.swiper-title .title {opacity:0;transition: all .3s; position:absolute;top:0;left:0;}
.swiper .swiper-container .direction_area>li.swiper-title .title.on {opacity:1;}
.swiper .swiper-container .direction_area .slide_empty {position:relative; margin-bottom: 82px; width:100%;}
.swiper .swiper-container .direction_area .swiper-count {position: relative;width: 58px;font-size: 18px;color: #a0a0a0; font-weight:400; margin-left:8.3333%;text-align: center; transition: .3s opacity; transform: translate3d(0,0,0); z-index: 10; margin-top:-4px;}
.swiper .swiper-container .direction_area .swiper-count span {display:inline-block;width:17px;}
.swiper .swiper-container .direction_area .swiper-count .current {color:#111; padding-right:4px; text-align:right; font-weight:500;}
.swiper .swiper-container .direction_area .swiper-count .total {padding-left:4px;}
.swiper .swiper-container .direction_area .swiper-progress {height: 2px;position: relative;width: calc(83.3333% - 550px);border-radius: 0;background: #e5e5e5;overflow: hidden;z-index:2;}
.swiper .swiper-container .direction_area .swiper-progress .swiper-pagination-progressbar-fill {background:#111;}
.swiper-button-prev:after, .swiper-button-next:after {display:none;}
.swiper .swiper-container .direction_area .btn_arrow {margin-right:8.333333%;}
.swiper .swiper-container .direction_area .btn_arrow > div {width: 10px;height: 19px;position: relative;margin-top: 0;display: inline-block;vertical-align: middle;top: 0;left: 0;outline:none;transition:all .3s;}
.swiper .swiper-container .direction_area .btn_arrow > div:before {content: ''; position: absolute; top: 50%; left: 50%; padding: 20px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.swiper .swiper-container .direction_area .swiper-button-prev {margin-left: 64px;background: url(../../img/common/ico_arrow_right.svg) no-repeat center / contain;-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.swiper .swiper-container .direction_area .swiper-button-prev:hover {transform:rotate(180deg) translateX(6px);}
.swiper .swiper-container .direction_area .swiper-button-next {background: url(../../img/common/ico_arrow_right.svg) no-repeat center / contain;margin-left: 40px;}
.swiper .swiper-container .direction_area .swiper-button-next:hover {transform:translateX(6px);}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  .swiper .swiper-container {margin-left:-1px; margin-right:1px; margin-top:-1px; margin-bottom:1px; }
}

/*=== ANIMATIONS ================================================================*/
#ABOUT .section .text_box > * {opacity:0; visibility:hidden; transform:translateY(80px);}
#ABOUT .section.on .text_box > * {opacity:1; visibility:visible; transform:translateY(0); transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s ease-out;}
#ABOUT .section.on .text_box .delay1 {transition-delay:0.1s;}
#ABOUT .section.on .text_box .delay2 {transition-delay:0.2s;}
#ABOUT .section.on .text_box .delay3 {transition-delay:0.3s;}
#ABOUT .section.on .text_box .delay4 {transition-delay:0.4s;}


.virtual {color: #242424;}
.virtual h4 {font-size: 40px; margin-bottom: 60px; display: block; line-height:1.4em; letter-spacing: -.03em; font-weight: 500;}
.virtual h4 span {font-size: 46px; letter-spacing: -.03em; line-height:1.4em;}
.virtual p {margin-bottom: 30px; line-height:1.89em;}

#ABOUT .section .swiper:before {content: ''; position: absolute; width: 50%; height: 100%; background: #fff; right: 50%; top: 0; z-index: 3; transition: all 0.8s;}
#ABOUT .section .swiper:after {content: ''; position: absolute; width: 50%; height: 100%; background: #fff; left: 50%; top: 0; z-index: 3; transition: all 0.8s;}
#ABOUT .section.on .swiper:before {right: 100%;transition-delay:0.5s;}
#ABOUT .section.on .swiper:after {left: 100%;transition-delay:0.5s;}

/* section_top */
/*#ABOUT .section_top {opacity:0;}*/
#ABOUT .section_top.active {
	animation:scale 2s forwards;
	-ms-animation:scale 2s forwards;}
	
	@-webkit-keyframes scale {
		0% {transform:scale(1.15); opacity:0;}
		100% {transform:scale(1); opacity:1}
	}
	@keyframes scale {
		0% {transform:scale(1.15); opacity:0;}
		100% {transform:scale(1); opacity:1}
	}
	#ABOUT .section_top .g_title1_en {margin-top:100px;opacity:0;}
	#ABOUT .section_top .scroll_line {margin-top:100px;opacity:0;}
	
	/*=== Laptop css ================================================================*/
	@media all and (max-width: 1350px) {
		#ABOUT .section_top.on .mask_logo {transform:translate(-30%, 25%) scale(4) !important; transition:all .5s;}
	}
	
	/* gnb animation */
	@keyframes smoothBg {
		from {
			background-color: rgba(237, 237, 237, 0.2);
		}
		to {
			background-color: rgba(237, 237, 237, 0.65);
		}
	}
	
	/* =========================== layout =========================== */
	.wrap {overflow:hidden;} 
	.g_section .g_section_min {max-width: 960px; min-width: 960px; width: 100%; margin: auto; position:relative; box-sizing:border-box; padding:0;}
	.g_section_full {width:100%; position:relative;}
	
	@media screen and (max-width: 1280px) {
		/* .g_section{padding:0 128px;} */
		#footer .footer_inner {padding-left:128px; padding-right:128px;}
	}
	
	@media (max-width:1910px) {
		#ABOUT .section_top .top_character {max-width:1200px; bottom: -75%;}
	}
	@media screen and (min-width: 1921px) {
		#footer .footer_inner {padding-left:192px; padding-right:192px;}
	}
	
	
	/* 20260105 수정 */

	/* section_index는 애니메이션 없이 초기부터 보이게 */
	#ABOUT .section_index .text_box > * {opacity:1; visibility:visible; transform:translateY(0);}

	#ABOUT .section_index {position: relative; padding-top: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;}
	#ABOUT .section_index .index_bg {position: absolute; bottom: 0; right: 0; width: 100%; height: 100%;}
	#ABOUT .section_index .index_bg img {position: absolute; bottom: 0; right: 0; max-width: none; width: auto; height: 85%; aspect-ratio: 956 / 502;}
	#ABOUT .section_index .text_box h4 {font-size: 56px; font-weight: 600; line-height: 1.39em; margin-bottom: 34px;}