@charset "utf-8";
/* 메인 롤링 이미지 */
#mainSlider {position:relative; overflow:hidden}
#mainSlider ul.imgList {position:relative; width:1000%}
#mainSlider ul.imgList li {position:relative; float:left; width:1903px; height:500px; background-size:cover !important; overflow:hidden}
#mainSlider ul.imgList li.item1 {background:url(../img/main_visual1.jpg) center 65% no-repeat}
#mainSlider ul.imgList li.item2 {background:url(../img/main_visual2.jpg) center top no-repeat}
#mainSlider ul.imgList li.item3 {background:url(../img/main_visual3.jpg) center top no-repeat}
#mainSlider ul.imgList li.item4 {background:url(../img/main_visual4.jpg) center top no-repeat}
#mainSlider ul.imgList li a {display:block; position:relative; height:100%}
/*#mainSlider ul.imgList li img {display:block; position:absolute; top:0; left:0; width:100%; height:100%}*/
#mainSlider ul.imgList li .caption {position:relative; top:20%; max-width:1400px; margin:0 auto; padding:0 50px; z-index:20}
#mainSlider ul.imgList li .caption.center {text-align:center}
#mainSlider ul.imgList li .caption h2 {font-size:35px; font-weight:400;line-height:1.2; opacity:.9; filter:alpha(opacity='90'); margin-bottom:40px}
#mainSlider ul.imgList li .icon-img{margin:0 auto; padding:100px 0; width:15%}
#mainSlider ul.imgList li .icon-img > img{ width:100%}
/*#mainSlider ul.imgList li .caption h3 {font-size:17px; font-weight:400; color:#fff; line-height:1.8; opacity:.9; filter:alpha(opacity='90')}*/
#mainSlider ol.indicator {position:absolute; bottom:100px; left:0; width:100%; text-align:center; z-index:30}
#mainSlider ol.indicator li {position:relative; display:inline-block; line-height:1; margin:0 5px; padding:10px 0; cursor:pointer}
#mainSlider ol.indicator li .dash {position:relative; width:80px; height:2px; background:rgba(255,255,255,.4)}
#mainSlider ol.indicator li .dash .bar {position:absolute; top:0; left:0; width:0; height:100%; background:#fff}
/* 메인 섹션 공통 */
#container .mainSection {position:relative; padding:50px 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; padding:0 0 30px 0}
#container .mainSection .inner > .title:before {display:block; width:100px; height:1px; margin:0 auto 30px auto; content:''; background:#ccc}
#container .mainSection .inner > .title h2 {font-size:38px; font-weight:300; margin-bottom:20px}
#container .mainSection .inner > .title h3 {font-size:17px; font-weight:400; color:#777}
/* 메인 상단 섹션 */
#container .section1 {padding-bottom:0 !important}
#container .section1 .inner ul {text-align:justify}
#container .section1 .inner ul:after {display:inline-block; width:100%; content:''}
#container .section1 .inner ul li {display:inline-block; width:30%; vertical-align:top}
#container .section1 .inner ul li .imgArea {margin:30px auto 0 auto; width:25%}
#container .section1 .inner ul li .imgArea img {display:block; width:100%}
#container .section1 .inner ul li .desc {text-align:center}
#container .section1 .inner ul li .desc h3 {font-size:20px; font-weight:400; margin-bottom:15px; transition:all .3s ease}
#container .section1 .inner ul li a:hover .desc h3 {color:#21bbb1}
#container .section1 .inner ul li .desc p {font-size:14px}
/* 제품정보 섹션 */
#container .section2 .dropdown {position:relative}
#container .section2 .dropdown > a {display:none}
#container .section2 ul.product_tab {clear:both; text-align:center; margin-bottom:60px}
#container .section2 ul.product_tab li {display:inline-block; margin:0 5px}
#container .section2 ul.product_tab li a {display:inline-block; padding:8px 20px; font-size:13px; line-height:1; border-radius:4px; transition:all .3s ease}
#container .section2 ul.product_tab li a:hover {background:#d0f0ee}
#container .section2 ul.product_tab li.on a {color:#fff; background:#21bbb1}
#container .section2 .tab_wrap {position:relative; overflow:hidden}
#container .section2 .tab_wrap .tab_con {display:none}
#container .section2 .tab_wrap .tab_con ul {text-align:justify}
#container .section2 .tab_wrap .tab_con ul:after {display:inline-block; width:100%; content:''}
#container .section2 .tab_wrap .tab_con ul li {display:inline-block; width:23.5%; border-radius:3px; vertical-align:top}
#container .section2 .tab_wrap .tab_con ul li .title {padding:20px; text-align:center}
#container .section2 .tab_wrap .tab_con ul li .title h3 {font-size:20px; font-weight:400; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .3s ease}
#container .section2 .tab_wrap .tab_con ul li .imgArea {height:230px; overflow:hidden}
#container .section2 .tab_wrap .tab_con ul li .imgArea img {display:block; width:100%; height:auto}
#container .section2 .tab_wrap .tab_con ul li .desc {padding:20px 30px; text-align:center}
#container .section2 .tab_wrap .tab_con ul li .desc p {display:-webkit-box; font-size:14px; color:#777; max-height:45px; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
#container .section2 .tab_wrap .tab_con ul li a {position:relative; display:block; background:#fff; box-shadow:0 2px 2px 0 rgba(100,100,100,.1)}
#container .section2 .tab_wrap .tab_con ul li a:after {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:2px solid #21bbb1; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease}
#container .section2 .tab_wrap .tab_con ul li a:hover:after {opacity:1; filter:alpha(opacity='100')}
#container .section2 .tab_wrap .tab_con ul li a:hover .title h3 {color:#21bbb1}
/* 상단 이미지 섹션 */
#container .section3 {height:400px; padding:0 !important; background:url(../img/main_img_top.jpg) center top no-repeat; background-size:cover}
#container .section3 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden}
#container .section3 a:after {position:absolute; top:0; left:0; width:100%; height:100%; content:''; background:#000; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease}
#container .section3 a:hover:after {opacity:.2; filter:alpha(opacity='20')}
#container .section3 .inner {width:37%; text-align:center; z-index:30}
#container .section3 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; color:#78ede5; margin-bottom:25px}
#container .section3 .inner p {font-size:14px; color:#ddd}
/* 서비스 섹션 */
#container .section4{height:300px}
#container .section4 .inner ul.svcList {text-align:justify}
#container .section4 .inner ul.svcList:after {display:inline-block; width:100%; content:''}
#container .section4 .inner ul.svcList li {display:inline-block; width:23.5%; vertical-align:top; background:#f5f5f5;}
#container .section4 .inner ul.svcList li:hover{border:2px solid #21bbb1;}
#container .section4 .inner ul.svcList li a {display:block}
#container .section4 .inner ul.svcList li .title {padding:20px; text-align:center}
#container .section4 .inner ul.svcList li .title h3 {font-size:20px; font-weight:400; color:#444; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:all .3s ease}
/*#container .section4 .inner ul.svcList li .imgArea {position:relative}*/
/*#container .section4 .inner ul.svcList li .imgArea:after {position:absolute; top:0; left:0; bottom:0; right:0; content:''; border:2px solid #21bbb1; opacity:0; filter:alpha(opacity='0'); transition:all .3s ease}*/
/*#container .section4 .inner ul.svcList li:hover .imgArea:after {opacity:1; filter:alpha(opacity='100')}*/
#container .section4 .inner ul.svcList li:hover .title h3 {color:#21bbb1}
#container .section4 .inner ul.svcList li .imgArea img {display:block; margin:20px auto;}
#container .section4 .inner ul.svcList li .desc {padding:30px 0 20px 0; text-align:center}
#container .section4 .inner ul.svcList li .desc p {font-size:14px; color:#777}
/* 제품 이미지 섹션 */
#container .section5 {height:450px;/*padding:0 !important;*/ margin-bottom:20px}
#container .section5 a {position:relative; display:block; height:100%; padding:100px 0 80px 0; overflow:hidden}
#container .section5 a:after {position:absolute; top:0; left:50%; transform:translateX(-50%);width:50%; height:100%; content:''; background:rgba(0,0,0,0.9); opacity:0; filter:alpha(opacity='0'); transition:all .3s ease}
#container .section5 a:hover:after {opacity:.2; filter:alpha(opacity='20')}
#container .section5 .inner {/*width:37%;*/ text-align:center; z-index:30}
#container .section5 .inner h2 {font-size:38px; font-weight:400; line-height:1.2; margin-bottom:25px}
#container .section5 .inner h3{color:#000; font-size:1.5rem;}
#container .section5 .inner > ul{ width:100%}
#container .section5 .inner > ul > li{ margin-bottom:30px; position:relative;width:420px;display:inline-block; float:left}
#container .section5 .inner > ul > li .imgArea{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);}
#container .section5 .inner > ul > li .imgArea img{width:90%}
#container .section5 .inner > ul > li:nth-child(5) .imgArea img{width:75%}
#container .section5 .inner > ul > li:nth-child(6) .imgArea img{width:75%}
#container .section5 .inner > ul > li .title{ position:absolute;bottom:0; left:50%; transform:translateX(-50%)}

