@charset "utf-8";

#main_visual{position:relative;width:100%;height:100%;height:100vh;text-align:center}
/* 메인텍스트 */
#main_overlay{display:table;position:absolute;z-index:10;width:100%;height:100%;background-color:#333;background-color:rgba(0,0,0,.5)}
#main_overlay .txt_area{opacity:0;display:table-cell;vertical-align:middle;padding-top:50px;font-size:30px;font-weight:300;color:#fff;text-transform:uppercase;font-family:'Work Sans', arita-medium}
#main_overlay .txt_area p{opacity:0;padding-top:70px;font-size:72px;font-weight:200}
#main_overlay .txt_area p b{position:relative;z-index:0;font-weight:700}
#main_overlay .txt_area p .circle{opacity:0;display:block;position:absolute;right:-220px;top:-60px;z-index:-1;width:170px;height:170px;border-radius:200px;background-color:#f8598b} 
/* load */
.bokeh{font-size:80px;width:1em;height:1em;position:relative;margin:40px auto;border-radius:50%;border:.01em solid rgba(150,150,150,0.1);list-style:none}
.bokeh li{position:absolute;width:.2em;height:.2em;border-radius:50%}
.bokeh li:nth-child(1){left:50%;top:0;margin:0 0 0 -.1em;background:#973999;-webkit-transform-origin:50% 250%;transform-origin:50% 250%;-webkit-animation:rota 1.13s linear infinite,opa 3.67s ease-in-out infinite alternate;animation:rota 1.13s linear infinite,opa 3.67s ease-in-out infinite alternate}
.bokeh li:nth-child(2){top:50%;right:0;margin:-.1em 0 0 0;background:#f8598b;-webkit-transform-origin:-150% 50%;transform-origin:-150% 50%;-webkit-animation:rota 1.86s linear infinite,opa 4.29s ease-in-out infinite alternate;animation:rota 1.86s linear infinite,opa 4.29s ease-in-out infinite alternate}
.bokeh li:nth-child(3){left:50%;bottom:0;margin:0 0 0 -.1em;background:#f7bf00;-webkit-transform-origin:50% -150%;transform-origin:50% -150%;-webkit-animation:rota 1.45s linear infinite,opa 5.12s ease-in-out infinite alternate;animation:rota 1.45s linear infinite,opa 5.12s ease-in-out infinite alternate}
.bokeh li:nth-child(4){top:50%;left:0;margin:-.1em 0 0 0;background:#24e4b9;-webkit-transform-origin:250% 50%;transform-origin:250% 50%;-webkit-animation:rota 1.72s linear infinite,opa 5.25s ease-in-out infinite alternate;animation:rota 1.72s linear infinite,opa 5.25s ease-in-out infinite alternate}
@-webkit-keyframes rota{from{}to{-webkit-transform:rotate(360deg)}}
@keyframes rota{from{}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
/* slides */
#slides{position:relative;width:100%;height:100%;list-style:none;overflow:auto;margin:0 auto}
#slides li{overflow:hidden;width:100%;height:100%;background-repeat:no-repeat;background-position:center;/*background-attachment:fixed*/-webkit-animation:main 20s linear infinite;-ms-animation:main 20s linear infinite;animation:main 20s linear infinite}
@-webkit-keyframes main{from{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}
@-ms-keyframes main{from{-ms-transform:scale(1)}50%{-ms-transform:scale(1.1)}100%{-ms-transform:scale(1)}}
@keyframes main{from{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
#slides .img01{background-image:url(/sh_img/index/main_banner/main_banner01.jpg)}
#slides .img02{background-image:url(/sh_img/index/main_banner/main_banner02.jpg)}
#slides .img03{background-image:url(/sh_img/index/main_banner/main_banner03.jpg)}
/* pagenation */
#main_visual .pagination{position:absolute;left:-120px;bottom:120px;z-index:999;width:120px;padding-bottom:50px;font-size:12px;font-weight:600;letter-spacing:1px;text-align:center; background-color:#fff;font-family:'Work Sans', sans-serif}
#main_visual .pagination li{position:relative;padding:10px 0;margin:10px 0;color:#c1c1c1;cursor:pointer;transition:all .2s}
#main_visual .pagination li.current{color:#222}
#main_visual .pagination li.current:before{content:"";position:absolute;left:50%;top:16px;z-index:-1;width:30px;height:1px;margin-left:-15px;background-color:#f8598b}
#main_visual .pagination li:hover{color:#222}
/* controls */
#main_visual .controls li{position:absolute;left:-120px;bottom:0;z-index:999;display:block;width:120px;height:120px;cursor:pointer;transition:all .3s}
#main_visual .controls .prev{background:url(/sh_img/index/main_banner/img/prev.png) 40% center no-repeat #e8e8e8}
#main_visual .controls .prev:before{display:block;content:"";position:absolute;top:50%;left:40%;width:20px;height:1px;background-color:#333;transition:all.3s}
#main_visual .controls .prev:hover{background-position:32% center}
#main_visual .controls .prev:hover:before{left:32%;width:35px}
#main_visual .controls .next{left:0;background:url(/sh_img/index/main_banner/img/next.png) 57% center no-repeat;background-color:#555;background-color:rgba(0,0,0,.5)}
#main_visual .controls .next:before{display:block;content:"";position:absolute;top:50%;left:40%;width:20px;height:1px;background-color:#fff;transition:all.3s}
#main_visual .controls .next:hover{background-position:61% center}
#main_visual .controls .next:hover:before{left:32%;width:35px}