@charset "euc-kr";
/* CSS Document */

@font-face {
font-family: 'rsb';
font-weight: 400;
src: url('../fla_conv/font/RixSkybikeM.eot'); src:local(¡Ø);
src: url('../fla_conv/font/RixSkybikeM.eot?#iefix') format('embedded-opentype'),
	 url('../fla_conv/font/RixSkybikeM.woff2') format('woff2'),
	 url('../fla_conv/font/RixSkybikeM.woff') format('woff'),
	 url('../fla_conv/font/RixSkybikeM.ttf') format('truetype')
}

.flex{ display:flex}
.flex.wrap{ flex-wrap:wrap}
.flex.col{ flex-direction:column}
.flex.space{ justify-content: space-between}
.flex.vspace{ align-content:space-between}
.flex.hc{ justify-content:center}
.flex.hr{ justify-content:flex-end}
.flex.vt{ align-content:flex-start; align-items:flex-start}
.flex.vc{ align-content:center; align-items:center}
.flex.vb{ align-content:flex-end; align-items:flex-end}
.flex .mgL{ margin-left:auto}
.flex .mgR{ margin-right:auto}
.flex .mgT{ margin-top:auto}

.va_wrap{ display:block; text-align:center; white-space: nowrap}
.va_wrap:before{ content:""; display:inline-block; *display:inline; zoom:1; vertical-align:middle; width:0; height:100%}
.va{display:inline-block; *display:inline; zoom:1; vertical-align:middle; max-width:100%; height:auto; white-space:normal}
.va_wrap img{vertical-align:middle; display:inline-block; *display:inline; zoom:1; max-width:100%; max-height:100%}

.convInc{ font-family:rsb, sans-serif; font-weight:400}
.convInc *{ margin:0; padding:0; font-family:inherit !important}
.convInc img{ border:none}
.convInc ul, .convInc li{ list-style:none}
.boxW{ width:980px; margin:0 auto}
.pr{ position:relative}

