@charset "utf-8";

/* Reset */
html,body {width:100%;height:100%;font-size:22px;color:#555555;line-height:1.6em;-webkit-text-size-adjust:none;}
body,div,form,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,em,p,span,textarea,pre,label,fieldset,th,td,button,a,input,select,hr, figure {word-break:keep-all;}

/* common */
/* visual */
.visualWrap {overflow:hidden; position:relative; height:1100px;}
.visualWrap video {position:absolute; top:0; left:0; height:1100px;}
.visualWrap .txtWrap {position:absolute; top:345px; left:50%; width:1200px; margin-left:-600px; text-align:center;}
.visualWrap .txtWrap .illust {position:absolute; top:0; left:50%; width:127px; height:121px; margin-left:-60px;}
.visualWrap .txtWrap .tit {position:absolute; top:145px; left:0; width:100%; color:#ffffff; text-align:center;}
.visualWrap .txtWrap .tit .box {display:block; overflow:hidden; width:100%;}
.visualWrap .txtWrap .tit .animateTxt01 {display:block; font-size:70px; line-height:1.3em; font-weight:300; text-align:center; opacity:0; transform:translateY(90px);}
.visualWrap .txtWrap .tit .animateTxt02 {display:block; width:100%; font-size:85px; line-height:1.3em; font-weight:700; text-align:center; opacity:0; transform:translateY(120px);}
.visualWrap .txt01 {position:absolute; bottom:30px; left:50%; width:315px; height:40px; padding-left:165px; margin-left:-150px; font-size:26px; line-height:40px; color:#ffffff; box-sizing:border-box; background:url(images/logoKukdo.png) no-repeat 0 5px/auto 35px;}

.inner {position:relative; width:100%; padding:0 20px; box-sizing:border-box;}
.title {overflow:hidden; padding:150px 0 70px 0; font-family:ns;}
.title .tit {float:left; width:25%; font-size:32px; line-height:1.79em; color:#224fb7; letter-spacing:3px; font-weight:bold; font-family:sans-serif; text-transform:uppercase;}
.title .desc {float:left; width:75%; padding-left:30px; font-size:28px; line-height:1.79em; color:#000000; font-weight:300; box-sizing:border-box;}

.title02 {overflow:hidden; position:relative; padding:0 0 70px 120px; font-family:ns;}
.title02 .tag {display:block; padding:150px 0 55px 0; font-size:32px; line-height:1.25em; color:#224fb7; font-family:sans-serif; font-weight:bold; text-transform:uppercase;}
.title02 .num {position:absolute; top:0; left:0; width:90px; height:70px; margin-top:14px; font-size:62px; line-height:70px; color:#ffffff; font-family:sans-serif; font-weight:bold; text-align:center; vertical-align:top; background:#224fb7;}
.title02 .tit {display:inline-block; font-size:70px; line-height:1.31em; color:#000000; font-weight:bold; font-family:sans-serif; text-transform:uppercase; vertical-align:middle;}
.title02 .desc {padding:30px 0 0 5px; font-size:22px; line-height:1.64em; font-weight:300; box-sizing:border-box;}

/*.bg {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:#224fb7; transform:translateX(100%);}*/

.overWrap {background:#f1f1f1;}
.overWrap .list {overflow:hidden; padding-bottom:180px;}
.overWrap .list li {float:left; position:relative; width:32.333%; min-height:520px; padding:40px 3%; margin:50px 1.5% 0 0; border-radius:20px; box-sizing:border-box; background:#ffffff; transform:scale(0.5); opacity:0;}
.overWrap .list li:last-child {margin-right:0;}
.overWrap .list li:before {content:''; display:block; width:150px; height:150px; margin:0 auto 33px auto; background:url(images/oveIco01.png) no-repeat 50% 0/cover;}
.overWrap .list li:nth-child(2):before {background-image:url(images/oveIco02.png);}
.overWrap .list li:nth-child(3):before {background-image:url(images/oveIco03.png);}
.overWrap .list li .tag {display:block; font-size:20px; color:#224fb7; line-height:1.3em;}
.overWrap .list li .tit {display:block; margin-top:5px; font-size:36px; color:#000000; line-height:1.3em; font-weight:700;}
.overWrap .list li .txt {margin-top:18px; font-size:18px; line-height:2em; font-weight:300; color:#555555;}

.impWrap01 .title02 .tag {margin-left:-120px;}
.impWrap01 .title02 .num {top:245px;}
.impWrap01 .visualWrap {position:relative; height:1000px; font-size:25px; line-height:1.3em; color:#ffffff; font-family:sans-serif;}
.impWrap01 .visualWrap .bg {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:#224fb7; transform:translateX(100%);}
.impWrap01 .visualWrap .left {overflow:hidden; position:absolute; top:0; left:0; width:50%; height:100%; opacity:0; transform:translateX(-100%);}
.impWrap01 .visualWrap .left li {height:1000px; background:no-repeat 50% 50%/cover;}
.impWrap01 .visualWrap .right {overflow:hidden; position:relative; z-index:3; width:50%; margin-left:50%;}
.impWrap01 .visualWrap .right .con01 {height:500px; padding:40px; box-sizing:border-box; background:#224fb7; opacity:0; transform:translateX(-50%);}
.impWrap01 .visualWrap .right em {display:block; font-weight:bold;}
.impWrap01 .visualWrap .right .gp {float:left; width:50%;}
.impWrap01 .visualWrap .right .con02 {height:250px; padding:40px; box-sizing:border-box; background:#ee9b17; opacity:0; transform:translateX(-50%);}
.impWrap01 .visualWrap .right .con03 {height:250px; padding:40px; box-sizing:border-box; background:#09ac88; opacity:0; transform:translateX(-50%);}
.impWrap01 .visualWrap .right .con04 {overflow:hidden; float:left; position:relative; width:51%; margin-left:-1%; opacity:0; transform:translateX(50%);}
.impWrap01 .visualWrap .right .con04 li {height:500px; background:no-repeat 50% 50%/cover;}
.impWrap01 .visualWrap .txt {position:absolute; bottom:40px; z-index:2; right:40px; width:80%; text-align:right; font-weight:bold;}

.impWrap02 {overflow:hidden; position:relative; padding:150px 0 60px 0;}
.impWrap02 .title02 .desc {width:40%;}
.impWrap02 .imgW {position:relative; height:708px; opacity:0; transform:translateX(-300px);}
.impWrap02 .left {position:absolute; top:0; left:0; width:378px; height:708px; padding:19px; border-radius:44px; box-shadow:7px 7px 70px 0 rgba(0, 0, 0, 0.12); box-sizing:border-box; background:#eceff5;}
.impWrap02 .left li img {width:100%; max-width:339px; border-radius:44px;}
.impWrap02 .right {position:absolute; bottom:-20px; right:0; width:1076px; height:926px; padding:54px 0 0 249px; box-sizing:border-box; background:url(images/bgDesk.png) no-repeat 0 0/cover;  opacity:0; transform:translateX(150px);}
.impWrap02 .right li img {width:100%; max-width:827px;}

.impWrap03 {position:relative; padding:130px 0 0 0;}
.impWrap03 .imgW {overflow:hidden; position:relative;}
.impWrap03 .imgW .bg {position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background:#224fb7; transform:translateX(100%);}
.impWrap03 .left {overflow:hidden; position:relative; z-index:3; float:left; width:50%; height:820px; opacity:0; transform:translateX(-100%);}
.impWrap03 .left video {position:absolute; top:0; left:0; width:1460px;}
.impWrap03 .imgW .btn {display:block; overflow:hidden; position:absolute; top:0; left:0; z-index:5; width:50%; height:100%; margin:0; padding-top:467px; font-size:18px; color:#ffffff; text-align:center; box-sizing:border-box; text-transform:uppercase; background: no-repeat 50% 50%/110px auto;}
.impWrap03 .imgW .btn.btnPlay {display:none; background-image:url(images/btnPlay.png);}
.impWrap03 .imgW .btn.btnPause {opacity:0; background-image:url(images/btnStop.png);}
.impWrap03 .right {overflow:hidden; float:left; position:relative; z-index:2; width:50%; height:820px;}
.impWrap03 .right p {height:410px; background:no-repeat 50% 50%/cover; opacity:0; transform:translateX(100%);}

.storyWrap {background:#eef1f9;}
.storyWrap .title .desc {font-size:22px; line-height:1.6em;}
.storyWrap .title .desc strong {display:block; margin:-20px 0 20px 0; font-size:70px; line-height:1.3em; font-weight:700;}
.storyWrap .contW {position:relative; height:2100px; padding-bottom:100px;}
.storyWrap .contW:before {content:''; position:absolute; top:0; left:0; z-index:1; width:100%; height:1809px; background:url(images/stBg01.png) no-repeat 50% 0/cover;}
.storyWrap .contW .history {overflow:hidden; position:relative; z-index:5; height:460px; padding:100px 0 60px 0; opacity:0; transform:translateY(150px);}
.storyWrap .history li {float:left; width:580px; height:460px; padding-top:20px; box-sizing:border-box; transform:scale(0.8); transition:all 0.4s; opacity:0.2;}
.storyWrap .history li.swiper-slide-active {transform:scale(1); opacity:1;}
.storyWrap .history li img {width:100%;}
.storyWrap .history .box {position:absolute; top:150px; left:50%; width:580px; height:400px; margin-left:-290px; border-radius:20px; box-shadow:0 0 40px 0 rgba(0, 0, 0, 0.1); background:#ffffff;}
.storyWrap .contW .img {width:580px; height:400px; padding:20px; box-sizing:border-box; border-radius:20px; box-shadow:0 0 40px 0 rgba(0, 0, 0, 0.1); background:#ffffff;}
.storyWrap .history li.swiper-slide-active {width:580px; height:400px; padding:20px; box-sizing:border-box;}
.storyWrap .contW .tit {padding-bottom:15px; font-size:20px; line-height:1.6em; color:#000000; font-weight:700;}
.storyWrap .contW .history .tit {width:580px; margin:0 auto;}
.storyWrap .img {display:inline-block;}
.storyWrap .img img {width:100%;}
.storyWrap .footPrint {position:relative; z-index:5; padding:0 0 50px 28%; opacity:0; transform:translateY(150px);}
.storyWrap .kukLife {position:relative; z-index:5; padding:0 0 0 0; opacity:0; transform:translateY(150px);}
.storyWrap .mobileV {position:relative; z-index:5; margin-top:-80px; padding:0 0 0 50%; opacity:0; transform:translateY(150px);}
.storyWrap .mobileV .tit, .storyWrap .kukLife .tit {width:580px; text-align:center;}
.storyWrap .mobileV .img {width:285px; height:531px; margin-left:5%; padding:15px; border-radius:40px;}
.storyWrap .mobileV .tit + .img {margin-left:0;}

.pcConWrap {position:relative; z-index:1; background:#f3faf9; *zoom:1;}
.pcConWrap:after {content:''; display:block; clear:both;}
.pcConWrap .title .tit {width:15%;}
.pcConWrap .title .desc {width:52%; font-size:22px; line-height:1.6em;}
.pcConWrap .title .desc strong {display:block; margin:-20px 0 20px 0; font-size:70px; line-height:1.3em; font-weight:700;}
.pcConWrap img {width:100%;}
.pcConWrap .left {display:block; position:relative; width:650px; height:436px; padding:20px; box-sizing:border-box; opacity:0; transform:translateY(80px);}
.pcConWrap .left .box {display:block; position:relative; z-index:2;}
.pcConWrap .left .bg {position:absolute; top:0; left:0; z-index:1; width:650px; height:436px; border-radius:20px; box-sizing:border-box; box-shadow: 8px 8px 90px 0 rgba(0, 0, 0, 0.1); background:#ffffff;}
.pcConWrap .right {width:45.5%; max-height:1700px;  opacity:0; transform:translateY(80px);}
.pcConWrap .right img {margin-bottom:70px; box-shadow: 8px 8px 90px 0 rgba(0, 0, 0, 0.1);}

.mConWrap {position:relative; z-index:2; min-height:1700px; padding-top:200px;}
.mConWrap .cir {position:absolute; top:50%; left:50%; z-index:1; width:1060px; height:1060px; margin:-530px 0 0 -530px; border-radius:100%; opacity:0; transform:scale(0.7); background:#f3faf9;}

.mConWrap .inner {position:relative; z-index:2;}
.mConWrap .tit {font-size:70px; line-height:1.3em; color:#000000; font-family:sans-serif; font-weight:bold;}
.mConWrap .desc {margin-top:20px; width:51%; padding-bottom:100px; font-size:22px; line-height:1.6em;}
.mConWrap .boxW {*zoom:1;}
.mConWrap .boxW:after {content:''; display:block; clear:both;}
.mConWrap .boxW .box {float:left; width:29.333%; margin-right:5.5%; padding:17px 19px 17px 20px; text-align:center; border-radius:44px; box-sizing:border-box; box-shadow:7px 7.1px 120px 0 rgba(0, 0, 0, 0.12); background:#eceff5;}
.mConWrap .boxW .left {height:708px; box-shadow:7px 7.1px 120px 0 rgba(0, 0, 0, 0.12); opacity:0; transform:translateY(80px);}
.mConWrap .boxW .left img {border-bottom-left-radius:44px; border-bottom-right-radius:44px;}
.mConWrap .boxW .mid {float:left; width:29.333%; margin:200px 5.5% 0 0; opacity:0; transform:translateY(80px);}
.mConWrap .boxW .mid .box {width:100%; max-width:378px; margin-right:0;}
.mConWrap .boxW .mid .box + .box {margin-top:80px;}
.mConWrap .boxW .right {float:left; width:29.333%; padding:0; margin-right:0; opacity:0; transform:translateY(80px);}
.mConWrap .boxW .right img {margin-bottom:70px; box-shadow:7px 7.1px 120px 0 rgba(0, 0, 0, 0.12);}
.mConWrap img {width:100%;}

/* tablet */
@media screen and (min-width:768px) and (max-width:1199px){
	.visualWrap .txtWrap .tit .animateTxt01 {font-size:50px;}
	.visualWrap .txtWrap .tit .animateTxt02 {font-size:62px;}

	.title {padding:100px 0 30px 0;}
	.title .tit {font-size:24px; line-height:1.3em;}
	.title .desc {font-size:24px;}

	.title02 {padding-left:80px;}
	.title02 .tag {padding-top:100px;}
	.title02 .num {width:60px; height:60px; margin-top:5px; font-size:42px; line-height:60px;}
	.title02 .tit {font-size:46px;}
	.title02 .desc {font-size:18px;}

	.overWrap .list li:before {width:100px; height:100px;}
	.overWrap .list li .tit {font-size:25px;}
	.overWrap .list li .tag {font-size:14px;}
	.overWrap .list {padding-bottom:80px;}
	
	.impWrap01 .title02 .num {top:193px;}
	.impWrap01 .visualWrap {height:700px; font-size:14px;}
	.impWrap01 .visualWrap .right .con01 {height:350px; padding:30px;}
	.impWrap01 .visualWrap .right .con04 {height:350px;}
	.impWrap01 .visualWrap .right .con02, .impWrap01 .visualWrap .right .con03 {height:175px; padding:30px;}
	.impWrap02 {padding-top:100px;}
	.impWrap02 .title02 .desc {width:43%;}
	.impWrap02 .imgW {height:auto;}
	.impWrap02 .left {position:relative; margin:0 auto;}
	.impWrap02 .right {position:relative; width:100%; margin-top:40px;}
	.impWrap02 .right li img {width:128%;}

	.impWrap03 .title02 .desc {width:100%;}

	.storyWrap .title .tit {width:29%;}
	.storyWrap .title .desc {width:71%;}
	.storyWrap .contW .tit {margin:0 auto; text-align:center; text-shadow:7px 7px 20px rgba(0, 0, 0, 0.3);}
	.storyWrap .contW {height:auto; padding-bottom:80px;}
	.storyWrap .title .desc {font-size:18px;}
	.storyWrap .title .desc strong {margin-top:-10px; font-size:40px;}
	.storyWrap .footPrint {width:580px; margin:0 auto; padding-left:0;}
	.storyWrap .kukLife {width:580px; margin:0 auto;}
	.storyWrap .mobileV {width:700px; margin:50px auto 0 auto; padding-left:0; text-align:center;}
	.storyWrap .mobileV .img {margin-left:5%;}
	.storyWrap .contW:before {background-position:50% 50%;}

	.pcConWrap .title .desc {width:80%;}
	.pcConWrap .title .tit {width:15%;}
	.pcConWrap .title {padding-bottom:70px;}
	.pcConWrap .left {height:auto; margin:0 auto;}
	.pcConWrap .right {width:610px; max-height:auto; margin:50px auto 0 auto;}

	.mConWrap {padding-top:240px;}
	.mConWrap .cir {width:600px; height:600px; margin:-300px 0 0 -300px;}
	.mConWrap:before {width:600px; height:600px; margin-top:-300px;}
	.mConWrap .desc {width:70%;}

}
@media screen and (min-width:1200px) and (max-width:1400px){
	body .title {padding:100px 0 40px 0;}

	.title02 {padding-left:80px;}
	.title02 .tag {padding-top:100px;}
	.title02 .num {width:60px; height:60px; margin-top:5px; font-size:42px; line-height:60px;}
	.title02 .tit {font-size:50px;}
	.title02 .desc {font-size:18px;}

	.overWrap .list {min-width:768px; margin:0 auto; padding-bottom:100px;}
	.overWrap .list li .tag {font-size:18px;}
	.overWrap .list li .tit {font-size:30px;}
	.overWrap .list li .txt {font-size:16px;}
	.impWrap01 .title02 .num {top:193px;}
	.impWrap02 {padding-top:100px;}
	.impWrap02 .title02 .desc {width:43%;}
	.impWrap02 .imgW {height:565px; margin-left:7%;}
	.impWrap02 .left {width:300px; height:558px;}
	.impWrap02 .right {/*width:900px;*/width:60%; height:748px;}

	.impWrap03 .title02 .desc {width:75%;}

	.storyWrap .title .desc {font-size:18px;}
	.storyWrap .title .desc strong {margin-top:0; font-size:50px;}

	.pcConWrap .title .tit {width:15%;}
	.pcConWrap .title .desc {font-size:18px;}
	.pcConWrap .title .desc strong {margin-top:0; font-size:50px;}
	.pcConWrap .left {float:left; width:48%;}
	.pcConWrap .left .bg {width:100%;}
	.pcConWrap .right {float:right; width:48%;}

	.mConWrap {padding-top:130px;}
	.mConWrap .tit {font-size:50px;}
	.mConWrap .desc {font-size:18px;}
	.mConWrap .boxW .box {width:27.333%; margin-right:7.5%;}
	.mConWrap .boxW .mid {width:27.333%; margin-right:7.5%;}
	.mConWrap .boxW .right {width:27.333%;}
}

@media screen and (min-width:1401px) and (max-width:1600px){
	.inner {width:1360px; margin:0 auto;}
	.impWrap02 .right {bottom:100px; width:65%; height:860px;}
	.impWrap02 .title02 .desc {width:40%;}
	.impWrap03 .title02 .desc {width:75%;}

	.pcConWrap .left {float:left;}
	.pcConWrap .right {float:right;}
	.mConWrap img {max-width:339px;}
}
@media screen and (min-width:1601px){
	.inner {width:1360px; margin:0 auto;}
	.pcConWrap .left {float:left;}
	.pcConWrap .right {float:right;}
	.storyWrap .contW:before {background-position:81% 0;}
	/* .mConWrap img {max-width:339px;} */
}

@media screen and (max-width:767px){
	html,body {font-size:16px;}
	.inner {width:100%;padding-right:20px;padding-left:20px;}
	.visualWrap {height:844px;}
	.visualWrap video {left:0;width:100%;min-width:0;height:100%;object-fit:cover;transform:none;}
	.visualWrap .txtWrap {top:245px;left:0;width:100%;margin-left:0;padding:0 20px;box-sizing:border-box;}
	.visualWrap .txtWrap .tit .animateTxt01 {font-size:38px;}
	.visualWrap .txtWrap .tit .animateTxt02 {font-size:48px;}
	.visualWrap .txt01 {left:50%;max-width:90%;margin-left:0;transform:translateX(-50%);}
	.title,.title02 {padding-right:0;padding-left:0;}
	.title .tit,.title .desc {float:none;width:100%;padding-left:0;}
	.title .desc {margin-top:24px;font-size:20px;}
	.title02 .tag {padding-top:80px;font-size:22px;}
	.title02 .num {position:relative;width:56px;height:48px;font-size:38px;line-height:48px;}
	.title02 .tit {display:block;margin-top:20px;font-size:42px;}
	.title02 .desc {font-size:17px;}
	.overWrap .list li {float:none;width:100%;min-height:0;margin:24px 0 0;}
	.impWrap01 .visualWrap {height:auto;}
	.impWrap01 .title02 .tag {margin-left:0;}
	.impWrap01 .visualWrap .bg {transform:none;}
	.impWrap01 .visualWrap .left,.impWrap01 .visualWrap .right {position:relative;float:none;width:100%;height:520px;margin-left:0;}
	.impWrap02 .imgW {height:auto;}
	.impWrap02 .left,.impWrap02 .right {position:relative;top:auto;right:auto;bottom:auto;left:auto;width:100%;height:auto;padding:20px;}
	.impWrap03 .left,.impWrap03 .right {float:none;width:100%;height:420px;}
	.impWrap03 .left video {width:100%;height:100%;object-fit:cover;}
	.storyWrap .history li,.storyWrap .contW .img,.storyWrap .history .box {max-width:100%;}
	.storyWrap .mobileV .tit,.storyWrap .kukLife .tit {width:100%;}
	.pcConWrap .left,.pcConWrap .right {box-sizing:border-box;width:100%;height:auto;}
	.pcConWrap .left .bg {width:100%;height:100%;}
	.mConWrap .cir {width:340px;height:340px;margin:-170px 0 0 -170px;}
	.mConWrap .boxW .box,.mConWrap .boxW .mid,.mConWrap .boxW .right {float:none;width:100%;height:auto;margin:30px 0;}
	img,video {max-width:100%;height:auto;}
	#wrap,#container,#PF005 {overflow-x:clip;}
}

/* animation */
.anim {
	-webkit-transition: -webkit-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms ease-out;
	-moz-transition: -moz-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms ease-out;
	-ms-transition: -ms-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms ease-out;
	-o-transition: -o-transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms ease-out;
	transition: transform 800ms cubic-bezier(0.215, 0.61, 0.355, 1), opacity 800ms ease-out;
	opacity: 1 !important;
	-webkit-transform: translate(0, 0) scale(1, 1) !important;
	-moz-transform: translate(0, 0) scale(1, 1) !important;
	-ms-transform: translate(0, 0) scale(1, 1) !important;
	-o-transform: translate(0, 0) scale(1, 1) !important;
	transform: translate(0, 0) scale(1, 1) !important;
  }
.anim.delay-200 {
	-webkit-transition-delay: 200ms !important;
	-moz-transition-delay: 200ms !important;
	-ms-transition-delay: 200ms !important;
	-o-transition-delay: 200ms !important;
	transition-delay: 200ms !important;
  }