/* 공통 */
.section{vertical-align: top;}
.m_wrap .w1500{ width: calc(100% - 200px);}
.web{}
.mobile{display:none;}


/* 메인 텍스트 */
.m_tit{overflow: hidden;}
.m_tit h3{font-weight:bold; font-size:13px; color: #005fa8; text-transform: uppercase;}
.m_tit h3.cf{color: #fff;}
.m_tit h2{font-weight:bold; font-size:65px; color: #fff; line-height: 1.2; margin-top: 30px;}
.m_tit p{font-weight:200; font-size:26px; color: #fff; opacity: 0.7; margin-top: 26px; line-height: 1.6;}
.m_tit .view{display:flex; align-items:center; width: 145px; height: 90px; margin-top: 48px;}
.m_tit .view a{position:relative; display:inline-block; width: 100%; vertical-align: top; line-height: 90px; font-size:300px; font-size:16px; color: #fff; z-index: 2;}
.m_tit .view a::before{content:''; position:absolute; top: 0; right: 70%; width: 90px; height: 90px; border-radius:50%; background: #005fa8; transition:0.8s; transform:scale(0); opacity: 0;}
.m_tit .view a font{position:relative; z-index: 2;}
.m_tit .view a span{display:inline-block; vertical-align: top; position:relative; width: 30px; height: 1px; margin: 45px 0 45px 13px; z-index: 2;}
.m_tit .view a span::after{content:""; position:absolute; top: 0; left: 0; width: 30px; height: 1px; background: #fff; opacity: 0.3;}
.m_tit .view a span i{position:absolute; top: -7px; left: -4px;font-size:14px; color: #fff; z-index: 10; transition:0.4s;}

/* 메인 네비게이션 */
.main_ui{}
.main_ui .nav_txt{position:fixed; top: 0; left: 0; width: 100px; height: 100vh; border-right: 1px solid #ffffff20; z-index: 100;}
.main_ui .nav_txt h2{position:absolute; top: 50%; left: 8px; width: 100%; text-align: center; font-weight:300; font-size:12px; color: #fff; transform:rotate(-90deg) translateY(-50%); opacity: 0.6; text-transform: uppercase;}
.main_ui .f_nav{position:fixed; top: 0; right: 0; width: 100px; height: 100vh; border-left: 1px solid #ffffff20; z-index: 100;}
.main_ui .f_nav ul{position:absolute; top: 50%; left: 50%; width: 30px; text-align: center; transform:translate(-50%,-50%);}
.main_ui .f_nav ul li{position:relative; cursor: pointer; width: 30px; height: 30px; margin: 6px 0; font-size:0;}
.main_ui .f_nav ul li::before{content:''; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: 4px; height: 4px; border-radius:50%; background-color: #fff; opacity: 0.5; transition:0.3s}
.main_ui .f_nav ul li i{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); color: #fff; font-size:14px; opacity: 0; transition:0.3s}
.main_ui .scroll_down{position:fixed; bottom: 50px; left: 0; width: 100px; z-index: 100; text-align: center;}

.main_ui .f_nav ul li.on::before{opacity: 0;}
.main_ui .f_nav ul li.on i{opacity: 1;}

.mv .slide_wrap{position:relative; }
.mv .slide_wrap .slide_ctn .item{overflow: hidden;}
.mv .slide_wrap .slide_ctn .item .bg{position:relative; height: 100vh; width: 100%; transition:1.5s;}
.mv .slide_wrap .slide_ctn .item .bg01{background:url(/img/main/mv01.jpg) 50% 50% no-repeat; background-size:cover;}
.mv .slide_wrap .slide_ctn .item .bg02{background:url(/img/main/mv02.jpg) 50% 50% no-repeat; background-size:cover;}
.mv .slide_wrap .slide_ctn .item .bg03{background:url(/img/main/mv03.jpg) 50% 50% no-repeat; background-size:cover;}
.mv .slide_wrap .p_box{position:absolute; top: 50%; left: 0; box-sizing:border-box; padding-left: 210px; width: 100%; transform:translateY(-50%);}
.mv .slide_wrap .slide_txt .item h2{font-weight:bold; font-size:75px; color: #fff; line-height: 1; overflow: hidden;}
.mv .slide_wrap .slide_txt .item h2 span{display:inline-block; vertical-align: top; line-height:1.2;}
.mv .slide_wrap .slide_txt .item p{font-weight:200; font-size:26px; color: #fff; opacity: 0.7; margin-top: 26px;}
.mv .slide_wrap .slide_ui .progress{display:flex; align-items:center; margin-top: 100px;}
.mv .slide_wrap .slide_ui .progress .item{display:flex; align-items:center; margin-right: 10px;}
.mv .slide_wrap .slide_ui .progress .item:last-of-type{margin-right: 0;}
.mv .slide_wrap .slide_ui .progress .item p{font-weight:300; font-size:13px; color: #fff; opacity: 0.4;  transition:0.3s;}
.mv .slide_wrap .slide_ui .progress .item .bar{position:relative; height: 1px; width: 0; margin: 0; transition:0.8s; top: 1px;}
.mv .slide_wrap .slide_ui .progress .item .bar::before{content:""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.5;}
.mv .slide_wrap .slide_ui .progress .item .bar span{display:inline-block; vertical-align: top; position:absolute; top: 0; left: 0; width: 0; height: 100%; background: #006bbe;}

.mv .slide_wrap .slide_ui .progress .item.on .bar{width: 130px; margin: 0 0 0 15px;}
.mv .slide_wrap .slide_ui .progress .item.on p{opacity: 1;}


.story{background:url(/img/main/main_bg01.jpg) 50% 50% no-repeat; background-size:cover;}
.story .flex_box{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.story .m_tit p{position:relative; padding-left: 12px;}
.story .m_tit p::before{content:''; position:absolute; top: 19px; left: 0; width: 5px; height: 5px; background: #fff; opacity: 0.7; border-radius:50%}
.story .m_tit p:last-of-type{margin-top: 8px;}
.story figure{border-radius:50%; overflow: hidden;}

.research{background-color: #003462;}
.research .top{display:flex; flex-wrap:wrap; justify-content:space-between;}
.research .top .select_ctn{position:relative; width: 100%; max-width: 320px; margin-top: 60px;}
/* .research .top .select_ctn::after{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #003462; opacity: 0;} */
/* .research .top .select_ctn p{position:relative; font-weight:300; font-size:16px; color: #fff; line-height: 70px; padding-left: 30px; box-sizing:border-box; cursor: pointer;}
.research .top .select_ctn p::before{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.05; }
.research .top .select_ctn p i{position:absolute; top: 50%; right: 30px; transform:translateY(-50%);} */
.research .top .select_ctn ul{ width: 100%; margin-top: 2px; padding: 20px 0;}
/* .research .top .select_ctn ul:before{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.05;} */
.research .top .select_ctn ul li{position:relative; z-index: 2; margin-bottom:5px;}
.research .top .select_ctn ul li:last-of-type{margin-bottom:0;}
.research .top .select_ctn ul li::before{content:''; position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0.05; }
.research .top .select_ctn ul li a{position:relative; display:inline-block; vertical-align: top; padding: 0 30px; width: 100%; box-sizing:border-box;  font-weight:300; font-size:20px; color: #ffffff85; line-height: 70px; z-index: 2; transition:0.3s}
.research .top .select_ctn ul li a i{position:absolute; top: 50%; right: 30px; transform:translateY(-50%) rotate(90deg); }
.research .circle_img_list{display:flex; flex-wrap:wrap; margin-top: 80px;}
.research .circle_img_list .item{position:relative; width: calc(25% - 54.75px); margin-right: 73px; border-radius:50%; overflow: hidden; box-shadow: 0px 0px 85px 0px rgba(0, 0, 0, 0.1);}
.research .circle_img_list .item:last-of-type{margin-right: 0;}
.research .circle_img_list .item::before{content:''; position:absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0; transition:0.5s}
.research .circle_img_list .item > figure img{width: 100%;}
.research .circle_img_list .item .hover{position:absolute; top: 80%; width: 100%; transform:translateY(-50%);text-align: center; z-index: 10; opacity: 0; transition:0.5s}
.research .circle_img_list .item .hover .txt{margin-top: 28px;}
.research .circle_img_list .item .hover .txt p{font-size:14px; color: #fff; opacity: 0.5;}
.research .circle_img_list .item .hover .txt h4{font-size:18px; color: #fff; margin-top: 4px;}
.research .circle_img_list .item a{position:absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 11;}



.media{background:url(/img/main/main_bg02.jpg) 50% 50% no-repeat; background-size:cover}

.media > div{padding-top: 50px;}
.media .flex_box{display:flex; flex-wrap:wrap; }
.media .m_tit{width: 40%;}
.media .board_list{width: 60%; box-sizing:border-box; border-top: 1px solid #ffffff20;}
.media .board_list dl{display:flex; flex-wrap:wrap; border-bottom: 1px solid #ffffff20; box-sizing:border-box; padding: 30px; transition:0.3s}
.media .board_list dl dt{width: 58px; text-align: center; font-weight:200; font-size:50px; color: #fff; opacity: 0.5;}
.media .board_list dl dt span{display:inherit; font-size:14px; position:relative; top: -7px;}
.media .board_list dl dd{position:relative; width: calc(100% - 58px); box-sizing:border-box; padding-left: 60px; margin-top: 15px;}
.media .board_list dl dd a{position:absolute; top: 0; right: 0; bottom: 0; left: 0;}
.media .board_list dl dd p{font-weight:200; font-size:16px; color: #fff; opacity: 0.8; line-height: 1.6; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.media .board_list dl dd .cb{font-weight:400; font-size:14px; color: #005fa8; opacity: 1; line-height: 1.4; transition:0.3s}
.media .board_list dl dd h4{font-size:20px; color: #fff; margin: 27px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.career{position:relative; background:url(/img/main/career_bg.png) 50% 50% no-repeat; background-size:cover; overflow: hidden;}
.career .flex_box{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.career figure{border-radius:50%; overflow: hidden;}
/* .career .bg_right_img{position:absolute; top: 0; right: 0; width: 100%; max-width: 1000px; height: 100%; background:url(/img/main/main07.jpg) 50% 50% no-repeat; background-size:cover;}
.career .bg_right_img::after{content:''; position:absolute; top: 0; right: 0; width: 100%; height: 100%; background: #002a50;  opacity: 0;} */

/* animation */
.ani .m_tit h3{animation: left 0.8s 0.5s both}
.ani .m_tit h2{animation: fadeIn 0.8s 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
.ani .m_tit p{animation: fadeIn70 0.8s 0.9s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
.ani .view{animation: fadeUp 0.8s 0.9s both}

/* .mv .slide_wrap .slide_txt .item.slick-active h2 span{animation:up 1.2s 0.8s both} */
.story{overflow: hidden;}
.story.ani figure{animation: move01 1s 0.6s both}

.research.ani .top .select_ctn::after{animation:height 1s 0.6s both;  opacity: 1;}
.research.ani .circle_img_list .item:nth-of-type(1){animation: move02 1s 0.8s both}
.research.ani .circle_img_list .item:nth-of-type(2){animation: move02 1s 1s both}
.research.ani .circle_img_list .item:nth-of-type(3){animation: move02 1s 1.2s both}
.research.ani .circle_img_list .item:nth-of-type(4){animation: move02 1s 1.4s both}

.media.ani .board_list{animation: fadeLeft 1.2s 1s both}
/* 
.career.ani .bg_right_img{animation:move03 1.4s 0.7s both;}
.career.ani .bg_right_img::after{animation:width 1.4s 0.7s both;  opacity: 1;} */
.career.ani figure{animation: move01 1s 0.6s both}

@keyframes up{
	0%{transform:translateY(80px);}
	100%{transform:translateY(0);}
}

@keyframes left{
	0%{transform:translateX(-200px);}
	100%{transform:translateX(0);}
}

@keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes fadeIn70{
	0%{opacity: 0;}
	100%{opacity: 0.7;}
}

@keyframes fadeUp{
	0%{transform:translateY(100px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}

@keyframes fadeLeft{
	0%{transform:translateX(200px); opacity: 0;}
	100%{transform:translateX(0); opacity: 1;}
}

@keyframes height{
	0%{height: 100%;}
	100%{height: 0;}
}
@keyframes move01{
	0%{transform:scale(0) translateX(600px); opacity: 0; }
	100%{transform:scale(1) translateX(0); opacity: 1;}
}
@keyframes move02{
	0%{transform:scale(0); opacity: 0; }
	100%{transform:scale(1); opacity: 1;}
}
@keyframes move03{
	0%{background:url(/img/main/main07.jpg) -200px 50% no-repeat;}
	100%{background:url(/img/main/main07.jpg) 50% 50% no-repeat;}
}
@keyframes width{
	0%{width: 100%;}
	100%{width: 0%;}
}

@media (hover: hover){
	.m_tit .view a:hover span i{left: 24px;}
	.m_tit .view a:hover::before{ transform:scale(1); right: 0; opacity: 1;}

	.main_ui .f_nav ul li:hover::before{opacity: 0;}
	.main_ui .f_nav ul li:hover i{opacity: 1;}

	/* .research .top .select_ctn ul li a:hover{color: #0071c7;} */
	.research .top .select_ctn ul li a:hover{color: #fff;}
	.research .circle_img_list .item:hover::before{opacity: 0.7;}
	.research .circle_img_list .item:hover .hover{top: 50%; opacity: 1;}

	.media .board_list dl:hover{background-color: #005494;}
	.media .board_list dl:hover dd span{color: #fff;}
}

.ratio .m_wrap .section > div{zoom:0.8}
.ratio .m_wrap .section.mv > div{zoom:1}

/* media */
@media screen and (max-height: 500px){
	.mv .slide_wrap .slide_ctn .item .bg{min-height: 600px;}
}

@media screen and (max-width: 1700px){
	.career .bg_right_img{max-width: 700px;}
}

@media screen and (max-width: 1500px){
	.m_tit h2{font-size:50px;}
	.m_tit p{font-size:18px;}


	.m_wrap .w1500{width: calc(100% - 140px); padding: 0 16px;}

	.main_ui .nav_txt,
	.main_ui .f_nav,
	.main_ui .scroll_down{width: 70px;}

	.main_ui .nav_txt h2{width: 100px; left: -6px;}
	
	.mv .slide_wrap .p_box{padding-left: 90px;}
	.story .m_tit{width: 55%;}
	.story .m_tit p::before{top: 12px;}
	.story figure{width: 45%;}


	.research .circle_img_list .item{width: calc(25% - 15px); margin-right: 20px;}
	.career .m_tit{width: 55%;}
	.career figure{width: 45%;}
}

@media screen and (max-width: 1200px){
	.mv .slide_wrap .slide_txt .item h2{font-size:60px;}

	.m_tit p br{display:none;}

	.research .circle_img_list .item .hover .txt h4{width: 80%; margin: 0 auto;}

}

@media screen and (max-width: 1000px){
	.web{display:none;}
	.mobile{display:inline-block;}

	.ratio .m_wrap .section > div{zoom:1}
	.m_tit{width: 100% !important;}
	.m_tit .view{margin-top: 20px;}
	.m_wrap .w1500{width: 100%; margin: 0 auto;}
	.main_ui{display:none; }

	.section{padding: 100px 0;}
	.section.mv{padding: 0;}

	.mv .slide_wrap .p_box{padding-left: 16px;}

	.mv .slide_wrap .slide_txt .item h2{font-size:50px;}
	.mv .slide_wrap .slide_txt .item p{font-size:21px; margin-top: 18px;}

	.story .m_tit{width: 100%; order:2; margin-top: 40px;}
	.story .m_tit h2{margin-top: 15px;}
	.story .m_tit .view{margin-top: 24px;}
	.story figure{position:relative; width: 100%; border-radius:0; padding-bottom: 50%;}
	.story figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: inherit;}
	
	.research .top .select_ctn{ margin-top: 20px; max-width: none; z-index: 10;}
	.research .top .select_ctn::after{z-index: -1;}
	.research .top .select_ctn ul{ padding: 0;}
	.research .top .select_ctn ul li a{line-height: 50px;}
	.research .circle_img_list{max-width: 800px; margin: 50px auto 0;}
	.research .circle_img_list .item{width: calc(50% - 10px); margin-bottom:20px;}
	.research .circle_img_list .item:nth-of-type(2n){margin-right: 0;}
	.research .circle_img_list .item .hover .txt h4{width: 100%;}

	.media .board_list{width: 100%; margin-top: 30px;}

	/* .career .bg_right_img{max-width: none; height: 400px; position:static; margin-top: 30px;} */
	.career .m_tit{width: 100%; order:2; margin-top: 40px;}
	.career .m_tit h2{margin-top: 15px;}
	.career .m_tit .view{margin-top: 24px;}
	.career figure{position:relative; width: 100%; border-radius:0; padding-bottom: 50%;}
	.career figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width: inherit;}
}

@media screen and (max-width: 800px){
	/* hover.on */
	.m_tit .view a span i{left: 24px;}
	.m_tit .view a::before{ transform:scale(1); right: 0; opacity: 1;}


	.section{padding: 70px 0;}
	.section.mv{padding: 0;}
	
	.m_tit h2{font-size:36px;}
	.m_tit p{font-size:18px;}

	.mv .slide_wrap .slide_txt .item h2{font-size:42px;}
	.mv .slide_wrap .slide_txt .item p{font-size:18px; margin-top: 12px;}
	.mv .slide_wrap .slide_ui .progress{margin-top: 50px;}

	.research .circle_img_list .item .hover .txt h4{width: 80%;}
	.research .circle_img_list .item::before{opacity: 0.7;}
	.research .circle_img_list .item .hover{top: 50%; opacity: 1;}
	.research .circle_img_list .item .hover .txt{margin-top: 15px;}

	.media .m_tit h2 br{display:none}
	.media .board_list dl{padding: 20px 15px 30px;}
	.media .board_list dl dd{padding-left: 30px;}
	.media .board_list dl dd h4{margin: 17px 0 10px;}
	
	.career .m_tit p br{display:none;}
	.career .bg_right_img{height: 250px;}
}

/* aos 커스텀 */
[data-aos="height_bg"] {
	transform:translateY(100%);
}
[data-aos="height_bg"].aos-animate {
	transform:translateY(0);

}




.main_mov { position:absolute; left:150px; top:100px; z-index:2 !important;  }
.main_mov video {width:250px; height:142px; border:2px solid #fff;}
.main_mov a { display:block }
.main_mov a::after  { content: ''; display:block; width:60px; height:60px; background:url(/img/main/play_btn.png) center / cover; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:50px; opacity:0; transition:all 0.3s } 
.main_mov a:hover::after { opacity:1; }
.main_mov2 { left:unset; right:160px; top:50%; transform:translateY(-50%); display:none }
.main_mov2 video {width:720px; height:400px; }

@media screen and (max-width: 1200px){
    .main_mov { position:absolute; left:20px; top:70px; }
}
@media screen and (max-width: 640px){
    .main_mov video { width:350px; height:199px; }
    .main_mov { position:absolute; left:50%; transform:translateX(-50%); top:80px; }
}