@charset "utf-8";

.animated {
  opacity: 0;
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  -webkit-transition: all ease .8s;
  transition: all ease .8s;
}

.animated.on {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

.d-1s {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

.d-2s {
  -webkit-transition-delay: .2s !important;
  transition-delay: .2s !important;
}

.d-3s {
  -webkit-transition-delay: .3s !important;
  transition-delay: .3s !important;
}

.d-4s {
  -webkit-transition-delay: .4s !important;
  transition-delay: .4s !important;
}

.d-5s {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

.d-6s {
  -webkit-transition-delay: .6s !important;
  transition-delay: .6s !important;
}

.d-7s {
  -webkit-transition-delay: .7s;
  transition-delay: .7s;
}

.d-8s {
  -webkit-transition-delay: .8s;
  transition-delay: .8s;
}

.d-9s {
  -webkit-transition-delay: .9s;
  transition-delay: .9s;
}

.d-10s {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

.d-11s {
  -webkit-transition-delay: 1.1s;
  transition-delay: 1.1s;
}

.d-12s {
  -webkit-transition-delay: 1.2s;
  transition-delay: 1.2s;
}

.d-13s {
  -webkit-transition-delay: 1.3s;
  transition-delay: 1.3s;
}

.progress__bar02 {
  width: 235px;
  height: 2px;
  background: #fff;
  z-index: 1;
  position: relative;
  margin-right: 20px;
}

.progress__bar02 .bar02 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #4876ef;
  height: 100%;
  width: 0%;
}


.progress__bar02.on .bar02 {
  width: 100%;
  transition: all linear 3s;
}
.pen {
	position:relative;
	color:#FFF;
}
.pen::after {
	content:'';
	position:absolute;
	left:0;
	display:inline-block;
	z-index:-1;
	width:0%;
	height:100%;
	background:#ef740d;
}
.pen.on::after {
	animation:dd 1.1s;
	animation-fill-mode: forwards;
}
@keyframes dd {
	0% {width:0%;}
	100% {width:100%;}
}
/* 메인비주얼 */
.main-visual {
  height: 935px;
  width: 100%;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.main-visual .mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-visual .mv__bg .img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  background-repeat: no-repeat;
  background-position: center;
	background-size: cover;
	-webkit-transition: -webkit-transform linear 5s;
	transition: -webkit-transform linear 5s;
	transition: transform linear 5s;
	transition: transform linear 5s, -webkit-transform linear 5s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

.main-visual .mv__bg .img.active {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.main-visual .mv__bg .img.hiding {
  opacity: 0;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}

.main-visual .item {
  height: 935px;
  margin: 0 auto;
  opacity: 0.5;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  position: relative;
}

.main-visual .item .item__stit {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.main-visual .item .item__stit p {
  opacity: 0;
  transform: translateY(50px);
  transition: all ease 1s;
  color: #fff;
}
.main-visual .item.on .item__stit p {
  opacity: 1;
  transform: translateY(0px);
}
.main-visual .item .item__stit .eg {
	font-size: 80px;
	line-height: 1;
	font-weight: bold;
	margin-bottom: 40px;
}
.main-visual .item .item__stit .ko {
	font-size: 30px;
}
.main-visual .item .item__stit .ko_txt {
	font-size: 60px;
    font-weight: bold;
	line-height: 1.6em;
}

.main-visual .mv__pager img {
	vertical-align: middle;
}
.main-visual .mv__pager .mv__prev {
  cursor: pointer;
}

.main-visual .mv__pager .mv__next {
  cursor: pointer;
}

.main-visual .mv__pager {
  font-family: 'Poppins';
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
}

.main-visual .mv__pager .pager__current {
  margin-left: 15px;
}

.main-visual .mv__pager .pager__total {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 15px;
}

.main-visual .prev__area {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

.main-visual .next__area {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

.main-visual .mv__nav {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
}

/* section01 */
.section01 {
	padding-bottom: 130px;
}
.section01 .section01__top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 140px;
}
.main_tit {
	color: #444444;
    font-size: 50px;
    font-weight: bold;
    line-height: 1.4em;
	letter-spacing: -0.5px;
	margin-bottom: 100px;
}
.section01__video {
  border-radius: 50px;
  overflow: hidden;
  height: 640px;
  position: relative;
}
.section01__video .item {
  position: relative;
  width: 100%;
  height: 640px;
}
.section01__video .item .item__mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('../img/video_fillter.png') no-repeat center;
  top: 0;
  left: 0;
  z-index: 2;
}
.section01__video .item .item__txt {
	position: absolute;
	left: 130px;
	top: 110px;
	z-index: 3;
	color: #fff;
}
.section01__video .item .item__txt .tit {
	font-size: 50px;
	font-weight: bold;
	line-height: 1;
}
.section01__video .item .item__txt .sub {
	font-size: 20px;
	line-height: 1.6em;
	font-weight: 500;
	margin: 40px 0 80px;
}
.section01__video .item .item__txt .more_btn a {
	display: block;
	color: #fff;
	width: 140px;
	line-height: 48px;
	border: 2px solid rgba(255,255,255,0.3);
	border-radius: 30px;
	text-align: center;
	font-weight: 500;
}
.section01__video .item video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.section01__video .progress__bar {
  position: absolute;
  left: 130px;
  right: 130px;
  bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 7px;
}
.section01__video .progress__bar .bar__wrap {
  width: 20%;
  position: relative;
  cursor: pointer;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.section01__video .progress__bar .bar__wrap:hover .bar {
  height: 7px;
  background-color: #fff;
}
.section01__video .progress__bar .bar__wrap .bar {
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transition: all ease .3s;
  transition: all ease .3s;
  position: relative;
}
.section01__video .progress__bar .bar__wrap .bar::before {
  content: "";
  width: 0%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.section01__video .progress__bar .bar__wrap .bar.active::before {
  -webkit-transition: all linear 5s;
  transition: all linear 5s;
  width: 100%;
}
.culture_more a {
	display: block;
	padding-bottom: 10px;
	font-size: 22px;
	font-weight: 600;
	border-bottom: 4px solid #404040;
}
.culture__list {
	display: flex;
}
.culture__list_m { display: none; }
.culture__list li {
	margin: 0 25px;
	width: 33.333%;
	box-sizing: border-box;
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.1);
	border-radius: 30px;
	height: 530px;
	text-align: center;
	padding: 40px 10px;
	cursor: pointer;
}
.culture__list li .icon {
	width:120px; 
	height:120px;
	margin: 25px auto 0 auto;
}
.culture__list li:nth-of-type(1) .icon {
	background:url(/yni/img/icon1.png)no-repeat;
	background-size:cover;
}
.culture__list li:nth-of-type(2) .icon {
	background:url(/yni/img/icon2.png)no-repeat;
	background-size:cover;
}
.culture__list li:nth-of-type(3) .icon {
	width:130px; 
	
	background:url(/yni/img/icon3.png)no-repeat;
	background-size:140px;
}
.culture__list li .eg {
	font-size: 38px;
	font-weight: bold;
	line-height: 1;
	margin: 0px 0 15px;
}
.culture__list li .ko {
	font-size: 30px;
	font-weight: 300;
	line-height: 1;
}
.culture__list li .sub {
	font-size: 16px;
	line-height: 1.75em;
	margin-top: 25px;
}
/* count */
.chart {
	padding:100px 0 200px 0;
}
.count {
	display:flex;
	width:100%;
	justify-content:space-between;
}
.count > li {
	position: relative;
	width:100%;
	font-size: 30px;
    font-weight: 500;
    letter-spacing: -1.75px;
    line-height: 1.1;
	padding:0 130px;    
	text-align:center;
}
.count > li:nth-of-type(1) {
	padding-left:0;
}
.count > li::before {
	content:'';
    width: 1px;
    height: 120px;
    background: #ccc;
    position: absolute;
    right: 0;
    top: 5px;
}
.count > li:last-child::before {
	display:none;
}
.count > li > strong {
	font-size:80px;
	vertical-align: -webkit-baseline-middle;
}
.count > li > span {
	display: block;
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: #999;
    margin-top: 20px;
    text-align: center;
}
/* system */
.section_sub {
  height:110vh;
  padding:110px 0;
  background:#111;
}
.system {
  text-align: center;
}
.system .system_head {
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  opacity: 1;
  transform: translateY(20px);
  color:#FFF;
}
.system.active .system_head {
  transition: all 0.5s;
  transform: translateY(0px);
  opacity: 1;
}
.system .system_cont {
  position:relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin-top: 110px;
}
.system .system_cont li::before {
  content: '';
  position: absolute;
  z-index: 170;
}
.system .system_cont li.list01::before {
  top:160px;
  left: 50%;
  width: 450px;
  height: 117px;
  background: url(../img/arrow_path01.png)no-repeat;
}
.system .system_cont li.list02::before {
  top:160px;
  right: 50%;
  width: 200px;
  height: 430px;
  margin-right: 330px;
  background: url(../img/arrow_path02.png)no-repeat;
}
.system .system_cont li.list03::before {
  top: 434px;
  right: 50%;
  width: 505px;
  height: 155px;
  margin-right: -445px;
  background: url(../img/arrow_path03.png)no-repeat;
}
.system .system_cont li .box {
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  height:160px;
  line-height: 1.13;
  border-radius: 110px;
  box-sizing: border-box;
  font-size:40px; 
  font-weight:600;
  color:#FFF;
  opacity: 0;
  transform: translateY(20px);
}
.system .system_cont li.list01 .box {
  left: 50%;
  top: 80px;
  margin-left: -330px;
  z-index: 159;
  background-color: #FF5E2E;
}
.system.active .system_cont li.list01 .box {
  transition: all 0.8s 0.3s;
  opacity: 1;
  transform: translateY(0);
}
.system .system_cont li.list02 .box {
  left: 50%;
  top: 274px;
  margin-left: 260px;
  z-index: 129;
  background-color: #FF2D5E;
}
.system.active .system_cont li.list02 .box {
  transition: all 0.8s 0.5s;
  opacity: 1;
  transform: translateY(0);
}
.system .system_cont li.list03 .box {
  right: 50%;
  top: 500px;
  margin-right: 60px;
  z-index: 149;
  background-color: #7030A0;
}
.system.active .system_cont li.list03 .box {
  transition: all 0.8s 0.7s;
  opacity: 1;
  transform: translateY(0);
}
.system .system_cont li .text.pc {
  position: absolute;
  text-align: left;
  opacity: 0;
  transform: translateX(50px);
  z-index: 200;
}
.system .system_cont li .text.mobile {
  display: none;
}
.system.active .system_cont li .text.pc {
  opacity: 1;
  transform: translateX(0);
}
.system .system_cont li.list01 .text.pc {
  left: 50%;
  top: 70px;
  margin-left: 20px;
}
.system.active .system_cont li.list01 .text.pc {
  transition: all 0.8s 0.3s;
}
.system .system_cont li.list02 .text.pc {
  right: 50%;
  top: 410px;
  margin-right: 200px;
}
.system.active .system_cont li.list02 .text .pc{
  transition: all 0.8s 0.5s;
}
.system .system_cont li.list03 .text.pc {
  right: 50%;
  top: 440px;
  margin-right: -400px;
  margin-top: 20px;
}
.system.active .system_cont li.list03 .text.pc {
  transition: all 0.8s 0.7s;
}
.system .system_cont li .text.pc p {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: -0.45px;
  color: #ccc;
}
.system .round .b_round {
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}
.system .round .r01 {
  width: 720px;
  height: 720px;
  padding: 70px 70px 70px 24px;
  background-color: #2a2a2a;
  z-index: 100;
}
.system .round .r02 {
  width: 580px;
  height: 580px;
  margin-top:70px;
  padding: 20px 1px 70px 70px;
  background-color: #3c3c3c;
  z-index: 130;
}
.system .round .r03 {
  width: 440px;
  height: 440px;
  margin-top:140px;
  background-color: #595959;
  z-index: 150;
}
.system .round .r-logo {
  display: flex;
  align-items: end;
  width: 300px;
  height: 300px;
  margin-top:210px;
  padding: 0 46px 121.8px 45px;
  background-color: #fff;
  z-index: 160;
}

.section02 {
  background-color: #f7f9fe;
  padding: 110px 0;
}
/* client */
.partner {
    text-align: center;
	background-color: #f7f9fe;
}
.partner .main_tit {
	margin-bottom:0;
}
.partner .main_tit img {
    height: 60px; 
	margin-bottom:20px;
}
.partner .partner_content {
    display: flex;
    flex-wrap: wrap;
	margin:0 auto;
    padding-top: 100px;
}
.partner .partner_content li {
	width: 11%;
    padding: 5px;
}
.partner .partner_content li img {
	width:205px;
}
/* news */
.section03 {
	padding:110px 0;
}
.main_news {
	width: 1590px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.news_slide_arw {
	position: absolute;
	top: 0; right: 0;
	z-index: 9;
}
.news_slide_arw .slick-arrow {
	displaY: inline-block;
	vertical-align: top;
	width: 65px;
	height: 65px;
	background-image: url('/resources/image/main/news_arw.png');
	background-repeat: no-repeat;
	text-indent: -99999em;
	cursor: pointer;
	transition: 0.3s all;
	margin-left: 10px;
}
.news_slide_arw .slick-prev {
	background-position: left;
}
.news_slide_arw .slick-next {
	background-position: right;
}
.news_slide_arw .slick-prev:hover,
.news_slide_arw .slick-next:hover {
	background-image: url('/resources/image/main/news_arw_on.png');
}

.news_slide .item {
  margin-right: 60px;
  position: relative;
}
.news_slide .item > a > div:first-child {
    font-size: 16px;
    font-weight: 500;
    height: 25px;
}
.news_slide .item > a > div.dh_gray {
	color: #ef740d; !important; 
}
.news_slide .item .tit {
	font-size: 20px;
	font-weight: 500;
	margin: 20px 0 70px;
}
.news_slide .item .bar {
  width: 100%;
  height: 3px;
  background-color: #404040;
}
.news_slide .item:hover .bar {
  width: 0;
  -webkit-animation: bar forwards .7s;
  animation: bar forwards .7s;
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}
@-webkit-keyframes bar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes bar {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}
.news_slide .item .num {
	font-size: 18px;
	margin-top: 50px;
}

/* 투자정보 */
.main_stock {
	padding: 80px 0 230px;
}
.main_stock .inner {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.main_stock_tit {
	margin-right: 60px;
	font-size: 20px;
}
.main_stock_tit b {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	margin-right: 10px;
}
.main_stock_tit b:before {
	content: '';
	display: block;
	background: url('/resources/image/main/stock.png') no-repeat center;
	width: 32px;
	height: 20px;
	position: absolute;
	top: -25px;
	left: 0;
}
.main_stock .stock_data span.gray9 {
	border-left: 1px solid #ddd;
    margin-left: 15px;
    padding-left: 15px;
}
.main_stock_btn a {
	display: inline-block;
  padding: 0 45px 0 35px;
  line-height: 48px;
  border: 2px solid #ddd;
  border-radius: 30px;
  font-weight: 500;
	font-size: 18px;
	background: #fff url('/resources/image/main/small_arw.png') no-repeat center right 30px;
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
}
.main_stock_btn a:hover {
	background: #4876ef url('/resources/image/main/small_arw2.png') no-repeat center right 30px;
	border: 2px solid #4876ef;
	color: #fff;
}