@import url("common.css");

#visual{position:relative; width:100%; height:600px; overflow:hidden;}
	.jssorb05 {position: relative; top:68%; left:50%; z-index:999; width:93px !important; margin:0 0 0 -538px; height:12px; }
    .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {position: relative !important;  width: 12px;  height: 12px;  border-radius:12px; background: rgba(255,255,255,0.5); cursor:pointer; margin:0 10px 0 0; padding:0; float:left; left:0px !important; z-index:999;}
    .jssorb05 div {z-index:999 !important;}
    .jssorb05 .av:hover { background:#fff;  width:35px !important; z-index:999;}
    .jssorb05 .av { background:#fff;  width:35px !important; z-index:999;}

#visual .v_txt{width:781px; height:220px; position:absolute; top:35%; left:50%; margin:-56px 0 0 -601px; z-index:10; }
	#visual .v_txt img{z-index:10; }



/* 메인비주얼 탭 부분 */
.btn_pager{position:absolute; top:62%; left:50%; margin-left:420px;}
.btn_pager a{position:relative; z-index:400; text-decoration:none; float:left; width:12px; height:12px; color:#fff;
 display:block; background:rgba(255,255,255,0.5); text-align:left; margin:0 3px; border-radius:100px; transition: all .3s ease; }
.btn_pager .active{background:#27c9f2; font-weight:bold; font-size:13px; text-decoration:none; opacity:1; width:35px;}

h3.maintitle{font-size:40px; font-family:"Open Sans", sans-serif; color:#333; line-height:100%; font-weight:700; letter-spacing:-1px; }


/* PRODUCT */
#product_wrap{background:#fff;position:relative; overflow:hidden;}
#product_con{position:relative; width:1180px; margin:0 auto; padding:25px 0 65px;}
#product_con h3{text-align:center; margin-bottom:10px;}
#product_con .mtxt{font-size:15px; color:rgba(51,51,51,0.7); line-height:100%; text-align:center; letter-spacing:-0.8px; margin-bottom:50px;}


.list_carousel {width:100%;}
.list_carousel ul {margin: 0; padding: 0; list-style: none; display: block; overflow:hidden; clear:both;}
/*.list_carousel li {text-align: center; width: 50px; height:90px; padding: 0; display: block; float: left;}*/
.list_carousel.responsive {width: auto; margin-left: 0;}
.clearfix {float: none; clear: both;}

#gallery_list {width:100%; overflow:hidden; margin:0 auto;}
#gallery_list li {float:left; width:25%; margin:0 8px; height:auto;}
#gallery_list li .img{overflow:hidden; text-align:center; }
#gallery_list li .tit{text-align:center; width:100%; padding-top:16px;}
#gallery_list li .tit .ktxt{padding-bottom: 5px;letter-spacing:-0.3px; font-family:NotoKR-Medium; font-size:13px; color:#00abce; line-height:100%; text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space:nowrap;overflow:hidden;word-wrap:normal;}
#gallery_list li .tit .etxt{font-size:18px; color:#333; font-family: 'Poppins', NotoKR-Medium, sans-serif; letter-spacing:-1px;}
#gallery_list li:hover .etxt{color:#00abce; transition: all .3s ease;text-decoration: none;}


.prev {position:absolute; z-index:9; top:49%; left:-15px; display:inline-block; width:48px; height:48px; line-height:48px; background:url('/ko/images/main/ar_l.png') left top no-repeat; text-indent:-9999px; font-size:0; background-size:100%;}
.prev:hover{background:url('/ko/images/main/ar_lo.png') left top no-repeat; transition: all .3s ease; background-size:100%;}
.next {position:absolute; z-index:9; top:49%; right:-15px; display:inline-block; width:48px; height:48px; line-height:48px; background:url('/ko/images/main/ar_r.png') left top no-repeat; text-indent:-9999px; font-size:0; background-size:100%;}
.next:hover{background:url('/ko/images/main/ar_ro.png') left top no-repeat; transition: all .3s ease; background-size:100%;}

/* TECH */
#tech_wrap{width:100%; overflow:hidden; margin:0 auto;background:url('/ko/images/main/sn_bg.jpg') center top no-repeat; background-size: cover;}
#tech_wrap .tech_con{max-width:1180px; margin:0 auto; padding:30px 0; overflow: hidden;}
#tech_wrap .tech_con h3{margin-bottom:20px;}
#tech_wrap .tech_con .one{float:left; padding-top:5%; width:41.6949152542%;}
#tech_wrap .tech_con .two{float:left; width:58.3050847458%; text-align:right;}
#tech_wrap .tech_con .two img{max-width:100%; height:auto; }
#tech_wrap .tech_con .mtxt2{font-size:16px; color:rgba(58,58,58,0.6); line-height:23px; letter-spacing:-0.8px; margin-bottom:45px;}
#tech_wrap .tech_con .mbtn1{line-height:100%; padding:18px 15px; font-family:"Open Sans", sans-serif; color:#000; box-sizing:border-box; font-size:14px; font-weight:700; border:1px solid rgba(0,0,0,0.7); display:block; width:180px; text-align:center; letter-spacing:-1px;} 
#tech_wrap .tech_con .mbtn1:hover{background:rgba(0,0,0,0.7); color:#fff; transition: all .3s ease; }
#tech_wrap .tech_con .mbtn1:hover span{background:url('/ko/images/main/more_on.png') 9px center no-repeat;}
#tech_wrap .tech_con .mbtn1 span{padding-left:10px; background:url('/ko/images/main/more.png') 9px center no-repeat; width:5px; height:9px; display:inline-block;}
#tech_wrap .tech_con .mbtn1 img{padding-left:10px;}
#tech_wrap .tech_con .timg{display:none;}



/* 하단 배너3 */
#blink_con{position:relative; overflow:hidden; max-width:1180px; margin:40px auto 40px auto;}
#blink_con ul{position:relative; overflow:hidden; }
#blink_con li{width:32.5423728814%; margin-right:1.18644067797%; float:left; max-height:265px; overflow:hidden; }
#blink_con li:nth-child(3){margin-right:0;}
#blink_con li .in{padding:50px 45px 100px;}
#blink_con li a{display:block;}
#blink_con li.one{background:url('/ko/images/main/banner01.jpg') center top no-repeat;  background-size: cover;}
#blink_con li.two{background:url('/ko/images/main/banner02.jpg') center top no-repeat;  background-size: cover;}
#blink_con li.three{background:url('/ko/images/main/banner03.jpg') center top no-repeat;  background-size: cover;}
#blink_con li .etxt{font-size:27px; font-weight:700; font-family:"Open Sans", sans-serif; color:#fff; line-height:100%; padding-bottom:18px; letter-spacing:-1px;}
#blink_con li .ktxt{font-size:15px; color:rgba(255,255,255,0.9); line-height:146%; letter-spacing:-0.8px; padding-bottom:53px }
#blink_con li .more{font-family:'Poppins', sans-serif; font-size:13px; color:rgba(255,255,255,0.9); line-height:100%; padding:0 0 10px; position:relative; left:0; transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease;   -webkit-transition: all 0.4s ease;}
#blink_con li .more img{line-height:100%; padding-left:8px}
#blink_con li .tel{font-size:40px; font-family:'Poppins', sans-serif; color:#fff; font-weight:200; line-height:100%; padding-bottom:18px;}
#blink_con li .fax{font-size:13px; font-family:NotoKR-Regular, sans-serif; color:rgba(255,255,255,0.6); line-height:155%;}

#blink_con li a:hover .more{ position:relative; left:8px;  transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -moz-transition: all 0.4s ease;   -webkit-transition: all 0.4s ease;}





/*******************************************************************************
	@media 981px~1179px
*******************************************************************************/
@media all and (max-width:1179px){

#visual { position:relative; width:100%; height:480px}
	.jssorb05 { top:64%; left:50%; margin-left:-10px}
#visual .vimg{display:block; margin:0 auto 0; width:80%;}
#visual .v_txt{left:50%; margin:-126px 0 0 -400px; z-index:50; }



.btn_pager{margin-left:280px;}
.bx-controls-direction{bottom:3%; top:0;}
	.bx-prev{left:auto; right:9%; bottom:3%; margin-left:0; width:29px; height:43px;}
	.bx-next{right:2%; bottom:3%;  margin-right:0; width:29px; height:43px}


h3.maintitle{font-size:43px;}

/* PRODUCT */
#product_con{width:96%; margin:0 auto; padding:25px 0 65px;}
#product_con h3{}

.list_carousel {width:100%;}
.list_carousel ul {margin: 0; padding: 0; list-style: none; display: block; overflow:hidden; clear:both;}
.list_carousel.responsive {width:auto; margin-left: 0;}
.clearfix {float: none; clear: both;}

#gallery_list {width:100%; overflow:hidden;}
#gallery_list li {float:left; width:100%; height:auto;}
#gallery_list li .img{width:100%; height:auto; overflow:hidden;}
#gallery_list li .img img{max-width:100%;}
#gallery_list li .tit{padding-top:15px;}
#gallery_list li .tit .ktxt{font-size:12px;}
#gallery_list li .tit .etxt{font-size:16px;}


.prev {top:50%; background-size:40px; width:40px; height:40px;}
.next {top:50%; background-size:40px; width:40px; height:40px;}


#tech_wrap .tech_con{width:96%;}
#tech_wrap .tech_con .one{float:left; padding-top:2%;}


/* 하단 배너3 */
#blink_con{margin-top:0; margin-bottom:0;}
#blink_con li{width:33.33333333333333%; margin-right:0; max-height:227px;}
#blink_con li .in{padding:10% 10% 15% 10%;}
#blink_con li .ktxt{font-size:14px; min-height:40px;}
#blink_con li .more{font-size:13px; }
#blink_con li .more img{line-height:100%; padding-left:8px}
#blink_con li .tel{font-size:36px; min-height:40px;}
#blink_con li .fax{}



}



/*******************************************************************************
	@media 761~980px
*******************************************************************************/
@media all and (max-width:980px){

#visual { position:relative; width:100%; height:430px}
#visual .vimg{display:block; margin:0 auto 0; width:70%;}



h3.maintitle{font-size:40px;}


/* PRODUCT */
#product_con{padding:2px 0 50px 0;}
#product_con .mtxt{font-size:15px;}
.list_carousel {width:100%;}
#gallery_list {width:100%; overflow:hidden;}
#gallery_list li {float:left; width:100%; height:auto;}
#gallery_list li .img{width:100%; height:auto; overflow:hidden;}
#gallery_list li .img img{max-width:100%;}
#gallery_list li .tit{padding-top:10px;}
#gallery_list li .tit .ktxt{padding-bottom:2px;}
#gallery_list li .tit .etxt{font-size:15px;}

.prev {top:54%; background-size:35px; width:35px; height:35px;}
.next {top:54%; background-size:35px; width:35px; height:35px;}


/* TECH */
#tech_wrap .tech_con h3{margin-bottom:10px; text-align:center;}
#tech_wrap .tech_con .one{padding-top:0; width:100%;}
#tech_wrap .tech_con .two{display:none;}
#tech_wrap .tech_con .mtxt2{font-size:15px; text-align:center; margin-bottom:30px;}
#tech_wrap .tech_con .mbtn1{margin:0 auto;} 
#tech_wrap .tech_con .mbtn1 img{padding-left:8px;}
#tech_wrap .tech_con .timg{display:block; width:65%; margin:0 auto 20px auto;}
#tech_wrap .tech_con .timg img{max-width:100%; height:auto;}


/* 하단 배너3 */
#blink_con{margin-top:0; margin-bottom:0;}
#blink_con li{width:33.33333333333333%; margin-right:0;max-height:205px;}
#blink_con li .in{padding:10% 10% 30% 10%;}
#blink_con li .etxt{font-size:25px;}
#blink_con li .ktxt{font-size:14px; min-height:40px;}
#blink_con li .more{font-size:13px; }
#blink_con li .more img{line-height:100%; padding-left:8px}
#blink_con li .tel{font-size:31px; min-height:40px;}
#blink_con li .fax{font-size:12px;}




}


/*******************************************************************************
	@media 681~760px
*******************************************************************************/
@media all and (max-width:760px){


#visual { position:relative; width:100%; height:360px}
	.jssorb05 { top:52%;}
#visual .vimg{display:block; margin:0 auto 0; width:60%; }
#visual .v_txt{width:55%; }
#visual .v_txt img{width:40%; left:50%; margin:0 0 0 50px; z-index:50; }

.btn_pager{margin-left:243px;}
.btn_pager a{width:10px; height:10px; margin:0 2px;}
.btn_pager .active{width:25px}
h3.maintitle{font-size:37px;}



/* product */
#product_con{padding:20px 0 40px 0;}
#product_con .mtxt{font-size:14px;}
.list_carousel {width:100%;}
.list_carousel.responsive {width: 205%; margin-left:-8px;}
#gallery_list {width:100%; overflow:hidden;}
#gallery_list li {float:left; width:100%; height:auto;}
#gallery_list li .img{width:100%; height:auto; overflow:hidden;}
#gallery_list li .img img{max-width:100%;}

.prev {top:5%; left:0; background-size:40px; width:40px; height:40px;}
.next {top:5%; right:0; background-size:40px; width:40px; height:40px;}

/* TECH */
#tech_wrap .tech_con .mtxt2{font-size:14px;line-height:20px;}
#tech_wrap .tech_con .mbtn1{margin:0 auto; width:150px; padding:12px;}




/* 하단 배너3 */
#blink_con li .etxt{font-size:22px}
#blink_con li .ktxt{font-size:13px; line-height:18px; padding-bottom:25px;}
#blink_con li .tel{font-size:28px; padding-bottom:9px; min-height:auto !important; }
#blink_con li .fax{font-size:11px;}




}



/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


#visual { position:relative; width:100%; height:300px}
	.jssorb05 { top:36%;}
#visual .vimg{display:block; margin:0 auto 0; width:50%; }
#visual .v_txt{width:40%; left:50%; margin:-148px 0 0 -250px;}


.btn_pager{margin-left:163px}
h3.maintitle{font-size:32px;}

/* PRODUCT */
#product_con{padding:20px 0 30px 0;}
#product_con .mtxt{font-size:13px; letter-spacing: -0.5px;}
.list_carousel {width:100%;}
.list_carousel.responsive {width: 205%;}
#gallery_list {width:100%; overflow:hidden;}
#gallery_list li {float:left; width:100%; height:auto;}
#gallery_list li .img{width:100%; height:auto; overflow:hidden;}
#gallery_list li .img img{max-width:100%;}
#gallery_list li .tit{font-size:14px; letter-spacing:-0.5pt;}

.prev {top:6%; left:0; background-size:30px; width:30px; height:30px;}
.next {top:6%; right:0; background-size:30px; width:30px; height:30px;}



/* TECH */
#tech_wrap .tech_con .mtxt2{font-size:13px; letter-spacing:-0.5px; line-height:18px; margin-bottom:25px;}
#tech_wrap .tech_con .mbtn1{margin:0 auto; width:130px; padding:10px;}

/* 하단 배너3 */
#blink_con li{width:100%;}
#blink_con li .in{padding:25px;}
#blink_con li .etxt{font-size:24px;}
#blink_con li .ktxt{font-size:14px; line-height:20px}



}


/*******************************************************************************
	@media ~380px
*******************************************************************************/
@media all and (max-width:380px){


#visual { position:relative; width:100%; height:210px}
	.jssorb05 { top:31%;}
#visual .vimg{display:block; margin:0 auto 0; width:35%; }
#visual .v_txt{width:30%; min-width:260px; left:50%;  margin:-168px 0 0 -220px;}



.btn_pager{margin-left:110px;}
.btn_pager a{width:8px; height:8px; margin:0 1px;}
.btn_pager .active{width:25px}

h3.maintitle{font-size:28px;}

/* PRODUCT */
#product_con .mtxt{font-size:12px; margin-bottom:15px;}
#gallery_list li .tit .etxt{font-size:14px;}
.list_carousel.responsive{margin-left:-5px;}




/* TECH */
#tech_wrap .tech_con .mtxt2{font-size:12px; line-height:16px; margin-bottom:20px;}
#tech_wrap .tech_con .mbtn1{margin:0 auto; width:130px; padding:10px;}
#tech_wrap .tech_con .timg{margin-bottom:15px;}



/* 하단 배너3 */
#blink_con li .etxt{padding-bottom:15px;}
#blink_con li .ktxt{padding-bottom:20px;}
#blink_con li .tel{min-height:28px; font-size:26px;}






}