@charset "utf-8";

/* 메인페이지 스타일만 정의 */

.main {}
/* ************************ PC (992~) ************************ */
@media screen and (min-width: 992px) {
	.main-visual {}
	.main .slider-wrap {}
	.main-slider .slide-item {height:100vh;}
	.main-slider-txt {width:1400px; max-width:100%; position:absolute; top:250px; left:50%; z-index:9; color:#fff; transform:translateX(-50%);}
	.main-slider-txt h2 {padding:0 0 80px; margin:0 0 85px; font-size:60px; font-weight:900; position:relative;}
	.main-slider-txt h2:after {content:''; display:block; width:70px; height:5px; background:#fff; position:absolute; left:0; bottom:0;}
	.main-slider-txt p {font-size:19px; line-height:35px;}
	
	.main-slider .slick-dots {}
	
	/* 버튼 */
	.main .main-slider .slick-arrow {top:calc(100% - 150px);}
	.main .main-slider .slick-arrow::before {content:''; width:12px; height:20px;}
	.main .main-slider .slick-arrow::before {}
	.main .main-slider .slick-prev {left:252px; }
	.main .main-slider .slick-next {right:auto; left:500px}
	.main .slick-next:before {background:url(../images/main/slider-arrow-right.svg)center /100% no-repeat;}
	.main .slick-prev:before {background:url(../images/main/slider-arrow-left.svg)center /100% no-repeat;}
	/* 페이징 */
	.main .main-slider .slick-dots {width:20%; left:295px; bottom:150px; transform:translateX(0);}
	.main .main-slider .slick-dots > li {width:10%; transition:all .5s;}
	.main .main-slider .slick-dots > li > button {width:78%; background-color:rgba(255,255,255,0);}
	.main .main-slider .slick-dots > li > button > .s-indicator {overflow:visible;}
	.main .main-slider .slick-dots > li > button > .s-indicator > .inner-txt {opacity:.5; transform:translate(-25px,50%); text-align:left; font-size:16px;}
	/* .main .main-slider .slick-dots > li:nth-child(1) > button > .s-indicator > .inner-txt {transform:translate(-25px,50%);} */
	.main .main-slider .slick-dots > li > button:hover > .s-indicator > .inner-txt {opacity:.5; transform:translate(-25px,50%); padding-bottom:0;}
	.main .main-slider .slick-dots > li > button > .s-line-fill {background-color:#ef3f3e;}
	
	.main .main-slider .slick-dots > li.slick-active {width:35%;}
	.main .main-slider .slick-dots > li.slick-active > button {background-color:rgba(255,255,255,.3);}
	.main .main-slider .slick-dots > li.slick-active > button > .s-indicator > .inner-txt {opacity:1;}
	.main .slider-wrap .slick-dots .slick-active > button > .s-line-fill {animation:slick-progressbar 7s 1;}
	
	/* 멈춤/재생 */
	.main .slider-wrap .s-autoplay-btn {left:530px; bottom:138px; }
	.main .slider-wrap .s-autoplay-btn:after {content:'' !important; display:block; width:22px; height:22px;}
	.main .slider-wrap[data-slick-autoplay-status="Y"] .s-autoplay-btn:after {background:url(../images/main/slider-pause.svg)center /13px no-repeat;}
	.main .slider-wrap[data-slick-autoplay-status="N"] .s-autoplay-btn:after {background:url(../images/main/slider-play.svg)center /13px no-repeat;}
	
	/* 최신개발기술 */
	.main .slider-wrap .s-latest_technology {position:absolute; bottom:135px; right:225px; width:500px; background:#fff; border-radius:30px; z-index:9;}
	.main .slider-wrap .s-latest_technology h2 {color:#363b6a; font-size: 32px; font-weight: 600; padding:25px 20px 10px 25px; text-align:right;}
	.main .slider-wrap .s-latest_technology h3 {color:#363b6a; font-size: 18px; font-weight: 400; padding-right:20px; text-align:right;}
	/* .main .slider-wrap .s-latest_technology h3:before {content: ''; display: block; width: 25px; height: 2px; position: absolute; right: 23px; top: 70px; background: #363b6a;} */
	.main .slider-wrap .s-latest_technology span {width:500px; height:300px;}
	.main .slider-wrap .s-latest_technology span a {display:block;}
	.main .slider-wrap .s-latest_technology span img {}
	
	
	
	/* 서브타이틀 */
	.mainSubTitle {color:#343969; position:relative; overflow:hidden;}
	.mainSubTitle>* {float:left;}
	.mainSubTitle h3 {padding-right:40px; font-size:36px; font-weight:700;}
	.mainSubTitle p {padding:20px 0 0; position:relative; line-height:1;}
	.mainSubTitle p:before {content:''; display:block; width:30px; height:2px; background:#343969; position:absolute; left:0; top:0;}
	
	
	/* 제품 */
	.main-product {padding:100px 0; position:relative; width:1400px; max-width:100%; margin:0 auto;}
	.main-product-tit {position:absolute; left:0; top:100px;}
	.main-product-wrap {}
	.main-product-slider.swiper-container {padding:70px 0 30px;}
	.main-product-wrapper {}
	.main-product-wrapper .slick-slide {margin:0 10px;}
	.main-product-item {}
	.main-product-item a {display:block; position:relative;}
	.main-product-item a:before {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,.2); position:absolute; left:0; top:0;}
	.main-product-item .img {height:270px;}
	.main-product-item p {font-size:18px; font-weight:700; width:100%; position:absolute; left:0; bottom:50px; text-align:center; color:#fff;}
	
	.main-product .swiper-container-button {position:absolute; right:0; top:22px;}
	.main-product .swiper-button-next, 
	.main-product .swiper-button-prev {width:30px; height:30px;}
	.main-product .swiper-button-prev {background:url(../images/common/i-prev.svg)center /auto 30px no-repeat; left:auto ; right:40px;}
	.main-product .swiper-button-next {background:url(../images/common/i-next.svg)center /auto 30px no-repeat; right:0 ;}
	.main-product .swiper-container-horizontal>.swiper-scrollbar {left:0; bottom:0; width:100%;}
	.main-product .swiper-scrollbar-drag {background:#ef3f3e;}
	
	
	/* 고객센터 */
	.main-customer {display:table;width:100%;text-align:center; height:400px; background:url(../images/main/main-customer-bg.jpg)center /cover no-repeat; color:#fff;}
	.main-customer-wrap {display:table-cell; vertical-align:middle;}
	.main-customer-wrap p {padding:0 0 70px; font-size:36px; line-height:1.4;}
	.main-customer-wrap a {font-size:21px; color:inherit;}
	.main-customer-wrap a i {padding-left:20px; transition:all .3s;}
	.main-customer-wrap a i img {}
	.main-customer-wrap a:hover i {padding-left:40px;}
	
	
	
	/* 공지사항 */
	.main-notice {padding:100px 0;}
	.main-notice-wrap {width:1400px; max-width:100%; margin:0 auto;}
	.main-notice-tit {}
	.main-notice-tit a {padding:0 30px 0 0; display:block; color:#666; position:absolute; right:0; top:0; opacity:.8; font-size:18px; line-height:1;}
	.main-notice-tit a:hover {opacity:1;}
	.main-notice-tit a:before,
	.main-notice-tit a:after {content:''; display:block; position:absolute; background:#666;}
	.main-notice-tit a:before {width:18px; height:1px; right:0; top:8px;}
	.main-notice-tit a:after {width:1px; height:18px; right:8px; top:0;}
	.main-notice-list {padding:40px 0 0 ;}
	.main-notice-list ul {overflow:hidden;}
	.main-notice-list ul li {margin-bottom:20px; float:left; width:calc((100% - 20px)/2); border:1px solid #e5e5e5; transition:all .3s;}
	.main-notice-list ul li:hover {background:#f5f5f5; border-top-color:#343969;}
	/* .main-notice-list ul li:hover * {color:#fff; transition:all .3s;} */
	.main-notice-list ul li a {display:block; padding:50px;}
	.main-notice-list ul li:nth-child(2n) {margin-left:20px;}
	.main-notice-list ul li:nth-child(2n)~li {margin-bottom:0;}
	/* .main-notice-list ul li a {display:block;} */
	.main-notice-list ul li h4 {font-size:21px; color:#000; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.main-notice-list ul li p.desc {margin:30px 0;max-height:60px; line-height:1.9; text-overflow:ellipsis; overflow:hidden; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
	.main-notice-list ul li p.date {font-size:14px; line-height:1;}
	
	
	
	
	
	
}




/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {
	
	
	.main-visual {}
	.main .slider-wrap {height:auto;}
	.main-slider-txt {width:100%; padding:10vw 20px 0; position:absolute; top:0; left:0; z-index:9; color:#fff;}
	.main-slider-txt h2 {padding:0 0 7vw; margin:0 0 7vw; font-size:5vw; font-weight:700; position:relative;}
	.main-slider-txt h2:after {content:''; display:block; width:7vw; height:5px; background:#fff; position:absolute; left:0; bottom:0;}
	.main-slider-txt p {font-size:1.9vw; line-height:35px;}
	.main-slider .slick-dots {}
	.main .main-slider .slide-item {height:60vw;}
	.main .slick-slide img {width:100%;}
	
	/* 버튼 */
	.main .main-slider .slick-arrow {top:calc(100% - 50px);}
	.main .main-slider .slick-arrow::before {content:''; width:12px; height:20px;}
	.main .main-slider .slick-arrow::before {}
	.main .main-slider .slick-prev {left:20px; }
	.main .main-slider .slick-next {right:auto; left:260px}
	.main .slick-next:before {background:url(../images/main/slider-arrow-right.svg)center /100% no-repeat;}
	.main .slick-prev:before {background:url(../images/main/slider-arrow-left.svg)center /100% no-repeat;}
	/* 페이징 */
	.main .main-slider .slick-dots {width:35%; left:60px; bottom:50px; transform:translateX(0);}
	.main .main-slider .slick-dots > li {width:12%; transition:all .5s;}
	.main .main-slider .slick-dots > li > button {width:78%; background-color:rgba(255,255,255,0);}
	.main .main-slider .slick-dots > li > button > .s-indicator {overflow:visible;}
	.main .main-slider .slick-dots > li > button > .s-indicator > .inner-txt {opacity:.5; transform:translate(-25px,50%); text-align:left; font-size:15px;}
	/* .main .main-slider .slick-dots > li:nth-child(1) > button > .s-indicator > .inner-txt {transform:translate(-25px,50%);} */
	.main .main-slider .slick-dots > li > button:hover > .s-indicator > .inner-txt {opacity:.5; transform:translate(-25px,50%); padding-bottom:0;}
	.main .main-slider .slick-dots > li > button > .s-line-fill {background-color:#ef3f3e;}
	
	.main .main-slider .slick-dots > li.slick-active {width:40%;}
	.main .main-slider .slick-dots > li.slick-active > button {background-color:rgba(255,255,255,.3);}
	.main .main-slider .slick-dots > li.slick-active > button > .s-indicator > .inner-txt {opacity:1;}
	.main .slider-wrap .slick-dots .slick-active > button > .s-line-fill {animation:slick-progressbar 7s 1;}
	
	/* 멈춤/재생 */
	.main .slider-wrap .s-autoplay-btn {left:285px; bottom:39px; }
	.main .slider-wrap .s-autoplay-btn:after {content:'' !important; display:block; width:22px; height:22px; }
	.main .slider-wrap[data-slick-autoplay-status="Y"] .s-autoplay-btn:after {background:url(../images/main/slider-pause.svg)center /13px no-repeat;}
	.main .slider-wrap[data-slick-autoplay-status="N"] .s-autoplay-btn:after {background:url(../images/main/slider-play.svg)center /13px no-repeat;}
	
	/* 최신개발기술 */
	.main .slider-wrap .s-latest_technology {position:relative; padding:40px 20px;}
	.main .slider-wrap .s-latest_technology h2 {color:#343969; font-size: 28px; font-weight:700; float:left;}
	.main .slider-wrap .s-latest_technology h3 {color:#343969; font-size: 18px; font-weight:400; margin-top:12px; padding-left: 12px; overflow:hidden;}
	.main .slider-wrap .s-latest_technology h3:before {content:''; display: block; width: 30px; height: 2px; background: #343969; position: absolute; left: 204px; top: 40px;}
	.main .slider-wrap .s-latest_technology span {display:block; text-align:center;}
	.main .slider-wrap .s-latest_technology span a {position:relative; display:inline-block;}
	.main .slider-wrap .s-latest_technology span img {max-width:500px; width:100%;}
	
	/* 서브타이틀 */
	.mainSubTitle {color:#343969; position:relative; overflow:hidden;}
	.mainSubTitle>* {float:left;}
	.mainSubTitle h3 {padding-right:40px; font-size:28px; font-weight:700;}
	.mainSubTitle p {padding:12px 0 0; position:relative; line-height:1;}
	.mainSubTitle p:before {content:''; display:block; width:30px; height:2px; background:#343969; position:absolute; left:0; top:0;}
	
	
	/* 제품 */
	.main-product {padding:50px 20px 50px; position:relative; width:1400px; max-width:100%; margin:0 auto;}
	.main-product-tit {position:absolute; left:20px; top:50px;}
	.main-product-wrap {}
	.main-product-slider.swiper-container {padding:50px 0 20px;}
	.main-product-wrapper {}
	.main-product-wrapper .slick-slide {margin:0 10px;}
	.main-product-item {}
	.main-product-item a {display:block; position:relative;}
	.main-product-item a:before {content:''; display:block; width:100%; height:100%; background:rgba(0,0,0,.2); position:absolute; left:0; top:0;}
	.main-product-item .img {height:35vw;}
	.main-product-item p {font-size:18px; padding:0 20px; font-weight:700; width:100%; position:absolute; left:0; bottom:50px; text-align:center; color:#fff;}
	
	.main-product .swiper-container-button {position:absolute; right:0; top:22px;}
	.main-product .swiper-button-next, 
	.main-product .swiper-button-prev {width:20px; height:25px;}
	.main-product .swiper-button-prev {background:url(../images/common/i-prev.svg)center /auto 25px no-repeat; left:auto ; right:30px;}
	.main-product .swiper-button-next {background:url(../images/common/i-next.svg)center /auto 25px no-repeat; right:0 ;}
	.main-product .swiper-container-horizontal>.swiper-scrollbar {left:0; bottom:0; width:100%; height:4px;}
	.main-product .swiper-scrollbar-drag {background:#ef3f3e;}
	
	
	/* 고객센터 */
	.main-customer {display:table;width:100%;text-align:center; height:300px; background:url(../images/main/main-customer-bg.jpg)center /cover no-repeat; color:#fff;}
	.main-customer-wrap {display:table-cell; vertical-align:middle;}
	.main-customer-wrap p {padding:0 0 50px; font-size:28px; line-height:1.4;}
	.main-customer-wrap a {font-size:18px; color:inherit;}
	.main-customer-wrap a i {padding-left:20px; transition:all .3s;}
	.main-customer-wrap a i img {}
	.main-customer-wrap a:hover i {padding-left:40px;}
	
	
	
	/* 공지사항 */
	.main-notice {padding:50px 20px;}
	.main-notice-wrap {}
	.main-notice-tit {}
	.main-notice-tit a {margin:6px 0 0;padding:0 30px 0 0; display:block; color:#666; position:absolute; right:0; top:0; opacity:.8; font-size:17px; line-height:1;}
	.main-notice-tit a:hover {opacity:1;}
	.main-notice-tit a:before,
	.main-notice-tit a:after {content:''; display:block; position:absolute; background:#666;}
	.main-notice-tit a:before {width:16px; height:1px; right:0; top:7px;}
	.main-notice-tit a:after {width:1px; height:16px; right:7px; top:0;}
	.main-notice-list {padding:30px 0 0 ;}
	.main-notice-list ul {overflow:hidden;}
	.main-notice-list ul li {margin-bottom:20px; float:left; width:calc((100% - 20px)/2); border:1px solid #e5e5e5; transition:all .3s;}
	.main-notice-list ul li:hover {background:#f5f5f5; border-top-color:#343969;}
	/* .main-notice-list ul li:hover * {color:#fff; transition:all .3s;} */
	.main-notice-list ul li a {display:block; padding:40px;}
	.main-notice-list ul li:nth-child(2n) {margin-left:20px;}
	.main-notice-list ul li:nth-child(2n)~li {margin-bottom:0;}
	/* .main-notice-list ul li a {display:block;} */
	.main-notice-list ul li h4 {font-size:19px; color:#000; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.main-notice-list ul li p.desc {margin:20px 0;max-height:60px; line-height:1.9; text-overflow:ellipsis; overflow:hidden; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
	.main-notice-list ul li p.date {font-size:14px; line-height:1;}
	
	
	
	
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	.main-slider-txt h2 {font-weight:500;}
	.main-slider-txt h2:after {height:3px;}
	.main-slider-txt p {font-size:2vw; line-height:2;}
	
	.main .main-slider .slick-dots {width:60%;}
	.main .main-slider .slick-next {left:50%;}
	.main .main-slider .slick-arrow::before {width:2vw;}
	.main-slider .slick-dots > li > button:hover > .s-indicator > .inner-txt {font-size:13px;}
	.main .slider-wrap .s-autoplay-btn {left:55%; bottom:41px;}
	.main .slider-wrap .s-autoplay-btn:after {width:2.5vw; height:2.5vw;}
	.main .slider-wrap .s-latest_technology h2 {float:none;}
	.main .slider-wrap .s-latest_technology h3 {padding:10px 0;}
	.main .slider-wrap .s-latest_technology h3:before {content:''; display: block; width: 30px; height: 2px; background: #343969; position: absolute; left: 20px; top: 78px;}
	
	.mainSubTitle>* {float:none;}
	.mainSubTitle h3 {font-size:24px;  padding:0 0 10px;}
	.main-notice-tit a {margin:0; font-size:16px;}
	
	.main-product {padding:30px 20px;}
	.main-product-tit {top:30px;}
	.main-product-slider.swiper-container {padding:90px 0 20px;}
	.main-product .swiper-container-button {display:none;}
	.main-product-item .img {height:50vw;}
	.main-product-item p {font-size:16px; font-weight:500; bottom:20px;}
	
	
	
	.main-customer {height:220px;}
	.main-customer-wrap p {font-size:21px; padding:0 0 30px; line-height:1.6;}
	
	
	.main-notice-list ul li {width:100%; margin-left:0 !important; margin-bottom:10px !important; min-height:auto !important;}
	.main-notice-list ul li h4 {font-size:18px;}
	.main-notice-list ul li:last-child {margin-bottom:0 !important;}
	.main-notice-list ul li a {padding:30px;}
	.main-notice-list ul li p.desc {margin:15px 0;}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}