@charset "utf-8";

/* 전체상품보기 */
#all_product {position:fixed; bottom:30px; right:0; width:20%;text-align:center; z-index:100}
#all_product > .tel{display:inline-block; width:40px;margin-right:10px}
#all_product > .tel > a {display:block;width:100%;}
#all_product > .kakao{display:inline-block; width:40px;margin-right:10px}
#all_product > .kakao > a {display:block; width:100%;}
#all_product > .mail{display:inline-block; width:40px;}
#all_product > .mail > a {display:block; width:100%;}
#all_product > .tel > a img{width:100%; }
#all_product > .kakao > a img{width:100%;}
#all_product > .mail > a img{width:100%;}

	 @media screen and (max-width:737px) {
		 #all_product {width:10%;}
		 #all_product > .tel{margin-right:0}
        #all_product > .kakao{margin-right:0}
    }
    @media screen and (max-width:480px) {
        #all_product {position:fixed; bottom:25px; right:10px;}
		#all_product > .tel, #all_product > .kakao{margin-right:0}
	}

/* 메인 롤링 이미지 */
#mainVisual {position:relative;/*height:650px;*/ overflow:hidden; z-index:20;margin-top:80px;}
#mainVisual .swiper-container {width:100%;height:100%;}
#mainVisual .swiper-slide {background-position: center;background-size: cover;}
#mainVisual .swiper-container-horizontal>.swiper-pagination-bullets, #mainVisual .swiper-pagination-custom, #mainVisual .swiper-pagination-fraction {bottom:30px;}
#mainVisual .swiper-pagination-white .swiper-pagination-bullet-active {background:#000;width:37px;border-radius:50px;}
#mainVisual .swiper-pagination-bullet {width:17px;height:17px;background:#fff;border-radius:30px;transition:all .3s ease;opacity:1;}
#mainVisual .swiper-slide img {position:relative;left:50%;margin-left:-600px;top:200px;}
#mainVisual .swiper-button-next {right:20px;background-image:url("../img/visual_arrow_right.png");width:28px;height:45px;background-size: 28px 45px;}
#mainVisual .swiper-button-prev {left:20px;background-image:url("../img/visual_arrow_left.png");width:28px;height:45px;background-size: 28px 45px;}
#mainVisual .caption {position:relative; top:20%; max-width:1400px; height:300px; margin:0 auto; padding:0 50px; z-index:20}
#mainVisual .caption h2 {padding-top:70px;font-size:30px; font-weight:600; color:#404040; line-height:1.1; max-width:60%; text-align:center}
/*#mainVisual .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px 0; background:#000}*/
#mainVisual .caption p{padding-top:20px;font-size:50px; color:#1c4ec0; max-width:60%; font-weight:bold; text-align:center}
#mainVisual .caption a.btn2 {position:relative; display:inline-block; margin-top:60px; padding:10px 35px; font-size:15px; font-weight:600; color:#000; border:2px solid #000}
#mainVisual .caption a.btn2 span {position:relative; transition:all .3s ease; z-index:10}
#mainVisual .caption a.btn2:before {position:absolute; top:0; left:0; width:100%; height:0; content:''; background:#000; transition:all .3s ease}
#mainVisual .caption a.btn2:hover:before {height:100%}
#mainVisual .caption a.btn2:hover span {color:#fff}
#mainVisual .caption.white h2 {color:#fff !important}
#mainVisual .caption.white h2:after {background:#fff !important}
#mainVisual .caption.white p {color:#fff !important}
#mainVisual .caption.white a.btn2 {color:#fff; border:2px solid #fff}
#mainVisual .caption.white a.btn2:before {background:#fff}
#mainVisual .caption.white a.btn2:hover span {color:#000}


