@charset "utf-8";

/* 메인 롤링 이미지 */
#mainVisual {position:relative;height:500px; 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; margin:0 auto; padding:0 50px; z-index:20; text-align:center;}
#mainVisual .caption h2 {font-size:60px; font-weight:600; color:#fff; line-height:1.1; /*max-width:75%*/text-shadow:2px 2px 3px #555}
/*#mainVisual .caption h2:after {display:block; width:60px; height:3px; content:''; margin:30px 0; background:#000}*/
#mainVisual .caption p {font-size:40px; color:#fff; /*max-width:75%*/ text-shadow:2px 2px 3px #555}
#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 .title {text-align:center; margin-bottom:30px}
.mainSection.section1 .title h2 {font-size:36px; font-weight:300; color:#555; line-height:1}
.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;display:inline-block; width:33.3%; height:440px; float:left; vertical-align:top}
.mainSection.section1 ul.team_list > li .imgArea {margin-bottom:30px; overflow:hidden; height:440px}
.mainSection.section1 ul.team_list > li .imgArea_bg{background:#f3f3f3}
.mainSection.section1 ul.team_list > li .imgArea img {display:block; width:100%}
.mainSection.section1 ul.team_list > li .info h3 {display:none;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.section1 ul.team_list > li.product_btn{text-align: center; padding-top:180px}
.mainSection.section1 .product_btn h3{font-size:25px; font-weight:600; color:#fff; line-height:1; background: red;padding: 20px 30px; margin:0 auto; width:250px}


/* 솔루션 섹션 */
.mainSection.section2 {background:url(../img/mainbanner_bg.png) 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:40px; font-weight:300; color:#a0cc7a; line-height:1.3; margin-bottom:20px; text-shadow:1px 1px 2px #555; font-weight:bold}
.mainSection.section2 .inner h2 span{font-size:50px;color:#074e9b}
.mainSection.section2 .inner h2 p{display:inline-block;color:#f8a71a;font-size:40px; font-weight:300;line-height:1.3; margin-bottom:20px; text-shadow:1px 1px 2px #555; font-weight:bold}
/*.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}*/

/*고객센터*/
.mainSection.section3{height: 450px;}
.mainSection.section3 .inner {max-width:1200px; margin:0 auto; text-align:center}
.mainSection.section3 .inner .customer_txt{width: 45%; float: left;}
.mainSection.section3 .inner .customer_txt h3{font-weight: bold; font-size: 40px; color: #000;}
.mainSection.section3 .inner .customer_txt p{margin: 30px 0 20px; font-size: 25px;}
.mainSection.section3 .inner .customer_txt p.link a{font-size: 18px;}
.mainSection.section3 .inner .customer_txt ul li{font-size: 25px; display: inline-block}
.mainSection.section3 .inner .customer_txt ul li img{padding:0 10px}
.mainSection.section3 .inner .customer_img{width: 45%; float: right;}

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

 #mainVisual {position:relative; overflow:hidden; z-index:20}
 #mainVisual {height:700px;/*margin-top:80px;*/}
 #mainVisual .caption {position:absolute;max-width:100%; width:100%}
 #mainVisual .caption h2 {font-size:80px}
 #mainVisual .caption p {font-size:70px}
 #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:33%;}
 .mainSection.section1 ul.team_list > li {height:auto;}
 .mainSection.section1 ul.team_list > li .imgArea {margin-bottom:0px; overflow:hidden; height:auto}
 .mainSection.section1 ul.team_list > li.product_btn{padding-top:90px}
 .mainSection.section3{height: 600px;}
 .mainSection.section3 .inner .customer_txt{width: 100%; float:none;}
 .mainSection.section3 .inner .customer_img{margin-top:30px;width: 100%; float:none;}
 .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}

}
@media screen and (max-width:768px) {
 #mainVisual .caption h2 {font-size:50px}
 #mainVisual .caption p {font-size:40px}
 .mainSection.section1 ul.team_list > li {width:100% !important; text-align:center}
 .mainSection.section1 ul.team_list > li .imgArea {width:auto; height:auto; margin:0 auto 30px auto}
 .mainSection.section1 ul.team_list > li.product_btn{height: 100px; padding-top:20px}
 .mainSection.section1 .product_btn h3{font-size:50px;padding:30px; width:400px}
 .mainSection.section2 .inner h2 {font-size:50px; font-weight:400; margin-bottom:15px}
 .mainSection.section2 .inner h2 span{display:block}
 .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 {height:auto}
 #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.product_btn{height: 100px; padding-top:30px}
 .mainSection.section4 .inner .latestBox {width:100%; margin:0 0 40px 0}
}
@media screen and (max-width:639px){
 .mainSection.section2 .inner h2 {font-size:40px;}
 .mainSection.section3 .inner .customer_img img{width:100% !important;}
.mainSection.section3 .inner .customer_txt ul li:first-child{margin-bottom:30px !important}
.mainSection.section3 .inner .customer_txt ul li:nth-child(2) img{padding-right:35px !important}

}
@media screen and (max-width:480px) {
 #mainVisual .caption p {font-size:35px}
 .mainSection.section2 .inner h2 {font-size:30px;}
 .mainSection.section2 .inner h2 span{font-size:40px}
}
@media screen and (max-width:375px) {
 #mainVisual .caption h2 {font-size:40px}
 #mainVisual .caption p {font-size:25px}
 .mainSection.section2 .inner h2 {font-size:28px;}
 .mainSection.section2 .inner h2 span{font-size:35px}
 .mainSection.section2 .inner h2 [{font-size:35px}
 .mainSection.section3{height: 700px;}=
}