@charset "utf-8";

#mainVisual{overflow:hidden;width:100%;height:100%}

/* 텍스트 */
#mainVisual .txt_area{position:absolute;z-index:2;width:1200px;left:50%;top:55%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff;}
#mainVisual .txt_area .stxt{margin-bottom:27px;-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);
-webkit-transition:opacity  0.79s 0.09s, transform  0.79s 0.09s;transition:opacity  0.79s 0.09s, transform  0.79s 0.09s;font-size:14px;opacity:0;filter:alpha(opacity=0)}
#mainVisual .swiper-slide-active .txt_area .stxt,#mainVisual .swiper-slide-duplicate-active .txt_area .stxt{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}
#mainVisual .txt_area .btxt{font-size:72px;font-weight:700;line-height:100px}
#mainVisual .txt_area .btxt span{overflow:hidden;display:block}

/* 텍스트애니메이션 */
#mainVisual .txt_area .btxt em{font-style:normal;opacity:0;filter:alpha(opacity=0);display:inline-block}
#mainVisual .txt_area .btxt em:nth-child(1){-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.79s 0.09s;transition:all  0.79s 0.09s}
#mainVisual .txt_area .btxt em:nth-child(2){-webkit-transform:translateY(98px);-ms-transform:translateY(98px);transform:translateY(98px);-webkit-transition:all  0.78s 0.18s;transition:all  0.78s 0.18s}
#mainVisual .txt_area .btxt em:nth-child(3){-webkit-transform:translateY(97px);-ms-transform:translateY(97px);transform:translateY(97px);-webkit-transition:all  0.77s 0.27s;transition:all  0.77s 0.27s}
#mainVisual .txt_area .btxt em:nth-child(4){-webkit-transform:translateY(96px);-ms-transform:translateY(96px);transform:translateY(96px);-webkit-transition:all  0.76s 0.36s;transition:all  0.76s 0.36s}
#mainVisual .txt_area .btxt em:nth-child(5){-webkit-transform:translateY(95px);-ms-transform:translateY(95px);transform:translateY(95px);-webkit-transition:all  0.76s 0.45s;transition:all  0.76s 0.45s}
#mainVisual .swiper-slide-active .txt_area .btxt em,#mainVisual .swiper-slide-duplicate-active .txt_area .btxt em{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

/* dot */
#mainVisual .txt_area .dot{margin-top:180px}
#mainVisual .txt_area .dot em{display:inline-block;margin-right:13px;opacity:0;filter:alpha(opacity=0)}
#mainVisual .txt_area .dot em:nth-child(1),#mainVisual .txt_area .dot em:nth-child(5){-webkit-transform:translateY(99px);-ms-transform:translateY(99px);transform:translateY(99px);-webkit-transition:all  0.79s 0.09s;transition:all  0.79s 0.09s}
#mainVisual .txt_area .dot em:nth-child(2),#mainVisual .txt_area .dot em:nth-child(6){-webkit-transform:translateY(98px);-ms-transform:translateY(98px);transform:translateY(98px);-webkit-transition:all  0.78s 0.18s;transition:all  0.78s 0.18s}
#mainVisual .txt_area .dot em:nth-child(3),#mainVisual .txt_area .dot em:nth-child(7){-webkit-transform:translateY(97px);-ms-transform:translateY(97px);transform:translateY(97px);-webkit-transition:all  0.77s 0.27s;transition:all  0.77s 0.27s}
#mainVisual .txt_area .dot em:nth-child(4),#mainVisual .txt_area .dot em:nth-child(8){-webkit-transform:translateY(96px);-ms-transform:translateY(96px);transform:translateY(96px);-webkit-transition:all  0.76s 0.36s;-transition:all  0.76s 0.36s}
#mainVisual .swiper-slide-active .txt_area .dot em, #mainVisual .swiper-slide-duplicate-active .txt_area .dot em{opacity:1;filter:alpha(opacity=100);-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}

