@charset "utf-8";
.introAType{background-color:#1a1a1a;}

.introA{position:relative;max-width:1920px;width:100%;margin:0 auto;font-size:0;}
.introA>.leftMenu{position:relative;display:inline-block;width:300px;vertical-align:top;padding-top:30px;font-size:0;z-index:2;}
.introA>.leftMenu .logo{width:60px;display:inline-block;vertical-align:top;}
.introA>.leftMenu .logo::before{content:"";position:absolute;left:60px;top:30px;width:1px;height:calc(100vh - 30px);background-color:rgba(255,255,255,0.1);}
.introA>.leftMenu .logo>a{display:block;font-size:0;}
.introA>.leftMenu .logo>a>img{display:block;width:25px;height:auto;margin:0 auto;}
.introA>.leftMenu .logo>a>span{display:none;}
.introA>.leftMenu .menuList{width:calc(100% - 60px);display:inline-block;vertical-align:top;padding:30px 0 0 20px;}
.introA>.leftMenu .menuList .menu{width:100%;height:auto;margin-bottom:150px;}
.introA>.leftMenu .menuList .menu>a{display:block;font-weight:600;font-size:24px;line-height:1em;color:#fff;}
.introA>.leftMenu .menuList .menu>a+a{margin-top:25px;}
.introA>.leftMenu .sns{font-size:0;margin-top:160px;}
.introA>.leftMenu .sns>a{display:block;font-size:15px;line-height:1rem;color:#fff;opacity:0.5;font-weight:300;}
.introA>.leftMenu .sns>a+a{margin-top:10px;}
.introA>.rightContent{position:relative;display:inline-block;width:calc(100% - 300px);vertical-align:top;}
.introA>.rightContent>div.videoArea{width:100%;position:relative;left:50%;transform:translate(-50%,0);overflow:hidden;}
.introA>.rightContent>div.videoArea .videoPlay{position:absolute;left:calc(50% - 90px);top:calc(50% - 90px);width:180px;height:180px;border:2px solid #fff;border-radius:50%;font-size:28px;line-height:180px;color:#fff;z-index:10;}
.introA>.rightContent>div.videoArea>img{position:absolute;display:block;top:0;width:1920px;z-index:1;}
.introA>.rightContent>div.videoArea::before{content:"";display:block;width:100%;padding-top:57.8%;opacity:0.8;position:relative;z-index:10;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.introA>.rightContent>div.dimOff::before{z-index:0;}
.introA>.rightContent>div.videoArea video{position:absolute;display:block;left:0;top:0;width:100%;height:100%;} 
.introA>.rightContent>div.videoArea #yt_player{position:absolute;display:block;left:0;top:0;width:100%;height:100%;} 

.introA .slider {width:calc(100% + 80px);position:absolute;left:-80px;bottom:70px;opacity:0;}
.introA .slider .inner{overflow:hidden;position:relative;margin-left:0px;width:100%;}
.introA .slider .inner .swiper-wrapper{padding-top:30px;}
.introA .slider .swiper-slide {display:inline-block;vertical-align:middle;width:316px;height:auto;margin-right:30px;}
.introA .slider .swiper-slide:last-of-type{margin-right:0;}
.introA .slider .list{display:inline-block;vertical-align:middle;width:316px;height:auto;margin-right:30px;}
.introA .slider .list p{font-size:16px;line-height:1em;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:15px;}
.introA .slider .swiper-slide:nth-of-type(2n),
.introA .slider .list:nth-of-type(2n){margin-top:-30px;}
.introA .slider .swiper-button-next{position:absolute;z-index:100;right:30px;font-size:0;width:33px;height:55px;background:url(../../KOR_A/img/intro/icon_introPrevArrow.png) no-repeat center center/100% auto; opacity: 1 !important;;}
.introA .slider .swiper-button-next::after{font-size:0;display:none;}
.introA .slider .swiper-button-prev{position:absolute;z-index:100;left:-100px;font-size:0;width:33px;height:55px;background:url(../../KOR_A/img/intro/icon_introNextArrow.png) no-repeat center center/100% auto;opacity: 1 !important;;}
.introA .slider .swiper-button-prev::after{font-size:0;display:none;}

.introB{position:relative;max-width:1920px;width:100%;margin:0 auto;font-size:0;}
.introB .visualArea{position:relative;width:calc(100% - 540px);display:inline-block;vertical-align:top;}
.introB .visualArea .introHeader{position:absolute;left:0;top:0;width:100%;height:90px;z-index:10;}
.introB .visualArea .introHeader .logo{position:absolute;left:50px;top:30px;display:inline-block;font-size:0;}
.introB .visualArea .introHeader .logo>img{height:31px;width:auto;}
.introB .visualArea .introHeader .util{position:absolute;right:50px;top:35px;text-align:right;}
.introB .visualArea .introHeader .util>a{display:inline-block;font-size:18px;font-weight:normal;color:#000;line-height:1em;}
.introB .visualArea .introHeader .util>a+a{margin-left:30px;}

.introB .visualArea .visual{position:relative;overflow:hidden;height:937px;}
.introB .visualArea .visual>img{position:absolute;left:calc(50% - 690px);width:1380px;height:100%;max-width:none;}
.introB .rightScroll{display:inline-block;width:540px;vertical-align:top;padding:0 80px;overflow-y:scroll;height:937px;}
.introB .itemList{font-size:0;}
.introB .itemList>li{width:100;}
.introB .itemList>li+li{margin-top:30px;}
.introB .itemList>li>a{position:relative;display:block;}
.introB .itemList>li>a>.txtArea{position:absolute;left:0;bottom:0;width:100%;padding:0 20px 15px 20px;}
.introB .itemList>li>a>.txtArea.pcHidden{display:none;}
.introB .itemList>li>a>.txtArea p{font-size:22px;font-weight:600;color:#fff;line-height:30px;}
.introB .itemList>li>a>.txtArea span{display:block;font-size:14px;color:#fff;margin-top:5px;}

.introB .scrollMotion{position:absolute;right:60px;bottom:150px;z-index:100;transform-origin:top right;transform:rotate(-90deg);animation: mouseMotion 1s infinite;-webkit-animation: mouseMotion 1s infinite;}
.introB .scrollMotion>p{font-size:14px;line-height:24px;min-height:24px;color:#111;background:url(../../KOR_A/img/intro/icon_introBScroll.png) no-repeat center left/24px auto;padding-left:35px;}


@keyframes mouseMotion {
    0% {bottom:150px;}
    50% {bottom:130px;}
    100% {bottom:150px;}
}

@media all and (max-width:1650px){
	.introA .slider	{bottom:-80px}
}
@media all and (max-width:1280px){    
    .introA{padding-bottom:50px;}
    .introA>.leftMenu{width:245px;}
    .introA>.rightContent{width:calc(100% - 245px);background-color:#000;}
    .introA>.rightContent>div.videoArea{width:100%;}
    .introA>.rightContent>div.videoArea>img{max-width:none;width:1100px;left:50%;transform:translate(-50%,0);}
    .introA>.videoList{position:relative;bottom:0;margin-top:30px;}
    .introA>.rightContent>div.videoArea::before{padding-top:600px;}
    .introA>.rightContent>div.videoArea .videoPlay{width:140px;height:140px;top:calc(50% - 70px);left:calc(50% - 70px);line-height:140px;font-size:28px;}
    .introA .slider .swiper-button-prev{left:-60px;}

    .introB .visualArea .introHeader .logo>img{height:25px;}
    .introB .visualArea .introHeader .logo{left:40px;}
    .introB .visualArea .introHeader .util{right:40px;top:33px;}
    .introB .visualArea .introHeader .util>a{font-size:14px;}
    .introB .visualArea .introHeader .util>a+a{margin-left:20px;}
    .introB .visualArea{width:calc(100% - 460px);}
    .introB .rightScroll{padding:0 40px;width:460px;}
    .introB .scrollMotion{right:30px;}
}

@media all and (max-width:1040px){
    .introAType{background-color:#000;}
    .introA .slider{position:relative;bottom:auto;margin-top:40px;}
    .introA>.rightContent>div.videoArea::before{padding-top:450px;}  
    .introA>.rightContent>div.videoArea::after{content:"";width:100%;height:150px;position:absolute;left:0;bottom:-30px;z-index:12;;
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 11%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.63) 46%, rgba(0,0,0,0.65) 47%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 71%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 11%,rgba(0,0,0,0.25) 25%,rgba(0,0,0,0.63) 46%,rgba(0,0,0,0.65) 47%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 71%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 11%,rgba(0,0,0,0.25) 25%,rgba(0,0,0,0.63) 46%,rgba(0,0,0,0.65) 47%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 71%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    }
}

@media all and (max-width:950px){
    .introAType{background-color:#000;}
    .introA{padding-bottom:0;}
    .introA>.leftMenu{width:100%;padding-top:0;background-color:#1A1A1A;}
    .introA>.leftMenu .logo{width:100%;height:60px;padding:15px;border-bottom:1px solid rgba(255,255,255,0.1);}
    .introA>.leftMenu .logo::before{display:none;}
    .introA>.leftMenu .logo>a{display:inline-block;}
    .introA>.leftMenu .logo>a>img{display:none;}
    .introA>.leftMenu .logo>a>span{display:block;}
    .introA>.leftMenu .logo>a>span>img{height:28px;}
    .introA>.leftMenu .menuList{width:100%;padding:18px 0;}
    .introA>.leftMenu .menuList .menu{margin-bottom:0;font-size:0;}
    .introA>.leftMenu .menuList .menu>a{font-size:16px;display:inline-block;padding:0 10px;text-align:center;width:33.333%;margin:0 !important;}
    .introA>.leftMenu .sns{margin-top:0;position:absolute;right:15px;top:21px;}
    .introA>.leftMenu .sns>a{display:inline-block;vertical-align:middle;background-repeat:no-repeat;background-size:auto 100%;height:16px;text-indent:-9999px;}
    .introA>.leftMenu .sns>a+a{margin-top:0;margin-left:18px;}
    .introA>.leftMenu .sns>a.facebook{background-image:url(../../KOR_A/img/layout/f_sns_facebook.png);width:9px;}
    .introA>.leftMenu .sns>a.instagram{background-image:url(../../KOR_A/img/layout/f_sns_instagram.png);width:16px;}
    .introA>.leftMenu .sns>a.blog{background-image:url(../../KOR_A/img/layout/f_sns_nBlog.png);width:12px;}
    .introA>.leftMenu .sns>a.youtube{background-image:url(../../KOR_A/img/layout/f_sns_youtube.png);width:22px;}
    .introA>.rightContent{width:100%;overflow:hidden;}
    .introA>.rightContent::before{display:none;}
    .introA>.rightContent>div.videoArea::before{padding-top:57.8%;}
    .introA>.rightContent>div.videoArea>img{width:100%;}
	.introA .slider{position:relative;padding:30px;bottom:auto;margin-top:20px;width:100%;left:0;}
    .introA .slider .inner{width:100%;margin-left:0;}
    .introA .slider .swiper-slide:nth-of-type(2n), 
    .introA .slider .list:nth-of-type(2n){margin-top:0;}
    .introA .slider .list{width:100%;margin-right:0px;}
    .introA .slider .list + .list{margin-top:30px;}
    .introA .slider .list p{font-size:14px;margin-top:10px;}
    .introA .slider .list>a{display:block;}
    .introA .slider .list>a>img{display:block;max-width:none;width:100%;}
    .introA .slider .inner .swiper-wrapper{padding-top:0;}
    .introA .slider .swiper-slide{margin-right:0;}
    .introA .slider .swiper-button-next{top:0;width:16px;height:30px;background:url(../../KOR_A/img/intro/icon_m_introPrevArrow.png) no-repeat center center/100% auto;margin-top:-21px}
    .introA .slider .swiper-button-prev{top:0;left:auto;right:80px;width:16px;height:30px;background:url(../../KOR_A/img/intro/icon_m_introNextArrow.png) no-repeat center center/100% auto;margin-top:-21px}
    

    .introB .visualArea{width:100%;}
    .introB .introHeader .logoArea{width:100%;height:55px;background-color:#fff;padding:13px;text-align:center;border-bottom:1px solid #d1d1d1;}
    .introB .visualArea .introHeader{height:auto;}
    .introB .visualArea .introHeader .logo{position:static;display:inline-block;}
    .introB .visualArea .introHeader .logo>img{height:28px;}
    .introB .visualArea .introHeader{position:relative;width:100%;}
    .introB .visualArea .introHeader .util{position:static;width:100%;padding:20px 0;text-align:left;font-size:0;}
    .introB .visualArea .introHeader .util>a{font-size:16px;padding:0 10px;margin:0 !important;width:33.333%;text-align:center;}

    .introB .visualArea .visual{height:350px;background-image:url(../../KOR_A/img/intro/m_intro_visualSample.png);background-repeat:no-repeat;background-position:center center;background-size:cover;}
    .introB .visualArea .visual>img{display:none;}
    .introB .rightScroll{width:100%;padding:20px 40px 40px 40px;overflow-y:visible;height:auto;}
    .introB .itemList>li{width:calc(50% - 10px);display:inline-block;vertical-align:top;margin:20px 0;}
    .introB .itemList>li:nth-child(2n){margin-left:20px;}
    .introB .itemList>li>a>img{max-width:none;width:100%;display:block;}
    .introB .itemList>li+li{margin-top:20px;}
    .introB .itemList>li>a>.txtArea.pcHidden{display:block;}
    .introB .itemList>li>a>.txtArea{position:static;padding:0;margin-top:11px;}
    .introB .itemList>li>a>.txtArea p{color:#111;}
    .introB .itemList>li>a>.txtArea span{color:#666;}
    .introB .scrollMotion{display:none;}
}

@media all and (max-width:768px){
    .introA>.leftMenu .menuList .menu>a{font-size:14px;}
    .introA>.rightContent>div.videoArea .videoPlay{width:90px;height:90px;font-size:18px;line-height:90px;top:calc(50% - 45px);left:calc(50% - 45px);}
    .introA>.rightContent>div.videoArea::after{bottom:0px;height:50px;}
    .introA .slider{padding:15px;margin-top:0;}
    .introA .slider .swiper-button-next{width:8px;height:15px;right:15px;}
    .introA .slider .swiper-button-prev{width:8px;height:15px;right:41px;}

    .introB .visualArea .visual{height:166px;}
    .introB .visualArea .introHeader .util>a{font-size:14px;}
    .introB .rightScroll{padding:25px 15px 40px 15px}
    .introB .itemList>li{margin:15px 0;}
    .introB .itemList>li+li{margin-top:15px;}
    .introB .itemList>li>a>.txtArea{position:static;padding:0;}
    .introB .itemList>li>a>.txtArea p{font-size:14px;line-height:18px;}
    .introB .itemList>li>a>.txtArea span{font-size:12px;line-height:15px;margin-top:3px;color:#666;}
    
}

@media all and (max-width:480px){
    /* .introB .rightScroll{padding-top:40px;} */
    .introB .rightScroll{padding-bottom:0;}
    /* .introB .itemList>li{width:100%;margin:0 0 20px 0 !important;} */
    .introB .itemList>li:nth-child(2n){margin-left:10px;}
    .introB .itemList>li{width:calc(50% - 5px);}
}

@media all and (max-width:350px){
    .introB .rightScroll{padding-top:40px;}
    .introB .itemList>li{width:100%;margin:0 0 20px 0 !important;}

}