@charset "utf-8";

body	{position:relative;}
#wrapper	{position:relative;}
.w1200 {width: 1200px;margin:0 auto;position:relative}

.text_hidden	{overflow:hidden; visibility:hidden; position:absolute; width:0; height:0; font-size:0; line-height:0;}	
.cont_center	{overflow:hidden; width:1160px; margin:0 auto;}

/* header */
#header	{}
#header_top	{background:url(../images/header/bg_header.gif);}
#header h1	{float:left; margin:26px 0;}
.top_menu	{overflow:hidden; float:right; margin-top:38px;}
.top_menu>li	{float:left; padding:0 10px; border-right:1px solid #fff; }
.top_menu>li:last-child	{border-right:0;}

.wrap_nav	{background-color:#fff;}
#nav	{}
#nav>li	{float:left;}
#nav>li>a	{overflow:hidden; display:block; height:58px; }
.sub_menu	{position:absolute; left:50%; top:147px; overflow:hidden; width:1160px; height:0; margin-left:-580px; z-index:1000;}
.sub_menu>h2	{float:left; width:145px;}
.sub_menu>.dep2	{float:left; width:374px; height:248px; padding:10px 31px 0 30px; background-color:#fff;}
.sub_menu>.dep2.no_menu	{float:left; width:324px; height:238px; padding:20px 56px 0 55px; background-color:#fff;}
.sub_menu .dep2.no_menu>li	{float:left; overflow:hidden;  width:162px; height:24px;}
.sub_menu .dep2.no_menu>li>a:hover img	{margin-top:-24px;}
.sub_menu .dep2.more_menu	{background:url(../images/header/bg_sm.png) repeat-y left top;}
.sub_menu .dep2.more_menu>li	{width:160px; height:24px;}
.sub_menu .dep2>li>a	{overflow:hidden; display:block;}
.sub_menu .dep2.more_menu>li>a.on	{background:url(../images/header/dep2_on.png) no-repeat 130px center}
.sub_menu .dep2>li>a>img	{}
.sub_menu>.sm_quick	{display:block; float:left; width:290px; }
.sub_menu>.sm_quick2	{display:block; float:left; width:580px; }
.sub_menu .dep3	{position:absolute; left:325px; top:0; width:194px; height:208px; padding:20px 41px 0 20px; visibility:hidden; z-index:1001;}
.sub_menu .dep2.right .dep3	{left:905px;}
.sub_menu .dep3>li	{float:left; width:97px; height:24px; }
.sub_menu .dep3>li.span2	{width:194px;}
.sub_menu .dep3>li>a	{display:block; overflow:hidden; height:24px;}
.sub_menu .dep3>li>a:hover img	{margin-top:-24px;}


/* footer */
#site_banner_box { background:#eee; width:100%; height:60px; }
div.site_banner { width:1160px; height:60px; margin:0 auto; }
div.site_banner h2 { float:left; margin-right:35px; }
div.site_banner div.st_slide { float:left; width:1015px; height:60px; position:relative; overflow:hidden; }
div.site_banner div.st_slide ul { padding:5px 0 0 50px; }
div.site_banner div.st_slide ul li { float:left; margin:0 10px; }
div.site_banner div.st_slide > a { position:absolute; top:0; }
div.site_banner div.st_slide > a.st_prev { left:0; }
div.site_banner div.st_slide > a.st_next { right:0; }

#set_footer	{height:373px; background:url(../images/footer/bg.jpg) no-repeat center 0;}
.set_copyright	{width:428px; float:right; text-align:center; padding-top:73px; }
.set_copyright address	{margin-top:30px; margin-bottom:25px;}


/*인트로페이지*/
#introModel {position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;background:rgba(0,0,0,0.8);animation:modelTxt5 .5s 2.5s 1 linear forwards;-webkit-animation:modelTxt5 .5s 2.5s 1 linear forwards;}
#introModel.cookie {width:auto;height:auto;background:rgba(0,0,0,0);}
#introModel .introModelWrap {position:fixed;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:1200px;height:800px;/*cursor:pointer;*/animation:modelTxt3 .5s 2.5s 1 linear forwards}
#introModel .introModelWrap.cookie {width:0;left:-300px}
#introModel .modelFir {position:absolute;left:50%;transform: translateX(-50%);bottom:0;opacity:1;width:100%;animation:modelFir .7s .7s 1 linear forwards, modelThr .7s 1.6s 1 linear forwards}
#introModel .modelSec {position:absolute;left:50%;transform: translateX(-50%);bottom:0;opacity:0;width:100%;animation:modelSec 1.3s .7s 1 linear forwards}
#introModel .ballon1 {position:absolute;left:45px;top:0;width:441px;height:auto;}
#introModel .ballon2 {position:absolute;right:170px;top:30px;width:367px;height:auto;animation:ballonNo2 .5s 2.5s 1 linear forwards;}

@keyframes modelFir {
    0 {opacity:1}
    100% {opacity:0}
}
@-webkit-keyframes modelFir {
    0 {opacity:1}
    100% {opacity:0}
}
@keyframes modelSec {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@-webkit-keyframes modelSec {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@keyframes modelThr {
    0 {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes modelFir {
    0 {opacity:0}
    100% {opacity:1}
}

@keyframes ballonNo2 {
    0% {width:367px;height:auto;top:30px;}
    100% {width:0;height:0;top:50px}
}
@-webkit-keyframes ballonNo2 {
    0% {width:367px;height:auto;top:30px;}
    100% {width:0;height:0;top:50px}
}

.introModelSmall {position:fixed;left:25px;bottom:320px;width:235px;height:285px;background:url(../img/intro/openBtnBg2.png) no-repeat center center;background-size:100%;cursor: pointer;opacity:0;animation:modelTxt2 .5s 2.7s 1 linear forwards;z-index:999;transition:all .5s}
introModelSmall .introModelSmall1 {position:absolute;left:0;top:0;z-index:9}
.introModelSmall .introModelSmall2 {position:absolute;left:0;top:0;opacity:0;z-index:9}

.introModelSmall #txtSlide {position:absolute;bottom:0;left:0;width:100%;z-index: 9;}
.introModelSmall #txtSlide .swiper-slide {opacity:0 !important}
.introModelSmall #txtSlide .swiper-slide-active {opacity:1 !important}

.introModelSmall .spinner .quick-box-txt1 {position:absolute;left:0;top:0;}
.introModelSmall .spinner .quick-box-txt2 {position:absolute;left:0;top:0;opacity:0;animation:modelSec 1s .3s infinite forwards}

.introModelSmall #slideBox {width:130px;height:100px;position:absolute;top:60px;left: 75px;}
.introModelSmall .openBtnModel {position:absolute;top:12px;left:-3px;z-index:9}

.introModelSmall .introModelBtn2 {position:absolute;right:0;top:205px;width:87px;height:auto}
.introModelSmall .introModelBtn2 .clickBtn1 {position:absolute;top:6px;left:0;animation:modelBtn2_1 1s .3s infinite}
.introModelSmall .introModelBtn2 .clickBtn1_2 {position:absolute;top:6px;left:0;opacity:0;animation:modelBtn2_1 1s .3s infinite, modelBtn2_1_2 1s .3s infinite} 
.introModelSmall .introModelBtn2 .clickBtn2 {position:absolute;top:9px;left:0}
.introModelSmall .introModelBtn2 .clickBtn3 {position:absolute;top:0;left:50px;opacity:0;animation:modelBtn2_3 .7s .3s infinite}
.introModelSmall .introModelBtn2 .clickBtn4 {position:absolute;top:20px;right:8px;animation:modelBtn2_4 1s .3s infinite}

@keyframes modelBtn2_1 {
    0%,100% {top:6px}
    50% {top:9px}
}
@-webkit-keyframes modelBtn2_1 {
    0%,100% {top:6px}
    50% {top:9px}
}
@keyframes modelBtn2_1_2 {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@-webkit-keyframes modelBtn2_1_2 {
    0%,100% {opacity:0}
    50% {opacity:1}
}

@keyframes modelBtn2_3 {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@-webkit-keyframes modelBtn2_3 {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@keyframes modelBtn2_4 {
    0%,100% {transform:rotate(0)}
    50% {transform:rotate(-10deg)}
}
@-webkit-keyframes modelBtn4 {
    0%,100% {transform:rotate(0)}
    50% {transform:rotate(-10deg)}
}

.spinner {width:110px;padding:10px 0 0;height:50px;text-align: center;background: url(../../img/intro/quick-box-bg.png) center center no-repeat;background-size: 100%;position: absolute;top:-20px;right:15px;z-index: 1;}

.spinner .spinnerWrap {position:relative;width:130px;margin:0 auto;font-size:15px;color:#fff;overflow:hidden;}
.spinner .spinnerWrap p:after {content:""; white-space:nowrap; padding-right:0px;}
.spinner .spinnerWrap p {margin:0;
  padding-left:100%;
  display:inline-block;
  white-space:nowrap;
    -webkit-animation-name:marquee;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:10s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-name:marquee;
    -moz-animation-timing-function:linear;
    -moz-animation-duration:10s;
    -moz-animation-iteration-count:infinite;
    -ms-animation-name:marquee;
    -ms-animation-timing-function:linear;
    -ms-animation-duration:10s;
    -ms-animation-iteration-count:infinite;
    -o-animation-name:marquee;
    -o-animation-timing-function:linear;
    -o-animation-duration:10s;
    -o-animation-iteration-count:infinite;
    animation-name:marquee;
    animation-timing-function:linear;
    animation-duration:10s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}


@-webkit-keyframes sk-bouncedelay {
	0%,80%,100% {-webkit-transform: scale(0)}
	40% {-webkit-transform: scale(1.0)}
}
@keyframes sk-bouncedelay {
    0%,	80%,100% {-webkit-transform: scale(0);transform: scale(0);}
    40% {-webkit-transform: scale(1.0);	transform: scale(1.0);}
}


@keyframes modelTxt1 {
    0% {opacity:1}
    100% {opacity:0}
}
@-webkit-keyframes modelTxt1 {
    0% {opacity:1}
    100% {opacity:0}
}
@keyframes modelTxt2 {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes modelTxt2 {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes modelTxt3 {
    0% {width:1200px;height:800px;left:50%;bottom:50%}
    100% {width:0px;height:0;left:50px;bottom:300px}
}
@-webkit-keyframes modelTxt3 {
    0% {width:1200px;height:800px;left:50%;bottom:50%}
    100% {width:0px;;height:0;left:50px;bottom:300px}
}
@keyframes modelTxt4 {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes modelTxt4 {
    0% {opacity:0}
    100% {opacity:1}
}
@keyframes modelTxt5 {
    0% {width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.5)}
    100% {width:0;height:0;top:50%;left:25px;background:rgba(0,0,0,0);opacity:0}
}
@-webkit-keyframes modelTxt5 {
    0% {width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.5)}
    100% {width:0;height:0;top:50%;left:25px;background:rgba(0,0,0,0);opacity:0}
}

.introModelSmall:hover .introModelSmall1 {opacity:0}
.introModelSmall:hover .introModelSmall2 {opacity:1}


#intro {visibility:hidden;width:100%;height:100%;background:rgba(0,0,0,0.88);position:fixed;top:0;z-index:9999}
#intro .intro_close {position:absolute;top:50px;right:50px;cursor:pointer}
#intro .w1200 {height:100%}
#intro .introPc {height:70px;width:100%;position:fixed;bottom:0;left:0;background:rgba(12,22,30,0.9);text-align:center}
#intro .introPc p {font-size:24px;color:#fff;letter-spacing: -1px;font-weight: 300;line-height: 70px;}
#intro .introPc p img {margin-right: 10px;margin-top: -4px;}

#intro .introLink1, #intro .introLink2 {cursor:pointer;position:absolute;width:360px;height:429px}
#intro .introLink1 {background:url(../img/intro/mainLink1.png) no-repeat center center;background-size:100%;top:250px;left:5px;animation:introLink1 1.5s .1s infinite;}

#intro .introLink1 .introMain01 {position:absolute;left:50%;top:52px;transform:translateX(-50%);}
#intro .introLink2 {background:url(../img/intro/mainLink2.png) no-repeat center center;background-size:100%;top:265px;right:5px;animation:introLink2 1.5s .1s infinite;}
#intro .introLink2 .introMain02 {position:absolute;left:50%;top:52px;transform:translateX(-50%);}
#intro .introMain03 {position:absolute;top:17.5%;left:50%;transform:translateX(-50%)}
#intro #introMain .introMainOn {position:absolute;left:50%;top:52px;transform:translateX(-50%);animation:introTwinkle 1s .1s infinite}

@keyframes introLink1 {
    0%,100% {top:250px}
    50% {top:260px}
}
@-webkit-keyframes introLink1 {
    0%,100% {top:250px}
    50% {top:265px}
}
@keyframes introLink2 {
    0%,100% {top:265px}
    50% {top:250px}
}
@-webkit-keyframes introLink2 {
    0%,100% {top:265px}
    50% {top:250px}
}
@keyframes introTwinkle {
    0%,100% {opacity:1}
    50% {opacity:0}
}
@-webkit-keyframes introTwinkle {
    0%,100% {opacity:1}
    50% {opacity:0}
}


.introDesign {visibility: hidden;}
.introDesign .introMain05 {opacity:0;position:absolute;top:13%;left:-300px}
.introDesign.on .introMain03 {animation:intro_ani1 .7s .5s 1 linear forwards}
.introDesign.on .introMain05 {animation:intro_ani2 .7s .9s 1 linear forwards}

.introSkill {visibility: hidden;}
.introSkill .introMain05 {opacity:0;position:absolute;top:13%;right:-300px}
.introSkill.on .introMain03 {animation:intro_ani3 .7s .5s 1 linear forwards}
.introSkill.on .introMain05 {animation:intro_ani2 .7s .9s 1 linear forwards}

@keyframes intro_ani1 {
    0% {left:50%;transform:translateX(-50%);opacity:1}
    50% {left:-100px;transform:translateX(0);opacity:1}
    100% {left:-100px;transform:translateX(0);opacity:0}
}
@-webkit-keyframes intro_ani1 {
    0% {left:50%;transform:translateX(-50%);opacity:1}
    50% {left:-200px;transform:translateX(0);opacity:1}
    100% {left:-200px;transform:translateX(0);opacity:0}
}
@keyframes intro_ani2 {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes intro_ani2 {
    0% {opacity:0}
    100% {opacity:1}
}

@keyframes intro_ani3 {
    0% {right:50%;transform:translateX(-50%);opacity:1}
    50% {right:-100px;transform:translateX(0);opacity:1}
    100% {right:-100px;transform:translateX(0);opacity:0}
}
@-webkit-keyframes intro_ani3 {
    0% {right:50%;transform:translateX(-50%);opacity:1}
    50% {right:-200px;transform:translateX(0);opacity:1}
    100% {right:-200px;transform:translateX(0);opacity:0}
}


#intro .designSlide {opacity:0;position: absolute;top: 40px;right:0;width:969px;height:835px;padding-left:40px;box-sizing:border-box;background:url(../img/intro/slideBg.png) no-repeat center center;background-size:cover}
#intro .designSlide p {font-family: 'NotoKr', 'Malgun Gothic', dotum, sans-serif;letter-spacing:-1px}
#intro .designSlide.on {animation:intro_slide .7s 1.2s 1 linear forwards;-webkit-animation:intro_slide .7s 1.2s 1 linear forwards}
@keyframes intro_slide {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes intro_slide {
    0% {opacity:0}
    100% {opacity:1}
}

#intro .designSlide p {font-size:20px;color:#fff;line-height:1.7;text-align:center;width:100%;font-weight:300}
#intro .designSlide p span {
    display:inline-block;
    color:#fff;
    font-weight:400;
    line-height:1;
    padding:1px 3px 2px;
    background:linear-gradient(to right, rgba(0,0,0,0) 50%, #fff265 50%);
    background-size:200%;
    transition:.5s;
    transition-delay:.5s
}
#intro .designSlide p span.sw4 {
    transition-delay:1s
}
#intro .designSlide .swiper-slide.on p span {background-position:-100% 0;color:#111}

#intro .designSlide .mainGo {position:absolute;bottom:50px;left:50px;z-index:999;cursor:pointer}
#intro .designSlide .skillGo {position:absolute;bottom:50px;right:50px;z-index:999;cursor:pointer}
#intro .designSlide .swiper-wrapper {padding-top:80px;width:930px;height:835px;float:right;box-sizing: border-box;z-index:998}
#intro .designSlide .swiper-pagination-intro {display:block;position:absolute;top:auto;bottom:55px;left:50%;transform:translateX(-50%);width: auto;z-index: 9999;}
#intro .designSlide .swiper-pagination-intro .swiper-pagination-bullet {opacity:1;background-color:rgba(0,0,0,0);width:30px;height:30px;line-height:27px;border-radius:50px;margin:0 2px;display: inline-block;color:#fff;font-size:15px;outline: none;text-align: center;}
#intro .designSlide .swiper-pagination-intro .swiper-pagination-bullet-active {color: #ff0;border: 1px solid #ff0;}
#intro .designSlide .swiper-button-next-intro {position: absolute;bottom: 50px;right: 320px;width:40px;height:40px;background:url('../img/intro/slideNext.png') no-repeat center center;background-size:100%;z-index:998;cursor:pointer;outline:none}
#intro .designSlide .swiper-button-prev-intro {position: absolute;bottom: 50px;left:320px;width:40px;height:40px;background:url('../img/intro/slidePrev.png') no-repeat center center;background-size:100%;z-index:998;cursor:pointer;outline:none}

#intro .designSlide .swiper-slide {width: 930px !important;overflow: hidden;}
#intro .designSlide .swiper-slide.on {}
#intro .designSlide .wrap {position: relative;margin: 0 auto;width:860px}
#intro .designSlide .sw_a {position: absolute}

#intro .designSlide .sw1 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro .designSlide .sw1 .sw_a2 {top:98px; left:50%; transform:translateX(-50%);}
#intro .designSlide .sw1 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}

#intro .designSlide .sw2 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro .designSlide .sw2 .sw_a2 {top:99px; left:50%; transform:translateX(-50%)}
#intro .designSlide .sw2 .sw_a2_2 {top:181px; left:50%; transform:translateX(-50%);opacity:0}
#intro .designSlide .sw2.on .sw_a2_2 {animation:design1 .5s .3s 1 linear forwards}
#intro .designSlide .sw2 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}

@keyframes design1 {
    0% {top:230px;opacity:0}
    100% {top;181px;opacity:1}
}
@-webkit-keyframes design1 {
    0% {top:230px;opacity:0}
    100% {top;181px;opacity:1}
}

#intro .designSlide .sw3 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro .designSlide .sw3 .sw_a2 {top:131px; left:50%; transform:translateX(-50%)}
#intro .designSlide .sw3 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}

#intro .designSlide .sw4 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro .designSlide .sw4 .sw_a2 {top:107px; left:24px;opacity:0}
#intro .designSlide .sw4 .sw_a2_2 {top:326px; left:24px;opacity:0}
#intro .designSlide .sw4 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}
#intro .designSlide .sw4.on .sw_a2 {animation:design2 .5s .3s 1 linear forwards}
#intro .designSlide .sw4.on .sw_a2_2 {animation:design3 .5s .3s 1 linear forwards}

@keyframes design2 {
    0% {top:137px;opacity:0}
    100% {top:107px;opacity:1}
}
@-webkit-keyframes design2 {
    0% {top:137px;opacity:0}
    100% {top:107px;opacity:1}
}
@keyframes design3 {
    0% {top:296px;opacity:0}
    100% {top:326px;opacity:1}
}
@-webkit-keyframes design3 {
    0% {top:296px;opacity:0}
    100% {top:326px;opacity:1}
}


#intro #skillSlide {opacity:0;position: absolute;top: 40px;left:0;width:969px;height:835px;padding-right:40px;box-sizing:border-box;background:url(../img/intro/slideBg2.png) no-repeat center center;background-size:cover}
#intro #skillSlide.on {animation:intro_slide2 .7s 1.2s 1 linear forwards}
@keyframes intro_slide2 {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes intro_slide2 {
    0% {opacity:0}
    100% {opacity:1}
}

#intro #skillSlide p {font-size:20px;color:#fff;line-height:1.7;text-align:center;width:100%;font-weight:300;font-family: 'NotoKr', 'Malgun Gothic', dotum, sans-serif;letter-spacing:-1px}

#intro #skillSlide p span {
    display:inline-block;
    color:#fff;
    font-weight:400;
    line-height:1;
    padding:1px 3px 2px;   
    background:linear-gradient(to right, rgba(0,0,0,0) 50%, #fff265 50%);
    background-size:200%;
    transition:.5s;
    transition-delay:.5s
}

#intro #skillSlide p span.sw1,
#intro #skillSlide p span.sw2,
#intro #skillSlide p span.sw3,{
    transition-delay:1s
}
#intro #skillSlide .swiper-slide.on p span {
	background-position:-100% 0;
	color:#111;
}

#intro #skillSlide .mainGo {position:absolute;bottom:50px;left:50px;z-index:999;cursor:pointer}
#intro #skillSlide .designGo {position:absolute;bottom:50px;right:50px;z-index:999;cursor:pointer}
#intro #skillSlide .swiper-wrapper {padding-top:80px;width:930px;height:835px;float:right;box-sizing: border-box;z-index:998}
#intro #skillSlide .swiper-pagination-intro2 {display:block;position:absolute;top:auto;bottom:55px;left:50%;transform:translateX(-50%);width: auto;z-index: 9999;}
#intro #skillSlide .swiper-pagination-intro2 .swiper-pagination-bullet {opacity:1;background-color:rgba(0,0,0,0);width:30px;height:30px;line-height:27px;border-radius:50px;margin:0 2px;display: inline-block;color:#fff;font-size:15px;outline: none;text-align: center;}
#intro #skillSlide .swiper-pagination-intro2 .swiper-pagination-bullet-active {color: #ff0;border: 1px solid #ff0;}
#intro #skillSlide .swiper-button-next-intro2 {position: absolute;bottom: 50px;right: 300px;width:40px;height:40px;background:url('../img/intro/slideNext.png') no-repeat center center;background-size:100%;z-index:998;cursor:pointer;outline:none}
#intro #skillSlide .swiper-button-prev-intro2 {position: absolute;bottom: 50px;left:300px;width:40px;height:40px;background:url('../img/intro/slidePrev.png') no-repeat center center;background-size:100%;z-index:998;cursor:pointer;outline:none}

#intro #skillSlide .swiper-slide {width: 930px !important;overflow: hidden;}
#intro #skillSlide .swiper-slide.on {}
#intro #skillSlide .wrap {position: relative;margin: 0 auto;width:860px}
#intro #skillSlide .sw_a {position: absolute}

#intro #skillSlide .sw0 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw0 .sw_a2 {top:88px; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw0 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}

#intro #skillSlide .sw1 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw1 .sw_a2 {top:99px; left:29px;opacity:0}
#intro #skillSlide .sw1 .sw_a2_2 {top:99px; left:669px;opacity:0}
#intro #skillSlide .sw1 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw1.on .sw_a2 {animation:skill4 .5s .3s 1 linear forwards}
#intro #skillSlide .sw1.on .sw_a2_2 {animation:skill5 .5s .3s 1 linear forwards}
@keyframes skill4 {
    0% {left:64px;opacity:0}
    100% {left:29px;opacity:1}
}
@-webkit-keyframes skill1 {
    0% {left:64px;opacity:0}
    100% {left:29px;opacity:1}
}
@keyframes skill5 {
    0% {left:634px;opacity:0}
    100% {left:669px;opacity:1}
}
@-webkit-keyframes skill5 {
    0% {left:634px;opacity:0}
    100% {left:669px;opacity:1}
}

#intro #skillSlide .sw2 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw2 .sw_a2 {top:99px; left:20px;opacity:0}
#intro #skillSlide .sw2 .sw_a2_2 {top:99px; left:720px;opacity:0}
#intro #skillSlide .sw2 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw2.on .sw_a2 {animation:skill6 .5s .3s 1 linear forwards}
#intro #skillSlide .sw2.on .sw_a2_2 {animation:skill7 .5s .3s 1 linear forwards}
@keyframes skill6 {
    0% {left:55px;opacity:0}
    100% {left:20px;opacity:1}
}
@-webkit-keyframes skill6 {
    0% {left:55px;opacity:0}
    100% {left:20px;opacity:1}
}
@keyframes skill7 {
    0% {left:686px;opacity:0}
    100% {left:720px;opacity:1}
}
@-webkit-keyframes skill7 {
    0% {left:686px;opacity:0}
    100% {left:720px;opacity:1}
}

#intro #skillSlide .sw3 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw3 .sw_a2 {top:91px; left:21px;opacity:0}
#intro #skillSlide .sw3 .sw_a2_2 {top:91px; left:700px;opacity:0}
#intro #skillSlide .sw3 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw3.on .sw_a2 {animation:skill1 .5s .3s 1 linear forwards}
#intro #skillSlide .sw3.on .sw_a2_2 {animation:skill2 .5s .3s 1 linear forwards}

@keyframes skill1 {
    0% {left:56px;opacity:0}
    100% {left:21px;opacity:1}
}
@-webkit-keyframes skill1 {
    0% {left:56px;opacity:0}
    100% {left:21px;opacity:1}
}
@keyframes skill2 {
    0% {left:665px;opacity:0}
    100% {left:700px;opacity:1}
}
@-webkit-keyframes skill2 {
    0% {left:665px;opacity:0}
    100% {left:700px;opacity:1}
}

#intro #skillSlide .sw4 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw4 .sw_a2 {top:123px; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw4 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}


#intro #skillSlide .sw5 .sw_a1 {top:0; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw5 .sw_a2 {top:140px; left:20px; opacity:0}
#intro #skillSlide .sw5 .sw_a2_2 {top:140px; left:323px;opacity:0}
#intro #skillSlide .sw5 .sw_a2_3 {top:140px; left:602px;opacity:0}
#intro #skillSlide .sw5 .sw_a3 {top:483px; left:50%; transform:translateX(-50%);}
#intro #skillSlide .sw5.on .sw_a2 {animation:skill3 .5s .2s 1 linear forwards}
#intro #skillSlide .sw5.on .sw_a2_2 {animation:skill3 .5s .4s 1 linear forwards}
#intro #skillSlide .sw5.on .sw_a2_3 {animation:skill3 .5s .6s 1 linear forwards}
#intro #skillSlide .sw5 p i {font-size: 16px;color: #fff;margin-top: 10px;display: block;font-style: normal;}

@keyframes skill3 {
    0% {opacity:0}
    100% {opacity:1}
}
@-webkit-keyframes skill3 {
    0% {opacity:0}
    100% {opacity:1}
}