@charset "UTF-8";
.main-top {height: 870px; background: #fff url(../jpg/main-top.jpg) center center no-repeat;}
.main-top-inner {position: relative; width: 1100px; margin: 0 auto;}
.main-top-title {position: absolute; top: 85px; left: 50%; text-indent: -9999px;}
.main-top-title .sub-copy {margin-left: -125px; width: 250px; height: 48px; background: url(../png/main-top-title-sub.png) 0 0 no-repeat; animation: main-top-ani1 0.8s ease 1}
.main-top-title h2 {top: 138px; margin-left: -270px; width: 540px; height: 88px; background: url(../png/main-top-title-main.png) 0 0 no-repeat; animation: main-top-ani2 1.6s ease 1}
.main-top-bottom {position: absolute; top: 760px; width: 100%; text-align: center; opacity: 0}
.main-top-bottom .txt {font-size: 18px; color: #003686; margin-bottom: 15px; font-weight: 400;}
.main-top-biz > div{position: absolute; text-indent: -9999px}
.main-top-biz .biz1 {top: 320px; left:98px; width: 150px; height: 54px; background: url(../png/main-top-biz1.png) 0 0 no-repeat; animation: main-top-ani3 .6s ease 2 1.6s; animation-fill-mode:forwards; opacity: 0}
.main-top-biz .biz2 {top: 270px; left: 822px; width: 216px; height: 54px; background: url(../png/main-top-biz2.png) 0 0 no-repeat; animation: main-top-ani3 .6s ease 2 2.4s; animation-fill-mode:forwards; opacity: 0}
.main-top-biz .biz3 {top: 610px; left: 124px; width: 174px; height: 54px; background: url(../png/main-top-biz3.png) 0 0 no-repeat; animation: main-top-ani3 .6s ease 2 3.2s; animation-fill-mode:forwards; opacity: 0}
.main-top-biz .biz4 {top: 598px; left: 750px; width: 176px; height: 54px; background: url(../png/main-top-biz4.png) 0 0 no-repeat; animation: main-top-ani3 .6s ease 2 4s; animation-fill-mode:forwards; opacity: 0}

	/* mian-top ani */
@keyframes main-top-ani1 {
	0% {opacity: 0; transform: scaleX(0.2); transform-origin: 0% 0%;}
	100% {opacity: 1; transform: scaleX(1); transform-origin: 0% 0%;}
}
@keyframes main-top-ani2 {
	0% {opacity: 0; transform: scale(0.2);}
	100% {opacity: 1; transform: scale(1);}
}

@keyframes main-top-ani3 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.main-title {font-size: 36px; color: #333; text-align: center; line-height: 1; font-weight: 500;}

/* ksi 브랜드 섹션*/
.main-contents {position: relative; height: 1033px}
.ksi-brand {width: 100%;}
.ksi-brand > div {float: left; width: 33.33333%; height: 410px; box-sizing: border-box; border-right: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; text-align: center;}
.ksi-brand > div.row1 {border-top: 1px solid  #e9e9e9;}
.ksi-brand > div.left-line {border-left: 1px solid #e9e9e9;}
.ksi-brand .brand{}
.brand .img {height: 220px; background: url(../jpg/bg-brand1.jpg) center center no-repeat; background-size: 365px 220px; transition: background-size 1.5s ease ;}
.brand .img.cardq {background: url(../jpg/bg-brand2.jpg) center center no-repeat; background-size: 365px 220px;}
.brand .img.booktory {background: url(../jpg/bg-brand3.jpg) center center no-repeat; background-size: 365px 220px;}
.brand .img.kiss {background: url(../jpg/bg-brand4.jpg) center center no-repeat; background-size: 365px 220px;}
.brand .img.paper {background: url(../jpg/bg-brand5.jpg) center center no-repeat; background-size: 365px 220px;}
.brand .img.idam {background: url(../jpg/bg-brand6.jpg) center center no-repeat; background-size: 365px 220px;}
.brand:hover .img {background-size: 547.5px 330px;}

.brand .logo {position: relative; padding: 20px 0; margin-bottom: 17px; height: 45px}
.brand .logo:after {position: absolute; bottom:0; left:50%; width:30px; margin-left: -15px; height: 2px; background: #e9e9e9; content:'';}
.brand .main-copy {font-size: 20px; color: #333; padding-bottom: 10px; font-weight: 500;}
.brand .sub-copy {font-size: 13px}
.ksi-brand .brand:hover {background: #f3f7f9;}
.brand:hover .logo:after {animation: logo 1.0s ease; background: #063b88;}

.ani-title1 {position: absolute; top:80px; width:100%;}
.ani-box1 {position: absolute; top:170px;}
.ani-box2 {position: absolute; top:580px;}

.ani-title1.scr-ani {animation: ani-title1 1s ease 1;}
.ani-box1.scr-ani   {animation: ani-box1 1s ease 1;}
.ani-box2.scr-ani   {animation: ani-box2 1.4s ease 1;}

/* ksi brand animate */
@keyframes ani-title1 {
	0% { top:200px; opacity: 0; transform: scale(0.2);}
	100% { top:80px; opacity: 1; transform: scale(1);}
}

@keyframes ani-box1 {
	0% { top:400px; opacity: 0;}
	100% { top:170px; opacity: 1; }
}

@keyframes ani-box2 {
	0% { top:900px; opacity: 0;}
	100% { top:580px; opacity: 1; }
}


@keyframes logo {
	0%  {transform: scale(0); background: #e9e9e9; opacity: 0.3}
	100% { transform: scale(1); background: #063b88; opacity: 1}
}

/* 홍보 섹션 */
.main-ksi-ad {height: 520px; background: #f3f7f9;}

/* 누적 정보 */
.main-ksi-stat {height: 640px; background: url(../jpg/bg-stat-2.jpg) center center no-repeat;}
.main-ksi-stat-inner {position: relative; width: 1100px; margin:0 auto; }
.main-stats-cols {padding-top: 180px}
.main-stats-cols > div {float: left; width: 240px; height: 120px; padding-right: 45px; padding-bottom: 80px}
.main-stats-cols h5 {font-size: 18px; color: #333; font-weight: normal; padding-bottom: 10px; line-height: 1; border-bottom: 1px solid #adb3bb;}
.main-stats-cols p {padding-top: 5px; line-height: 1; font-size: 22px; color: #333}
.main-stats-cols p strong {font-size: 50px}
.main-stat-graph {position: absolute; bottom:-50px; left:470px; width:518px; height: 443px; background:  url(../png/bg-graph.png) 0 0 no-repeat; opacity: 0;}
.main-stat-graph.scr-ani {animation: stat-graph 0.8s ease 1 1s; animation-fill-mode: forwards;}
	/* 누적 정보 animate */
@keyframes stat-graph {
	0% {width:10px; opacity: 0.1}
	20% {width:100px; opacity: 0.3}
	40% {width:240px; opacity: 0.4}
	60% {width:300px; opacity: 0.6}
	80% {width:420px; opacity: 0.8}
	100% {width: 518px; opacity: 1}
}

/* 인력채용 섹션 */
.main-ksi-recruit {height: 642px; background: #eaeae7;}
.main-ksi-recruit-inner{position: relative; width:1100px; margin: 0 auto;}
.main-recruit-people {position: absolute; top:0; right: -240px; width:998px; height: 687px; opacity:0}
.main-ksi-recruit-inner .sub-title {position: relative; top:230px; opacity: 0}
.main-ksi-recruit-inner .sub-title .main {font-size: 26px; font-weight: 500; color: #333; line-height: 2.4}
.main-ksi-recruit-inner .rec-imgs {position: relative; top:300px;}
.main-ksi-recruit-inner .rec-imgs > div {float: left; width: 120px; height: 102px}
.main-ksi-recruit-inner .rec-imgs .rec1 {opacity: 0}
.main-ksi-recruit-inner .rec-imgs .rec2 {opacity: 0}
.main-ksi-recruit-inner .rec-imgs .rec3 {opacity: 0}