@charset "utf-8";
body{font-family:'atoz'!important; }
body *{box-sizing:border-box; }
/*body.intro-lock, html.intro-lock{overflow:hidden;}*/
html.pc-device{
    overflow-y:scroll;
}
/* ================================
    INTRO
================================ */

.intro_wrap{position:fixed;inset:0;z-index:9999;width:100%;height:100vh;height:100svh;height:var(--viewport-height);overflow:hidden;background:transparent;}
.intro_bg{position:absolute;inset:0;z-index:1;background:linear-gradient(-30deg, #00849D, #60A44A);}

.intro_circle_wrap{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);}
.intro_circle{position:relative;width:420px;height:420px;border-radius:50%;}

.intro_circle{width:400px;height:400px;z-index:2;border-radius:50%;backdrop-filter:blur(2px)}
.circle_bg{position:absolute;inset:0;z-index:1;border-radius:50%;background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05)), linear-gradient(-30deg, rgba(96, 164, 74, 0.75), rgba(0, 132, 157,0.75));opacity:0;}

.tick_wrap{position:absolute;left:50%;top:50%;width:470px;height:470px;z-index:0;transform:translate(-50%,-50%);opacity:0;pointer-events:none;}
.tick{position:absolute;left:50%;top:0;width:2px;height:12px;background:rgba(255,255,255,0.18);transform-origin:50% 235px;}
.tick.long{top:-10px;height:22px;transform-origin:50% 245px;}
.tick.on{background:#fff;}

.intro_logo{position:absolute;left:50%;top:50%;width:500px;max-width:70vw;z-index:2;transform-origin:center center;text-align:center;mix-blend-mode:normal;transition: mix-blend-mode 0.5s ease;opacity:0;}

.intro_logo_blend{pointer-events:none;mix-blend-mode:soft-light;opacity:0;}
.uc_logo{display:block;width:100%;height:auto;overflow:visible;}
.uc_logo .logo-path{fill:transparent;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;}


.mainTxt{position:absolute;left:50%;top:50%;z-index:3;margin-top:55px; color:#fff;font-size:28px;font-weight:600;line-height:1.3;transform:translateX(-50%);opacity:0; text-align: center; width: 80%; word-break: keep-all;}


/* ================================
    MAIN
================================ */
#mContainer{position:relative;z-index:1;}
.mSection{position:relative;width:100%;height:100vh;height:100svh;height:var(--viewport-height);overflow:hidden;background-position: center; background-size:cover; background-repeat: no-repeat;}
.mSection02{background-image:url("/resources/homepage/history/_Img/mSection02_bg.png");}
.mSection03{background-image:url("/resources/homepage/history/_Img/mSection03_bg.png");}
.mSection04{background-image:url("/resources/homepage/history/_Img/mSection04_bg.png");}
.mSection05{background-image:url("/resources/homepage/history/_Img/mSection05_bg.png");}
.mSection06{background-image:url("/resources/homepage/history/_Img/mSection06_bg.png");}
.mSection07{background-image:url("/resources/homepage/history/_Img/mSection07_bg.png");}

.mVisual{display:flex;align-items:center;background-image:url("/resources/homepage/history/_Img/mSection01_bg.png");}
.visual_inner{width:min(1600px, calc(100% - 80px));margin:0 auto;color:#fff; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.visual_inner p{font-size:clamp(60px, 7vw, 100px); width: calc(50% - 260px); display: flex; flex-direction: row; align-items: center; gap: 30px; justify-content: space-evenly;}
.visual_inner p.his_start{text-align: start;}
.visual_inner p.his_end{text-align: end; flex-direction: row-reverse;}
.visual_inner p:after{content:''; display: inline-block; width:25%; height:3px; background:repeating-linear-gradient(to right, #fff 0, #fff 6px, transparent 6px, transparent 12px); opacity: 0.3;}


.imageScrollSec{position:relative;width:100%;height:100vh;height:100svh;height:var(--viewport-height);}
.imageScrollSec .inner{position:relative;width:100%;height:100%;}
.sticky_inner{position:relative;width:100%;height:100%;overflow:hidden; max-width: 1760px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right:auto; }
.titl_wrap{position: absolute; top:50%;  transform: translateY(-50%); width:calc(50% - 360px); color:#fff; }
.titl_wrap:before{content:''; display: block; width: 42px; height: 45px; background: url(/resources/homepage/history/_Img/uc_opacity.png) no-repeat; background-size: contain;margin-bottom: 30px; opacity: 0.3;}
.titl_wrap .titl{font-size: 90px; font-family:'yeongwol'; margin-bottom:30px; line-height: 1;}
.titl_wrap .subs{font-size: 18px; font-weight: 300; font-family:'pretendard'; line-height: 1.6; word-break: keep-all;}
.img_wrap{position:relative;display:flex;flex-direction:column;width:50%;gap:50px;padding:100px 0;}
.img_item{position:relative;flex:none;width:100%; max-width: 400px;aspect-ratio:1.4/1; overflow: hidden; border-radius : 0 0 20px 0; box-shadow:9px 14px 12px rgba(0,0,0,0.15);}
.img_item a{display: block;width: 100%; height: 100%;  }
.img_item img{display:block;width:100%;height:100%;object-fit:cover;}
.img_item:nth-child(3n - 2){margin: 0 auto; }
.img_item:nth-child(3n - 1){margin-right: auto;}
.img_item:nth-child(3n){margin-left: auto; }
.img_item .txt{padding: 16px;background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transition: all 0.3s ease; position: absolute; bottom: 0; left:0; width: 100%; }
.img_item a:hover .txt,
.img_item a:focus .txt{opacity: 1; visibility: visible; }
.img_item .txt .date{font-size: 12px; color:#fff; display: block; margin-bottom: 8px; font-weight: 100; }
.img_item .txt p{font-family:'pretendard'; font-size: 20px; font-weight: 700; color:#fff; display: block; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;  }


.history_info{position:absolute;left:50%;top:50%;z-index:3;width:100%;color:#fff;text-align:center;transform:translate(-50%,-50%);opacity:0;visibility:hidden; display: flex; flex-direction: column; align-items: center; justify-content:center; height: 100%; padding-bottom: 40px; row-gap: 10px; }
.history_info .history_tit{display:block;font-size:28px;font-weight:600; opacity: 0.7;}
.history_info .year{margin-top:10px;font-size:44px;font-weight:800;}
.history_info .year em{font-style: normal;}
.history_info .more{display:inline-block;color:#fff;font-size:14px;pointer-events:auto; position: absolute; bottom:20%; left: 50%; transform: translateX(-50%) ; font-family:'pretendard'; border: 1px solid #fff; padding: 10px 20px; border-radius: 25rem; opacity:0.5; }
.intro_wrap{pointer-events:none;}

.mSection02 .img_wrap,
.mSection04 .img_wrap,
.mSection06 .img_wrap{margin-left: auto; }

.mSection03 .titl_wrap,
.mSection05 .titl_wrap,
.mSection07 .titl_wrap{right: 0; text-align:end; }
.mSection03 .titl_wrap:before,
.mSection05 .titl_wrap:before,
.mSection07 .titl_wrap:before{margin-left: auto;}

.mSection04 .titl_wrap .titl,
.mSection06 .titl_wrap .titl{ width: fit-content; }
.mSection04 .titl_wrap .titl .line02,
.mSection06 .titl_wrap .titl .line02{text-align:end; margin-right: -40px}

@media screen and (max-width: 1800px){
	.mSection03 .titl_wrap, 
	.mSection05 .titl_wrap,
	.mSection07 .titl_wrap{right: 20px; }
	
	.titl_wrap .titl{font-size: clamp(60px, 5vw, 90px);}
	.titl_wrap .subs{font-size: clamp(16px, 1vw, 18px);}
}

@media screen and (max-width: 1400px){
	.visual_inner p{font-weight: 700;}
	.titl_wrap{width: calc(50% - 220px)}
	.img_wrap{gap:30px;}
	
	.history_info .history_tit{font-size: 22px; }
	.history_info .year{font-size:30px; }
	
	.img_item:nth-child(2n - 1){margin-right: auto; margin-left:0; ; }
	.img_item:nth-child(2n){margin-left: auto; margin-right:0; ; }
}

@media screen and (max-width: 1200px){
	.titl_wrap{margin-top: 30px; }
	.titl_wrap .subs{font-size: 14px;  width: calc(100% + 180px); }
	.mSection03 .titl_wrap .subs, 
	.mSection05 .titl_wrap .subs,
	.mSection07 .titl_wrap .subs{margin-left: -180px; }
	
}

@media screen and (max-width: 1024px){
	

	.intro_logo.is-intro-start{
		max-width:300px;width: 50vw;
	}

	.visual_inner{justify-content: center; position: absolute; top: 25%; left: 50%; transform: translateX(-50%); }
	.visual_inner:before{content:''; display: block; width: 20px; height: 2px; background:#fff; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%)}
	.visual_inner:after{content:'글로벌 전문 지식을 갖춘 인재 육성'; display:block;position: absolute; top: calc(100% + 16px);   left: 50%; transform:translateX(-50%); font-size:clamp(28px, 4.5vw, 34px) ; font-weight: 600;width: 100%; text-align: center; word-break: keep-all;}
	.visual_inner p{width: auto; font-size: 30px; }
	
	.mainTxt{opacity: 0; visibility: hidden; overflow: hidden; width:1px; height:1px;}


	.sticky_inner{padding-top: 100px; }
	.conts_wr{display: flex; flex-direction: column; justify-content: space-between; height: calc(100vh - 100px); height: calc(100svh - 100px);height:calc(var(--viewport-height) - 100px);}
	.titl_wrap{position: unset; transform:unset; width: 100%; margin-top:0; }
	.titl_wrap:before{display: none;}
	.titl_wrap .titl{display: flex; flex-wrap: wrap; column-gap: 10px; margin-bottom: 20px; }
	.titl_wrap .subs{width: 100%; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
	
	.img_wrap{display:flex;flex-wrap:nowrap;gap:20px;width:max-content;flex-direction: row; padding:0; padding-bottom: 50px; }
	.img_item{flex:0 0 auto;}
	
	.mSection03 .titl_wrap .subs, 
	.mSection05 .titl_wrap .subs,
	.mSection07 .titl_wrap .subs{margin-left: 0; text-align: start;}
	
	.intro_circle_wrap.is-mobile-history .intro_logo,
	.intro_circle_wrap.is-mobile-history .intro_logo_blend{display:none;}
	.history_info{padding-bottom:0; }
	.history_info .history_tit{display: none;}
	.history_info .year{display: flex; flex-direction: column; justify-content: center; align-items :center; row-gap: 4px; }
	.history_info .year em{display: none;}
	.history_info .more{position: unset; text-align: center; margin: 0 auto; border:0; padding: 6px 12px; transform: unset; }
}

@media screen and (max-width: 768px){
	.img_item{max-width: 300px; }
}

@media screen and (max-width: 575px){
	.titl_wrap .titl{font-size: 50px; }
	.visual_inner:after{font-size: 20px;}
}

@media screen and (max-width: 425px){

}

@media screen and (max-height:700px){
	.titl_wrap .subs{display: none;}
}

/*임시삭제*/
.img_item .txt .date{display: none;}