.headerWrap{}
.headerWrap .gnb{ position:relative; height:80px; box-sizing:border-box}
.headerWrap .gnb > li{ width:20%}
.headerWrap .gnb > li.m_5,
.headerWrap .gnb > li.m_6{ display:none}
.headerWrap .gnb > li.m_3{ margin-left:20%}
.headerWrap .gnb > li .dp1{ color:#fff; font-size:21px; font-weight:600; padding-left:20px; text-align:center; letter-spacing:.5px; position:relative; height:40px; transition:.3s}
.headerWrap .gnb > li .dp1 .va > i{ display:inline-block; font-style:normal}
.headerWrap .gnb > li:hover .dp1 .va > i{ animation-name: gnb_hover1; animation-iteration-count: infinite; transform-origin:left top; animation-duration: .5s}
.headerWrap .gnb > li:hover .dp1 .va > i:nth-child(2n){ animation-name: gnb_hover2}
@keyframes gnb_hover1{0% {transform:translateY(0)}50% {transform:translateY(2px)}100% {transform:translateY(0)}}
@keyframes gnb_hover2{0% {transform:translateY(0)}50% {transform:translateY(-2px)}100% {transform:translateY(0)}}
.headerWrap .gnb > li.m_3 .dp1{ padding-left:30px}
.headerWrap .gnb > li.m_4 .dp1{ padding-left:35px}
.headerWrap .gnb > li:first-child .dp1:after{ display:none}
.headerWrap .gnb > li.m_1:hover .dp1,
.headerWrap .gnb > li.m_1.on .dp1{ color:#d1ff46}
.headerWrap .gnb > li.m_2:hover .dp1,
.headerWrap .gnb > li.m_2.on .dp1{ color:#fff600}
.headerWrap .gnb > li.m_3:hover .dp1,
.headerWrap .gnb > li.m_3.on .dp1{ color:#30ffa8}
.headerWrap .gnb > li.m_4:hover .dp1,
.headerWrap .gnb > li.m_4.on .dp1{ color:#fdcd00}
.headerWrap .gnb > li .dp2{ position:absolute; opacity:0; visibility:hidden; width:auto; transition:.3s}
.headerWrap .gnb > li.m_1 .dp2{ left:65px}
.headerWrap .gnb > li.m_2 .dp2{ left:230px}
.headerWrap .gnb > li.m_3 .dp2{ right:250px}
.headerWrap .gnb > li.m_4 .dp2{ right:0}
.headerWrap .gnb > li .dp2 > li > a{ color:#377b01; padding:0 10px; line-height:30px; padding-bottom:10px; transition:.3s}
.headerWrap .gnb > li .dp2 > li > a .va{ white-space:nowrap; font-size:15px; letter-spacing:.5px; font-weight:600}
.headerWrap .gnb > li .dp2 > li:hover > a,
.headerWrap .gnb > li .dp2 > li.on > a{ color:#000}
.headerWrap .gnb > li:hover{ z-index:1}
.headerWrap .gnb > li:hover .dp2,
.headerWrap .gnb > li.on .dp2{ opacity:1; visibility:visible}
.headerWrap .gnb:hover > li.on .dp2{ opacity:0; visibility:hidden}
.headerWrap .gnb:hover > li.on:hover .dp2{ opacity:1; visibility:visible}
.headerWrap .gnb > li:hover .dp2{ z-index:1}

.lnbWrap{ transform:translateY(20px); height:100%}
.lnbWrap .gnb{ display:block}
.lnbWrap .gnb > li,
.lnbWrap .gnb > li .dp1,
.lnbWrap .gnb > li .va_wrap:before{ display:none}
.lnbWrap .gnb > li.on{ display:block}
.lnbWrap .gnb > li .dp2{ display:block}
.lnbWrap .gnb > li .dp2 > li > a{ padding:0 10px 0 35px; display:flex; align-items:center; height:30px; text-align:left; color:#444; font-size:17px; font-weight:600; letter-spacing:.5px; text-decoration:none}
.lnbWrap .gnb > li .dp2 > li:hover > a,
.lnbWrap .gnb > li .dp2 > li.on > a{ color:#fe5a00}

.aniWrap{ overflow:hidden}
.aniWrap .ani{ position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; animation-iteration-count: infinite; transform-origin:left top}
.aniWrap .ani.limit{animation-iteration-count: 1}
.aniWrap .ani.st1{ width:auto; height:auto; background:none}
.aniWrap .ani .fix{ position:absolute; right:0; bottom:0}

.introVisual{ position:relative; width:1000px; height:600px; text-align:left}
.introVisual .ani{ animation-duration: 15s;}
.introVisual .du1{animation-duration: 1.5s;}
.introVisual .intro_motion1{ animation-name: intro_motion1; left:0; top:0; transition-timing-function:linear}
.introVisual .intro_motion2{ animation-name: intro_motion2; background-image:url(../fla_conv/img_visual/intro_motion2.png); transform-origin:center center}
.introVisual .intro_motion3{ animation-name: intro_motion3; background-image:url(../fla_conv/img_visual/intro_motion3.png)}
.introVisual .intro_motion4{ animation-name: intro_motion3}
.introVisual .intro_motion4 > .ani{ left:380px; top:260px}
.introVisual .intro_tt1{ animation-name: intro_tt1}
.introVisual .intro_tt1_on{ animation-name: intro_tt1_on}
.introVisual .intro_btn{ left:412px; top:386px}

@keyframes intro_motion1{0% {opacity:0; transform:translate(0,0)}10% {opacity:0; transform:translate(0,0)}33% {opacity:1; transform:translate(540px,25%)}35% {transform:translate(550px,24%)}55% { transform:translate(0,50%)}60% {transform:translate(-10px,49%)}80% {opacity:1; transform:translate(540px,75%)}85% {opacity:0;transform:translate(540px,75%)}100% {opacity:0}}
@keyframes intro_motion2{0% {opacity:0; transform:scale(2)}10% {opacity:1; transform:scale(1)}}
@keyframes intro_motion3{0% {opacity:0}10% {opacity:0}20% {opacity:1}}
@keyframes intro_tt1{0% {opacity:1}50% {opacity:0}100% {opacity:1}}
@keyframes intro_tt1_on{0% {opacity:0}50% {opacity:1}100% {opacity:0}}

.subVisual{ position:relative; width:404px; height:137px; text-align:left}
.subVisual .ani{ animation-duration: 10s;}
.subVisual .sub_obj{ animation-name: sub_obj; left:auto; top:0; right:0; overflow:hidden}
.subVisual .sub_obj .fix{ right:10px}
@keyframes sub_obj{0% {opacity:0; width:0}40% {opacity:1; width:100%}}

.sliderAuto{ height:430px; display:flex}
.sliderAuto .el{ cursor:pointer; transition:.3s; background:no-repeat; position:relative}
.sliderAuto .el:after{ content:""; position:absolute; left:-1px; top:0; height:100%; width:9px; background:url(../fla_conv/img_visual/main_line.png) no-repeat left center}
.sliderAuto .e1:after{ display:none}
.sliderAuto .e1{ width:134px}
.sliderAuto .e2{ width:136px}
.sliderAuto .e3{ width:137px}
.sliderAuto .el.on{ position:relative}
.sliderAuto .e1.on{ width:709px}
.sliderAuto .e2.on{ width:709px}
.sliderAuto .e3.on{ width:710px}
.sliderAuto .el .after{ display:none; position:absolute; left:0; top:0; width:100%; height:100%}
.sliderAuto .el.on .before{ display:none}
.sliderAuto .el.on .after{ display:block}

.mainVisual{ background:url(../fla_conv/img_visual/main_bg.png) no-repeat left top}
.main_v1 .ani{ animation-duration: 15s;}
.main_v1 .main_v1_motion1{ animation-name: main_v1_motion1; background-image:url(../fla_conv/img_visual/main_v1_motion1.png); top:auto; bottom:0}
.main_v1 .main_v1_motion2{ animation-name: main_v1_motion2; overflow:hidden}
.main_v1 .main_v1_motion2 .ani{ animation-name: main_v1_motion2_ani; animation-duration: 5s;}
.main_v1 .main_v1_motion3{ animation-name: main_v1_motion3; background-image:url(../fla_conv/img_visual/main_v1_motion3.png); transition-timing-function:linear}
.main_v1 .main_v1_slogan1{ animation-name: main_v1_slogan1; background-image:url(../fla_conv/img_visual/main_v1_slogan1.png); animation-duration: 1s;}
.main_v1 .main_v1_slogan2{ animation-name: main_v1_slogan2; background-image:url(../fla_conv/img_visual/main_v1_slogan2.png); animation-duration: 1s;}

@keyframes main_v1_motion1{0% {opacity:0; height:0}10% {opacity:1; height:100%}}
@keyframes main_v1_motion2{0% {opacity:0}10% {opacity:0}15% {opacity:1}}
@keyframes main_v1_motion2_ani{0% {transform:translate(0,0)}25% {transform:translate(-50px,100px)}50% {transform:translate(50px,50px)}75% {transform:translate(0,75px)}100% {transform:translate(0,0)}}
@keyframes main_v1_motion3{0% {opacity:0; transform:translate(0,0)}40% {opacity:1;transform:translate(-40%,80%)}70% {opacity:1;transform:translate(-100%,50%)}71% {opacity:0}100% {opacity:0;transform:translate(0,0)}}
@keyframes main_v1_slogan1{0% {transform:translate(0,0)}50% {transform:translate(5px,-5px)}}
@keyframes main_v1_slogan2{0% {transform:translate(0,0)}50% {transform:translate(-5px,-5px)}}

.main_v2 .ani{ animation-duration: 7.5s;}
.main_v2 .main_v2_motion1{ animation-name: main_v2_motion1; background-image:url(../fla_conv/img_visual/main_v2_motion1.png)}
.main_v2 .main_v2_motion2{ animation-name: main_v2_motion2; background-image:url(../fla_conv/img_visual/main_v2_motion2.png)}
.main_v2 .main_v2_motion3{ animation-name: main_v2_motion3; background-image:url(../fla_conv/img_visual/main_v2_motion3.png)}
.main_v2 .main_v2_motion4{ animation-name: main_v2_motion4; background-image:url(../fla_conv/img_visual/main_v2_motion4.png)}
.main_v2 .main_v2_motion5{ animation-name: main_v2_motion5; background-image:url(../fla_conv/img_visual/main_v2_motion5.png)}
.main_v2 .main_v2_tit1{ animation-name: main_v2_motion1; background-image:url(../fla_conv/img_visual/main_v2_tit1.png)}
.main_v2 .main_v2_btn1{ animation-name: main_v2_btn1; left:30px; top:120px}
@keyframes main_v2_motion1{0% {opacity:0}15% {opacity:1}}
@keyframes main_v2_motion2{0% {opacity:0; width:0; height:0}15% {opacity:0; width:0; height:0}20% {opacity:1; width:0; height:0}80% {opacity:1; width:100%; height:100%}}
@keyframes main_v2_motion3{0% {opacity:0; height:0}60% {opacity:0; height:0}70% {opacity:1; height:100%}}
@keyframes main_v2_motion4{0% {opacity:0}20% {opacity:0}50% { opacity:1;transform:translate(-50%,15%)}90% {opacity:1;transform:translate(-100%,-15%)}91% {opacity:0}100% {opacity:0; transform:translate(0,0)}}
@keyframes main_v2_motion5{0% {opacity:0}40% { opacity:1;transform:translate(-50%,5%)}90% {opacity:1;transform:translate(-100%,-15%)}91% {opacity:0}100% {opacity:0; transform:translate(0,0)}}
@keyframes main_v2_btn1{0% {opacity:0}15% {opacity:0}20% {opacity:1}}

.main_v3 .ani{ animation-duration: 7.5s;}
.main_v3 .main_v3_motion1{ animation-name: main_v3_motion1; background-image:url(../fla_conv/img_visual/main_v3_motion1.png); top:auto; bottom:0; background-position:left bottom}
.main_v3 .main_v3_motion2{ animation-name: main_v3_motion2; background-image:url(../fla_conv/img_visual/main_v3_motion2.png)}
.main_v3 .main_v3_motion3{ animation-name: main_v3_motion3; background-image:url(../fla_conv/img_visual/main_v3_motion3.png); transform-origin:right top}
.main_v3 .main_v3_slogan1{ animation-name: main_v3_slogan1; background-image:url(../fla_conv/img_visual/main_v3_slogan1.png)}
@keyframes main_v3_motion1{0% {opacity:0; height:0}25% {opacity:1; height:100%}}
@keyframes main_v3_motion2{0% {opacity:0}20% {opacity:0}30% {opacity:1}}
@keyframes main_v3_motion3{0% {opacity:0}25% {opacity:0}35% {opacity:1; transform:rotate(0)}45% {opacity:1;transform:rotate(-7deg)}55% {opacity:1;transform:rotate(0)}65% {opacity:1;transform:rotate(-7deg)}75% {opacity:1;transform:rotate(0)}85% {opacity:1;transform:rotate(-7deg)}95% {opacity:1;transform:rotate(0)}100% {opacity:0}}
@keyframes main_v3_slogan1{0% {opacity:0}30% {opacity:0}40% {opacity:1}50% {opacity:0}60% {opacity:1}70% {opacity:0}80% {opacity:1}90% {opacity:0}}