/* 타일 섹션 */
#container .section6 .inner .upper {text-align:justify;}
#container .section6 .inner .upper:after {display:inline-block; width:100%; content:''}
#container .section6 .inner .tile {display:inline-block; padding:30px 20px ;width:40%; height:300px; overflow:hidden; vertical-align:top; background:#f5f5f5; box-sizing:border-box;}
#container .section6 .inner .center{background:#4c85bd}
#container .section6 .inner .center > ul >li{float:left; width:160px}
#container .section6 .inner .upper a {display:block}
#container .section6 .inner .upper .tile .imgArea {position:relative; margin-bottom:30px}
/*#container .section6 .inner .tile .imgArea:after {position:absolute; top:0; left:0; bottom:0; right:0; content:'';  opacity:0; filter:alpha(opacity='0'); transition:all .3s ease}*/
#container .section6 .inner .tile .imgArea img {display:block;margin:0 auto;}
#container .section6 .inner .tile .email img{padding-bottom:12px;width:50%;}
#container .section6 .inner .tile h3 {font-size:30px; font-weight:400; margin-bottom:50px; transition:all .3s ease; text-align:center; color:#2b4689;}
#container .section6 .inner .tile .centerTitle{font-size:30px; font-weight:400; margin-bottom:50px; transition:all .3s ease; text-align:center; color:#fff;}
#container .section6 .inner .tile .caption p {font-size:17px; color:#fff; text-align:center}
#container .section6 .inner .tile .caption.left { float:left; width:40%;padding:10px; box-sizing:border-box; font-size:18px;color:#2b4689;}
#container .section6 .inner .tile .caption.right { float:right;width:40%;padding:10px; box-sizing:border-box; font-size:18px;color:#2b4689;}
#container .section6 .inner .tile:hover .caption h3 {color:#21bbb1}
#container .section6 .inner .tile:hover .imgArea:after {opacity:1; filter:alpha(opacity='100')}
#container .section6 .inner .lower {text-align:justify}
#container .section6 .inner .lower:after {display:inline-block; width:100%; content:''}
#container .section6 .inner .lower .tile_wrap {display:inline-block; width:49%; text-align:justify}
#container .section6 .inner .lower .tile_wrap:after {display:inline-block; width:100%; content:''}
#container .section6 .inner .lower .tile_wrap .tile {width:48%}
#container .section6 .inner .lower .tile_wrap .tile .imgArea {position:relative}
#container .section6 .inner .lower .tile_wrap .tile .caption {margin-top:30px}