/* 메인 섹션 */
#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 {position:relative;margin-top:20px;display:inline-block; width:23%; vertical-align:top}
.mainSection.section1 ul.team_list > li .imgArea {margin-bottom:30px; overflow:hidden; transition:all 0.4s}
.mainSection.section1 ul.team_list > li .imgArea img {display:block; width:100%}
.mainSection.section1 ul.team_list > li .imgArea .hov_pro{display:none}
.mainSection.section1 ul.team_list > li:hover .imgArea .main_pro{ display:none}
.mainSection.section1 ul.team_list > li:hover .imgArea .hov_pro{display:block; transform:scale(1.2)}
.mainSection.section1 ul.team_list > li .btn_product{display:none}
.mainSection.section1 ul.team_list > li:hover .btn_product{position:absolute;display:block; padding:10px; top:30%; left:35%;background:#1c4ec0;color:#fff; border:1px solid #fff; font-size:18px;}

.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}
/* 솔루션 섹션 */
.mainSection.section2 {background:url(../img/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:35px; font-weight:500; color:#1c3997; 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:#333; 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 > ul li {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 > ul li .photo {/*height:250px; */overflow:hidden}
#photoSlide .slide_wrap > div > ul li .photo img {display:block; width:100%; height:auto}
#photoSlide .slide_wrap > div > ul li .photo a {display:block; overflow:hidden}
#photoSlide .slide_wrap > div > ul li td br {display:none !important}
#photoSlide .slide_wrap > div > ul li .text {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 > ul li .text a {font-size:15px; font-weight:400; color:#444; transition:all .4s ease}
#photoSlide .slide_wrap > div > ul li:hover {margin-top:-15px}
#photoSlide .slide_wrap > div > ul li:hover .text {color:#fff; background:#000}
#photoSlide .slide_wrap > div > ul li:hover .text 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:45%; 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 .latestBox .info{ text-align:center}
.mainSection.section4 .inner .latestBox .info h4 {font-size:28px; color:#444; line-height:1.2; margin-bottom:10px}
.mainSection.section4 .inner .latestBox .info p {font-size:20px;}
.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 {float:right; width:45%;margin-left:3%}
.mainSection.section4 .inner .customerBox .info{ text-align:center}
.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; font-size:20px;}
.mainSection.section4 .inner .customerBox .info a.btnContact {margin:0 auto;display:block; width:50%; 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}

/* 미디어 쿼리 */
@media screen and (max-width:1024px) {

 #mainVisual {position:relative; overflow:hidden; z-index:20; height:auto}
 /*#mainVisual {height:auto;margin-top:80px;}*/
 #mainVisual .caption {top:12%;position:absolute;max-width:100%;}
 #mainVisual .caption h2 {font-size:28px;max-width:100%; word-break:keep-all}
 #mainVisual .caption p {/*font-size:13px*/max-width:100%}
 #mainVisual .caption a.btn {font-size:13px; margin-top:40px}
 #mainVisual .swiper-slide {background:none !important;}
 #mainVisual .swiper-slide img.mobile-style {left:0px;top:0px;width:100%;margin-left:0px;}
 #mainVisual .swiper-button-next, #mainVisual .swiper-button-prev, #mainVisual .swiper-pagination-bullet  {display:none;}
 
 #photoSlide .slide_wrap > div > table .board_output_gallery_subject a {font-size:13px}
 .mainSection.section1 ul.team_list > li {width:48%; margin-bottom:50px}
 .mainSection.section4 .inner .latestBox {width:48%; margin:0 0 40px 4%; width:100%}
 .mainSection.section4 .inner .latestBox:first-child {margin-left:0}
 .mainSection.section4 .inner .customerBox {clear:both; margin-left:0; width:100%}
 .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}
}
@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) {
#mainVisual .caption h2 {padding-top:10px;}
 #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:100% !important; text-align:center}*/
 .mainSection.section1 ul.team_list > li .imgArea {/*width:128px; height:128px;*/ margin:0 auto 30px auto}
 .mainSection.section2 .inner h2 {font-size:25px;}
 .mainSection.section4 .inner .latestBox {width:100%; margin:0 0 40px 0}
}
@media screen and (max-width:480px) {
 #mainVisual .caption {padding:0}
 #mainVisual .caption h2 {font-size:20px;}
 #mainVisual .caption p {font-size:40px}
 .mainSection.section2 .inner h2 {font-size:20px; word-break:keep-all}
}
@media screen and (max-width:375px) {
 #mainVisual .caption h2 {padding-top:0;}
 .mainSection.section1 ul.team_list > li {width:100%;}
 .mainSection.section4 .inner .latestBox .info p {font-size:30px;}

 
}