@charset"utf-8";

/* Eric Meyer reset.css */
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed, 
figure,figcaption,footer,header,hgroup, 
menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0; padding:0; border:0 none; vertical-align:middle; font-size:14px; font-family:"nanum","돋움",sans-serif; color:#606060; line-height:1; font-weight:normal;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:""; content:none;}
table{border-collapse:collapse; border-spacing:0; width:100%; table-layout:fixed;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

span,em,i,strong,sup{font-size:inherit; font-family:inherit; color:inherit; line-height:inherit; vertical-align:baseline; font-weight:inherit;}

/* font */
@font-face {
     font-family : "SpoqaHanB";
	 src :url(../../inc/fonts/SpoqaHanSansBold.woff) format('woff');
}

@font-face {
     font-family : "SpoqaHanL";
	 src :url(../../inc/fonts/SpoqaHanSansThin.woff) format('woff');
}

@font-face {
     font-family : "SpoqaHan";
	 src :url(../../inc/fonts/SpoqaHanSansRegular.woff) format('woff');
}

/* 애니메이션 */
@keyframes leftGo {
  0% {left:-80px; opacity:0;}
  80% {left:20px; opacity:1;}
  100% {left:0; opacity:1;}
}

@keyframes rightGo {
  0% {right:-80px; opacity:0;}
  80% {right:20px; opacity:1;}
  100% {right:0; opacity:1;}
}

@keyframes bottomGo {
  0% {bottom:-80px; opacity:0;}
  80% {bottom:20px; opacity:1;}
  100% {bottom:0; opacity:1;}
}

@keyframes topGo {
  0% {top:-80px; opacity:0;}
  80% {top:20px; opacity:1;}
  100% {top:0; opacity:1;}
}

@keyframes sizeGo {
  0% {transform: scale(0); opacity:0;}
  80% {transform: scale(1.2); opacity:1;}
  100% {transform: scale(1); opacity:1;}
}


/* basic */
htm,body{font-size:10.66px}
.wrap{min-width:min(1480px, 100%); margin:auto;}
.wrap *{font-family:"SpoqaHan","돋움",sans-serif; text-align:center; }
.header{position:relative; padding-top:366px; height:1000px; background:url(image/head_bg.optimized.webp) no-repeat center center; box-sizing:border-box;}
.header h1{opacity:0; font-family:"SpoqaHanB","돋움",sans-serif; font-size:90px; line-height:110px; color:#fff;}
.header p{opacity:0; padding-top:80px; font-family:"SpoqaHanL","돋움",sans-serif; font-size:24px; line-height:1.5; color:#fff;}

.ies-key-animation {position:absolute; top:214px; left:50%; margin-left:-92px;}
.ies-key-animation:after{content:""; position:absolute; z-index:4;  top:-12px; left:50%; margin-left:-47px; width:94px; height:10px; background:#4d5068;}
.ies-key-animation .bx-bill {position:relative;width:4rem;height:1rem;margin:0 auto;border-radius:.5rem}
.ies-key-animation .bx-bill:before {z-index:30;content:'';position:absolute;top:-192px;left:50%; margin-left:-60px; width:120px;height:180px;background:url(image/head_bg_cut.png) no-repeat center center;}
.ies-key-animation .bx-bill:after {z-index:20;content:'';position:absolute;  z-index:2; top:-12px;left:50%; margin-left:-60px; width:120px; height:24px;background:#4d5068;border-radius:12px;}
.ies-key-animation .bx-bill .img-bill {
	z-index:10;position:absolute; z-index:3; top:0;left:50%;display:block;width:93px; height:126px;margin-left:-46px;
	-webkit-animation-name: billani;
	animation-name: billani;
	-webkit-animation-duration: 4.5s;
	animation-duration: 4.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.ies-key-animation .bx-fire {position:relative;width:184px;height:83px;
	-webkit-animation-name: fireAni02;
	animation-name: fireAni02;
	-webkit-animation-duration: 4.5s;
	animation-duration: 4.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function:ease;
	animation-timing-function:ease}
.ies-key-animation .bx-fire .img-fire {
	z-index:10;position:absolute;right:0;left:0;display:block;width:100%;margin:auto;-webkit-transform:scale(0);transform:scale(0);
	-webkit-animation-name: fireAni01;
	animation-name: fireAni01;
	-webkit-animation-duration: 4.5s;
	animation-duration: 4.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1);
	animation-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1)
}

.pfm_panel_nochart .ies-key-animation {top:2.5rem;padding:0 1.1rem;width:12rem;height:7.1rem;overflow:hidden}
.pfm_panel_nochart .ies-key-animation .bx-bill {width:6.2rem;height:1rem;}
.pfm_panel_nochart .ies-key-animation .bx-bill .img-bill {width:4.8rem;}
.pfm_panel_nochart .ies-key-animation .bx-fire {margin-top:.5rem;width:9.8rem;height:4.4rem}

@keyframes billani {
	0% {transform:translateY(-120%);-webkit-transform:translateY(-120%)}
	20%, 25% {transform:translateY(-70%);-webkit-transform:translateY(-70%)}
	30%, 36% {transform:translateY(-45%);-webkit-transform:translateY(-45%)}
	50%, to {transform:translateY(0);-webkit-transform:translateY(0)}
}


@keyframes fireAni01 {
	0%, 49% {-webkit-transform:scale(0);transform:scale(0)}
	54%, 58% {-webkit-transform:scale(1);transform:scale(1);animation-timing-function:linear;-webkit-animation-timing-function:linear}
	80%, to {-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes fireAni02 {
	0%, 54% {opacity:1}
	56% {opacity:.2}
	58% {opacity:1}
	60% {opacity:.2}
	62% {opacity:1}
	64% {opacity:.2}
	68%, to {opacity:1}
}

/* scene1 */
.scene1{position:relative; padding-top:160px; height:875px; background:#fff; box-sizing:border-box;}
.scene1:before,
.scene1:after{content:""; display:block; position:absolute; top:275px; left:50%; width:420px; height:420px; margin-left:100px; border-radius:210px; box-sizing:border-box; border:1px solid #f0a43b;}
.scene1:after{margin-left:-520px;}
.scene1 h2{font-family:"SpoqaHanB","돋움",sans-serif; font-size:45px; color:#f28236;}
.scene1 ul{position:relative; z-index:2; padding-top:60px; text-align:center;}
.scene1 ul li{display:inline-block; opacity:0;}
.scene1 ul li > div{width:300px; height:300px; border-radius:150px; background-image: linear-gradient(151deg, #ffca64 12%, #ed9b00 103%); margin:auto; box-shadow: none;}
.scene1 ul li.center > div{width:440px; height:440px; margin:0 150px; border-radius:220px; background-image: linear-gradient(151deg, #faae1e 11%, #e65000 98%); }
.scene1 ul li > div strong{display:block; padding:84px 0 30px 0; font-family:"SpoqaHanB","돋움",sans-serif; font-size:30px; color:#fff; font-weight:normal;}
.scene1 ul li.center > div strong{padding:150px 0 35px 0; }
.scene1 ul li > div p{font-size:26px; line-height:1.5; color:#fff;}

/* scene2 */
@keyframes ani100per {
  0% {transform: scale(0.68);}
  100% {transform: scale(1);}
}

@keyframes ani100per2 {
  0% {transform: scale(1);}
  100% {transform: scale(0.68);}
}

.scene2{position:relative; padding-top:210px; height:1555px; background:#2d3039; box-sizing:border-box;}
.scene2:before{content:""; display:block; position:absolute; top:585px; left:50%; width:690px; height:690px; margin-left:-345px; border-radius:345px; background:#f08023;}
.scene2 h2{font-family:"SpoqaHanB","돋움",sans-serif; font-size:45px; color:#f28236;}
.scene2 p{padding:50px 0 60px 0; font-size:30px; line-height:44px; color:#fff;}
.scene2 .swiper-slide{position:relative; width:530px!important; transform: scale(0.68);  transform-origin:center center;} 
.scene2 .swiper-slide.swiper-slide-active{animation:ani100per 0.3s ease-in forwards;}
.scene2 .swiper-slide.swiper-slide-prev{animation:ani100per2 0.3s ease-in forwards;}
.scene2 .swiper-slide .icn1{position:absolute; top:420px; left:50%; margin-left:-135px;}
.scene2 .swiper-slide .icn2{position:absolute; top:400px; left:82px;}
.scene2 .swiper-slide .icn2 img{width:115px; height:115px;}
.scene2 .swiper-slide .icn3{position:absolute; top:250px; left:50%; margin-left:-132px;}
.scene2 .swiper-slide .icn3 img{width:265px;}
.scene2 .swiper-slide .icn4{position:absolute; top:330px; left:50%; margin-left:-150px;}

.fin-key-animation {position:absolute;top:180px;right:100px;width:10rem;height:8rem}
.fin-key-animation [class^="bx-"] {z-index:20;position:absolute;left:0;right:0}
.fin-key-animation [class^="bx-"] span {display:block;margin:auto}
.fin-key-animation .bx-shadow {
	z-index:10;bottom:0;left:0;right:0;width:6rem;height:0.8rem;margin:auto;border-radius:50%;background:#4d5068;
	-webkit-animation-name:shadowani;
	animation-name:shadowani;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@keyframes shadowani {
	0% {opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}
	1%,9%,22%,35% {opacity:0.4;-webkit-transform:scaleX(0.8);transform:scaleX(0.8)}
	3%,16%,29%,41% {opacity:1;-webkit-transform:scaleX(0.6);transform:scaleX(0.6)}
	45%, to {opacity:0.8;-webkit-transform:scaleX(0.8);transform:scaleX(0.8)}
}
.fin-key-animation .bx-circle {-webkit-transform:translateY(0);transform:translateY(0);
	-webkit-animation-name:circleani;
	animation-name:circleani;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@keyframes circleani {
	0% {visibility:hidden;-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29);animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29)}
	1% {visibility:visible;}
	4% {-webkit-transform:translateY(4rem);transform:translateY(4rem)}
	8% {-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29);animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29)}
	14%, to {visibility:hidden;-webkit-transform:translateY(1rem);transform:translateY(1rem)}
}
.fin-key-animation .circle {width:48px;height:48px;border-radius:50%;background:#fae100;background-size:60%}
.fin-key-animation .bx-square {
	-webkit-animation-name:squareani;
	animation-name:squareani;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
.fin-key-animation .square {width:3.2rem;height:3.2rem;border-radius:0.5rem;background:#ff7f7f}
@keyframes squareani {
	0%, 14% {visibility:hidden;-webkit-transform:translateY(2rem) rotate(20deg);transform:translateY(2rem) rotate(20deg)}
	15% {visibility:visible}
	16% {-webkit-transform:translateY(4rem) rotate(40deg);transform:translateY(4rem) rotate(40deg)}
	21% {-webkit-transform:translateY(0) rotate(60deg);transform:translateY(0) rotate(60deg);-webkit-animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29);animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29)}
	27%, to {visibility:hidden;-webkit-transform:translateY(3rem) rotate(90deg);transform:translateY(3rem) rotate(90deg)}
}
.fin-key-animation .bx-triangle {
	-webkit-animation-name:triangleani;
	animation-name:triangleani;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.fin-key-animation .triangle{ width: 0px; height: 0px; border-bottom: calc( 30px * 1.732 ) solid #32d3ab; border-left: 30px solid transparent; border-right: 30px solid transparent; }
/*
.fin-key-animation .triangle,
.fin-key-animation .triangle:before,
.fin-key-animation .triangle:after {width:2.2rem;height:2.2rem;border-top-right-radius:30%}
.fin-key-animation .triangle {position:relative;background:#32d3ab;-webkit-transform:rotate(-60deg) skewX(-30deg) scale(1,.866);transform:rotate(-60deg) skewX(-30deg) scale(1,.866)}
.fin-key-animation .triangle:before {content: '';position:absolute;background-color:inherit;-webkit-transform:rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);transform:rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%)}
.fin-key-animation .triangle:after {content: '';position:absolute;background-color:inherit;-webkit-transform:rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);transform:rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%)}
*/
@keyframes triangleani {
	0%, 27% {visibility:hidden;-webkit-transform:translateY(3.6rem) rotate(10deg);transform:translateY(3.6rem) rotate(10deg)}
	28% {visibility:visible}
	28% {-webkit-transform:translateY(4rem) rotate(25deg);transform:translateY(4rem) rotate(25deg)}
	35% {-webkit-transform:translateY(.5rem) rotate(45deg);transform:translateY(.5rem) rotate(45deg);-webkit-animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29);animation-timing-function: cubic-bezier(0.29, 0.15, 0.75, 0.29)}
	40%, to {visibility:hidden;-webkit-transform:translateY(3rem) rotate(60deg);transform:translateY(3rem) rotate(60deg)}
}
.fin-key-animation .bx-shape {height:100%}
.fin-key-animation .bx-shape .circle {
	z-index:30;position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:center;;
	-webkit-animation-name:smlcircle;
	animation-name:smlcircle;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	animation-timing-function:cubic-bezier(0.15, 0.29, 0.29, 0.75);
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
.fin-key-animation .bx-shape .circle img {
	display:block;width:30px; height:16px;
	-webkit-animation-name:wonani;
	animation-name:wonani;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:ease-in;
	animation-timing-function:ease-in;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
.fin-key-animation .bx-shape .square {
	opacity:0;position:absolute;top:53%;left:35%;
	-webkit-animation-name:smlsquare;
	animation-name:smlsquare;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
.fin-key-animation .bx-shape .sml-triangle {
	opacity:0;position:absolute;top:60%;left:20%;right:0;
	-webkit-animation-name:smltriangle;
	animation-name:smltriangle;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
.fin-key-animation .bx-shape .sml-triangle .triangle {margin:initial}
@keyframes smlcircle {
	0%, 40% {visibility:hidden}
	41% {visibility:visible;top:42%;-webkit-transform:scale(0.2);transform:scale(0.2)}
	47% {top:29%;-webkit-transform:scale(1.5);transform:scale(1.5)}
	53% ,to {top:31%;-webkit-transform:scale(1.3);transform:scale(1.3)}
}
@keyframes smlsquare {
	0%, 40% {visibility:hidden}
	41% {opacity:1;visibility:visible;-webkit-transform:translate(0,0) scale(0.7) rotate(30deg);transform:translate(0,0) scale(0.7) rotate(30deg)}
	50% {-webkit-transform:translate(75%,-50%) scale(0.7) rotate(60deg);transform:translate(75%,-50%) scale(0.7) rotate(60deg)}
	55% {-webkit-transform:translate(75%,-50%) scale(0.7) rotate(75deg);transform:translate(75%,-50%) scale(0.7) rotate(75deg)}
	to {opacity:1;visibility:hidden;-webkit-transform:translate(75%,-50%) scale(0.7) rotate(75deg);transform:translate(75%,-50%) scale(0.7) rotate(75deg)}
}
@keyframes smltriangle {
	0%, 40% {visibility:hidden;-webkit-transform:translate(0,0) rotate(40deg);transform:translate(0,0) rotate(40deg)}
	41% {opacity:1;visibility:visible;-webkit-transform:translate(0,0) rotate(40deg);transform:translate(0,0) rotate(40deg)}
	50% {-webkit-transform:translate(-10%,-100%) rotate(20deg);transform:translate(-10%,-100%) rotate(20deg)}
	55% {-webkit-transform:translate(-10%,-100%) rotate(10deg);transform:translate(-10%,-100%) rotate(10deg)}
	to {opacity:1;visibility:hidden;-webkit-transform:translate(-10%,-100%) rotate(10deg);transform:translate(-10%,-100%) rotate(10deg)}
}
@keyframes wonani {
	0%, 40% {-webkit-transform:scale(0);transform:scale(0)}
	44% {-webkit-transform:scale(1.2);transform:scale(1.2)}
	50% {-webkit-transform:scale(0.7);transform:scale(0.7)}
	54%, to {-webkit-transform:scale(1);transform:scale(1)}
}
.fin-key-animation .bx-fire {height:100%}
.fin-key-animation .bx-fire .circle {
	position:absolute;top:50%;left:50%;background:#fae100;
	-webkit-animation-name:circlefire;
	animation-name:circlefire;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@keyframes circlefire {
	0%, 42% {opacity:0;-webkit-transform:translate(0,0) scale(0.2);transform:translate(0,0) scale(0.2)}
	47% {opacity:1;-webkit-transform:translate(2.5rem,-2rem) scale(0.2);transform:translate(2.5rem,-2rem) scale(0.2)}
	50% {opacity:0.2;-webkit-transform:translate(3rem,-2.4rem) scale(0.2);transform:translate(3rem,-2.4rem) scale(0.2)}
	51%, to {opacity:0;-webkit-transform:translate(3rem,-2.4rem) scale(0.2);transform:translate(3rem,-2.4rem) scale(0.2)}
}
.fin-key-animation .bx-fire .sml-triangle {
	position:absolute;top:50%;left:50%;
	-webkit-animation-name:trianglefire;
	animation-name:trianglefire;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@keyframes trianglefire {
	0%, 42% {opacity:0;-webkit-transform:translate(0,0) scale(0.2);transform:translate(0,0) scale(0.2)}
	47% {opacity:1;-webkit-transform:translate(-5.5rem,-3.5rem) scale(0.2);transform:translate(-5.5rem,-3.5rem) scale(0.2)}
	50% {opacity:0.2;-webkit-transform:translate(-6rem,-4rem) scale(0.2);transform:translate(-6rem,-4rem) scale(0.2)}
	51%, to {opacity:0;-webkit-transform:translate(-6rem,-4rem) scale(0.2);transform:translate(-6rem,-4rem) scale(0.2)}
}
.fin-key-animation .bx-fire .square {
	position:absolute;top:50%;left:50%;
	-webkit-animation-name:squarefire;
	animation-name:squarefire;
	-webkit-animation-duration:5s;
	animation-duration:5s;
	-webkit-animation-timing-function:ease-out;
	animation-timing-function:ease-out;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
@keyframes squarefire {
	0%, 42% {opacity:0;-webkit-transform:translate(0,0) scale(0.2);transform:translate(0,0) scale(0.2)}
	47% {opacity:1;-webkit-transform:translate(-7rem,-0.5rem) scale(0.2);transform:translate(-7rem,-0.5rem) scale(0.2)}
	50% {opacity:0.2;-webkit-transform:translate(-7.5rem,-0.8rem) scale(0.2);transform:translate(-7.5rem,-0.8rem) scale(0.2)}
	51%, to {opacity:0;-webkit-transform:translate(-7.5rem,-0.8rem) scale(0.2);transform:translate(-7.5rem,-0.8rem) scale(0.2)}
}
.fin-animation-menu {position:relative;height:22rem;padding:6rem 0}
.fin-animation-menu .menu-list {
	font-size:0;position:absolute;white-space:nowrap;
	-webkit-animation-name:rolling;
	animation-name:rolling;
	-webkit-animation-duration:10s;
	animation-duration:10s;
	-webkit-animation-timing-function:linear;
	animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
.fin-animation-menu .clone-list {
	font-size:0;position:absolute;white-space:nowrap;
	-webkit-animation-name:rolling2;
	animation-name:rolling2;
	-webkit-animation-duration:10s;
	animation-duration:10s;
	-webkit-animation-timing-function:linear;
	animation-timing-function:linear;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
@keyframes rolling {
	0% {-webkit-transform:translateX(0);transform:translateX(0)}
	100% {-webkit-transform:translateX(-100%);transform:translateX(-100%)}
}
@keyframes rolling2 {
	0% {-webkit-transform:translateX(100%);transform:translateX(100%)}
	100% {-webkit-transform:translateX(0);transform:translateX(0)}
}

/* scene3 */
.scene3{position:relative; padding-top:210px; height:2145px; background:#22242B; box-sizing:border-box; background:#22242B url(image/scene3_bg.png) no-repeat center center;}
.scene3 h2{opacity:0; font-family:"SpoqaHanB","돋움",sans-serif; font-size:45px; color:#f28236;}
.scene3 p{opacity:0; padding:50px 0 60px 0; font-size:30px; line-height:44px; color:#fff;}
.scene3 ul{text-align:center;}
.scene3 ul li{opacity:0; position:relative; display:inline-block; margin:0 43px;}
.scene3 ul li:first-child{margin-left:0;}
.scene3 ul li:last-child{margin-right:0;}
.scene3 ul.small li{padding-top:50px; margin:0 38px;}

.bx_tut_visual {position:Absolute; bottom:132px; left:50%; margin-left:-199px; width:28.4rem;height:33rem}
.bx-motion-cmatut {width:100%;height:100%}
.bx-motion-cmatut .motion-obj-wrap {display:block;position:relative;width:100%;height:100%}
.bx-motion-cmatut .obj-bg01 {display:block;position:relative;z-index:5;width:100%;height:100%;background:url('image/img_tut_bg.png') no-repeat left bottom;background-size:100% auto}
.bx-motion-cmatut [class^="obj-tri0"] {display:block;position:absolute;transform:translateY(150%);opacity:0;transition:1s;transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1);-webkit-transition-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1)}
.bx-motion-cmatut [class^="obj-tri0"] .tri {display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:100% auto}
.bx-motion-cmatut .obj-tri01 {z-index:2;top:2.7rem;left:1.1rem;width:11.2rem;height:9.9rem}
.bx-motion-cmatut .obj-tri01 .tri {background-image:url('image/img_tut_tri01.png')}
.bx-motion-cmatut .obj-tri02 {z-index:8;top:9.2rem;right:2.3rem;width:6.6rem;height:6rem;transition-delay:.3s}
.bx-motion-cmatut .obj-tri02 .tri {background-image:url('image/img_tut_tri02.png')}
.bx-motion-cmatut .obj-tri03 {top:.2rem;right:6.7rem;width:4.4rem;height:4.2rem;transition:.8s;transition-delay:.6s}
.bx-motion-cmatut .obj-tri03 .tri {background-image:url('image/img_tut_tri03.png')}
.bx-motion-cmatut .obj-count {display:block;position:absolute;z-index:10;bottom:2.4rem;left:50%;width:23rem;line-height:8rem;transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%)}
.bx-motion-cmatut .counting_num {position:relative; top:-14px; padding-left:2.2rem;font-size:4.5rem;color:#fff;letter-spacing:5.5rem;font-weight:700;white-space:nowrap}
.bx-motion-cmatut .counting_num span {display:inline-flex;justify-content:center;align-items:center;width:7rem;height:9rem;text-align:center; font-family:sans-serif; letter-spacing:normal; color:#fff; font-size:60px; font-style:normal;}
.bx-motion-cmatut .counting_num span:first-child {margin-left:-2.2rem}
.bx-motion-cmatut .counting_num span + span {margin-left:1rem}
.bx_tut_visual.is_active .bx-motion-cmatut [class^="obj-tri0"] {transform:translateY(0);opacity:1}

.pfm_join_swiper .pfm_msg_motion .mot01 {transition:all 1s;transform:translateX(30px);opacity:0}
.pfm_join_swiper .pfm_msg_motion .mot02 {transition:all 1s 0.3s;transform:translateX(20px);opacity:0}
.pfm_join_swiper .pfm_msg_motion .pfm_slide_img {transition:all 1s 0.4s;transform:translateX(-45px);opacity:0}
.pfm_join_swiper .pfm_msg_motion.is_active * {transform:translateX(0);opacity:1}

.pfm_join_swiper .pfm_slide_desc .pfm_desc_label {transition:all 1s;transform:translateX(40px);opacity:0}
.pfm_join_swiper .pfm_slide_desc .pfm_desc_wrap {transition:all 1s 0.2s;transform:translateX(40px);opacity:0}
.pfm_join_swiper .pfm_slide_desc .pfm_desc_text {transition:all 1s 0.4s;transform:translateX(40px);opacity:0}
.pfm_join_swiper .pfm_slide_desc.is_active [class^="pfm_desc_"] {transform:translateX(0);opacity:1}
.pfm_join_swiper .pfm_slide_desc.is_active .pfm_desc_text .emp {animation:keywordAni 1s 0.75s both}
@keyframes keywordAni {
	0% {opacity:0.5;transform:scale(0.8)}
	50% {transform:scale(1.03)}
	100% {opacity:1;transform:scale(1)}
}

.pfm_slide_chart {position:absolute;left:0;right:0;bottom:0;width:100%;height:58%}
.pfm_slide_chart .highcharts-background {fill:transparent}


.slide_panel_fin .pfm_slide_chart {overflow:hidden;height:auto}
.pfm_slide_chart .bx_triangle {height:17.6rem;padding-top:1rem}
.pfm_slide_chart .bx_triangle .bx_triangle_inner {display:flex;justify-content:center;height:100%}
.pfm_slide_chart .bx_triangle .bx_triangle_inner li {position:relative;top:100%;width:34.29%}
.pfm_slide_chart .bx_triangle .bx_triangle_inner li.is_active {top:0;transition:all 1s}
.pfm_slide_chart .bx_triangle .bx_triangle_inner li ~ li {margin-left:-3rem}
.pfm_slide_chart .bx_triangle .bx_triangle_inner .triangle {bottom:0;width:100%;height:100%;opacity:0.3;transition:all 0.7s 0.5s}
.pfm_slide_chart .bx_triangle .bx_triangle_inner .is_active .triangle {opacity:0.75}
.pfm_slide_chart .bx_triangle .bx_triangle_inner .month {opacity:0;transition:all 1s}
.pfm_slide_chart .bx_triangle .bx_triangle_inner .is_active .month {position:absolute;top:0;left:0;right:0;display:block;font-size:1.3rem;line-height:1;opacity:1;text-align:center;animation:opacityAni 0.7s 0.2s both}
@keyframes opacityAni {
	0% {opacity:0}
	50% {opacity:0}
	100% {opacity:1}
}
.slide_panel_cma .pfm_slide_chart {height:auto;bottom:27%;width:100%}
.pfm_slide_chart .bx_circle {width:100%;height:5.75rem}
.pfm_slide_chart .bx_circle .bx_circle_inner {position:relative;height:100%}
.pfm_slide_chart .bx_circle.bx_len2 .bx_circle_inner {left:0;right:0;width:calc(100% - 4rem);margin:0 auto}
.pfm_slide_chart .bx_circle .bx_circle_inner li {z-index:10;position:absolute;border-radius:50%}
.pfm_slide_chart .bx_circle .bx_circle_inner .circle1 {left:-1rem}
.pfm_slide_chart .bx_circle .bx_circle_inner .circle2 {left:25%}
.pfm_slide_chart .bx_circle .bx_circle_inner .circle3 {right:-1rem}
.pfm_slide_chart .bx_circle.bx_len2 .circle2 {left:0}
.pfm_slide_chart .bx_circle.bx_len2 .circle3 {right:0}
.pfm_slide_chart .linecanvas {position:absolute;bottom:0;width:100%;height:5.75rem;opacity:0;transition:all .5s}
.pfm_slide_chart .linecanvas.is_active {opacity:1}
.pfm_slide_chart .bx_circle .bx_circle_inner.is_active .circle1 {width:6rem;height:6rem;background:linear-gradient(to bottom,#ffd16f 0%,#ffc000 100%);animation:circleAni 0.7s 0.25s both}
.pfm_slide_chart .bx_circle .bx_circle_inner.is_active .circle2 {width:7rem;height:7rem;background:linear-gradient(to bottom,#4880ed 0%,#5f8eeb 100%);animation:circleAni 0.7s 0.5s both}
.pfm_slide_chart .bx_circle .bx_circle_inner.is_active .circle3 {width:11.5rem;height:11.5rem;background:linear-gradient(to bottom,#9780e4 0%,#7c61d6 100%);animation:circleAni 0.7s 0.75s both}
@keyframes circleAni {
	0% {opacity:0;transform:scale(0.6)}
	50% {transform:scale(1.05)}
	100% {opacity:1;transform:scale(1)}
}
.pfm_slide_chart .bx_circle .bx_circle_inner .circle_info {position:absolute;top:38%;z-index:10;width:100%;height:100%;font-size:1.4rem;text-align:center;opacity:0;transition:all 4s}
.pfm_slide_chart .bx_circle .bx_circle_inner.is_active .circle_info {opacity:1}
.pfm_slide_chart .bx_circle .circle_info .month {display:block;font-size:1.2rem}
.pfm_slide_chart .bx_circle .circle_info .score {display:block;padding-bottom:40%;font-weight:500;font-size:1.2rem;color:#fff}
.pfm_slide_chart .bx_circle .circle_info .score em {display:inline-block;font-weight:700;line-height:1;vertical-align:-.1rem}
.pfm_slide_chart .bx_circle .is_active .circle1 .circle_info .score em {font-size:1.5rem}
.pfm_slide_chart .bx_circle .is_active .circle2 .circle_info .score em {font-size:1.8rem}
.pfm_slide_chart .bx_circle .is_active .circle3 .circle_info .score em {font-size:3rem}

.top_visual::before,
.top_visual::after {
	-webkit-animation-name:motionPoaRecomm01;
	animation-name:motionPoaRecomm01;
	-webkit-animation-duration:3s;
	animation-duration:3s;
	-webkit-animation-timing-function:ease-in-out;
	animation-timing-function:ease-in-out;
	-webkit-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.top_visual::after {
	-webkit-animation-name:motionPoaRecomm02;
	animation-name:motionPoaRecomm02;
}

@keyframes motionPoaRecomm01 {
	0% {transform:scale(.6)}
	50% {transform:scale(1)}
	100% {transform:scale(.6)}
}
@keyframes motionPoaRecomm02 {
	0% {transform:scale(1)}
	50% {transform:scale(.75)}
	100% {transform:scale(1)}
}

.top_visual{position:absolute; bottom:203px; left:50%; margin-left:-252px;width:36rem;height:30.8rem;background:url(image/img_poa_recomm_visual01.png) no-repeat center / 100% auto}
.top_visual::before,
.top_visual::after {content:"";display:block;position:absolute;left:50%;top:50%;background-repeat:no-repeat;background-size:100% auto;background-position:center}
.top_visual::before {z-index:5;margin:-3.2rem 0 0 -7.5rem;width:12.1rem;height:12.5rem;background-image:url(image/img_poa_recomm_visual02.png)}
.top_visual::after {margin:-8rem 0 0 -4.7rem;width:14.5rem;height:16.8rem;background-image:url(image/img_poa_recomm_visual03.png)}


/* 애니메이션 부여 */
.header.move h1{position:relative; animation:leftGo 0.5s ease-out forwards;}
.header.move p{position:relative; animation:rightGo 0.5s ease-out forwards;}

.scene1.move ul li:nth-child(1){position:relative; animation:sizeGo 0.5s ease-out forwards;}
.scene1.move ul li:nth-child(2){position:relative; animation:sizeGo 0.7s ease-out forwards;}
.scene1.move ul li:nth-child(3){position:relative; animation:sizeGo 0.8s ease-out forwards;}

.scene3.move h2{position:relative; animation:leftGo 0.5s ease-out forwards;}
.scene3.move > p{position:relative; animation:rightGo 0.5s ease-out forwards;}
.scene3.move ul.big li:nth-child(1){position:relative; animation:bottomGo 0.5s ease-out forwards;}
.scene3.move ul.big li:nth-child(2){position:relative; animation:bottomGo 0.7s ease-out forwards;}
.scene3.move ul.small.move li:nth-child(1){position:relative; animation:bottomGo 0.5s ease-out forwards;}
.scene3.move ul.small.move li:nth-child(2){position:relative; animation:bottomGo 0.7s ease-out forwards;}
.scene3.move ul.small.move li:nth-child(3){position:relative; animation:bottomGo 0.9s ease-out forwards;}
.scene3.move ul.small.move li:nth-child(4){position:relative; animation:bottomGo 1.2s ease-out forwards;}

@media all and (max-width:1024px){/*1024이하 모바일*/
	img{max-width:100%;}
	.wrap{min-width:360px; margin:auto; overflow:hidden;}
	.header{padding:256px 0 212px; height:auto; }
	.header h1{font-size:45px; line-height:60px;}
	.header p{padding-top:40px; font-size:15px; line-height:25px;}
	.ies-key-animation{top:130px; width:140px; height:100px; margin-left:-70px;}
	.ies-key-animation .bx-bill:after{top:-6px; width:70px; height:14px; margin-left:-35px;}
	.ies-key-animation .bx-bill:before{height:124px; top:-130px; background:url(image/head_bg_cut_m.png) no-repeat center center;}
	.ies-key-animation .bx-bill .img-bill{width:54px; height:70px; margin-left:-27px;}
	.ies-key-animation:after{top:-6px; width:54px; height:7px; margin-left:-27px;}
	.ies-key-animation .bx-fire{width:110px; height:49px; margin:auto;}

	.scene1{height:auto; padding:100px 0;}
	.scene1:before,
	.scene1:after{top:221px; width:230px; height:230px; left:50%; margin-left:-115px;}
	.scene1:after{top:447px;}
	.scene1 h2{font-size:30px;}
	.scene1 ul{padding-top:20px;}
	.scene1 ul li{display:block; margin:auto;}
	.scene1 ul li > div{width:160px; height:160px;}
	.scene1 ul li.center > div{width:230px; height:230px; margin:10px auto;}
	.scene1 ul li > div strong{padding:43px 0 12px 0; font-size:18px;}
	.scene1 ul li.center> div strong{padding:78px 0 15px 0;}
	.scene1 ul li > div p{font-size:14px;}

	.scene2{height:auto; padding:100px 0;}
	.scene2:before{top:366px; width:230px; height:230px; margin-left:-115px;}
	.scene2 h2{font-size:30px;}
	.scene2	p{width:360px; margin:auto; padding:25px 20px 62px 20px; font-size:15px; line-height:25px;}
	.scene2 .swiper-slide{width:230px!important;}
	.scene2 .swiper-slide > img{max-width:100%;}
	.scene2 .swiper-slide .icn1{top:205px; width:120px; margin-left:-60px; padding:0;}
	.scene2 .swiper-slide .icn1 img{width:120px;}
	.scene2 .swiper-slide .icn2{top:150px; left:30px; width:80px; height:80px;}
	.scene2 .swiper-slide .icn2 img{width:80px; height:80px;}
	.scene2 .swiper-slide .icn3{width:auto; top:90px; margin-left:-98px;}
	.scene2 .swiper-slide .icn3 img{width:162px; height:90px;}
	.scene2 .swiper-slide .icn4{top:170px; width:120px; margin-left:-60px; padding:0;}
	.scene2 .swiper-slide .icn4 img{width:120px;}
	.fin-key-animation{top:50px; right:0;transform: scale(0.4);  transform-origin:center center;}


	.scene3{height:auto; padding:100px 0;}
	.scene3 h2{font-size:30px;}
	.scene3 p{width:340px; margin:auto; padding:25px 10px 62px 10px; font-size:15px; line-height:25px;}
	.scene3 ul.big li{width:274px;}
	.scene3 ul.small li{width:140px; margin:0 8px;}
	.scene3 ul.big li{margin:0 8px;}
	.bx_tut_visual{bottom:-67px; transform: scale(0.45);  transform-origin:center center;}
	.top_visual{bottom:-50px; transform: scale(0.45);  transform-origin:center center;}

}