@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}

/* ¿ìÃø ¹è³Ê¿µ¿ª */
#aside {position:absolute; width:500px; top:0; right:0; height:100%; background:#222}
#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:#f4bd00; 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:#f4bd00}
#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:50%; background:#ddd; cursor:pointer}
#aside .imgSlide ol.pagination li.on {background:#f4bd00}
/* ¿ìÃø ¹è³Ê¿µ¿ª - À̹ÌÁö ·Ñ¸µ */
#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:#f4bd00; line-height:1}
#aside .srepuSlide ul.imgList li .caption h3:after {display:block; width:30px; height:2px; margin:20px 0; content:''; background:#f4bd00}
#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:#f4bd00; background:#f4bd00}
#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:50%; background:#ddd; cursor:pointer}
#aside .srepuSlide ol.pagination li.on {background:#f4bd00}
/* ¿ìÃø ¹è³Ê¿µ¿ª - 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:48px; 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}
 #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}
 
  #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) {
 
 #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}
}