@charset "utf-8";
/* 비디오 레이어 */
#mask {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:.8; filter:alpha(opacity='80'); z-index:1000}
#videolayer {display:none; position:fixed; left:50%; width:60%; margin-left:-30%; z-index:1010}
/* 메인 롤링 이미지 영역 */
#mainSlide {position:relative; padding:0 500px 0 200px}
#mainSlide .visual_wrap {position:relative; height:1040px; overflow:hidden}
#mainSlide ul.imgRolling {position:relative}
#mainSlide ul.imgRolling li {position:relative; float:left; height:1040px; background-size:cover !important}
#mainSlide ul.imgRolling li.item {background-position: center top;background-repeat: no-repeat;}
#mainSlide ul.imgRolling li img {display:block}
#mainSlide ul.imgRolling li .text {position:absolute; top:100px; left:120px}
#mainSlide ul.imgRolling li .text h2 {position:relative; font-family:'Source Sans Pro', 'Nanum Gothic',sans-serif; font-weight:300; font-size:56px; color:#fff; line-height:1.1; margin-bottom:20px; padding-bottom:20px}
#mainSlide ul.imgRolling li .text h2 span {font-weight:700}
#mainSlide ul.imgRolling li .text h2:after {position:absolute; bottom:0; left:5px; width:100px; height:3px; content:''; background:#fff}
#mainSlide ul.imgRolling li .text h2.black {color:#000}
#mainSlide ul.imgRolling li .text h2.black:after {background:#000}
#mainSlide ul.imgRolling li .text h3 {font-size:24px; color:#e14739}
#mainSlide ul.imgRolling li .text h3.black {color:#000 !important }
#mainSlide ul.imgRolling li .text a.btn_main {display:inline-block; margin-top:50px; padding:10px 50px; font-size:16px; color:#fff; border:2px solid #fff; transition:all 0.4s ease}
#mainSlide ul.imgRolling li .text a.btn_main:hover {color:#fff; border-color:#e14739; background:#e14739}
#mainSlide .visual_wrap ol.indicator {position:absolute; bottom:50px; left:0; width:100%; text-align:center}
#mainSlide .visual_wrap ol.indicator li {display:inline-block; margin:0 3px; width:40px; height:4px; background:#fff; cursor:pointer;transition:all 0.4s ease}
#mainSlide .visual_wrap ol.indicator li.active {background:#e14739;width:60px;}
#mainSlide .visual_wrap a.control {position:absolute; top:50%; margin-top:-23px; z-index:50}
#mainSlide .visual_wrap a.control img {display:block}
#mainSlide .visual_wrap a.prev {left:50px}
#mainSlide .visual_wrap a.next {right:50px}
/* 우측 배너영역 */
#aside {position:absolute; width:500px; top:0; right:0; height:100%; background:#21bbb1}
#aside div h2 {position:absolute; top:30px; left:30px; font-size:15px; color:#eee; z-index:30}
#aside div h2.black {color:#333}
/* 우측 배너영역 - Products Fade */
#aside .imgSlide {position:relative; height:300px; overflow:hidden; background:#333}
#aside .imgSlide ul.imgList {position:relative; width:1000%}
#aside .imgSlide ul.imgList li {position:absolute; width:500px; height:300px; z-index:5}
#aside .imgSlide ul.imgList li.active {position:relative; z-index:20}
#aside .imgSlide ul.imgList li img {display:block; width:100%}
#aside .imgSlide ul.imgList li p.caption {position:absolute; top:80px; left:30px; padding:15px 0; font-size:22px; font-weight:600; color:#e14739; line-height:1.2; z-index:30}
#aside .imgSlide ul.imgList li p.desc {position:absolute; top:150px; left:30px; width:80%; line-height:1.5; color:#fff; opacity:.8; filter:alpha(opacity='80'); z-index:30}
#aside .imgSlide ul.imgList li p.caption:after {position:absolute; bottom:0; left:0; width:30px; height:2px; content:''; background:#e14739}
#aside .imgSlide ol.pagination {position:absolute; bottom:30px; left:30px; z-index:30}
#aside .imgSlide ol.pagination li {display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:10px; background:#ddd; cursor:pointer;transition:all 0.4s ease}
#aside .imgSlide ol.pagination li.on {background:#e14739;width:20px;height:10px;}
/* 우측 배너영역 - 이미지 롤링 */
#aside .srepuSlide {position:relative; height:300px; overflow:hidden}
#aside .srepuSlide ul.imgList {position:relative; width:1000%; height:100%; overflow:hidden}
#aside .srepuSlide ul.imgList li {position:relative; float:left; height:100%}
#aside .srepuSlide ul.imgList li img {display:block; width:100%; height:100%}
#aside .srepuSlide ul.imgList li .caption {position:absolute; top:30px; left:30px}
#aside .srepuSlide ul.imgList li .caption h3 {font-size:22px; color:#e14739; line-height:1}
#aside .srepuSlide ul.imgList li .caption h3:after {display:block; width:30px; height:2px; margin:20px 0; content:''; background:#e14739}
#aside .srepuSlide ul.imgList li .caption p {color:#fff; opacity:.8; filter:alpha(opacity='80')}
#aside .srepuSlide ul.imgList li .caption span.more {display:inline-block; margin-top:40px; padding:8px 20px; font-weight:600; color:#fff; border:1px solid #ccc; background:rgba(255,255,255,.15); transition:all .3s ease}
#aside .srepuSlide ul.imgList li .caption span.more:hover {border-color:#e14739; background:#e14739}
#aside .srepuSlide ol.pagination {position:absolute; bottom:30px; left:30px; z-index:30}
#aside .srepuSlide ol.pagination li {display:inline-block; width:10px; height:10px; margin-right:5px; border-radius:10px; background:#ddd; cursor:pointer;transition:all 0.4s ease}
#aside .srepuSlide ol.pagination li.on {background:#e14739;width:20px;height:10px;}
/* 우측 배너영역 - Promotional Video */
#aside .video_box {position:relative; float:left; width:250px; cursor:pointer}
#aside .video_box img {display:block}
#aside .video_box .play {position:absolute; display:block; width:100%; top:100px; left:0; text-align:center; color:#eee}
#aside .video_box .play img {margin:0 auto 10px auto}
/* 우측 배너영역 - Three-Four Service */
#aside .solution_box {position:relative; float:left; width:250px; height:300px; background:#f4f4f4 url(../img/solution_bg.png) bottom right 20px no-repeat}
#aside .solution_box a {display:block; width:100%; height:100%}
#aside .solution_box .desc {padding:80px 30px 0 30px}
/* 우측 배너영역 - 하단 배너링크 리스트 */
#aside .banner_area {clear:both; height:140px; background:#fff}
#aside .banner_area ul {height:100%; overflow:hidden}
#aside .banner_area ul li {position:relative; float:left; width:20%; height:100%; text-align:center}
#aside .banner_area ul li:before {position:absolute; top:50%; left:0; margin-top:-40px; width:1px; height:80px; content:''; background:#eee}
#aside .banner_area ul li:first-child:before {display:none}
#aside .banner_area ul li a img {display:block; margin:0 auto 15px auto; padding-top:25px}
#aside .banner_area ul li a {display:block; height:100%}
#aside .banner_area ul li a img {display:block; width:55px; margin:0 auto 15px auto}
/* 미디어쿼리 */
@media screen and (max-width:1400px) {
 #mainSlide {padding-right:0}
 #aside {display:none}
}
@media screen and (max-width:1024px) {
 body.main #container {margin:0}
 #mainSlide {padding:0}
 #mainSlide .visual_wrap {height:650px}
 #mainSlide ul.imgRolling li {height:650px}
 #mainSlide ul.imgRolling li img {width:100%; height:100%}
 #mainSlide ul.imgRolling li .text h2 {font-size:32px}
 #mainSlide ul.imgRolling li .text h2:after {width:32px; height:2px}
 #mainSlide ul.imgRolling li .text h3 {font-size:18px}
 #mainSlide ul.imgRolling li .text a.btn {margin-top:40px}
 #aside {position:static !important; display:block !important; clear:both; float:none; width:100%}
 #aside .imgSlide {float:left; width:50%; overflow:hidden}
 #aside .imgSlide ul.imgList li {width:540px}
 #aside .latest_box {margin-left:50%}
 #aside .video_box {float:left; width:50%; height:300px}
 #aside .video_box > img {width:100%; height:100%}
 #aside .solution_box {width:50%}
}
@media screen and (max-width:640px) {
 #videolayer {margin-left:-150px !important}
 #videolayer iframe {width:300px !important; height:300px !important}

 #mainSlide .visual_wrap {height:auto}
 #mainSlide ul.imgRolling li {height:350px}
 #mainSlide ul.imgRolling li img {display:block}
 #mainSlide ul.imgRolling li .text {top:60px; left:13%}
 #mainSlide ul.imgRolling li .text h2 {font-size:28px}
 #mainSlide ul.imgRolling li .text h2:after {width:30px; height:2px}
 #mainSlide ul.imgRolling li .text h3 {font-size:12px}
 #mainSlide ul.imgRolling li .text a.btn {display:none}
 #mainSlide .visual_wrap a.control {width:15px; margin-top:-14px}
 #mainSlide .visual_wrap a.control img {width:100%}
 #mainSlide .visual_wrap a.prev {left:20px}
 #mainSlide .visual_wrap a.next {right:20px}
 #aside .imgSlide {float:none; width:100% !important}
 #aside .imgSlide ul.imgList li {width:640px}
 #aside .latest_box {margin:0}
 #aside .video_box {float:none; width:100%}
 #aside .solution_box {float:none; width:100%}
 #aside .banner_area {height:120px}
 #aside .banner_area ul li a {font-size:12px !important}
 #aside .banner_area ul li a img {width:32px}
}
@media screen and (max-width:480px) {
 #mainSlide ul.imgRolling li .text h2 {font-size:26px !important}

 #aside .banner_area {height:100px}
 #aside .banner_area ul li:before {margin-top:-25px; height:50px !important}
 #aside .banner_area ul li a img {padding-top:15px !important}
}