/* 이미지 */
#mainVisual .img_area{/*position:relative;*/z-index:1;width:1200px;margin:0 auto}
#mainVisual .img{position:absolute;left:368px;top:0;-webkit-transform:translateX(150px);-ms-transform:translateX(150px);transform:translateX(150px); opacity:0;-webkit-transition:all  0.79s 0.09s;transition:all  0.79s 0.09s}
#mainVisual .swiper-slide-active .img{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1}

/* 컨트롤 */
#mainVisual .arr_wrap{position:absolute;top:59%;left:50%;transform:translateX(-50%);z-index:3;width:1200px;margin:0 auto}
#mainVisual .arr_wrap > div{position:absolute;width:70px;height:70px;top:50%;left:290px; background:none}
#mainVisual .arr_wrap .next{left:400px;border:1px solid rgba(255,255,255,.3);border-radius:50%}
.swiper-slide{overflow:hidden;float:left;background-color:#000}
#mainVisual .arr_wrap .next:before, #mainVisual .arr_wrap .next:after{display:block;content:"";position:absolute;right:0;top:0;width:70px;height:70px;background: url(http://www.shiningcorp.com/sh_img/index/main_banner/next.png) center no-repeat;-webkit-transition:all .2s;transition:all .2s}
#mainVisual .arr_wrap .next:before{right:20px;opacity:0}
#mainVisual .arr_wrap .next:hover:before{right:0;opacity:1;transition-delay:.15s}
#mainVisual .arr_wrap .next:hover:after{right:-20px;opacity:0}
#mainVisual .arr_wrap .prev:before, #mainVisual .arr_wrap .prev:after{display:block;content:"";position:absolute;left:0;top:0;width:70px;height:70px;background: url(http://www.shiningcorp.com/sh_img/index/main_banner/prev.png) center no-repeat;-webkit-transition:all .2s;transition:all .2s}
#mainVisual .arr_wrap .prev:before{left:20px;opacity:0}
#mainVisual .arr_wrap .prev:hover:before{left:0;opacity:1;transition-delay:.15s}
#mainVisual .arr_wrap .prev:hover:after{left:-20px;opacity:0}

/* svg */
.circle_svg{position:absolute;top:-1px;left:-1px;width:70px;height:70px}
.circle_svg svg{display:block;transform:rotate(-31deg)}
.circle_svg #cercle_blanc{stroke-dashoffset:160;stroke-dasharray:190;position:absolute;top:0;stroke-linecap:round}
#mainVisual .arr_wrap .next.on #cercle_blanc{stroke-dasharray:190;animation:fill .4s cubic-bezier(0.165, 0.840, 0.440, 1.000);-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fill{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
#mainVisual .arr_wrap .next.off #cercle_blanc{animation:fill-off .4s cubic-bezier(0.165, 0.840, 0.440, 1.000);-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes fill-off{from{stroke-dashoffset:0}to{stroke-dashoffset:160}}

@charset "utf-8";

#shSub{position: fixed;top:115px;left:0; z-index:10;width:100%;height:185px;padding-top:60px;-webkit-transition:all .1s;transition:all .1s; background-color:#fff}

#shTit{position:relative;width:1200px;margin:0 auto;color:#111;}
#shTit p{position:absolute;top:50%;left:0; -webkit-transform:translateY(-50%);-ms--webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:13px;font-weight:600;line-height:1}
#shTit p a{margin-right:10px}
#shTit p .gr:after{display:inline-block;vertical-align:1px;margin:0 8px;content:url(/sh_img/hd/sub_main_banner/sasun.png)}
#shTit h2{font-size:30px;font-weight:800;line-height:1;text-align:center;-webkit-transition:all .2s;transition:all .2s;}
#shTit h3{font-size:16px;font-weight:800;line-height:1;text-align:center;-webkit-transition:all .2s;transition:all .2s; padding:5px 0 0 0;}

#shSub.move{height:103px;padding-top:28px;}
#shSub.move h2{font-size:28px}
#shSub.move h3{font-size:14px}