/* 미디어 쿼리 */
@media screen and (max-width:1280px) {
#container .section5 .inner > ul > li{width:390px;}
#container .section5 .inner h3{ font-size:22px;}
#container .section6 .inner .tile {width:45%;}

	}

@media screen and (max-width:1024px) {
 /* 메인 롤링 이미지 */
 #mainSlider ul.imgList li {height:500px}
 #mainSlider ul.imgList li .caption h2 {font-size:48px}
 #mainSlider ul.imgList li .caption h3 {font-size:14px}
 /* 메인 섹션 공통 */
 #container .mainSection .inner > .title h2 {font-size:30px}
 #container .mainSection .inner > .title h3 {font-size:15px}
 /* 메인 상단 섹션 */
 #container .section1 .inner ul li .desc h3 {font-size:14px}
 #container .section1 .inner ul li .desc p {display:-webkit-box; font-size:12px; max-height:65px; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden}
 /* 제품정보 섹션 */
 #container .section2 {padding-top:0 !important}
 #container .section2 .dropdown {width:70%; margin:0 auto 40px auto}
 #container .section2 .dropdown > a {position:relative; display:block !important; height:40px; text-align:center; font-size:12px; font-weight:600; line-height:40px; border:1px solid #21bbb1; border-radius:3px}
 #container .section2 .dropdown > a:after {position:absolute; top:50%; right:20px; width:0; height:0; content:''; margin-top:-2px; border-width:4px; border-style:solid; border-color:transparent; border-top-color:#21bbb1}
 #container .section2 .dropdown > a.open:after {margin-top:-6px; border-top-color:transparent; border-bottom-color:#21bbb1}
 #container .section2 ul.product_tab {clear:none; display:none; position:absolute !important; top:40px !important; left:0; width:100%; margin:0; border-left:1px solid #dedede; border-right:1px solid #dedede; background:#fff; box-shadow:0 2px 2px 0 rgba(0,0,0,.12); overflow:hidden; z-index:100}
 #container .section2 ul.product_tab li {display:block; margin:0}
 #container .section2 ul.product_tab li a {display:block; padding:10px 0; text-align:center; color:#777; border-bottom:1px solid #dedede}
 #container .section2 ul.product_tab li a:hover {background:none}
 #container .section2 ul.product_tab li.on a {color:#21bbb1; background:none}
 #container .section2 .tab_wrap .tab_con ul li .title h3 {font-size:16px}
 #container .section2 .tab_wrap .tab_con ul li .desc p {font-size:13px}
 /* 상단 이미지 섹션 */
 #container .section3 {height:300px}
 #container .section3 a {padding:40px 0}
 #container .section3 .inner {width:60%}
 #container .section3 .inner h2 {font-size:30px}
 #container .section3 .inner p {font-size:13px}
 /* 서비스 섹션 */
 #container .section4 .inner ul.svcList li .title h3 {font-size:16px}
 #container .section4 .inner ul.svcList li .desc p {font-size:13px}
 /* 하단 이미지 섹션 */
 #container .section5 {height:460px; padding:0}
 #container .section5 a {padding:40px 0}
/*#container .section5 .inner {width:60%}*/
 #container .section5 .inner h2 {font-size:30px}
 #container .section5 .inner p {font-size:13px}
 #container .section5 .inner > ul > li{width:300px; height:200px}
#container .section5 .inner h3 > span{ display:block}

 /* 타일 섹션 */
  #container .section6 .inner .tile {clear:both; display:block; width:100%; margin-bottom:30px}
  #container .section6 .inner .tile .caption.left { text-align:center}
#container .section6 .inner .tile .caption.right { text-align:center}
 #container .section6 .inner .tile .caption h3 {font-size:16px}
 #container .section6 .inner .tile .caption p {font-size:13px}
 #container .section6 .inner .lower .tile .caption p {display:-webkit-box; max-height:45px; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
 #container .section6 .inner .center > ul >li{width:280px}
#container .section6 .inner .tile .email img{width:25%;}

 
}
@media screen and (max-width:768px) {
 /* 메인 롤링 이미지 */
 #mainSlider ul.imgList li {height:380px}
 #mainSlider ul.imgList li .caption {top:20%}
 #mainSlider ul.imgList li .caption h2 {font-size:27px}
 #mainSlider ul.imgList li .caption h3 {font-size:12px}
 #mainSlider ol.indicator li .dash {width:35px}
 /* 메인 섹션 공통 */
 #container .mainSection .inner > .title h2 {font-size:25px}
 #container .mainSection .inner > .title h3 {font-size:12px}
 /* 메인 상단 섹션 */
 #container .section1 .inner ul li {width:32%}
 #container .section1 .inner ul li .imgArea {float:none; width:85%; max-width:90px; margin-top:10px}
 #container .section1 .inner ul li .desc h3 {font-size:12px; text-align:center}
 #container .section1 .inner ul li .desc p {display:none}
 /* 제품정보 섹션 */
 #container .section2 .tab_wrap .tab_con ul:after {display:none}
 #container .section2 .tab_wrap .tab_con ul li {display:block; width:100%; margin-bottom:30px}
 #container .section2 .tab_wrap .tab_con ul li .imgArea {height:350px}
 /* 상단 이미지 섹션 */
 #container .section3 {height:250px}
 #container .section3 a {padding:40px 0}
 #container .section3 .inner {width:100%}
 #container .section3 .inner h2 {font-size:22px; margin-bottom:10px}
 #container .section3 .inner h2 br {display:none}
 #container .section3 .inner p {font-size:11px}
 #container .section3 .inner br {display:none}
 /* 서비스 섹션 */
 #container .section4{height:530px}
 #container .section4 .inner ul.svcList li {width:45%; margin-bottom:30px}
/* #container .section4 .inner ul.svcList li .title {text-align:left; padding-left:0}*/
 #container .section4 .inner ul.svcList li .desc {padding:0 0 10px 0;}
 /* 제품*/
 #container .section5 {height:10%}
 #container .section5 a {padding:40px 0}
 #container .section5 .inner {width:100%}
 #container .section5 .inner h2 {font-size:22px; margin-bottom:10px}
 #container .section5 .inner h2 br {display:none}
 #container .section5 .inner p {font-size:11px}
 #container .section5 .inner br {display:none}
 #container .section5 .inner > ul > li{width:48%;}
  
 /* 타일 섹션 */
 #container .section6 .inner .upper:after, #container .section6 .inner .lower .tile_wrap:after {display:none}
 #container .section6 .inner .tile .caption h3 {font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
 #container .section6 .inner .tile .caption p {font-size:12px}
 #container .section6 .inner .upper {margin-bottom:0}
 #container .section6 .inner .lower .tile_wrap {display:block; width:100%}
 #container .section6 .inner .lower .tile_wrap .tile {width:100%}
 #container .section6 .inner .lower .tile_wrap .tile .imgArea {float:left; width:45%}
 #container .section6 .inner .lower .tile_wrap .tile .caption {margin-top:0; margin-left:50%}
 #container .section6 .inner .lower .tile_wrap .tile .caption p {max-height:85px; -webkit-line-clamp:3}
  #container .section6 .inner .center > ul >li{width:200px}
#container .section6 .inner .tile .email img{width:40%;}
}
@media screen and (max-width:640px) {
	
 /* 메인 롤링 이미지 */
  #mainSlider ul.imgList li {height:320px}

 #mainSlider ul.imgList li .caption {padding:0 30px}
 /* 메인 공통 레이아웃 */
#container .mainSection {padding:0;}
#container .mainSection .inner {padding:0 30px}
#mainSlider ul.imgList li .caption h2 {font-size:20px; word-break:keep-all;}
#mainSlider ul.imgList li .icon-img{padding:40px 0; width:25%}

#container .section4{height:250px;}
 #container .section4 .inner ul.svcList li {width:100%;}
#container .section4 .inner ul.svcList li:nth-child(1) { display:none}
#container .section4 .inner ul.svcList li:nth-child(3) {display:none}
#container .section4 .inner ul.svcList li:nth-child(4) {display:none}
#container .section4 .inner ul.svcList li .title {padding:0;}
#container .section4 .inner ul.svcList li .imgArea{ padding-top:20px; box-sizing:border-box;}
#container .section4 .inner ul.svcList li .title {text-align:center;}
#container .section4 .inner ul.svcList li .desc p {text-align:center; padding-bottom:20px; box-sizing:border-box}

#container .section5 { margin-top:30px;margin-bottom:0;height:10%}
#container .section5 .inner > ul > li{ margin-bottom:15px;float:none;width:40%;height:150px}
#container .section5 .inner > ul > li .imgArea img{ margin-bottom:30px;width:150px;}
#container .section5 .inner > ul > li:nth-child(5) .imgArea img{width:100px}
#container .section5 .inner > ul > li:nth-child(6) .imgArea img{width:100px}
#container .section5 .inner > ul > li .title{ width:100px; word-break:keep-all;}
#container .section5 .inner > ul > li:nth-child(1) .title{ margin-bottom:10px}
#container .section5 .inner > ul > li:nth-child(4) .title{ margin-bottom:10px}
#container .section5 .inner > ul > li:nth-child(5) .title{ margin-bottom:10px}
#container .section5 .inner > ul > li .title > h3{ font-size:1.2rem;}
#container .section5 .inner > ul > li .title > h3 > span{ display:block}
#container .section5 a:after {left:0; transform:translateX(0);width:100%;}


#container .section6{ padding:0}
#container .section6 .inner .tile { display:none}
#container .section6 .inner .tile > ul{ margin-left:15px;}
#container .section6 .inner .tile .caption.left {font-size:13px;}
#container .section6 .inner .tile .caption.right {width:50%;font-size:13px;}
#container .section6 .inner .center > ul >li{width:90px}
#container .section6 .inner .center > ul >li .caption.email-text p{margin-left:10px}
#container .section6 .inner .tile .email{margin-left:10px}
#container .section6 .inner .tile .email img{padding-bottom:0;width:80%;}
#container .section6 .inner .upper .tile .imgArea.email {margin-top:10px}

}
@media screen and (max-width:380px) {
#mainSlider ul.imgList li {height:300px}
#mainSlider ul.imgList li .caption h2 {font-size:20px; word-break:keep-all;}
#mainSlider ul.imgList li .icon-img{padding:40px 0; width:25%}

#container .section5 .inner > ul > li .title > h3{ font-size:1rem;}
#container .section5 .inner > ul > li{float:none; height:130px}
#container .section5 .inner > ul > li .imgArea img{ width:130px;}

#container .section6 .inner .tile > ul{ margin-left:0;}


}