@charset "utf-8";
/* ¸ÞÀÎ ·Ñ¸µ À̹ÌÁö */
#mainSlider {position:relative; margin-top:80px; overflow:hidden}
#mainSlider ul.imgList {position:relative; width:1000%}
#mainSlider ul.imgList li {position:relative; float:left; height:603px; overflow:hidden; background-size:cover !important}
#mainSlider ul.imgList li.img1 {background:url(../../img/images/main_img01.jpg) center top no-repeat}
#mainSlider ul.imgList li.img2 {background:url(../../img/images/main_img02.jpg) center top no-repeat}
#mainSlider ul.imgList li.img3 {background:url(../../img/images/main_img03.jpg) center top no-repeat}
#mainSlider ul.imgList li.img4 {background:url(../../img/images/banner_bg.jpg) center top no-repeat}
#mainSlider ul.imgList li > img {position:absolute; display:block; top:0; left:0; width:100%; height:100%}
#mainSlider ul.imgList li .caption {position:relative; top:30%; margin:0 auto; padding:0 50px; text-align:center; z-index:80; display:inline-block;}
#mainSlider ul.imgList li .caption div.main_title {width:100vw;}
#mainSlider ul.imgList li .caption div.main_title img {width:40%; max-width:597px; margin-left:-24%; left:50%; position:absolute; height:auto;margin-top:-50px;}
#mainSlider ul.imgList li .caption h2 {font-size:65px; font-weight:600; color:#000; line-height:1.1; text-shadow:1px 1px 0px #000; padding:40px; }
#mainSlider ul.imgList li .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px auto; background:#000}
#mainSlider ul.imgList li .caption p {font-size:20px; color:#000}
#mainSlider ul.imgList li .caption a.btn {position:relative; display:inline-block; margin-top:60px; padding:10px 35px; font-size:15px; font-weight:600; color:#000; background:transparent; border:2px solid #000}
#mainSlider ul.imgList li .caption a.btn span {position:relative; transition:all .3s ease; z-index:10}
#mainSlider ul.imgList li .caption a.btn:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#000; transition:all .3s ease}
#mainSlider ul.imgList li .caption a.btn:hover:before {height:100%}
#mainSlider ul.imgList li .caption a.btn:hover span {color:#fff}
#mainSlider ul.imgList li .caption.white h2 {color:#fff !important}
#mainSlider ul.imgList li .caption.white h2:after {background:#fff !important}
#mainSlider ul.imgList li .caption.white p {color:#fff !important}
#mainSlider ul.imgList li .caption.white a.btn {color:#fff; border:2px solid #fff}
#mainSlider ul.imgList li .caption.white a.btn:before {background:#fff}
#mainSlider ul.imgList li .caption.white a.btn:hover span {color:#000}
#mainSlider ul.pagination {position:absolute; bottom:30px; left:0; width:100%; text-align:center; z-index:50}
#mainSlider ul.pagination li {display:inline-block; width:16px; height:16px; margin:0 3px; border:2px solid #fff; border-radius:50%; transition:all .3s ease; cursor:pointer}
#mainSlider ul.pagination li.active {background:#fff}
#mainSlider a.control {position:absolute; top:50%; margin-top:-29px; z-index:50}
#mainSlider a.control.prev {left:50px}
#mainSlider a.control.next {right:50px}
/* ¸ÞÀÎ ¼½¼Ç */
#container .mainSection {position:relative; padding:60px 0}
#container .mainSection .inner {position:relative; max-width:1400px; margin:0 auto; padding:0 50px}
#container .mainSection .inner:after {clear:both; display:block; content:''}
#container .mainSection .inner .title {text-align:center; margin-bottom:30px}
#container .mainSection .inner .title h2 {font-size:36px; font-weight:300; color:#555; line-height:1}
#container .mainSection .inner .title h2:after {display:block; width:40px; height:1px; content:''; margin:20px auto 40px auto; background:#999}
/* our team */
.mainSection.section1 ul.team_list {text-align:justify}
.mainSection.section1 ul.team_list:after {display:inline-block; width:100%; content:''}
.mainSection.section1 ul.team_list > li {display:inline-block; width:23%; text-align:center; vertical-align:top}
.mainSection.section1 ul.team_list > li .imgArea {margin:0 auto 10px auto; width:190px; height:190px; border-radius:0%; overflow:hidden}
.mainSection.section1 ul.team_list > li .imgArea img {display:block; width:100%}
.mainSection.section1 ul.team_list > li .info h3 {font-size:18px; font-weight:600; color:#555; line-height:1}
.mainSection.section1 ul.team_list > li .info span {font-size:12px; color:#999}
.mainSection.section1 ul.team_list > li .info ul {margin-top:25px}
.mainSection.section1 ul.team_list > li .info ul li {color:#888}
.mainSection.section1 ul.team_list > li .info ul li:before{display:inline-block; width:3px; height:3px; content:''; margin-right:5px; background:#ccc; vertical-align:middle}
/* our team */
.mainSection.section11 ul.team_list {text-align:justify; }
.mainSection.section11 ul.team_list:after {display:inline-block; width:100%; content:''}
.mainSection.section11 ul.team_list > li {display:inline-block; width:16%; text-align:center; vertical-align:top}
.mainSection.section11 ul.team_list > li .imgArea {margin:0 auto 10px auto; width:190px; height:190px; border-radius:0%; overflow:hidden}
.mainSection.section11 ul.team_list > li .imgArea img {display:block; width:100%}
.mainSection.section11 ul.team_list > li .info h3 {font-size:18px; font-weight:600; color:#555; line-height:1}
.mainSection.section11 ul.team_list > li .info span {font-size:12px; color:#999}
.mainSection.section11 ul.team_list > li .info ul {margin-top:10px}
.mainSection.section11 ul.team_list > li .info ul li {color:#888}
.mainSection.section11 ul.team_list > li .info ul li:before{display:inline-block; width:3px; height:3px; content:''; margin-right:5px; background:#ccc; vertical-align:middle}

/* ¼Ö·ç¼Ç ¼½¼Ç */
.mainSection.section2 {background:url(../../img/images/mainbanner_bg.jpg) center top no-repeat; background-size:cover}
.mainSection.section2 .inner {max-width:720px; margin:0 auto; text-align:center}
.mainSection.section2 .inner h2 {font-size:30px; font-weight:300; color:#fff; line-height:1.3; margin-bottom:20px}
.mainSection.section2 .inner span {display:inline-block; color:#fff; line-height:1; padding:15px 40px; border-radius:2px; background:#40adaa; transition:all .3s ease}
.mainSection.section2 .inner:hover span {color:#333; background:#fff}
/* portfolio */
.mainSection.section3 {background:#f4f4f4}
#photoSlide {position:relative}
#photoSlide .slide_wrap {position:relative; padding-bottom:15px; overflow:hidden}
#photoSlide .slide_wrap > div {position:relative; width:1000%}
#photoSlide .slide_wrap > div:after {clear:both; display:block; content:''}
#photoSlide .slide_wrap > div > table {float:left; width:285px; margin-right:20px; background:#fff; box-shadow:0 1px 2px 0 rgba(0,0,0,0.12); transition:all .4s ease}
#photoSlide .slide_wrap > div > table .board_output_gallery_img {height:250px; overflow:hidden}
#photoSlide .slide_wrap > div > table .board_output_gallery_img img {display:block; width:100%; height:auto}
#photoSlide .slide_wrap > div > table .board_output_gallery_img a {display:block; overflow:hidden}
#photoSlide .slide_wrap > div > table td br {display:none !important}
#photoSlide .slide_wrap > div > table .board_output_gallery_subject {display:block; padding:15px 20px; font-size:15px; font-weight:400; color:#444; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; transition:all .4s ease}
#photoSlide .slide_wrap > div > table .board_output_gallery_subject a {font-size:15px; font-weight:400; color:#444; transition:all .4s ease}
#photoSlide .slide_wrap > div > table:hover {margin-top:-15px}
#photoSlide .slide_wrap > div > table:hover .board_output_gallery_subject {color:#fff; background:#000}
#photoSlide .slide_wrap > div > table:hover .board_output_gallery_subject a {color:#fff}
#photoSlide .control {position:absolute; display:none; top:50%; margin-top:-18px}
#photoSlide .prev {left:30px}
#photoSlide .next {right:30px}
/* ÃֱٰԽù° ÃßÃâ ¹× °í°´¼¾ÅÍ ¿µ¿ª */
.mainSection.section4 .inner .latestBox {float:left; width:36%; margin-right:3%}
.mainSection.section4 .inner > div .tit {text-align:left; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid #eee; overflow:hidden}
.mainSection.section4 .inner > div .tit h3 {float:left; font-size:16px; color:#444; line-height:1}
.mainSection.section4 .inner > div .tit a.more {float:right; font-size:12px; color:#888}
.mainSection.section4 .inner > .latestBox > table.board_output tr td {text-align:left}
.mainSection.section4 .inner > .latestBox > table.board_output tr td:last-child {text-align:right !important}
.mainSection.section4 .inner > .latestBox > table.board_output td {color:#ccc; line-height:2; overflow:hidden}
.mainSection.section4 .inner > .latestBox > table.board_output td a {color:#666}
.mainSection.section4 .inner .customerBox {margin-left:78%}
.mainSection.section4 .inner .customerBox .info h4 {font-size:28px; color:#444; line-height:1.2; margin-bottom:10px}
.mainSection.section4 .inner .customerBox .info h4 a {font-size:28px !important; color:#444}
.mainSection.section4 .inner .customerBox .info p {color:#777; margin-bottom:20px}
.mainSection.section4 .inner .customerBox .info p span {font-weight:600}
.mainSection.section4 .inner .customerBox .info a.btnContact {display:block; width:100%; height:50px; font-size:inherit; color:#fff; text-align:center; line-height:46px; border:2px solid #000; background:#000; transition:all .3s ease}
.mainSection.section4 .inner .customerBox .info a.btnContact:hover {color:#000; background:#fff}
.mainSection.section5 {background:url(../../img/images/main_movie_bg.jpg) center no-repeat; }
.mainSection.section5 .left {float:left; width:48%;}
.mainSection.section5 .right {position:relative; float:right; width:48%}
.mainSection.section5 .left h2 {margin-bottom:120px}
.mainSection.section5 .left img {display:block; width:100%}
.mainSection.section5 .left h2 p {font-size:40px; font-weight:600; color:#21bbb1; letter-spacing:2px; line-height:1; margin-bottom:20px; transition:all .5s ease}
.mainSection.section5 .left p.desc {font-size:18px; line-height:1.7; color:#333; margin-bottom:50px}
.mainSection.section5 .right .video {position:relative; overflow:hidden; z-index:50}
.mainSection.section5 .right .video img {width:100%}
.mainSection.section5 .right .video img.play_icon {position:absolute; top:40%; left:45%; width:100px; height:100px}
#videoClip {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:50}
#videoClip iframe {position:absolute; top:0; left:0; width:100%; height:100%}
#videoClose {display:none; position:absolute; top:0; left:20px; z-index:40}
#videoClose img {display:block}

/* layer popup */
#layerpopup{background:#fff;}
.popHeader{height:30px; background:#fff; text-align:right;}
.popHeader a img{padding:0 6px 0 0;}
.popupContent{padding:0px;text-align:center;}
.pcl {float:right;}
.popupClose {margin-left:0px; height:30px; text-align:center; background:#2e2e2e; width:1498px;}
.popupClose2 { width:100%;height:30px; text-align:center; background:#2e2e2e;}
.popupClose input, .popupClose img { vertical-align:middle; margin:0 10px 0 0;}
.popupClose label{padding:0 8px 0 0;}
.popupClose a{color:#fff; text-decoration:none; line-height:30px;}

.onepopup {width:1498px; padding-left:00px;}

/* ¹Ìµð¾î Äõ¸® */
@media screen and (min-width:1400px) {
#mainSlider ul.imgList li .caption div.main_title img {width:597px; margin-left:-358.5px; }
}
@media screen and (max-width:768px) {
#mainSlider ul.imgList li .caption div.main_title img {width:50%; margin-left:-32%; }
}
@media screen and (max-width:1024px) {
#mainSlider ul.imgList li {height:500px}
#mainSlider ul.imgList li .caption h2 {font-size:38px}
#mainSlider ul.imgList li .caption p {font-size:13px}
#mainSlider ul.imgList li .caption p br {display:none}
#mainSlider ul.imgList li .caption a.btn {font-size:13px; margin-top:40px}
#mainSlider a.control {display:none}
#photoSlide .slide_wrap ul li .caption h3 {font-size:12px}
.mainSection.section1 ul.team_list > li {width:48%; margin-bottom:50px}
.mainSection.section4 .inner .latestBox {width:48%; margin:0 0 40px 4%}
.mainSection.section4 .inner .latestBox:first-child {margin-left:0}
.mainSection.section4 .inner .customerBox {clear:both; margin-left:0}
.mainSection.section4 .inner > .latestBox > table.board_output td {font-size:12px !important}
.mainSection.section4 .inner > .latestBox > table.board_output td a {font-size:12px !important}
.mainSection.section5 .left h2 p {font-size:36px}
.mainSection.section5 .left h2 p.tit2 {margin-left:-10px}
.mainSection.section5 .right .video img.play_icon {width:60px; height:60px; top:35%; left:40%}
}
@media screen and (max-width:768px) {
.mainSection.section2 .inner h2 {font-size:13px; font-weight:400; margin-bottom:15px}
.mainSection.section2 .inner h2 br {display:none}
.mainSection.section2 .inner span {font-size:11px; font-weight:500; padding:8px 12px}
}
@media screen and (max-width:640px) {
#mainSlider ul.imgList li {height:430px}
#mainSlider ul.imgList li > img {width:auto !important}
#mainSlider ul.imgList li .caption {top:35%; padding:0 30px}
#mainSlider ul.imgList li .caption div.main_title img {width:70%; margin-left:-42%; }
#mainSlider ul.imgList li .caption p {font-size:12px; max-width:100%}
#mainSlider ul.imgList li .caption a.btn {font-size:12px; padding:8px 25px}
#container .mainSection .inner {padding:0 30px}
#container .mainSection .inner .title h2 {font-size:24px; font-weight:500}
#photoSlide .slide_wrap ul li .caption {padding:10px 15px}
.mainSection.section1 ul.team_list > li {width:48%; margin-bottom:20px}
.mainSection.section1 ul.team_list > li .imgArea {width:128px; height:128px; margin:0 auto 30px auto}
.mainSection.section11 ul.team_list > li {width:48%; margin-bottom:10px}
.mainSection.section11 ul.team_list > li .imgArea {width:128px; height:128px; margin:0 auto 10px auto}
.mainSection.section4 .inner .latestBox {width:100%; margin:0 0 40px 0}
.mainSection.section5 .left {float:none; width:100%; margin-bottom:50px}
.mainSection.section5 .left h2 {margin-bottom:30px; width:100%}
.mainSection.section5 .left p {margin-bottom:15px}
.mainSection.section5 .left p br {display:none}
.mainSection.section5 .left p.tit1 {width:118%}
.mainSection.section5 .left p.tit2 {width:103%}
.mainSection.section5 .left p.tit3 {width:141%}
.mainSection.section5 .right {float:none; width:100%}
.mainSection.section5 .right .video {width:100%}
.mainSection.section5 .right .video img.play_icon {top:40%; left:45%}

#layerpopup1 {margin-left:0px; margin-top:20px;}
#layerpopup1 img {margin-left:0px;}
.onepopup {width:350px; height:250px; padding-left:00px;}
.popupClose {width:350px;margin-left:0px;}
.pcl img {margin-right:0px;}

}